[Node.js] CORS / MVC 패턴

---

.

 

#1. CORS

1. CORS의 개념

1) CORS란?

• 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한하고 있다.
  • 웹브라우저가 현재 접속하고 있는 도메인과 ajax로 요청하려는 api의 도메인이 다르면 접속을 제한.
• 따라서 cross-origin 요청을 하려면 서버의 동의가 필요한데, 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.
• 이러한 메커니즘은 HTTP-hreader를 이용하는데 이를 CORS(Cross-Origin Resource Sharing)라고 한다.
• 즉, 브라우저에서 cross-origin 요청을 안전하게 할 수 있도록 하는 메커니즘을 의미한다.

 

2) Cross-origin (도메인이 서로 다를 때 자원을 공유)

Cross-origin이란 다음 중 한 가지라도 다른 경우를 말한다.

• 프로토콜: http와 https는 다른 프로토콜이다.
• 도메인: domain.com과 other-domain.com은 다르다.
• 포트번호: 8080포트와 3000 포트는 다르다.

 

3) CORS를 만든 이유

• CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 되면, 다른 사이트에서 원래 사이트를 흉내 낼 수 있게 된다. (피싱 사이트)
• 예를 들어 기존 사이트와 완전히 동일하게 동작하도록 하여 사용자가 로그인을 하도록 만들고, 로그인했던 세선을 탈취하여 악의적으로 정보를 추출하거나 다른 사람의 정보를 입력하는 등의 공격을 할 수 있다.
• 이러한 공격을 할 수 없도록 브라우저에서 보호하고, 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해 존재하는 이유이다.

 

2. CORS 허용 

1) CROS 허용하기

• 백엔드에서 아래의 HTTP 헤더를 포함하여 응답을 생성하면 된다.

- 모든 도메인으로 부터 POST, GET, PUT, DELETE 요청 허용하기

Access-Control-Allow-Origin: *
ccess-Control-Allow-Methods: "POST, GET, PUT, DELETE"

• * 은 ALL. 즉, 모든 것을 뜻하고, 아무데서나 내가 만든 API에 접속 허용한다. (보안에 취약)

 

- 특정 사이트로 부터 POST, GET, PUT, DELETE 요청 허용하기

Access-Control-Allow-Origin: "http://example.com"
ccess-Control-Allow-Methods: "POST, GET, PUT, DELETE"

• 포트번호가 있다면 포트번호를 맞춰야 한다.
  • 포트번호가 생략된 경우 웹은 무조건 80번 포트를 사용한다.

 

2) 패키지를 통한 허용 (node)

- 패키지 설치

yarn add cors

 

- 패키지 참조

// ES6
import cors from 'cors';

 

- Express 객체의 추가 설정

app.use(cors());

• 2-1에서 언급한 HTTP 헤더를 자동으로 추가해준다.

 

---

 

#2. MVC 패턴

1. MVC 패턴의 개념

1) MVC 패턴이란?

• MVC는 Model, View, Controller의 약자로, 하나의 애플리케이션 프로젝트를 구성할 때 그 구성 요소를 세 가지 역할로 구분한 패턴을 말한다.

MVC 패턴 처리 로직

 

고전적인 웹 프로그램은 서버 개발자가 MVC를 모두 담당 하였으나, 현대적인 FronEnd-BackEnd 개발에선ㄴ View를 별도로 분리하여 독립적인 프레임워크로 구성하였다. (ex. React)

 

• 웹브라우저 접속 → 파라미터 수신 →  유효성 검사 → 요청된 데이터를 조회 → 사용자에게 제시할 결과 화면 구성
• Node.js로 예를 들면, 웹브라우저가 접속하면 router를 통해 Controller 클래스가 동작하고, 파라미터를 확인 후  필요한 데이터를 가져오기 위해 Model의 sql을 처리하고, 결과를 표시하기 위해 View라는 모듈을 호출한다.
• View 역할을 하는 모듈이 데이터 처리 결과와 결합해서 화면을 만들어내고, 그것을 사용자에게 돌려준다.
  • 현대적인 웹 개발의 정석이라고 표현할 수 있다.

 

2) Model

• 데이터와 관련된 책임을 담당하는 레이어(계층, 각각의 모듈마다 역할 부여).
• 비지니스 로직(트랜잭션, 데이터를 처리하기 위한 흐름)을 수행한다.
• 주로 상태 변화를 처리한다.
  • 자바에서는 Entity, VO, Aggregate로 나뉘어서 관리한다. (도메인 주도 설계)
• Entity(영속성에서 테이블에 매핑되는 클래스가 주로 대상)가 주로 대상이다. (orm)
• 데이터와 행동을 갖는 객체이다.

 

3) View

• 사용자에게 보여지는 사용자 인터페이스(UI, 화면)를 담당하는 레이어이다.
• 웹에서는 웹 브라우저로 렌더링 되는 페이지가 해당된다.
• 모델이 처리한 데이터를 받아서 합산하고, 사용자(클라이언트)의 브라우저로 렌더링 되는 페이지이다.
• 데이터, 로직은 없어야 한다. (철저하게 화면 구성만 담당)
  • 모든 데이터 처리는 Model 쪽에서 처리.
  • 안 그러면 기능이 변경될 때 화면 코드도 같이 변경해야 한다. (기능이 변경되면 Model만 건드리겠다는 취지)
• 동적으로 처리되어야 할 데이터를 시각화해준다.
• 상황과 도메인에 맞게 다른 값을 가져야 하는 데이터들에 대해서만 모델에서 받아온다.

 

4) Controller

• Model과 View를 연결해주는 레이어이다. (일종의 중개자)
• 컨트롤러는 사용자의 요청(url, 링크 클릭)에 맞는 서비스를 실행하게 된다. (Model에서 진행)
• 처리한 Model의 값을 View에 전달해서 반환한다.
• 사용자의 요청(웹 브라우저로 들어오는 요청)을 가장 먼저 마주한다.