Server 실행

1. Server 실행하기

node server/basic-server.js

• 서버 파일의 경로 server/basic-server.js를 입력하여 서버 실행
• 서버 코드를 수정할 때마다 저장 및 재실행 필요
• nodedemon : 서버를 매번 다시 실행시킬 필요 없음

2. nodedemon

1) 설치하기

sudo npm install -g nodemon

• npm install -g nodemon을 입력했는데 에러가 발생할 경우 sudo로 다운로드

2) 실행하기

nodemon server/basic-server.js

• 서버 파일의 경로 server/basic-server.js를 입력하여 서버 실행

3) npm start로 실행하기

"start": "nodemon server/basic-server.js"

• package.json 파일의 "scripts"에 "start"로 nodemon server/basic-server.js를 입력하면 npm start로 실행 가능

3. debugging 하는 법

• nodemon도 지원해줌

1) node --inspect 옵션

 "start": "node --inspect server/basic-server.js"

• package.json : --inspect 옵션을 통해 debugging 가능
• 크롬의 개발자 도구에 node.js 아이콘 클릭시 서버 콘솔 확인 가능

2) node --inspect-brk 옵션

 "start": "node --inspect-brk server/basic-server.js"

• 시작하자마자 debugging 가능
• --inspect-brk 옵션을 사용시 크롬 devtools가 실행되기 전까지 서버는 대기
• break 상태로 devtools가 실행되면 debugging 가능

3) VS Code로 debugging 하기

• 원하는 줄에 break Point 지정
• debug 탭에서 실행 버튼을 눌러 확인
• 콘솔은 터미널 창에서 확인

node.js를 이용한 백엔드 구축

1. 서버 생성

const http = require('http')

const server = http.createServer((request, response) => {
  // 여기서 작업이 진행됩니다!
})

server.listen(8080)
// 8080 포트로 서버를 읽음

• createServer를 이용하여 웹 서버 객체를 만듦
• 해당 서버로 오는 HTTP 요청마다 createServer에 전달된 함수가 실행
• 서버가 사용하고자 하는 포트번호를 listen에 전달

2. request 및 response

/// ddd를 입력
let body = [];
request.on('data', (chunk) => {
  console.log(chunk) 
  // <Buffer 22 44 44 44 22>
  body.push(chunk)
  // chunk로 받은 데이터를 body에 넣어줌
  console.log(body)
  // [<Buffer 22 44 44 44 22>]
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // 여기서 `body`에 전체 요청 바디가 문자열로 담겨짐
  console.log(body)
  // "ddd"
  response.writeHead(201, defaultCorsHeader);
  // 201번 상태 코드와 헤더(defaultCorsHeader)를 전달
  // defaultCorsHeader : cors 설정을 의미
  response.end(body.toUpperCase());
  // 받아온 문자열을 toUpperCase()
  // "DDD"
});

• POST나 PUT 요청을 받을 때 body 데이터를 받는 방법
• 스트림의 'data'와 'end' 이벤트에 이벤트 리스너를 등록해서 데이터를 받아옴
  - request.on('data', ) : 요청에서 데이터가 도착했을 때를 의미(Buffer로 나눠져서 전달)
  - request.on('end', ) : 요청에서 데이터가 다 전달됐을 때를 의미
• 각 'data' 이벤트에서 발생시킨 chunk는 Buffer로 전달됨
  *Buffer : 16진수의 조합
• 이 청크가 문자열 데이터라는 것을 알고 있다면 이 데이터를 배열에 수집한 다음 'end' 이벤트에서 이어 붙여 문자열로 만듦

1) 변형 1

/// ddd를 입력
let data = "";
request
  .on("data", (chunk) => {
  console.log(chunk)
  // <Buffer 22 64 64 64 22>
  data += chunk;
  // chunk로 받은 데이터를 data에 더해 문자열로 만듦
  console.log(data)
  // "ddd"
})
  .on("end", () => {
  response.writeHead(201, defaultCorsHeader);
  // 201번 상태 코드와 헤더(defaultCorsHeader)를 전달
  // defaultCorsHeader : cors 설정을 의미
  response.end(data.toUpperCase());
  // 받아온 문자열을 toUpperCase()
  // "DDD"
});

2) 변형 2

/// ddd를 입력
let data;
request
  .on("data", (chunk) => {
  console.log(chunk)
  // <Buffer 22 64 64 64 22>
  data = chunk.toString();
  // chunk로 받은 데이터를 문자열로 바꾸어 데어터에 할당
  console.log(data)
  // "ddd"
})
  .on("end", () => {
  response.writeHead(201, defaultCorsHeader);
  // 201번 상태 코드와 헤더(defaultCorsHeader)를 전달
  // defaultCorsHeader : cors 설정을 의미
  response.end(data.toUpperCase());
  // 받아온 문자열을 toUpperCase()
  // "DDD"
});

3. 헤더 데이터 전송

1) Cors 설정

const defaultCorsHeader = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Accept",
  "Access-Control-Max-Age": 10
};
// defaultCorsHeader : Cors 설정을 의미
// Origin : 모든 도메인(*)을 허용
// Methods : GET, POST, PUT, DELETE, OPTIONS만 허용
// Headers : Content-Type, Accept만 허용
// Max-Age : preflight request는 10초 까지 허용

• 메소드가 "OPTIONS"일 경우 preflight로 Cors 설정을 전송

2) 헤더 데이터 전송

(1) 상태 코드 : 200

response.statusCode = 200;
response.setHeader(defaultCorsHeader);
response.end(body);

// 위는 아래와 같이 writeHead 메소드를 통해 축약 가능
response.writeHead(200, defaultCorsHeader);
response.end(body);

• 상태 코드 : 200
  *OK
• setHeader : defaultCorsHeader
• response.end(body) : 받아온 body를 응답으로 보냄

response.writeHead(404, defaultCorsHeader);
response.end();

• 에러 발생시 상태 코드 : 404
  *Not Found
• response.end()로 끝맺음

4. CORS 작동원리 확인하기

1) 서버 실행

• npx serve client/로 서버 실행
  *사실상 라이브 서버를 여는 것과 동일
• Access-Control-Allow-Origin을 클라이언트의 origin(http://localhost:51202)으로 특정
  *지정한 origin외에 다른 곳에서 접근 불가능

2) CORS 작동원리 확인하기

npx serve client/ -l 5555 : 클라이언트 서버를 5555번 포트로 실행

"Access-Control-Allow-Origin": "http://localhost:7777"

• 서버 : 5000번 포트로 실행, 클라이언트 : 5555번 포트로 실행
• Access-Control-Allow-Origin이 7777번 포트로 특정되어 클라이언트의 요청을 서버가 허용하지 않음

References

• HTTP 트랜잭션 해부