Nodejs 기본 설정(NPM Express .gitignore 설치)
1. node js
자바스크립트는 웹브라우저 프론트에서 꼭 필요한 언어였고, 웹브라우저에 종속적이었다.
웹에 종속적이었던 자바스크립트를 분리하여 실행가능하게 한 것이 nodejs이다.
nodejs는 js runner이다.
자바스크립트를 실행하는 언어이고 자바스크립트 명령이 실행된다.
다음과 같이 nodejs를 설치하고
cmd창에서 node를 치고
console.log('hello'); 를 입력하면
웹브라우저에서 쓰던 js 문법인 console.log 메세지가 나타난다.
그동안 우리는 javascript를 웹브라우저 콘솔을 통해 썼지만
nodejs를 깔고 난 뒤 javascript 명령어를 실행 할수 있게 되었다.
2. npm (node package manager)
그럼 node js를 깔고 node js 프로젝트를 시작하려면 어떻게 해야할까?
node js를 설치하면 정말 가장 가볍게 기본적으로 필요한 구성만 깔리게 된다.
( 내가 쓰지않더라도 필요할지도 모르는? 다 구성되어 있는 모든 것이 깔리지 않는다.)
그리고 nodejs를 깔면서 npm이라는 것이 같이 깔리게 된다.
( 너는 npm이라는것을 이용해서 필요한것을 불러오고 받아라~ nodejs는 빈깡통일 뿐이다.)
아 그럼 내가 nodejs를 이용해서
내가 필요한 것만 선택적으로 npm을 통해 install하면 되는구나
그럼 nodejs 프로젝트를 시작할 폴더를 만들고(mkdir npmTest)
이동한다음(cd npmTest)
$ npm init
npm init 명령을 입력한다.
여러가지를 물어보는데 입력하지않고 기본값만 enter 치며 넘어간다.
y까지 입력하면 package.json이 생성된다.
package.json 파일을 편하게 보고 싶으니 VSC( Visual Studio Code )를 깔자.
$ code .
code . 명령을 치면 해당 위치의 프로젝트 폴더가 VSC로 열리게 된다.
{ "name" : "npmtest" , "version" : "1.0.0" , "description" : "my npm test" , "main" : "index.js" , "scripts" : { "start" : "node index.js" }, "author" : "shlee0882" , "license" : "ISC" , "dependencies" : { "express" : "^4.16.4" } }
package.json 파일은 초기 입력한 값에 따라 다를 수 있다.
이 파일을 통해 기본 설정값을 바꿀수 있고 프로젝트에 필요한 파일도 지정할 수 있다.
다음은 index.js 파일을 하나 만들고 console.log('hi index'); 를 입력 후 저장한다.
터미널에서 node index.js를 입력해본다.
hi index 가 나오면 성공이다.
3. express란?
nodejs라는 빈 깡통에 내가 필요로 한 것들을 채워넣을 것이다.
첫번째로 express라는 것을 설치할 것이다.
express는 node js를 설치하고
서버를 띄우기 위해 사용하는 자바스크립트 프레임워크이다.
$ npm install express
npm install express명렁을 입력해 express를 설치한다.
설치가 끝나면 node_modules폴더와 package-lock.json 파일이 생성된다.
이 파일들은 express를 설치하며 가져온 파일들이다.
또한 package.json 파일을 열어보면 dependencies에 express 버전이 나타날 것 이다.
"dependencies" : { "express" : "^4.16.4" }
express 설치가 완료되었으니 express 서버를 띄울 차례다.
index.js에 다음내용을 입력 후 저장한다.
const express = require ( 'express' ) const app = express (); const PORT = 5000 ; function handleListening (){ console . log ( `Listening on: http://localhost: ${ PORT } ` ); }
app . listen ( PORT , handleListening );
위에 내용은 require는 express가 필요한데 받아오고 없으면 node_modules에서 찾아서 가져와.
express 가져온걸 app 으로 담고 app의 포트와 함수를 지정해서 함수가 실행되면 console.log를 찍을거야. 이다.
node index.js 를 입력했을 시 다음과 같이 나오면 성공이다.
하지만 http://localhost:5000 을 입력하면 Cannot GET / 이 떨어진다.
우리가 포트로 서버를 열긴했지만 http://localhost:5000/
경로에 맞게 바인딩 된 어떤 데이터가 없기 때문이다.
기본경로는 '/' 이므로 index.js에 다음을 추가해준다.
function handleHome ( req , res ){ res . send ( "hello" ); }
app . get ( "/" , handleHome );
그리고 node index.js 명령을 통해 서버를 껐다 다시 켜면 hello가 나오게 된다.
소스검사를 해보면 hello는 html 태그 안의 body 태그 안의 text로 들어갔다.
현재는 res.send('hello'); 를 넣었지만 나중에 경로에 따른 구조적인 html파일을 넣게 된다.
index.js 전체 소스
const express = require ( 'express' ) const app = express (); const PORT = 5000 ; function handleListening (){ console . log ( `Listening on: http://localhost: ${ PORT } ` ); }
function handleHome ( req , res ){ res . send ( "hello" ); }
app . get ( "/" , handleHome );
app . listen ( PORT , handleListening );
4. npm start
우리는 그동안 node index.js라고 node 명령에 js파일명을 입력하여 실행하였다.
하지만 js파일이 많아지고 이름도 달라진다면 처음 프로젝트 파일을 받아 구동하려는 사람에게
어려움이 있을 것이다.
js파일명을 모르더라도 실행할수 있게 npm start로 실행할 파일을 지정할 수 있다.
처음 프로젝트 파일을 받아 구동하려는 사람에게도 npm start 명령 하나만으로
프로젝트를 띄울수 있는 것이다.
package.json 파일을 열어 다음과 같이 수정하고 저장한다.
"scripts" : { "start" : node index.js" } 부분이 수정 된 것이다.
{ "name" : "npmtest" , "version" : "1.0.0" , "description" : "my npm test" , "main" : "index.js" , "scripts" : { "start" : "node index.js" }, "author" : "shlee0882" , "license" : "ISC" , "dependencies" : { "express" : "^4.16.4" } }
서버를 다시 껐다 킨다.
킬때는 node index.js 가 아닌 npm start를 사용한다.
$ npm start
npm start 명령을 통해 구동이 잘 되는 것을 확인할 수 있다.
5. git에 올리기, .gitignore 생성
git init을 하면 파일올려야 할 갯수가 320개 까지 나타나는 것을 확인한다.
express를 설치하며 받은 node_modules, package-lock.json을 올리지 않아도 된다.
우리는 index.js, package.json, 그리고 생성할 .gitignore 파일 총 3개만 올리면 된다.
.gitignore 파일을 만든다.
그리고 우리가 올릴 필요 없는 node_modules, package-lock.json을 추가한다.
그러면 올릴파일은 총 3개가 나타난다.
추가적으로 .gitignore nodejs를 구글링하면
nodejs 프로젝트에 올릴필요없는 기본설정 파일을 확인할 수 있다.
( https://github.com/github/gitignore/blob/master/Node.gitignore )
그 내용을 복사해서 붙여넣는다.
이제 3개 파일을 git remote repository에 올리겠다.
1 2 3 4 git add . git commit - m "커밋내용" git remote add origin "원격 git repository 주소" git push origin master cs
git repository 로 3개 파일이 올라간것을 확인 할 수 있다.
그러면 git에 올린 파일을 처음 받는 사람은
node_modules, package-lock.json을 git에 올리지 않았으니깐
못받는거 아닌가? 라고 생각할 수 있는데 그렇지 않다.
package.json에 설치할 파일들이 모두 명시 되어 있으므로
새로 소스를 받는 사람은
$ npm install
npm install 명령 하나로 프로젝트에 필요한 파일을 모두 받을 수 있다.
from http://shlee0882.tistory.com/230 by ccl(A)
댓글
댓글 쓰기