Project


WebStorm으로 기존에 eclipse로 생성했던 프로젝트를 하나 실행해 보려고 합니다.


WebStorm 설치 방법은 단순하지만 필요하다면 아래 링크를 참조 합니다.

[WebStrom] 웹스톰 설치 (WebStorm-2018.3.2.)


설명은 4단계로 진행 됩니다.

1. WebStorm 실행

2. 프로젝트 열기

3. 프로젝트 실행

4. 결과 확인

 


1. WebStorm 실행

 

설치된 웹스톰 프로그램을 실행 합니다.

 

webstorm angular




2. 프로젝트 열기

 

기존에 작성한 프로젝트를 실행해 보려고 하는 것이니 Open을 선택 합니다.



아이콘 테스트를 했었던 myNgProject가 눈에 띄는군요.

선택하고 [OK] 버튼을 클릭 합니다.

 

프로젝트가 WebStorm으로 올라 옵니다.



WebStorm을 처음 사용해 보는거라 잠시 깜놀 했습니다.

내가 안드로이드 스튜디오를 열었나???

 


3. 프로젝트 실행

 

다시 본론으로 돌아와서

좌측 파일들에서 package.json을 찾아봅니다.

찾으셨으면 마우스를 대고 우측버튼을 클릭해 줍니다.



아래쪽에 [Show npm Scripts]가 보이는군요 클릭을 합니다.

툴모양이 변경되면서 하단에 package.json 항목이 나열됩니다.



여기서 start를 더블클릭 합니다.


처음 실행을 하면 보안 경고가 나옵니다.



[엑세스 허용] 버튼을 클릭하면 이 팝업은 다음부터는 보고 싶어도 볼 수가 없습니다. 굳바이...

 

또 하단에 창이 하나 딸려나오면서 머가 잔뜩 써져 있습니다.



많이 보던거네요.

ng serve도 있고

http://localhost:4200도 있고

Compiled successfully.도 있네요.

 

4. 결과 확인

 

그럼 빨리 웹 브라우저를 하나 열어서 http://localhost:4200으로 접속해 봅니다.



잘 나오는 군요.


- copy coding -

'Angular' 카테고리의 다른 글

[angular] 앵귤러 사용자 material icon 사용 방법  (0) 2018.11.28
[angular material] 앵귤러 icon 종류 및 사용  (0) 2018.11.25
[angular material] 앵귤러 Button tag 종류  (0) 2018.11.25
[angular] 앵귤러 Material Theme 종류별 비교  (0) 2018.11.25
[angular] 앵귤러 form material 입력 작업 비교  (0) 2018.11.24



console mode에서 angular를 설치하고 간단한 project를 생성하고 테스트를 해보았는데요.

[angular] angular 간단한 프로젝트 console에서 테스트


이번에는 eclipse에서 angular plug-in을 설치하고 테스트를 해보도록 하겠습니다.

상단 메뉴에서


File > New > Other…



를 선택하면 창이 하나 뜨고 거기에 Angular가 있는지 확인 합니다.



없네요.


설치가 안되어 있나 봅니다.

그럼 설치를 해보겠습니다.

 

먼저 eclipse 상단 메뉴에서 Eclipse Marketplace를 선택 합니다.


Help > Eclipse Marketplace…

 



그러면 Eclipse Marketplace 팝업 창이 열립니다.

 

Find 입력창에 설치하려는 angular를 입력하고 검색을 합니다.


angular eclipse


버전은 시간이 지나면서 변경이 되겠지만 검색된 Angular IDE 설치 합니다.


Angular IDE는 Angular 통합 개발환경으로 자세한 제품 및 기능 설명은

https://www.genuitec.com/products/angular-ide/

이곳을 참조하면 좋은 정보를 얻을 수 있습니다.


[Install] 버튼을 클릭해서 설치할 파일들을 다운받습니다.



 

추가로 설치할 솔루션이 있으면 선택을 하고 [Confirm] 버튼을 클릭 합니다.



라이선스에 동의를 하고 [Finish] 버튼을 선택 합니다.

 

eclipse에 Angular를 설치를 완료 하면 재시작 요청 팝업을 오픈 합니다.



[Restart Now] 버튼을 선택하여 eclipse를 재시작 합니다.

 

재 시작을 하면 eclipse 테마를 변경 시킬 수 있습니다..


 

[Next] 버튼을 선택 합니다.

 

이제 테마를 선택 하는 창이 나오는데 기호에 맞는 테마를 선택 합니다.


여기서는 Darkest Dark Theme를 선택 했습니다.



테마를 선택 했으면

[Next] 버튼을 선택 합니다.

 

추가적인 기능 설치 팝업이 나오는데 Angular IDE를 만든 CodeMix에서 제공하는 건데 모두 Next를 해줍니다.



설치가 끝났으면 이제 원래 하려던 Project를 하나 생성해 보겠습니다.

 

console mode에서 만들어 본 것 처럼 동일하게 만들겠습니다.

 

상단 메뉴에서 Angular Project를 찾기 위해 선택을 하면


File > New > Other…



 

이제는 Angular가 보이는 군요.

Angular Project를 선택 합니다.


생성할 프로젝트에 대한 설정을 하는 팝업 창이 나오네요.



프로젝트 명은 myNgProject로 했고 나머지는

선택할 수 있는 버전들이 있는데 잠시 어떤 버전들이 있는지 볼까요?






그냥 기본으로 설정 합니다.



[Finish] 버튼을 선택 합니다.


Anglar perspective를 보겠냐는데 함 보죠.




eclipse 우측에 머가 나오는 군요.




eclipse 좌측 Project Explorer를 보니 프로젝트가 생성이 되었는데 파일이 없습니다.



아직 다 생성이 된게 아닙니다.

시간이 지나면서 조금씩 파일이 나타납니다.


하단에 프로젝트 생성 진행 상황이 Terminal 창에 보여집니다.



한참 동안 뭔가를 만들다가 화면에 README.md가 나타나면 생성이 된 것 입니다.



README.md에 간단한 프로젝트에 대한 설명이 기술되어 있는데

실행은 ng serve로 하고 접속은 http://localhost:4200으로 하면 된다는 군요.


 

생성된 프로젝트 파일들도 보입니다.



 

프로젝트를 실행 합니다.

프로젝트 명에 마우스를 놓고 우측버튼을 클릭하고


Run As > Angular Web Application


선택하면 또 한참을 하단 Terminal 창에서 먼가를 표시하다가

짠 하고 결과가 나옵니다.



 

테마를 어떤걸 선택하느냐에 따라 화면 비교를 해보겠습니다.

위에서도 화면 캡처를 두가지 버전으로 해보았습니다.

 

Darkest Dark Theme




Fresh Light Theme



테마를 Light로 하니 단점이 있습니다.

원래 Angular IDE가 Dark를 기본으로 해서 그런지 일부 기호가 흰바탕 에서는 희미하게 보이는군요.


개인의 기호니까 가독성이 좋은것으로 선택을 하세요.

저는 노트북과 데스크톱을 달리 해서 좀더 써봐야 겠습니다.

 

- copy coding -

'Angular' 카테고리의 다른 글

[angular] 앵귤러 Material Theme 종류별 비교  (0) 2018.11.25
[angular] 앵귤러 form material 입력 작업 비교  (0) 2018.11.24
[angular] 앵귤러 component 추가 방법  (0) 2018.11.13
[angular] 앵귤러 console mode에서 프로젝트 분석  (0) 2018.11.09
[angular] 앵귤러 간단한 프로젝트 console에서 테스트  (0) 2018.11.08


angular를 console 모드에서 설치하고 간단한 프로젝트를 만들어 보았는데

어떤식으로 작동이 되는지 디렉토리와 파일 구조들을 한번 보도록 하겠습니다.

 

angular가 설치된 디렉토리의 구조와 파일 모양은 아래와 같은데요.




Angular 실행을 담당하는 ng 파일을 좀 볼까요?



node  ….ng  “$@”  이런 형태군요.

ng 명령을 사용해도 결국 node를 이용하고 나머지 ng를 포함해서 파라미터로 넘기는 군요

 

 

이젠 프로젝트가 생성된 디렉토리를 구경해 볼까요?



먼저 angular.json 설정 파일 내용을 보겠습니다.


프로젝트와 관련된 모든 설정이 이곳에 정의되어 있는 것을 볼 수 있습니다.



잘은 모르겠지만 대충 살표보면


“sourceRoot”: “src”  - 프로젝트와 관련된 source는 src 디렉토리에 있고


“prefix”: “app”  - 시작을 app로 하며


“index”: “src/index.html”  -  초기 view 파일은 src 밑에 index.html 파일이고


“main”: “src/main.ts”  -  src 밑에 main.ts 라는 typescript 파일이 있군요.

 


그렇다면 src 디렉토리로 가서 첫 화면을 어떻게 불러 왔나 하나씩 풀어보겠습니다.



제일 먼저 index.html을 호출 한다고 했으니 열어보면



일반 html 형태의 파일인데 실제 화면 보여줄 <body>테그에는 내용이 없고


<app-root></app-root>


이게 눈에 띄는 군요.

그렇다면 <app-root></app-root> 이게 내용 이라는 건데 뭔가가 대체를 하겠다는것 같고.



그럼 main.ts는 뭐가 정의 되어 있을까요?




import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

 

모듈과 환경설정이 어떤 파일인지를 포함하고 있습니다.

source가 app을 접두어로 사용한다고 했으니 app으로 가면 뭔가 있겠네요.



app.module.ts를 보겠습니다.



import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

 

여기서는 라우팅과 컴포넌트를 정의하고 있습니다.

화면과 관련있는 소스는 component입니다.

 


app.component.ts를 보겠습니다.



몇 줄 안되는 곳에 많은 내용이 들어있네요.

 

index.html 파일 하단에서 본적이 있는

<app-root></app-root>


이거에 맵핑할 app.component.html 파일을 정의 하고 있습니다.

그리고 title도 정의가 되어 있군요.

 

그렇다면 ./app.component.html 파일을 열어보겠습니다.



보이시나요?


localhost:4200 했을 때 보여준 웹 화면이 이것 이었습니다.


angular project analysis


index.html은 껍데기 이고 이 app.component.html 가 app-root에 맵핑되어서

보여진 것이지요.


title도 여기서 위치 잡고 있습니다.


대충 파일들의 구조를 그려보면 이런 식으로 연결 되어 있습니다.



다음에는 페이지를 추가해 보면서 구조를 좀더 살펴 보겠습니다.


- copy coding -

'Angular' 카테고리의 다른 글

[angular] 앵귤러 Material Theme 종류별 비교  (0) 2018.11.25
[angular] 앵귤러 form material 입력 작업 비교  (0) 2018.11.24
[angular] 앵귤러 component 추가 방법  (0) 2018.11.13
[angular] 앵귤러 eclipse에서 간단한 project 테스트  (0) 2018.11.11
[angular] 앵귤러 간단한 프로젝트 console에서 테스트  (0) 2018.11.08


eclipse에서 express 프로젝트를 생성해 보았는데요.

( [node.js] eclipse에서 express를 이용한 웹 서버 테스트 )


express로 프로젝트를 만들었을 때 자동으로 생성되는 디렉토리와 파일들이 있습니다.

이걸 간단하게 설명 하면


Dir / File

 설명

 app.js

 사이트에 대한 모든 정보가 들어 있습니다.

 port : 서버를 접속하기 위한 포트
 route 정보 : 접속 url에 따른 서비스 호출

 /public

 화면을 보여주는데 필요한 리소스 들로 image, javascript, css등이 위치 합니다

 /routes

 기능 또는 서비스별 view의 위치

 /views

 view 관련 파일들


기본적으로 생성된 디렉토리 하위에 필요한 디렉토리와 파일을 생성하면 됩니다.

 

그럼 생성된 파일들의 구조를 살펴 보겠습니다.




하나씩 따라가 볼까요?


1.1) app.js 파일에서

1.2) routes = require('./routes')

-> routes에 ./routes 디렉토리를 대입하고

1.3) app.get('/', routes.index); 

    -> ‘/’ 로 접속하면 ./views/index.jade를 호출 하는데

1.4) layout


다음으로는


2.1) app.js 파일에서

2.2) user = require('./routes/user')

   -> user에 ./routes/user를 대입하고

2.3) app.get('/users', user.list);

  -> ‘/users’로 접속하면 user.list를 호출하라고 합니다.

2.4) 이건 views를 호출하지 않습니다.

 

그럼 url을 하나씩 호출 해 보겠습니다.


http://localhost:3000/


views의 index파일을 렌더링 합니다.


exports.index = function(req, res){

  res.render('index', { title: 'Express' });

};

 



http://localhost:3000/users


view 호출 없이 텍스트를 받아 왔습니다.

exports.list = function(req, res){

  res.send("respond with a resource");

};



- copy coding -

'nodejs' 카테고리의 다른 글

[node.js] eclipse에서 express를 이용한 웹 서버 테스트  (0) 2018.11.03
[node.js] express를 이용한 console 모드 웹 서버 테스트  (2) 2018.11.03
nodejs npm 사용하기  (0) 2018.10.28
nodejs eclipse 개발 환경 설정  (0) 2018.10.22
node.js 편집 툴 Visual Studio Code 설치  (0) 2018.10.17

123

+ Recent posts

티스토리툴바