[TIL] 201228

슬지로운 개발생활·2020년 12월 28일
TILnode.jsserver
0

TIL

목록 보기
54/73
post-thumbnail

1. 코드스테이츠

  • im-sprint-mini-node-server
    - 어드밴스드 할때 에러가 발생- 클라이언트와 서버의 포트가 같아서 생긴 문제
    - 서버의 포트를 바꿔주었더니 문제 해결

  • <ctrl> + c : 서버 종료시(Mac OS에서도 control + c)
  • pkill -f node : ctrl + c로도 종료 안될때 강제 종료
  • https : http의 secure한 버전
  • nodemon : 저장사항을 반영하여 즉각적으로 서버를 실행시켜주는 라이브러리다.
      npm install --save nodemon // 다운로드
    {
    "scripts": {
      "start": "nodemon index.js"
    },
}

Node.js

  • 노드는 v8엔진으로 만들어진 자바스크립트 런타임이다.
  • Node.js는 자바스크립트를 컴파일 해주는 엔진으로 빌드 된 자바스크립트가 구동중인 환경이다.

V8?

V8 complies JS directly to native machine code
→ 자바스크립트를 기계어로 컴파일 해준다!

runtime?

프로그래밍 언어가 구동되고 있는 환경

이벤트 기반 및 논블로킹 I/O 모델

→ 유저의 클릭이나 네트워크에 리소스를 요청하는 이벤트가 논블로킹으로 이루어지는 Input Output model

이벤트 :

유저의 버튼 클릭이나 네트워크에 리소스를 요청 하는 것 등

논블로킹 vs 블로킹

  • blocking(synchronous programming) : 다음함수의 실행이 현재 함수의 종료 이후에 이루어 지는 것.
    - 이 함수가 다 실행되고 그 다음 함수가 실행되는 것을 보고 blocking이라고 한다.
  • Non-blocking(asynchronous programming) : 다음 함수의 실행이 현재 함수의 종료를 기다리지 않는다.
    - 이 함수 실행이 종료되는 것과는 상관없이 다음 함수 실행되는 것
    - 자바스크립트를 하면서 논블로킹, 비동기라는 소리를 많이 접했을것
  • I/O model
    Input을 주면 Output을 반환하는 모델 → 리퀘스트를 했을 때 리소스를 주는 모델

결론

Node.js란 JavaScript를 컴파일 하여 구동하고, 이벤트 기반의 non blocking 모델로 되어 있어 속도가 빠르다는 장점을 가지고 있는 JS런타임

Node core modules

별도의 설치를 하지 않아도, node 상에서 쓸 수 있는 모듈이 있다.

  • node와 함께 번들링 되어있는 모듈
  • require('') 방식으로 사용할 수 있다.
  • 예시
    - fs : 파일을 읽고 쓰고 지우는 역할
    • http
    • url
    • path

npm

  • Node Package Manager
  • 세계에서 가장 큰 오픈 소스 라이브러리 생태계 중 하나
  • package.json에 그 정보들이 모두 담겨 있다.

Package.json

npm을 활용하기 위한 정보들이 모여있는 파일 뿐만 아니라 proj 전반에 관한 정보가 들어있다!

{
// project에 관한 정보
  "name": "recast.ly", // proj name
  "version": "1.0.0", // version
  "description": "", // proj에 대한 설명

  "main": "index.js",

// 설정된 script 코드
  "scripts": { // 어떤 스크립트 코드를 설정하였는가
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  },

  "keywords": [], // 키워드
  "author": "", // 코드를 작성한 사람
  "license": "ISC", 

// 개발과 관련된 dependency들, 어떤 라이브러리를 사용하였는지 나타내고 있다
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "eslint": "^5.12.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-react": "^7.12.3",
    "jest": "^23.6.0",
    "react-addons-test-utils": "^15.6.2",
    "react-test-renderer": "^16.7.0",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

run script

cli에서 해당 코드를 실행시킨다.

{
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  },
}

dev-dependency

production과 관계 없는 개발만을 위한 dependency.

  • dev-dependency 설치할 때
    $ yarn add @babel/core --dev
//or
$ npm install @babel/core --save-dev
//--dev 옵션을 줘서 등록한다.

dependency

직접 production과 관련있는 dependency

  • 이러한 라이브러리를 설치할 때
    $ yarn add react
// or
$ npm install --save react
// npm을 쓸 때는 --save 옵션을 줘야한다.
  • why save?
    우리가 흔히 하는 npm install은 package.json에 있는 dependency를 바탕으로 설치
    - dependency에 등록되어 있지 않다면?
    코트에서는 해당 모듈을 쓰고 있지만 npm install로는 설치가 되지 않는다!
    → 팀 갈등의 주요 원인이 될 수 있기 때문에 항상 유의!

npm init

  • npm이라는 패키지 메니저를 사용하겠다는 의미로 npm init이라는 명령어를 통하여, 이 파일을 npm을 쓰는 프로젝트로 정의하겠다고 표시한다.
    npm init

package name: (package-name)
version: (1.0.0)
description: npm start test
entry point: (script.js) 
test command: // 테스트는 어떤 명령어로 실행시킬 것 인지
git repository: // 깃 레포는 어디인지
keywords: // 어떤 키워드를 가지고
author: // 코드를 작성한 사람은 누군지
license: (ISC)

    상기의 일을 마치고 나면 package.json파일이 생성된다.

    // JSON 파일
{
  "name": "package-name",
  "version": "1.0.0",
  "description": "npm start test",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

HTTP & REST

What happens when you type an URL in the Browser and press enter?

  • 도메인 : 도메인 또는 도메인 네임(Domain name)은 넓게 보면 외우거나 식별하기 어려운 IP 주소(예:240.10.20.1)를 example.com 처럼 기억하기 쉽게 만들어주는 네트워크 호스트 이름을 의미한다.
  • 라우팅 : 내가 가지고 있는 서버중에서도 갈림길이 있다. 길을 찾기 위해 디테일한 주소를 적어주는것


Step 1 : 도메인 이름 탐색

  1. DNS 서버에 접속한 후, www.google.com의 IP가 무엇인지 요청
    → 컴퓨터는 각자 고유한 IP를 가지고 있다
  2. DNS 서버는 요청에 대한 응답으로 216.58.197.196리턴
    • IP 주소 : 스마트폰이나 노트북부터 대규모 소매 웹 사이트의 콘텐츠를 서비스하는 서버에 이르기까지 인터넷상의 모든 컴퓨터는 숫자를 사용하여 서로를 찾고 통신하며, 이러한 숫자를 IP 주소라고 한다. IP 주소는 인터넷에서 단말기별 인식 번호로 음성통화를 위한 전화번호와 동일한 개념.

    • DNS (Domain Name System) : DNS 또는 Domain Name System이란 도메인과 서버를 연결해주는 중간 서버로, 사람이 읽을 수 있는 도메인 이름(예: www.example.com)을 머신이 읽을 수 있는 IP 주소(예: 12.34.56.78)로 변환시켜 원하는 컴퓨터를 찾아갈 수 있도록 한다.


      [TIL]웹은 어떻게 동작할까? (2)

Step2 : 웹 서버(HTTP) 요청

  1. 웹 서버의 라우팅(routing : 주소 탐색 규칙)에 따라 요청 처리
단순하게 정적 파일만 제공하는 경우 다음과 같이 조회(URL)서버가 비즈니스 로직을 실행하도록 요청할 수도 있다
  1. 서버가 요청에 대한 응답을 자원(resource: HTML/JS 파일 등)의 형태로 전달
  2. 서버가 보내주는 자원을 브라우저에서 처리
Step 1 Fails
(도메인네임을 찾지 못하는 경우)		Step 2 Fails
(http status code : 리소스를 찾지 못할 경우)

HTTP

  • 서버와 클라이언트가 주로 HTML등의 문서를 주고받는데 사용하는 프로토콜
  • 주로 TCP/UDP 80번 포트를 사용(생략되어 있다)
    - see also : TCP, UDP, well-known port
  • Must Read : RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1
  • HTTP/1.1의 경우 요청과 응답은 Start/Status line, Header 그리고 Body로 이루어져 있다. → MDN HTTP Messages

An examples of the HTTP Request/Response Message

HTTP request

GET /docs/index.html HTTP/1.1 //리소스를 요청하는 URL
Host: www.codestates.com
Accept: image/gif, image/jpeg, 
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

HTTP request

HTTP/1.1 200 OK
Date: Sun, 18 Oct 2009 08:56:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT
ETag: "10000000565a5-2c-3e94b66c2e680"
Accept-Ranges: bytes
Content-Length: 44
Connection: close
Content-Type: text/html
X-Pad: avoid browser bug

<html><body><h1>It works!</h1></body></html> // 실제적인 컨텐츠 내용

HTTP Features

  • HTTP는 특정 상태를 담고 있지 않는다(Stateless)
    - 이전 요청이나 다음 요청을 기억하지 않는다.
  • 연결 상태를 유지시키지 않는다(Connectionless)
  • Request-Response Cycle

URI

  • HTTP 요청은 URI를 통해 할 수 있다
  • 주소창을 통해 하는 요청은 전부 GET Request
  • 단순히 파일을 요청하는 것 뿐만 아니라 bts(? search 필요)도 처리하기 때문에 identifier라고 한다.

RESTFUL API

  • API: HTTP 요청으로 원격 서버에 요청(RPC: Remote procedure call)할 수 있도록 외부로 노출된 추상화된 인터페이스
  • REST: API 디자인에 있어서 HTTP 프로토콜을 의도에 맞게 사용하도록 정의된 아키텍쳐 스타일
    - 몇가지 대표적인 원칙
    • URI는 정보의 자원을 표현해야 한다
    • 자원에 대한 행위는 HTTP Method로 표현해야 한다

Rest and HTTP Verbs

VerbEndpointAction
GET/api/users모든 사용자를 조회
POST/api/users새 사용자를 리스트에 추가
PUT/api/users/{username}특정 사용자의 정보를 갱신
DELETE/api/users/{username}특정 사용자의 정보를 삭제
GET/api/users/{username}특정 사용자의 정보를 조회
profile
슬지로운 개발생활
:)
이전 포스트

[TIL]201224

다음 포스트

[TIL]201229

0개의 댓글

관련 채용 정보