Frontend · UI 3

CORS를 제대로 이해하고 안전하게 설정하기

CORS? 서버 보안 기능이 아니라 브라우저 정책!CORS(Cross-Origin Resource Sharing)의 본질은 브라우저의 동일 출처 정책(Same-Origin Policy SOP)을 예외적으로 완화하기 위한 규칙입니다. 보통 개발자는 "프론트에서 API호출이 실패했다"라고 이해하고, console창에 "blocked by CORS policy"라고 뜨기 때문에, 서버가 막았다고 생각할 수 있습니다.실제로는 브라우저가 응답을 JS에 전달하지 않은 것인데, 실패 지점이 백엔드처럼 보입니다. 또한, 해당 에러는 Access-Control-Allow-Origin 같은 헤더를 추가하면 문제가 해결되기 때문에 오해할 수 있습니다. 즉 CORS는 서버가 막는게 아니라 브라우저가 막는 것이고, 서버는 이 ..

Frontend · UI 2026.01.12

next.js 모듈 분리에 관한 고민

IAM 을 회사에서 구축하며, 각 서비스 개발자들이 IAM을 연동하는데 도움을 주는 admin UI를 개발 하고 있다.Next.js 를 사용해서 개발하고 있는데, 그냥 코드를 짜도 동작은 하지만, 모듈 분리를 통해 유지보수를 수월하도록 변경했다. 💫 모듈 분리를 하는 이유✅ 유지보수성 향상한 파일에 모든 기능이 몰려 있으면 수정할 때 영향도가 커지고, 실수할 확률도 높아집니다. 모듈을 분리하면 코드 수정 범위를 줄일 수 있어 안정성이 증가합니다.✅ 재사용성 증가API 요청, 유틸 함수, 검증 로직 등을 모듈화하면 여러 곳에서 재사용할 수 있어 코드 중복을 방지할 수 있습니다.✅ 협업 효율성 향상여러 명이 동시에 작업할 때, 코드가 깔끔하게 정리되어 있으면 충돌을 줄이고 작업 분배가 쉬워집니다.✅ 성능 ..

Frontend · UI 2025.02.21