[node js] 4주차 -2

배포를 위한 npm 학습

• 1. npm 복습
  여러분이 사용해본 npm 기능은 아래와 같습니다.
  • npm init
    • 명령어를 통해 package.json 파일을 만들 때 사용됩니다. package.json 은 npm 으로 설치된 모듈에 대한 정보가 들어있습니다.
    • 새로운 프로젝트나 패키지를 만들 때 사용됩니다.
  • npm install express
    • npm 으로 모듈을 설치할 때 쓰는 명령어입니다.
    • install 대신 i 라는 별명을 대신 사용할 수 있습니다.
    • install 뒤에 따라오는 express 는 설치하고자 하는 모듈의 이름을 명시합니다.
    • npm install express 로 express 한개의 모듈을 설치할 수 있는데 띄어쓰기로 구분을 하여 여러개의 모듈을 설치하는것도 가능합니다. ex) npm install express mongoose jest
  1. node_modules?
  • package.json 파일 내용 기반으로 npm install 명령어를 통해 설치된 모듈 파일들이 모여있는 곳입니다.
  • 여러분이 사용중인 환경에 맞는 파일들이 설치되기 때문에 이 폴더는 다른곳에 공유하거나 배포할 때 포함하면 안됩니다.
  1. npm install?
  • 명령어가 입력되면 package.json 기반으로 node_modules에 명시된 모듈들을 설치해주는 명령어 입니다.
  • 내 프로젝트를 다른사람에게 공유하거나 다른 사람의 프로젝트를 사용할 때 모듈을 설치하기위해 실행하는 명령어입니다.
  • devDependencies?
    • 개발 단계에서만 필요한 모듈들을 설치할 경우 이곳에 포함됩니다. npm install -D (모듈이름) 으로 추가할 수 있습니다.
    • 참고: https://selenehyun.notion.site/NPM-bb21551cb0e649ee9c0fa28bf3e52201
  1. 마무리
  • node_modules 공유하거나 배포할때 포함 X
  • package.json만 있으면 언제든 환경에 맞는 모듈들 설치 가능
  • 이미 추가된 모듈 설치는 npm install

배포를 위한 Git 학습

• 1. Git 이란 뭘까?
  • Git 은 체계적인 개발과 프로그램의 배포를 도와주는 형상 관리 도구, 또는 버전 관리 시스템 입니다.
  1. 형상 관리 도구는 왜 사용할까요?
  • 프로젝트의 개발 단계에서 소스 코드의 버전을 효과적으로 관리 할 수 있습니다.
  • 같은 파일을 여러명이서 동시에 작업할 수 있게 합니다.
  1. Git 사용에 필요한 개념 배워보기
  • 레파지토리란? 모든 파일의 변경 사항을 저장할 수 있는 저장소입니다.
  • Repository여기서도 두 종류가 존재합니다!
    
    • Local Repository: 여러분의 컴퓨터에 존재하는 Repository 그 자체를 말합니다.
    • Remote Repository: GitHub와 같이 Git 서버에서 제공되는 Repository를 말합니다.
  • Commit
    • 이전 변경사항 기준으로 새로 변경된 내용을 기록하는 단위를 Commit이라 부릅니다.
  • Branch
    • 참고: https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html
    • 여러 사람이 하나의 레파지토리에서 작업을 할 때 작업 내용이 충돌하지 않도록 해주는 개념입니다. 우리는 아직 브랜치를 거의 사용하지 않을 예정이기 때문에 개념정도만 배우고 넘어갑니다!
  1. Git 명령어 맛보기
  • git init
    • Git 저장소를 초기화 하여 해당 프로젝트 폴더를 Git repository 로 만들어줍니다.
  • git add
    • 지금 변경한 변경 사항을 스테이징 영역(Staging Area)에 올립니다.
    • git add .: 모든 변경 사항을 올린다.
    • git add app.js: app.js 변경사항만 올린다.
  • git commit
    • 스테이징 영역에 올라가 있는 변경사항을 하나의 기록(History)으로 남깁니다.
  • git remote add
    • git remote add <name> <url> 명령어로 Local Repository 에 <name>이라는 이름의 Remote Repository 를 추가할 수 있습니다. <url> 에는 Remote repository의 주소가 들어갑니다.
  • git push
    • Local Repository에 존재하는 Push 되지 않은 변경사항을 Remote Repository에 업로드 합니다.
  • git clone
    • Remote Repository로 부터 프로젝트를 복제합니다.
  • git pull
    • Remote Repository에 새로 올라온 변경사항을 Local Repository로 가져옵니다.
  • .gitignore 파일?
    • .gitignore 라는 이름의 파일을 프로젝트 폴더 최상단에 두고 파일 내용을 아래처럼 넣어보세요!

    • node_modules
      

    • 이전 시간에 배웠던 것 처럼 node_modules 폴더는 git의 변경사항에 속하지 않게 해주는 역할을 해서 여러분 컴퓨터에 있는 node_modules 폴더를 업로드하지 않도록 도와줍니다.
  1. 배포 할때 Git은 어떻게 활용될까요?
  • 처음 배포하는 서버인 경우
    1. git clone
    2. npm install
    3. 서버 켜기
  • 이미 배포 했던 서버의 코드를 최신 코드로 재시작 하고 싶은 경우
    1. git pull
    2. (필요한경우) npm install
    3. 서버 재시작
  1. 배포 할 때 Git을 사용하면 어떤 장점이 있을까요?
  • 위에서 형상 관리 도구를 사용하는 이유와 비슷합니다!
  • 원하는 때에 원하는 형상으로 서버를 켤 수 있습니다.
    • 서버를 최신 형상으로 올렸는데 갑자기 예기치 못한 에러가 발생한다면? 곧바로 이전 형상으로 돌려서 다시 서버를 켤 수 있습니다!
    • 물론 지금은 알려드리지 않은 git의 checkout 기능을 알아야 하지만 일단 Git을 사용한다면 위와 같은 상황에 대비가 가능한것이죠 😉

CORS

• 1. CORS란?
  • 교차 출처 리소스 공유 (Cross-origin resource sharing)의 약자입니다.
  • 현재 브라우저로 접속중인 페이지에서 자바스크립트를 이용해 다른 도메인 또는 포트를 가진 주소로 요청을 하는 경우, 해당 리소스에 접근을 허용했는지 확인해 보안을 높이는 동작을 CORS라고 부릅니다.
  1. CORS 문제는 왜 발생할까?
  • 브라우저는 주소(도메인, 포트 중 하나라도)가 다른 경우 리소스의 출처가 다르다고 판단합니다.
  • 브라우저에서 출처가 다르다고 판단하면 어떻게 동작할까요?
    1. 브라우저가 요청하려고 시도했던 주소에 “OPTIONS” 메서드를 이용해 요청을 의도적으로 허용하고 있는게 맞는지 확인합니다. 이것을 CORS preflight 라고 부릅니다.
    2. 요청을 받은 서버는 평소와 똑같이 응답을 합니다.
    3. 응답을 받은 브라우저는 요청에 대한 허가를 받지 못했다고 판단하고 CORS 에러를 발생시킵니다.
  • 이것은 브라우저에 구현된 비동기 요청 API에서만 동작하는 규칙으로, Thunder Client 같은 API Client를 이용해 요청하는 경우에는 절대 발생하지 않습니다.
  1. 실습을 위한 서버 작성
  • 1. 새 프로젝트 폴더 생성
    • 원하는 위치에 폴더를 생성합니다.
    • 폴더 이름은 cors-simulation 으로 해주세요!
    1. VS Code로 새 프로젝트 폴더 열기
  • File > Open Folder 로 방금 만드신 폴더를 열어주세요.
    1. npm init & npm install express
  • 터미널을 열어 명령어를 하나씩 입력해 새로운 프로젝트와 express 모듈을 설치해 주세요.

  • npm init
    npm install express
    

    1. GET /cors-test 에 응답하는 서버 코드 작성
  • app.js 파일을 생성해서 간단한 GET request 를 작성해 봅니다.

  • // app.js
    const express = require("express");
    const app = express();
    const port = 3000;
    
    app.get("/cors-test", (req, res) => {
      res.send('hi');
    });
    
    app.listen(port, () => {
      console.log("서버가 켜졌어요!");
    });
    

  1. CORS 문제 발생 테스트
  • 1. 작성한 서버 켜기

    node app.js
    

    1. https://test-cors.org 접속--- 핵심!!!!
    2. 반드시 https 를 써야함
  • 개발자도구 > 네트워크탭을 켜놓은뒤 아래와 같이 http://localhost:3000/cors-test 를 입력하고 Send Request 버튼을 눌러봅니다.

  • 

    
    
    1. 로컬 서버에 요청해보고 CORS 에러 발생 확인
  • 서버에 요청한뒤 네트워크 탭과 콘솔 탭을 확인해보면 아래와 같이 CORS에러가 발생한것을 확인할 수 있습니다.

  • 

    
  1. 어떻게 하면 CORS가 발생하지 않을 수 있을까?
  • CORS 에러를 방지하는 방법은 서버에 Access-Control-Allow-Origin 응답 헤더를 추가하면 됩니다.
  • 우리는 모든 요청에 위와 같은 헤더를 추가해주는 cors 라는 이름의 모듈을 사용해 해결할 예정입니다.
  1. CORS 문제 해결
  • 1. cors 모듈 설치
    터미널에 명령어를 입력해 CORS 모듈을 설치해주세요.

  • npm install cors
    ​

    1. 미들웨어 추가
    • 모든 요청 허용

    • const express = require("express");
      const cors = require("cors");
      const app = express();
      const port = 3000;
      
      app.use(cors());
      
      app.get("/cors-test", (req, res) => {
        res.send("hi");
      });
      
      app.listen(port, () => {
        console.log("서버가 켜졌어요!");
      });
      

    • 특정 도메인만 허용

    • const express = require("express");
      const cors = require("cors");
      const app = express();
      const port = 3000;
      
      const corsOption = {
        origin: "<https://www.test-cors.org>",
        credentials: true,
      };
      
      app.use(cors(corsOption));
      
      app.get("/cors-test", (req, res) => {
        res.send("hi");
      });
      
      app.listen(port, () => {
        console.log("서버가 켜졌어요!");
      });
      

    1. 서버 재시작
  • 항상 그렇듯이 코드를 변경한 뒤엔 서버를 반드시 재시작 해야합니다.
    1. test-cors.org 에서 해결된 것 확인 다시 http://localhost:3000/cors-test 에 요청했을때 아래와 같이 아무런 에러가 나지 않으면 해결된 것 입니다.

  • 

  • 

  1. 마무리
  • 앞으로 여러분이 만드는 서비스가 항상 하나의 주소로 프론트엔드와 API를 제공하지 않을 가능성이 높은데요, 이런 경우 반드시 부딪힐 수 있는 문제인 CORS에 대해 미리 배우고 대처 방법을 알아봤습니다.
  • 이제 CORS 문제가 발생하면 전문가처럼 쓱 대처할수 있겠죠? 😉06. CORS
    
    • • • • • • • •