교차 출처 리소스 공유
브라우저가 한 출처의 웹 페이지에서 다른 출처의 API를 호출할 때 적용하는 보안 규칙이다. 프론트엔드와 백엔드 도메인이 다르면 서버가 어떤 출처를 허용하는지 응답 헤더로 알려줘야 한다. 바이브 코딩 초보자가 '브라우저에서는 막히는데 터미널 curl은 된다'는 상황을 만날 때 CORS가 원인인 경우가 많다.
영어 표기
CORS (Cross-Origin Resource Sharing)
예시
localhost:3000 프론트엔드가 api.example.com을 호출하려면 API 서버가 해당 출처를 허용하는 CORS 헤더를 내려줘야 한다.
- 카테고리
- 보안·인증
- 난이도
- basic
- 태그
- CORS · 브라우저보안
- 슬러그
- cors
- 상태
- published
- 정렬 순서
- 108
함께 읽기
연관 용어
보안·인증
쿠키
영어 표기 Cookie
웹사이트가 브라우저에 저장해 두는 작은 데이터 조각이다. 로그인 상태 유지, 장바구니, 언어 설정처럼 다음 방문에도 기억해야 하는 정보를 담을 때 쓰인다. 편리하지만 인증 쿠키를 잘못 다루면 계정 탈취 위험이 생기므로 httpOnly, secure, sameSite 같은 보안 옵션을 함께 이해해야 한다.
보안·인증
세션
영어 표기 Session
사용자가 사이트에 접속해 있는 동안 서버가 유지하는 상태 정보이다. 보통 브라우저에는 세션 ID만 쿠키로 저장하고, 실제 로그인 사용자 정보와 권한은 서버나 데이터베이스에 둔다. 바이브 코딩에서 로그인 기능을 만들 때 세션과 쿠키의 차이를 이해하면 민감한 사용자 정보를 브라우저에 과도하게 저장하는 실수를 줄일 수 있다.
프론트엔드·UI
Next.js 라우트 핸들러
영어 표기 Next.js Route Handler
Next.js App Router에서 app/api/.../route.ts 파일로 만드는 서버 측 API 엔드포인트이다. GET, POST 같은 HTTP 메서드별 함수를 export하여 브라우저 요청을 받고, 데이터베이스 조회나 외부 API 호출 뒤 JSON 응답을 반환한다. 바이브 코딩에서 AI가 프론트엔드 화면만 만들고 저장·조회 API를 빠뜨리거나, 반대로 클라이언트 코드에 비밀 값을 넣는 실수를 할 수 있으므로 라우트 핸들러는 '브라우저에 노출하면 안 되는 서버 작업을 담는 안전한 경계'로 이해해야 한다.