Node.js 는 js를 컴파일해주는 엔진으로 빌드된 js가 구동중인 환경으로 유저의 클릭이나 네트워크에 리소스를 요청하는 이벤트가 논블로킹으로 이루어지는 input output model 특징을 가진다.(이벤트 기반 및 논블로킹 I/O 모델)
그렇기 때문에 속도가 빠르고 별도 설치를 하지 않아도 node 상에서 사용할 수 있는 모듈들이 존재한다. 앞서 require 방식으로 fs / http / url / path 등을 사용 해보았다.
NPM은 세계에서 가장 큰 오픈소스 라이브러리 생태계 중 하나이다.
npm init 이라는 명령어를 사용하고 각종 설정을 하게 되면 package.json이라는 파일이 생성되는데
여기에는 프로젝트 전반에 관한 정보가 들어있다. 이는 셋업하는 역할들이 담겨있는 정보들이며 다운로드한 정보는 dependencies에 기록되게 된다. dependencies 말고도 프로젝트에 관한 정보 / 설정된 script 코드(cli에서 해당코드를 실행시킬 수 있다.) / 개발과 관련 된 dependency(라이브러리) 등 정보들이 담겨있다.
dev-dependency는 production과 관계 없는 개발만 위한 dependency,
컴파일 혹은 테스트 용도로 내려받았던 패키지들이 적혀있다.
|
1
2
3
|
yarn add @babel/core --dev
npm install @babel/core --save --dev(dev옵션 꼭!)
|
cs |
dependency는 직접 production과 관련 있는 dependency이다.
|
1
2
3
4
5
|
yarn add react
npm install --save react(save옵션 꼭!)
|
cs |
우리가 하는 기존에 npm install을 하게 되면 package.json에 있는 dependency를 바탕으로 설치를 하게 된다. 등록 되지 않은 것이 있다면 코드에서는 해당 모듈을 사용하고 있지만 npm install로는 설치되지 않을 것이다. 그렇게 되면 에러로 이어지게 될 것이고 이는 팀 간 갈등 주요 원인이 될 것이다. 그렇기에((dev-) dependency에 꼭 입력하여야 할 것이다.)
npm start의 명령어는 package.json의 script의 start 부분에 설정이 가능하다. 이 부분에 node index.js를 입력하여 npm start 명령어 만으로도 node index.js 실행이 가능해진다.
여기에 nodemon을 사용하게 되면 즉각 적인 피드백 가능하게 해주기 때문에 더 편리하게 사용할 수도 있다. 서버를 켜 놓아야 하는 경우에 기존에는 nodemon을 사용하지 않으면 업데이트될 때마다 서버를 끄고 키는 작업을 해야지만 nodemon을 사용하게 되면 그럴 필요없이 실시간으로 업데이트된 것을 접할 수 있다.
|
1
|
npm install --save nodemon (노드몬 설치)
|
cs |
브라우저 접속 시
[1] 도메인 이름 탐색
1. DNS 서버에 접속 한 후 해당 웹페이지의 ip가 무엇인지 요청
2. DNS 서버는 요청에 대한 응답으로 해당 ip 리턴(못찾은 경우에도 못 찾은 리턴을 보낸다.)
[2] 웹 서버 요청
1. 웹 서버의 라우팅(주소 탐색 규칙)에 따라 요청 처리
- 단순하게 정적 파일만 제공하는 경우와
- 서버가 비즈니스 로직을 실행할 수 있도록 요청
2. 서버가 요청에 대한 응답을 자원의 형태로 전달
3. 서버가 보내주는 자원을 브라우저에서 처리
(리소스를 찾을 수 없으면 404.. http의의 status code 중 하나)
HTTP
서버와 클라이언트가 주로 HTML 등의 문서를 주고받는 데 사용하는 프로토콜
주로 80번 포트 사용(주소 뒤에 콜론과 함께 숫자가 있는 경우)
http 1.1의의 경우 요청과 응답은 start/status line, header 그리고 body로 이루어짐
http response status code 에는 100대부터 500번대 까지 많이 존재하지만 많이 볼 수 있는 것들은 아래와 같다.
200 요청 성공
304 요청에 대한 응답이 수정되지 않음
403 컨텐츠에 접근할 권한이 없음
404 요청 받은 리소스를 사용할 수 없음
500 서버가 처리할 수 없는 요청
URI
http 요청은 uri을 통해 할 수 있다.
주소창을 통해 하는 요청은 전부 GET request(요청)
http request methods
get 특정 리소스를 가져오도록 요청
post 데이터를 서버로 제출하는 용도로 사용하며 서버 상태의 변화를 일으킴
put post와 비슷하나 연속적인 요청 시에도 같은 효과를 가져옴 기존 데이터를 교체하는 용도로 쓰일 수 있음
delete 리소스의 삭제를 요청할 때 사용
CORS
이전에는 서버에서 내려받은 클라이언트로 통신(데이터를 일방적으로 유저는 보는 방식)
오리진이 같기 때문에 의심이 여지가 없다!(서버는 요청을 막을 필요가 없음)
최근에는 싱글 페이지 애플리케이션이 발달하게 되면서 여러 곳에 리소스를 활용할 필요가 생김
이젠 같은 오리진이 아닌 크로스 오리진을 요청해야 함!!
크로스 오리진에서 리소스를 요청하여 사용한다!
브라우저에서 크로스 도메인 요청은 기본적으로 제한되어 있다. 하지만 웹 애플리케이션 고도화를 위해 개선 요청 … 그래서 서버가 허락 한 범위 내에서 크로스 오리진 요청 허용
'개념정리' 카테고리의 다른 글
| 11/19[TIL]React (0) | 2020.11.19 |
|---|---|
| 11/16[TIL]Server & Node (0) | 2020.11.16 |
| 11/12[TIL]Browser Security (0) | 2020.11.12 |
| 11/11[TIL]Web architecture (0) | 2020.11.11 |
| 11/10[TIL]Asynchronous & Promise(2) (0) | 2020.11.10 |
