37일차 Node.js

정상희·2025년 5월 12일
corshttphttpsnetworknodejssop

코딩공부

목록 보기
47/60
post-thumbnail

현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

Nods.js

1. 네트워크의 기본 구조와 개념

1) 네트워크(Network)란?

  • 정의: 두 대 이상의 컴퓨터나 장비가 서로 데이터를 주고받기 위해 연결된 구조
  • 목적: 자원 공유(파일, 프린터, 인터넷 등), 통신, 데이터 전송

2) 네트워크의 기본 구성 요소

구성 요소설명
호스트(Host)네트워크에 연결된 컴퓨터나 장비 (예: PC, 스마트폰 등)
라우터(Router)네트워크 간 데이터 경로를 선택하고 전달
스위치(Switch)동일 네트워크 내 장비를 연결하고 데이터 전송 제어
허브(Hub)여러 장치를 단순 연결 (요즘은 거의 사용되지 않음)
모뎀(Modem)아날로그 ↔ 디지털 신호 변환, 인터넷 제공

3) 네트워크의 종류


구분LAN (Local Area Network)MAN (Metropolitan Area Network)WAN (Wide Area Network)
정의근거리 통신망도시권 통신망광역 통신망
범위사무실, 집, 학교 등 작은 지역도시 하나 정도의 중간 규모 지역국가, 대륙 등 매우 넓은 지역
속도빠름 (1Gbps 이상 가능)보통 빠름느린 편 (거리·회선 상태에 따라 다름)
소유자일반적으로 개인이나 조직 소유보통 기업이나 지역 ISP가 관리국가, 대기업, ISP 등
예시집에서 사용하는 와이파이, 회사 내 네트워크시청, 공공기관, 대학 캠퍼스 간 연결망인터넷, 국가 간 연결망
비용저렴함중간매우 높음

4) 네트워크 계층

  • OSI 7계층(OSI 7 Layers) 개요
    OSI = Open Systems Interconnection, 국제표준화기구(ISO)가 제안한 모델
    각 계층은 상하 계층과 협력하여 데이터를 전달하거나 처리.
계층 (번호)이름 (한글)주요 역할 / 기능예시
7응용 계층 (Application)사용자와 직접 통신하는 계층HTTP, FTP, SMTP
6표현 계층 (Presentation)데이터의 형식, 인코딩, 암호화/복호화 처리JPEG, MP4, SSL
5세션 계층 (Session)통신 세션의 시작, 유지, 종료 관리API, NetBIOS
4전송 계층 (Transport)데이터의 정확한 전송 보장 (오류 처리, 흐름 제어)TCP, UDP
3네트워크 계층 (Network)경로 설정, IP 주소 기반의 데이터 전달IP, ICMP, 라우팅
2데이터 링크 계층 (Data Link)MAC 주소 기반, 오류검출, 프레임 단위 전송Ethernet, 스위치
1물리 계층 (Physical)전기적 신호, 케이블·하드웨어 등 실제 전송 매체케이블, 허브, 전압 등
  • 전송 시 (발신 측): 7 → 1 순으로 계층을 거쳐 데이터가 전송된다.
  • 수신 시 (수신 측): 1 → 7 순으로 계층을 거쳐 원래 데이터로 복원된다.

각 계층의 역할 간단 정리

a. 물리 계층

  • 전기 신호, 광신호 등 실제 데이터를 전송
  • 케이블, 리피터, 허브 등 하드웨어 관련

b. 데이터 링크 계층

  • 프레임 단위 전송, MAC 주소로 대상 구분
  • 오류 감지, 흐름 제어 등 수행
  • 스위치 장비에서 주로 작동

c. 네트워크 계층

  • IP 주소를 기반으로 패킷 라우팅
  • 여러 네트워크 간 데이터 전송 (ex. A국 → B국)

d. 전송 계층

  • 신뢰성 있는 전송 보장 (TCP) 또는 빠른 전송 (UDP)
  • 포트 번호를 사용해 앱 식별 (ex. 80, 443)

e. 세션 계층

  • 통신을 위한 세션 생성 및 유지
    예: 로그인 유지, 파일 전송 시 연결 상태

f. 표현 계층

  • 데이터 형식 변환, 암호화/복호화
    예: 텍스트 ↔ 바이너리, SSL 처리

g. 응용 계층

  • 사용자가 접하는 소프트웨어와 연결
    예: 웹 브라우저, 이메일 클라이언트

5) 데이터 캡슐화 : 캡슐화와 역캡슐화의 개념 및 중요성 설명

a. 캡슐화(Encapsulation)란?

데이터를 보낼 때, 상위 계층에서 하위 계층으로 내려가면서 각 계층이 자신만의 헤더(제어 정보)를 붙이는 과정

예를 들어 (OSI 7계층 기준)

[응용 계층 데이터]
 → 표현 계층 헤더 + 데이터
 → 세션 계층 헤더 + 데이터
 → 전송 계층 헤더(TCP/UDP) + 데이터
 → 네트워크 계층 헤더(IP) + 데이터
 → 데이터 링크 계층 헤더(MAC) + 데이터 + 트레일러
 → 물리 계층: 전기/광신호로 전송
  • 이처럼 각 계층은 자신의 역할에 필요한 정보를 헤더에 붙인다.
  • 마치 택배 상자에 주소, 연락처, 운송 정보 등을 하나씩 붙이는 것과 같다.

b. 역캡슐화(Decapsulation)란?

데이터를 받을 때, 하위 계층에서 상위 계층으로 올라가면서 각 계층이 자신의 헤더를 제거하고 처리하는 과정

예를 들어 (OSI 7계층 기준)

[물리 계층] 전기 신호 수신
 → 데이터 링크 계층: MAC 헤더 제거
 → 네트워크 계층: IP 헤더 제거
 → 전송 계층: TCP/UDP 헤더 제거
 → 세션/표현/응용 계층까지 도달

c. 중요성

이유설명
표준화된 통신 가능서로 다른 장비/운영체제 간에도 일관된 통신이 가능
유지보수 용이각 계층이 독립적으로 작동하므로 기능 분리 및 디버깅이 쉬움
보안, 오류 처리 가능각 계층에서 암호화, 오류 제어, 흐름 제어 등 추가 기능 처리
데이터 추적 및 분석 용이헤더 정보를 분석하여 패킷 경로, 문제 원인 파악 가능


2. HTTP와 HTTPS의 차이점과 보안 메커니즘 이해하기


1) HTTP란?

HTTP(HyperText Transfer Protocol)는 웹에서 클라이언트(보통 웹 브라우저)와 서버가 데이터를 주고받기 위한 통신 규약(Protocol)이다.

a. 무상태성

HTTP는 요청 간의 상태를 저장하지 않기 때문에 "무상태 프로토콜"이라고 하며, 로그인 유지 같은 기능은 쿠키, 세션, 토큰 등으로 상태 유지를 따로 구현해야 한다.

b. 비연결성

HTTP의 비연결성이란, 요청-응답 후 연결을 종료하는 구조를 말하며, 이는 서버 자원을 아끼지만, 성능 문제 때문에 Keep-Alive 같은 기술로 보완된다.


2) HTTPS란?

a. 기본 개념

HTTPS (HyperText Transfer Protocol Secure)는 웹에서 데이터를 주고받을 때, 암호화된 보안 연결을 제공하는 HTTP의 보안 버전

HTTPS = HTTP + SSL/TLS

  • HTTP: 데이터를 평문(암호화 없이)으로 전송 → 중간에 탈취 가능
  • HTTPS: SSL/TLS 프로토콜을 이용해 데이터를 암호화한 후 전송 → 보안 강화

b. 필요성

이유설명
🔒 데이터 암호화로그인 정보, 카드 번호 등 중요 데이터가 노출되지 않도록 암호화
🧑‍💻 중간자 공격 방지(MITM)누군가 통신을 가로채고 조작하는 것을 차단
✅ 웹사이트 신뢰성 확보브라우저에 🔒자물쇠 표시가 뜨며 사용자 신뢰 상승
📶 데이터 무결성 보장전송 중 데이터가 변경되지 않았음을 확인 가능
📈 검색 엔진 최적화(SEO)구글 등 주요 검색 엔진에서 HTTPS 사이트를 우선 노출

3) 암호화 방식

a. 대칭키 암호화 (Symmetric Encryption) : 하나의 키(같은 키)를 사용해 데이터를 암호화하고 복호화하는 방식

🔸 특징

  • 암호화 키 = 복호화 키 (동일)
  • 속도 빠름
  • 키가 유출되면 보안 위험 큼
  • 키를 안전하게 공유하는 것이 중요

🔸 예시:

  • AES (Advanced Encryption Standard)
  • DES (Data Encryption Standard)
보내는 사람 → [암호화 (키 A)] → 암호문
           암호문 → [복호화 (키 A)] → 받는 사람

b. 비대칭키 암호화 (Asymmetric Encryption) : 두 개의 키를 사용하는 암호화 방식

  • 공개키(Public Key): 누구나 알 수 있음
  • 개인키(Private Key): 본인만 알고 있어야 함

🔸 특징

  • 암호화 키 ≠ 복호화 키
  • 공개키로 암호화한 데이터는 개인키로만 복호화 가능
  • 보안성 높음, 속도는 느림
  • 주로 키 교환, 인증에 사용

🔸 예시:

  • RSA, ECC, DSA
보내는 사람 → [암호화 (수신자의 공개키)] → 암호문
           암호문 → [복호화 (수신자의 개인키)] → 받는 사람

c. 대칭키 암호화와 비대칭키 암호화의 차이

항목대칭키 암호화비대칭키 암호화
키 개수1개 (같은 키 사용)2개 (공개키 + 개인키)
속도빠름느림
보안성키 유출 시 매우 위험키 교환 과정에서 안전
사용 용도데이터 대량 암호화인증, 키 교환, HTTPS 초기 단계
대표 알고리즘AES, DES, RC4RSA, ECC, DSA

대칭키는 빠르지만 키 공유가 위험하고, 비대칭키는 느리지만 키 공유가 안전하다 — 실제 시스템에서는 둘을 적절히 조합해 사용한다.


4) HTTP와 HTTPS의 차이

항목HTTP (HyperText Transfer Protocol)HTTPS (HTTP Secure or HTTP over SSL/TLS)
🔒 보안암호화 X (평문 전송)암호화 O (SSL/TLS 사용)
📡 전송 방식텍스트 그대로 전달암호화된 채널을 통해 전송
🌐 포트 번호기본 포트: 80기본 포트: 443
📜 주소 형식http://example.comhttps://example.com
🧪 무결성 보장보장하지 않음데이터 위/변조 방지 기능 제공
🧑‍💻 인증 기능없음SSL 인증서로 서버 신원 보장
🔍 브라우저 표시일반 텍스트 표시, 때로는 경고 발생🔒 자물쇠 아이콘 표시, “보안 연결” 표시

✅ HTTPS가 제공하는 보안 장점

  • 🔐 암호화 (Encryption)

    • 민감한 정보(비밀번호, 카드 번호 등)를 암호화하여 중간에서 보더라도 해석 불가
    • 평문 전송을 방지하여 데이터 유출을 차단

  • 🛡️ 무결성 (Integrity)

    • 데이터가 전송 중 변경되었는지 검증 가능
    • 악의적인 수정이나 변조를 방지

  • ✅ 인증 (Authentication)

    • SSL 인증서를 통해 서버의 신원을 검증
    • 피싱 사이트 방지, 신뢰할 수 있는 웹사이트 확인 가능

  • 🧑‍🤝‍🧑 사용자 신뢰도 증가
    사용자들이 HTTPS를 신뢰하고 거래나 로그인 등의 행동을 더 안심하고 수행함

  • 📈 SEO에 유리
    구글은 HTTPS 사이트를 검색 순위에서 우선시합니다


5) HTTPS 인증 방식



a. 클라이언트(브라우저)가 HTTPS로 접속 시도

→ 예: https://example.com

b. 서버는 SSL 인증서를 클라이언트에게 전송

  • 인증서에는 다음이 포함됨:
    • 서버 도메인 (CN)
    • 공개키
    • 인증기관(CA)의 서명
    • 유효기간

c. 클라이언트는 인증서를 검증

  • 인증서가 신뢰할 수 있는 CA로부터 발급되었는지 확인
  • 인증서가 위조되거나 만료되지 않았는지 확인
  • 인증서의 도메인과 접속 도메인이 일치하는지 확인

d. 검증이 통과되면,

클라이언트는 세션 키 생성용 정보를 암호화해서 서버에 전달
(이때 서버의 공개키를 사용해 암호화)

e. 이후부터는 대칭키 암호화 방식으로 안전하게 통신



3. CORS와 SOP의 개념 및 구현 방법 이해하기

1) CORS : Cross-Origin Resource Sharing

CORS는 웹 브라우저에서 다른 출처(origin)의 리소스를 안전하게 요청할 수 있도록 허용하는 보안 메커니즘이다.

출처(origin) 구성

  • 프로토콜 (http, https 등)
  • 도메인 (example.com 등)
  • 포트 번호 (80, 443 등)

a. CORS 필요성

기본적으로 브라우저는 SOP(Same-Origin Policy)라는 보안 정책을 따른다.
이 정책은 다른 출처(origin)에서 온 요청은 기본적으로 차단한다.

❗문제 : 웹 앱을 개발하다 보면, 이런 상황이 자주 발생한다.

  • 프론트엔드 서버는 localhost:3000
  • 백엔드 API 서버는 localhost:4000

이 둘은 출처가 다르기 때문에 브라우저는 API 요청을 막는다.

✅ 해결책: CORS
CORS를 이용하면 서버가 명시적으로 특정 출처에서 온 요청을 허용해줄 수 있습니다.

Access-Control-Allow-Origin: http://localhost:3000

→ 브라우저는 해당 요청을 허용하게 됩니다.

b. 작동 원리

  • 클라이언트가 다른 출처로 HTTP 요청
  • 브라우저가 먼저 OPTIONS preflight 요청을 보냄
  • 서버가 CORS 허용 응답 헤더를 포함해 응답
  • 브라우저가 실제 요청을 보냄

c. CORS를 허용하지 않으면?

  • 브라우저에서 보안 에러 발생
  • 콘솔에 "CORS policy: No 'Access-Control-Allow-Origin' header" 오류 출력
  • 요청은 서버에 도달했더라도 응답은 차단

2) SOP: Same-Origin Policy



Same-Origin Policy(SOP)는 웹 브라우저가 서로 다른 출처(origin)의 리소스 간 접근을 제한하는 보안 정책이다.

출처(origin) 구성

  • 프로토콜 (http, https)
  • 호스트 (도메인, IP)
  • 포트 번호
요청 위치자원 위치SOP 판정
https://example.comhttps://example.com✅ 동일 출처
https://example.comhttp://example.com❌ 다른 출처
https://example.comhttps://api.example.com❌ 다른 출처
https://example.com:443https://example.com:8443❌ 다른 출처

a. SOP의 목적

  • XSS(Cross-Site Scripting)나 CSRF(Cross-Site Request Forgery) 같은
    브라우저 기반 공격을 방지
  • 악성 스크립트가 사용자의 로그인 쿠키나 개인정보를 다른 사이트로 몰래 전송하는 행위 차단
// evil.com에서 실행된 JS가 bank.com에 접근 → SOP로 인해 차단
document.cookie; // 다른 출처 쿠키 접근 불가

b. SOP의 한계

  • 🌐 현대 웹 환경에서는 출처가 나뉘는 경우가 많음

    • 프론트엔드와 백엔드가 다른 도메인/포트를 사용하는 SPA(싱글 페이지 앱)
    • API 서버가 별도 도메인에 존재 (api.example.com 등)
      → SOP가 이런 구조에서는 너무 제한적임

  • 📡 교차 출처 리소스 요청이 필요한 경우 많음

    • 이미지, 폰트, Ajax API 등 다양한 리소스를 외부에서 사용
    • SOP는 기본적으로 이런 요청들을 차단함

  • 🔄 해결 수단이 필요함

    • 그래서 등장한 것이 CORS(Cross-Origin Resource Sharing)
      → 서버가 명시적으로 특정 출처에 대한 접근을 허용할 수 있도록 함

3) CORS 작성 방법

a. 필수 CORS 응답 헤더들

헤더 이름설명
Access-Control-Allow-Origin허용할 출처 지정 (* 또는 특정 도메인)
Access-Control-Allow-Methods허용할 HTTP 메서드 지정 (GET, POST 등)
Access-Control-Allow-Headers요청 시 사용할 수 있는 헤더 지정
Access-Control-Allow-Credentials쿠키 포함 요청을 허용할지 여부

b. 예시 Node.js (Express)

const express = require('express');
const cors = require('cors');

const app = express();

// 특정 출처만 허용
app.use(cors({
  origin: 'https://frontend.example.com',
  methods: ['GET', 'POST'],
  credentials: true // 쿠키 허용
}));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS 허용됨!' });
});

c. 예시 Nginx

location /api/ {
  add_header Access-Control-Allow-Origin "https://frontend.example.com";
  add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  add_header Access-Control-Allow-Headers "Content-Type";
  add_header Access-Control-Allow-Credentials "true";
}

d. CORS 작동 방식: 브라우저에서 CORS 흐름

🔹 단순 요청 (Simple Request)
조건이 맞으면 브라우저가 바로 요청을 보낸다.

예: GET, POST 요청이고 Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain일 경우.

흐름
1. 클라이언트: fetch('https://api.example.com/data') 요청
2. 서버: 응답 시 Access-Control-Allow-Origin: https://client.com 헤더 포함
3. 브라우저: 응답 허용

🔹 프리플라이트 요청 (Preflight Request)
조건을 벗어난 요청은 브라우저가 먼저 OPTIONS 메서드로 "물어보고" → 서버가 OK하면 → 실제 요청을 진행.

예:

  • PUT, DELETE 같은 특수 메서드
  • Content-Type: application/json
  • Custom header 사용 등

흐름
1. 클라이언트 → OPTIONS 요청 전송 (프리플라이트)
2. 서버 → 다음 헤더 포함 응답

Access-Control-Allow-Origin: https://client.com
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
  1. 브라우저 → 실제 POST 요청 전송
  2. 서버 → 응답 전송
  3. 브라우저 → 응답 처리

🔹 CORS에서 자주 보는 오류

Access to fetch at 'https://api.com' from origin 'http://localhost:3000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...

→ 서버에서 해당 도메인을 CORS로 허용하지 않았기 때문에 발생합니다.

profile
정상희
UI/UX디자이너의 코딩 공부
이전 포스트

Mini_Project_03

다음 포스트

38일차 Node.js

0개의 댓글