Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- input class
- Native select
- OSI 7계층
- 백준 nodeJS
- kakao map api
- Node js
- 알고리즘
- 정규표현식
- 코드스테이츠 메인프로젝트
- 코딩테스트
- 이벤트 루프
- 버블정렬
- 자료구조
- 페이지네이션
- 유데미
- 자바스크립트
- 프론트엔드
- nodejs
- 백준
- 코드스테이츠
- sort
- 재귀함수
- primitive type
- javascript
- react js
- MUI
- JavaScript Deep Dive
- CSS
- 배열
- next/Image
Archives
- Today
- Total
신입 개발자에서 시니어 개발자가 되기까지
[코드스테이츠 section2] mini node server, SOP, CORS 본문
mini node server 만들기를 했는데, 여기서 사용하는 메서드들에 대해 따로 알려주지를 않아서 찾아봤다.
1. SOP
- Same-Origin Policy, 동일 출처 정책
- 같은 출처의 리소스만 공유가 가능하다
a. 출처
- 출처는 프로토콜(https), 호스트(www.codestates.com), 포트(443)의 조합을 뜻하며 이중 하나라도 다르다면 리소스 공유가 불가하다.
b. 리소스
- 대표적으로 로그인 정보. 출처가 다른데 네이버 로그인 정보가 공유가 된다면 로그인 정보를 노리는 코드가 있는 사이트에 방문 했을 때, 아이디가 해킹될 것이다.
c. CORS
- 위 문제 상황에서 필요한 것이 CORS다. Cross-Origin Resource Sharing, 교차 출처 리소스 공유는 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제다.
2. CORS 동작방식
a. 프리플라이트 요청(preFlight Request)
- 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지 확인한다.
b. 접근 권한이 없을 때
- CORS 에러가 난다.
c. 프리플라이트 요청을 하는 이유
i. 미리 권한을 확인하기 때문에, 불필요한 리소스 전송을 막아준다. 리소스 측면에서 효율적이라고 하는데 서버 측에서 효율적이라는 뜻인 듯하다?? 리소스가 효율적이라는게 뭔지 모르겠음.
ii. CORS에 대비가 되어있지 않은 서버를 보호할 수 있다.
d. 단순 요청
- 단순 요청의 경우 프리플라이트 요청을 생략한다.
e. Credentialed Request
- 인증정보를 포함한 요청, 클라이언트, 서버 모두 CORS 설정이 필요하다.
- 요청 헤더에 withCredentials : true 응답 헤더에 Access-Control-Allow-Credentials : true가 있어야 한다. 서버측에서는 이 요청을 와일드카드로 처리할 수 없다. (인증정보요청을 와일드카드로 처리하면 에러뜸)
node Js http 모듈 기본 개념
node JS 내장 코어 모듈 5가지
a. https
b. http
c. os
d. fs
e. path
http
a. require('http')
- require의 인자에 아무 경로도 주지 않으면 글로벌 모듈을 찾는다.
b. createServer method
- 서버를 만들고 requestListener(콜백함수)를 인수로 받는다.
- 서버에 요청이 들어올 때마다 콜백함수를 실행한다.
- 콜백 함수는 req,res 두 개의 파라미터를 가진다.
c. listen method
- createServer의 메서드다. node.js가 스크립트를 바로 종료하지 않고 계속 실행하면서 요청을 듣는다.
- 인자는 port 번호.
HTTP 헤더
a. General header
- 요청과 응답 모두에 적용되지만 바디에서 최종적으로 전송되는 데이터와는 관련없는 헤더.b. request headerd. Entity header
- c. response header
- 컨텐츠 길이, MIME 타입, 엔티티 바디에 대한 정보를 포함.
요청 본문 분석
a. Streams & Buffers
- request의 데이터가 그대로 전달되는 것이 아니라 data stream의 형식으로 보내진다. stream은 지속적인 프로세스다.
- 데이터 파일이 큰 경우 쪼개서 보내야 하는데, 이렇게 하나의 데이터를 연속적으로 쪼개서 보내는 데이터를 stream이라고 보면 될 것 같다. 그리고 쪼개진 데이터의 단위를 chunk라고 한다.
- 이렇게 차례대로 들어오는 data를 처리하기 위해 buffer를 이용한다. buffer는 bus 정류장과 같다. 하나의 data가 다 들어오기 전에 chunk단위의 데이터가 중간중간 하차시켜서 완전히 data가 파싱이 되지 않아도 이 chunk를 다룰 수 있게 해준다.
b. request.on 메서드
- on 메서드는 특정 이벤트를 listen하도록 한다.
i. data event : 새청크가 읽힐 준비가 될 때마다 데이터 이벤트가 발생한다. 요청에 대한 모든 데이터를 받을 때까지 실행된다.
ii. end event : 들어온 데이터를 분석한 후 발생되는 이벤트.
iii. 두 번째 인자로 콜백함수를 전달하면 이벤트가 발생할 때마다 실행됨.
'코드스테이츠 > section2' 카테고리의 다른 글
[section2] 네트워크(OSI7, DNS, HTTP) (2) | 2022.10.12 |
---|---|
[Section2] Rest API (0) | 2022.10.06 |
[section2] React State & Props (1) | 2022.10.04 |
[section2] SPA(Single Page Application) (0) | 2022.09.30 |
[section2] React intro (0) | 2022.09.30 |