Copy Coding

angularjs가 버전이 높아지면서 기능 및 사용법이 많이 변경이 되었습니다.

초창기에는 그저 jQuery 비스무리 하구만 했는데 이제는 “이걸 어떻게 배우지?”

할정도로 강력한 개발 도구가 되었습니다.

1. node.js 설치

angular는 npm을 이용하여 설치 합니다.

그런데 npm은 node.js에 포함되어 있어 node.js를 설치할 때 같이 설치가 됩니다.

node.js가 설치되지 않았다면 먼저 node.js를 다운받아 설치 합니다.

https://nodejs.org/ko/

설치 방법은 다운받은 파일을 그냥 단순하게 next만 클릭 해주면 됩니다.

설치 참조 : node.js 다운로드 및 설치하기

설치된 디렉토리 구조를 볼까요?

잘 설치가 되었있군요.

2. angular-CLI 설치

이제 Angular CLI를 설치하겠습니다.

windows console창을 하나 열고 설치 명령어를 입력 합니다.

npm install -g @angular/cli

angular/cli@7.0.4 버전이 설치되었습니다.

설치가 잘 되었는지 확인해 봅니다.

angular를 설치하면 같이 설치되는 모듈들의 리스트도 있습니다.

ng –version

잘 설치 된 것 같습니다.

이렇게 하면 angular의 설치는 완료된 것 입니다.

3. angular 프로젝트 생성

이제 프로젝트를 생성하고 개발을 시작 하면 됩니다.

myNgProject 라는 이름으로 프로젝트를 생성 하겠습니다.

프로젝트 생성 명령어를 입력 합니다.

ng new myNgProject

angular에 routing을 추가하는지와 css를 어떤것으로 할것인지 선택을 합니다.

키보드 위,아래 화살표 이동키로 움직이면 한칸씩 이동합니다.

저는 그냥 익숙한 CSS로 style을 작업하는 것으로 했습니다.

주르륵 프로젝트 관련 디렉토리와 파일들이 생성 됩니다.

파일 구조를 볼까요.

이제 생성된 프로젝트를 실행해 보겠습니다.

먼저 프로젝트 디렉토리로 이동을 합니다.

그리고 프로젝트를 실행 합니다.

ng serve

서버가 실행하면서 4200 port로 대기하고 있다는군요.

브라우저를 하나 열고 접속을 해봅니다.

http://localhost:4200

기본적인 테스트는 잘 되는군요.

- copy coding -

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

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

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

이걸 간단하게 설명 하면

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

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

하나씩 따라가 볼까요?

1.1) app.js 파일에서

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

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

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

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

다음으로는

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 -

console에서 express 프로젝트를 만들어 테스트 해봤으니 이제 eclipse에서 해보겠습니다.

console mode는 아래 링크를 참조 하세요.

eclipse에서 express 프로젝트 만들기는 거의 클릭만 하면 되기 때문에 상당히 쉽습니다.

먼저 신규 프로젝트를 만들어야 겠죠.

eclipse에서

File > New

를 선택 하면 Noje.js Express Project 가 보입니다.

안보이나요?

한번도 Express 프로젝트를 만들지 않았으면 안보일 수도 있습니다.

그때는 하단에 Other…를 선택 합니다.

Other… 를 선택 하면 창이 뜨는데 이곳에서 Node.js Express Project를 선택 합니다.

이것도 안보인다고요?

그럼 node.js plug-in을 설치하지 않아서 입니다.

nodejs eclipse 개발 환경 설정

링크를 선택해서 설치 방법대로 작업을 합니다.

어찌 되었든 둘중에 한가지 방법으로 Node.js Express Project를 선택하면

프로젝트 명을 입력하는 창이 나옵니다.

적당히 이름을 기입 합니다.

저는 myProject 라고 적었습니다.

[Finish] 버튼을 클릭하면 파일들이 주르륵 생기는 군요.

package.json 파일을 볼까요?

시작 하려면 node app.js라고 명령어를 사용 해야 하고

jade로 client 쪽을 구현 한다는 군요.

그럼 npm을 이용해 package.json 파일에 있는 것을 설치 해 봅니다.

프로젝트에 우측 마우스를 놓고 클릭 하면 중간 아래쪽에 Run As가 보입니다.

거기서 npm Install을 선택 합니다.

설치를 하면서 Console 창에 머라고 하네요.

예. 설치를 다 했다네요.

Update도 해볼까요?

npm Install 바로 아래에 있습니다.

이번에도 Console 창에 머라 하는군요.

에러만 아니면 됩니다.

이제 필요한건 모두 설치가 끝났고 실행을 할건데

포트가 먼지 알아야 client에서 확인을 할 수 있겠죠?

app.js를 보니 포트는 3000 이라고 적혀 있습니다.

변경하려면 숫자를 고칩니다.

지금까지 키보드로 글자를 적은건 myProject 밖에 없네요.

잘 되는지 확인을 해볼까요?

이번에는 Run As 에서 Node Application을 선택 합니다.

또 Console 창을 볼까요?

3000번 포트로 Express server가 대기하고 있습니다.

그럼 웹 브라우저를 하나 열고 http://localhost:3000/ 을 입력하고 확인 합니다.

잘 나옵니다.

이번에도 해피엔딩입니다.

- copy coding -

node에서 express를 이용해서 간단한 웹 서버 테스트를 해보겠습니다.

console 모드에서 작업하는걸 기준으로 테스트 합니다.

기존에 node.js가 설치되어 있어야 합니다.

express는 node에 기본으로 들어있지 않아 설치 해야 합니다.

local용으로 설치가 어떻게 되는지 테스트만 하기 때문에 –g 옵션은 생략 합니다.

설치 명령은 다음과 같습니다.

>npm install express@2.5.x

설치를 하면 node_modules 디렉토리가 생성되고 하위 디렉토리는

이렇게 생성이 됩니다.

그런데 저는 2.x가 아닌 최신 버전으로 테스트 하려고 합니다.

동일한 명령어로 npm insall express라고하면 설치는 진행 됩니다.

그러나 express 4.0부터는 설치 명령어가 변경 되었습니다.

만약에 기존 명령어로 express 4.0이상을 설치하고 프로젝트를 생성하면

설치는 되는데 프로젝트를 생성 할 때 오류가 발생 합니다.

그럼 express 4.0이상을 설치하는 제대로 된 명령어로 설치를 해 볼까요?

버전을 적지 않았으니 최근 버전이 설치가 되겠죠.

>npm install -g express-generator

이렇게 하면 4.0 이상 최신 버전을 설치 할 수 있습니다.

4.16.0 버전이 설치 되었군요.

그리고 또 다른 변화.

생성된 디렉토리 구조도 변경이 되었습니다.

4.0이상 node_modules 디렉토리 구조를 보면

2.x 대와는 너무 많아서 일부만 가져왔습니다.

즉, 많은 모듈들이 4.x 대에서는 추가가 되었습니다.

이제는 프로젝트를 생성해 볼까요?

>express myProject

뭔가 주르륵 아무 설명도 없이 디렉토리들이 만들어 집니다.

.

고맙게도 하단에 어떻게 하면 테스트가 이루어 지는지 친절하게 설명을 해주고 있네요.

알려주는 방법 그대~로 테스트를 진행 하면 결과를 확인 할 수 있습니다.

우선 생성된 프로젝트의 구조와 파일들을 보면

제일 중요한 app.js와 package.json 파일이 하단에 있습니다.

하나씩 알려준 순서로 테스트를 진행해 보겠습니다.

 Project 가 생성된 directory로 이동하고

     > cd myProject

package.json에 있는 dependency를 설치 합니다.

     > npm install

npm install 명령을 실행하면 위에서 설명한 버전별 node_modules 디렉토리가 생성됩니다.

app.js를 이용하여 서버를 띄웁니다.

     > SET DEBUG=myproject:* & npm start

서버가 Port 3000으로 기다리고 있다네요.

지금 만나러 가볼까요?

예. 해피엔딩 입니다.

- copy coding -