[스나이퍼팩토리] 한컴AI아카데미 21주차

 

 

 

 

노션에 적은 이번 주 한 일 : 

 

 

지난 주와 지지난 주에 미친듯이 개발을 하다보니까 지피티와 협업(ㅋ)한 코드 중에 이해 못 한 것들이 꽤 많아서 퇴근하고 나서 시간을 투자해서 따로 공부를 하였다. 그 과정에서 코드 오류도 발견하고 뿌듯했던 시간이었음. 이번 주에도 계속 그 과정을 반복해야할듯. 이제 진짜 거의 한달정도밖에 안 남아서 소름 ㄷㄷ  시간 빠르구나

그리고 강의 초반에 자바스크립트/리액트 배우면서 죽어도 이해 안 되던 개념들이 약간 조급해지니까 머리에 때려넣으면서 이해됨. 사실 쉬운 내용이었는데 그때는 급할 거 없어서 대충 '아 뭔소리야 대체.. 패스!' 이런 것도 맞긴 함 ㅋㅋ     

하여튼 이번 주에 프로젝트할 때 백엔드 서버랑 연결하는 작업해야해서 HTTP 통신 관련해서 좀 공부해봤음 

 

 

---

CORS 정책

- 문제 : 웹 브라우저는 보안상 스크립트가 자기 출처(origin) 이외의 자원에 무분별하게 접근하지 못하게 막고 있다. 즉, 프론트엔드가 localhost:3000, 백엔드가 localhost:8000이라면 서로 출처가 다르기 때문에 CORS 정책에 의해 요청이 막힐 수 있음.

-  CORS란?  
"교차 출처 리소스 공유"라는 뜻으로, 브라우저가 다른 출처(origin)에 있는 리소스를 요청할 때 보안을 위해 제한하는 정책

- 출처(origin)란? 
프로토콜 + 도메인 + 포트번호

- 해결 방법 : 백엔드에서 CORS 허용 설정

// FastAPI 예시 (Python)

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # 허용할 프론트 URL
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

 

 

---

 

ORIGIN (URL 식별요소)

웹 개발에서 프로토콜, 도메인, 포트는 클라이언트(브라우저 등)가 서버에 요청을 보낼 때 "어디에", "어떻게" 연결할지를 결정하는 핵심 요소

1. 프로토콜 (Protocol)

통신 방식을 정해주는 규칙으로 서버와 클라이언트가 어떻게 데이터를 주고받을지를 정의. 

- http: 데이터를 암호화하지 않고 전송 (80번 포트 사용)
- https: 데이터를 암호화해서 전송 (443번 포트 사용, 보안 강화)
- ftp: 파일 전송을 위한 프로토콜
- ws / wss: 웹소켓 통신용 (실시간 양방향)

비유하자면, 택배를 보낼 때 어떤 운송수단(비행기, 트럭, 드론 등)을 쓸지 정하는 것

 

2. 도메인 (Domain)

어디에 보낼지를 나타내는 주소.사람이 이해할 수 있는 형태로 만든 서버 주소 (IP 주소의 별명처럼).

 

- 예시: www.google.com,  localhost (내 컴퓨터), example.com 

- 도메인은 실제로는 IP 주소(예: 142.250.196.36)로 바뀌어서 동작하고, 이걸 도와주는 게 DNS 서버임.

 

비유하자면, "택배를 보낼 집 주소"

 

3. 포트 (Port)

서버 안에서 어떤 프로그램(서비스)에 요청을 보낼지 결정. 서버는 동시에 여러 서비스를 돌리는데, 포트 번호로 각각을 구분한다.

 

- :80 → HTTP 기본 포트

- :443 → HTTPS 기본 포트

- :3000 → 개발 서버 (React 등)

- :8000, :8080 → 종종 API 서버나 테스트 서버에서 사용

 

비유하자면, "그 집(서버) 안에 있는 어떤 방(서비스)에 택배를 두고 올지 정하는 것"

 

 

정리

https://localhost:8000/api/documents

- https → 보안 통신 방식 사용

- localhost → 내 컴퓨터

- 8000 → FastAPI 서버 포트

- /api/documents → 요청 경로

 

 

 

다음 주에는 EC2 서버에 우리 서비스 띄우는 작업을 할 것임 빠이팅 !!! 

 

 

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성되었습니다.