앵귤러로 Todo앱 만들기 1 - 노드설치

지금부터 Angular.js, Node.js를 이용해서 Todo앱을 만들어 보자. 본 시리즈는 총 20개의 포스트로 구성되어 있고 앵귤러와 노드 초심자를 위한 내용이다. 하나씩 따라해 보면 어느덧 백엔드 기능을 갖춘 풀스텍 웹 서비스 코드를 작성하는 본인을 발견하게 될 것이다.

노드 설치

잠시만! 왜 노드를 설치해야할까? 웹서비스를 만들어야 하기 때문이다. 우문우답 같지 들릴지 모르겠다. 그러면 간단히 웹서비스의 구조에 대해 알아본뒤 다시 돌아오자.

웹서버의 기능

웹서비스는 어딘가에 서버가 있어야 한다. 브라우져는 웹서비스에 접근하기 위해 url이라고 불리는 주소를 통해 서버에 접속하는 것이다. 브라우져가 서버에 접속하는 순간 서버는 html, css, javascript 파일 등을 웹 브라우져로 내려주는데 이것을 보통 정적파일(Static files)이라고 부른다. 웹서버의 기능 중 첫번째는 바로 이 정적파일을 내려주는 것이다.

브라우져는 이런 정적파일들을 파싱하여 웹페이지를 구성한다. html파일을 읽어 돔(DOM)을 구성한뒤 우리가 눈으로 볼수 있는 문서를 만든다. 그리고 css 파일을 읽어 웹페이지에 색상을 입히고 크기를 조절한다. 사용자는 웹페이지의 버튼을 클릭할 수 있는데 이때 정적파일 중 하나인 자바스크립트 파일에서 이벤트 핸들링에 대한 로직을 수행한다.

웹페이지는 중간중간 서버와 통신한다. 어떤 경우가 있을까? 만약 로그인 페이지라고 가정해보자. 로그인 아이디와 비밀번호를 입력하고 "로그인" 버튼을 클릭하면 무슨일이 일어날까?

입력한 정보가 맞는지 확인하는 것이 상식이다. 그럼 비교할 이 데이터는 어디에 있을까? 바로 서버 어딘가에 데이터베이스 형태로 저장되어 있다. 서버는 디비의 데이터를 그냥 보여주지 않는다. 클라이언트와 특정한 형태를 약속하여 보여주는데 보통 json이나 xml 형태로 보내준다.

보내준다? json을 어떻게 보내줄까? 우리가 흔히 부르는 api 형태로 보내주는데 http 프로토콜을 사용한다. 십여년 전부터 브라우저에서는 ajax 기술이 보편적으로 사용되었는데 간단히 설명하자면 자바스크립트로 서버에 http 요청 하는 것을 말한다. 웹서버의 두번째 기능은 ajax 호출을 위한 api을 제공하는 것이다.

그럼 다시 노드로 돌아와 보자.

우리는 앵귤러로 개발 하는데 왜 노드를 사용해야 할까?

앵귤러는 자바스크립트로 만들어졌고 우리 컴퓨터에 다운로드 되어 브라우저가 파싱할 대상이다. 웹서버는 앵귤러 파일을 비롯한 정적파일들을 웹프라우저로 보내줄 것인데 이것이 노드서버의 기능 중 하나이다. 그리고 다운로드한 앵귤러 파일은 서버로 추가적인 api 요청을 할 것인데 노드는 이 api 기능을 제공할 것이다. 그래서 우리는 노드드부터 시작하는 것이다.

진짜 노드 설치

이제 진짜로 노드를 설치해 보자. nodejs.org에 들어가 v4.x.x를 다운받자. 앞자리 수가 홀수면 개발버전 짝수면 LTS 장기간 지원해주는 버전이다. 2016년 6월 13일 기준으로 v6.2.1도 나왔다. 조만간 사용해 봐야겠다. 우리는 v4.4.5를 다운받으면 된다.

다운받은 파일을 실행하면 설치를 진행한다. 몇번 클릭하면 설치가 완료된다.

자 이제 터미널을 열어서 노드가 제대로 설치되었는지 확인해보자.

$ which node
/usr/local/bin/node

$ which node --version
v.4.4.5

$ node
>

노드가 설치된 경로와 버전을 확인할 수 있다. 마지막에는 노드 쉘을 실행시킨 결과다. 노드쉡에서는 자바스크립트 코드를 해석하는 인터프리터로서 코드 결과를 바로바로 확인할 수 있다.

> console.log('hello world!')
hello world!

> var name = 'Chris'
> name
'Chris'
>

노드 v4에서 부터는 ES6 문법을 지원한다. 상수를 정의하는 const 키워드를 테스트 해보자.

> const name = 'Chris'
> name
'Chris'
> name = 'Mars'
'Mars'
> name
'Chris'

name이 상수로 선언되었기 때문에 처음 할당한 값 "Chris"가 "Mars"로 변경되지 않는다. 노드는 제대로 설치 된것 같다.

NPM

노드를 설치하면 node, npm 두개의 프로그램이 설치된다. node는 자바스크립트 인터프리터로 위에서 설명했다. npm은 Node Package Manager 인데... npmjs.com에서 확인하니 재밌는걸 발견했다. 홈페이지 좌측상단에 보면 NPM 약자가 랜덤하게 설명되어 있다.

어쨌든 npm은 노드로 만든 패키지를 관리하는 툴이다. 노드로 패키지를 만든 패키지를 프로젝트에 추가, 삭제하고 자신이 직접 만들어 배포할 수도 있다.

우리 프로젝트에서는 1) 패키지를 추가하고 2) 노드 서버를 구동하는 툴로 사용할 것이다.