1. node. js 설치
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
해당 홈페이지에 들어가서 자신의 운영체제에 맞는 버젼을 다운받아서 설치한다. 설치과정은 특별한게 없으니 과정대로 설치하면 된다.
2. 작업 폴더 생성
C드라이브 D드라이브 상관없이 간단한 경로(ex. C:\data\nodejs)에 설치해주도록 한다.
3. cmd에서 설치 경로 지정 후 npm install express-generator -g
1) cmd 명령 프롬프트를 연다.
이과 같은 방식으로 위에서 만든 경로를 찾아간다.
2) 명령어에 npm install express-generator -g를 입력한다.
express가 설치 되었으면 위와 같이 나온다(윈도우 기준)
4. 프로젝트 생성
1) cmd에 express -e ex210803(임이의 프로젝트 이름) 입력
위와 같이 나오면 express 생성이 성공했다.
5. VSC 터미널에 진입해 npm install
1) VSC에서 Ctrl +` (느낌표 왼쪽 버튼)를 누르면 터미널이 나오며 본인이 지정한 경로가 열려있다. 그곳에 npm install을 입력한다. 성공하면 위와 같은 결과물이 나온다.
2) 만약에 npm 용어가 인식이 안된다면 아래의 블로그를 참고하도록 하자.
https://blog.naver.com/PostView.nhn?blogId=dlaxodud2388&logNo=222102392025
[오류모음] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로
VSCode와 Node.js 를 설치하고 간단한 프로젝트를 생성하기 위해 npm init을 쳤는데 다음과 같은 오류...
blog.naver.com
해당 블로그 설정 변경 후 VSC restart해야 적용되는 경우가 있으니 그냥 restart하도록 하자.
3) package.json에 추가된 모듈을 설치한다. npm install 명령어를 사용하면 package.json에 선언된 모듈이 자동으로 설치된다. 이때 명령어는 ex210803 디렉터리 아래에서 실행한다.
6. 웹 서버실행 npm start
VSC 터미널에서 프로젝트 경로를 지정하고 npm start 커맨드를 입력한다.
7. 이제 브라우저에서 만들어진 웹서버를 열어보자.
브라우저 상단에
http://localhost 3000/
을 입력하면 왼쪽과 같은 결과를 출력할 수 있다.
8. 내용을 변경해보자. nodemon을 이용해서 자동 refresh되게 하자.
1) ex0803/routes/index.js 에서 router의 title을 Express 에서 익스프레스에서 변경해보았다.
2) 원래 이와 같이 변경하면 npm을 restart해야하는 불편함이 있다. 터미널에서 ctrl + C -> Y 누르고 다시 npm start 커맨드 입력하고..
3) 이와 같은 불편함을 해결하기 위해서 nodemon을 이용하도록 하자.
4) VSC 터미널에 왼쪽과 같이 npm install nodemon -g을 입력하면 된다.
5) 다시 터미널에서 nodemon을 입력해주자,
6) 단순하게 브라우저에서 refresh함으로써 변경사항을 확인할 수 있다.
단, 저장은 꼭 하도록 하자.