vscode에서 Node.js실행하기 (express, npm, local host)

• 자바스크립트는 브라우저 자체에 인터프리터가 있어 별도의 설치 없이 사용할 수 있다.
• 백앤드(서버)에서 사용하려면 node.js를 설치해야 한다. (웹 프레임워크 중 가장 많이 사용됨)
• 모듈  - 미리 짜여진 코드, 프로그램을 구성하는 요소로 관련 데이터와 함수를 하나로 묶은 기능 단위이다.
• npm(node package manager) - express프레임 워크 등 필요한 도구를 다운받아서 쓸 수 있다.

 

📌 내 주소 ▶ http://localhost:3000

📌  ip 주소 확인은 cmd(명령프롬프트) 에서 ipconfig으로 확인한다. (IPv4 주소) -> http://아이피주소:3000으로 접속

 

npm설치 시 자동으로 정해지는 포트로 bin파일의 www에서 지정된다.

var port = normalizePort(process.env.PORT || '3000');

     VS code의 터미널   - 모듈 설치 및 서버 제어 구문

1	npm install	만약 뒤에 -g를 붙이면 컴퓨터 전체에 설치된다. (충돌 방지를 위해 프로젝트 단위로 설치하는 것이 좋다)
2	npm start	서버를 실행
3	nodemon	서버를 실행   * npm start와 달리 코드를 수정했을 때마다 실행시키지 않아도 브라우저에 반영 되어 편리하다.
4	npm uninstall 모듈명	해당 모듈 제거
5	crtl+c	서버 종료 (^C)
6	npx kill-port 3000	서버 삭제 (또는 명령 프롬프트에 taskkill /f /pid 리스닝번호 입력)   - 서버 끄지 않고 새로운 프로젝트 실행시 오류난다.   - 해당 구문은 서버를 삭제하는 것이며 다시 실행할 때는 npm install로 새로 설치

서버 충돌시 포트 listening 아이디 확인 후 taskkill로 삭제

📌 json데이터 정리해 출력해 주는 사이트 - json vue

https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc/related

JSONVue

 

     node.js의 폴더    

 

NO	폴더명	역할
1	bin폴더	노드가 서버로서 동작하기 위한 기본 코드. 서버를 시작할 포트가 지정되어 있다.
2	node_modules폴더	npm 설치시 생긴 폴더로 package.json에 선언된 모듈과 이를 실행하기 위해 필요한 의존관계의 모듈이 모여있다.
3	public폴더	이미지, css등 스타일에 관련된 파일이 지정되어있다. *index.ejs에서 자동으로 생성되는 stylesheet 링크의 주소를 보면 ' / '루트로 설정되어있음(public지정)
4	routes폴더	컨트롤러(제어역할)인 라우터들이 모여있다. index.js와 users.js는 기본으로 생성되는 파일이다. * 포트 뒤에 /주소에 따라 열리는 html페이지가 달라지게 해준다.
5	views폴더	뷰를 처리하는 파일이 모여있으며 파일들의 확장자는 .ejs이다. *출력만 가능한 html과 달리 ejs는 서버를 받아와 데이터를 출력할 수 있다 (<%= js변수입력 %>)
6	app.js 파일	URL등록 및 라이브러리를 관리하는 파일이다.
7	db.js 파일	database와 연결하기 위한 파일
8	package.json 파일	설치한 모듈들이 정리되어 있는 파일

 

     라우터    

router.get('/', function(req, res, next) {   res.render('index', { title: '주소관리', pageName:'address.ejs' }); });

http메소드(get), 라우팅('/'), 콜백함수(function)로 이루어져 있음

 

▶ http 메서드: 요청의 목적 & 종류를 알려주기 위한 수단 -> 요청방식은 get / post로 나뉜다

타입	설명
get	- URL 주소창에서 데이터를 전달한다 (params와 query 두가지 방식으로 매개변수를 받음)
	params		URL경로에 변수를 포함하는 방식으로 전달된다 예) /users/:id -> 여기서 :id가 파라미터이다. -> req.prams.id
	query		URL 끝에 ?(물음표)뒤에 오는 값으로 변수와 값의 쌍으로 이루어져 있다. 예) /search?uid=user01 & pass =123   -> req.query.uid
post	body	본문(body)에 데이터를 담아 전달한다.  예) req.body.uid
	- URL에 전송되는 데이터 값이 보이지 않기 때문에 보안상 안전하며 get방식보다 많은 양의 데이터를 전송할 수 있다. - 요청을 캐시할 수 없기 때문에 get방식보다 느리고 서버의 리소스를 많이 사용할 수 있다. - 또한 폼 데이터를 인코딩해서 보내기 때문에 요청 크기가 커질 수 있음 -> 이런 문제를 해결하기 위해 ajax나 rest API 등을 사용해 비동기적으로 데이터를 전송하는 것이 좋다.

 

▶ function( ){ } : 미들웨어 함수를 정의하는 함수 표현식

req	클라이언트 요청(request) 객체 -> 프론트에서 데이터를 가져옴 -> query와 body
res	서버응답(response) 객체 - > 프론트에 데이터를 보내줌(결과 출력) -> send, render, redirect
next	미들웨어 함수 호출하는 콜백함수

 

▶ res.render( ) : 렌더링 할 템플릿 파일 경로를 입력하고 

- index뷰를 렌더링 하고 title과 pageName 변수 전달 (뷰파일명, 뷰에 전달할 매개변수)