목차
- Next.js 서버액션과 인증/인가 시스템 이해
- React Query를 활용한 상태관리와 인증 데이터
- JWT, Session, 쿠키의 역할과 보안 고려사항
- Next.js 라우팅 그룹과 레이아웃 분리 방법
- CORS 문제와 프론트-백 협업 팁
- React 프로젝트 리팩토링 및 코드 구조화 팁
- 외장하드 안전 분리와 데이터 복구 방안
- 개발 현장의 소소한 순간과 분위기 공유
- 진로 및 연봉 관련 이야기
- 그 외 다양한 Q&A 및 소통 내용
1. Next.js 서버액션과 인증/인가 시스템 이해 🔐
-
핵심
Next.js의 서버액션은 단순히 서버에 있는 함수일 뿐이며, 클라이언트에 1:1로 매칭되지 않는다.
따라서 서버액션을 사용한다고 해서 인증/인가 절차를 생략할 수는 없다. -
설명
서버액션은 서버측 함수 호출로 외부 API 요청과 다르게 느껴질 수 있다.
하지만 실제로는 HTTP의 공개 엔드포인트처럼 동작하므로 반드시 보안을 신경 써야 한다.
인증/인가 시스템 없이 사용자를 구분하거나 권한을 확인하면 심각한 보안 문제가 생길 수 있다. -
의견
JWT나 세션 기반의 인증체계를 도입하여 사용자 고유 식별자를 안전하게 관리하는 것이 중요하다.
인증관련 정보는 클라이언트에서는 휘발성 상태가 아닌, 쿠키나 로컬 스토리지 등에 안전하게 저장하여 인증 상태를 유지해야 한다.
2. React Query를 활용한 상태관리와 인증 데이터 ⚛️
-
핵심
React Query는 서버 상태 관리를 위해 최적화된 도구이다.
하지만 클라이언트 메모리에 데이터를 저장하므로 페이지 리로드 시 데이터가 초기화된다. -
설명
인증 정보를 React Query로 전역 상태처럼 관리할 수는 있지만, 휘발성 정보이기에
쿠키나 로컬 스토리지 같은 퍼시스턴트 저장소를 함께 사용해야 실제 인증 유지에 적합하다. -
의견
React Query는 개인화 데이터를 페치하고 뮤테이션 하기 좋은 도구지만, 인증 데이터는 별도의 저장 매커니즘이 반드시 필요하다.
3. JWT, Session, 쿠키의 역할과 보안 고려사항 🔑
-
핵심
JWT(Json Web Token)와 세션은 인증과 인가 정보를 안전하게 유지관리하는 표준 방법이다.
쿠키에 저장하면 클라이언트 재접속 시에도 인증 정보를 유지할 수 있다. -
설명
JWT는 자체적으로 암호화된 토큰으로 사용자 신원을 증명한다.
세션은 서버가 인증된 사용자 정보를 메모리나 데이터베이스에 저장하고, 클라이언트에는 세션 식별자만 쿠키에 저장한다.
둘 다 만료시간, 다중 로그인 제한 등 보안 이슈를 관리하기 적합하다. -
팁
- 쿠키는 HttpOnly 속성으로 자바스크립트 접근을 차단해 XSS 공격을 방지 가능
- HTTPS 환경에서는 Secure 속성을 꼭 넣어 쿠키를 안전하게 주고받아야 함
- JWT 사용 시 만료시간 및 리프레시 토큰 전략이 필수
4. Next.js 라우팅 그룹과 레이아웃 분리 방법 📁
-
핵심
Next.js 13부터는 라우팅 그룹(route groups) 폴더 명명법을 통해 특정 경로에만 별도 레이아웃을 적용할 수 있다. -
설명
예를 들어, /posts/create페이지에만 지정된 레이아웃을 쓰고 싶다면, (group)형태의 라우트 그룹 폴더를 사용하면 된다.
이렇게 하면 루트 레이아웃을 무시하거나 독립적으로 다른 레이아웃 구성을 할 수 있다. -
참고 링크
https://rocketengine.tistory.com/entry/NextJS-13-Routing-Route-Groups
5. CORS 문제와 프론트-백 협업 팁 🔄
-
핵심
CORS(Cross-Origin Resource Sharing) 에러는 도메인이 다른 서버에 API 요청할 때 발생하는 보안장치 문제다. -
설명
클라이언트가 프론트엔드에서 백엔드 API를 직접 호출할 때, 백엔드가 허용하는 도메인 리스트에 없는 경우 브라우저에서 요청을 차단한다.
이를 해결하기 위해서는 백엔드에서 CORS 설정을 올바르게 해야 하거나, 프록시 서버를 활용해 도메인을 우회할 수 있다. -
팁
- Next.js에서는 서버액션 또는 rewrites 기능을 이용해 프록시 처리를 쉽게 할 수 있음
- 협업 시 백엔드와 CORS 정책 조율이 필수적이며, “알아서 공부하라”는 대답은 무책임하므로 원인 및 대책을 공유하자.
6. React 프로젝트 리팩토링 및 코드 구조화 팁 🧩
-
핵심
함수 및 컴포넌트가 많아 하나의 파일이 길어질 경우, 도메인별로 폴더를 나누거나 기능별로 모듈화하는 것이 가독성과 유지보수에 좋다. -
설명
- 단순히 길다고 분리하지 말고, 역할과 목적을 명확히 구분하여 코드 영역을 나누자
- 자주 재사용하는 함수 또는 컴포넌트는 별도 파일로 분리하고, 팀원들과 코드 스타일 가이드를 공유하면 협업이 수월해진다.
-
팁
- 팀원끼리 구체적인 기준을 정하고, PR 또는 코드리뷰 과정에서 구조에 대해 논의할 것
- 초보자는 먼저 도메인별, 기능별 분리부터 시도해보는 걸 추천함
7. 외장하드 안전 분리와 데이터 복구 방안 💾
-
핵심
외장하드를 사용 후 즉시 추출하지 말고, 안전제거(Eject) 과정을 거치지 않으면 데이터 손상 가능성이 있다. -
설명
운영체제에서는 디스크에 임시로 데이터를 캐시할 수 있기 때문에, 작업 종료 후 적절한 분리명령 없이 USB를 뽑으면 정상 인식이 안 될 수 있다.
만약 인식이 안 되면 다른 컴퓨터나 운영체제(예: 맥, 윈도우, 스마트폰 OTG)에서 시도해보거나, 전문 데이터 복구 업체에 의뢰하는 방법도 있다.
8. 개발 현장의 소소한 순간과 분위기 ☕
- 개발자들 간의 친근한 농담과 공감, 퇴근 이야기, 연봉 인상 축하 등이 활발하게 이루어짐
- 업무 외에도 팀 문화와 동료 간 소통이 중요함을 다시 한 번 느끼게 하는 대화들
9. 진로 및 연봉 관련 이야기 💼
- 연봉 인상률은 평균 4~5%가 많으나, 개인 역량 및 회사 사정에 따라 다름
- 해외 경력 인정, 경력 개발 방향, NFT/블록체인 관련 개발자 관심도 높음
- 좋은 연봉도 중요하지만, 팀원과 문화, 일하는 방식도 고민할 요소임
10. 그 외 Q&A 및 소통 내용 🌟
- React input 태그 maxLength 타입 처리법 및 타입스크립트 팁
- MacBook에서 외장 모니터 화면 녹화 시 Permission 오류 문제
- Next.js에서 가상 키보드 강제 호출의 브라우저 정책 한계
- 인기 CSS 프레임워크 TailwindCSS 4버전 관련 이야기
- 블록체인 SI회사 업무 및 개발자의 잡담 등
면접팁⚡
- Next.js 서버액션과 인증/인가 절차에 대해 정확하게 이해하고 설명할 수 있어야 함
(서버액션은 단순히 서버 함수 호출일 뿐, 공개 API 엔드포인트와 동일한 보안 고려가 필요함) - JWT와 세션의 차이점, 쿠키 저장방식의 장단점 및 보안 위협 대응책에 대해 숙지할 것
- CORS 이슈와 이를 해결하는 일반적인 방법들을 알고, 팀 간 협업 시 효과적으로 소통할 준비를 하자
- React 코드 구조화할 때 도메인이나 기능 우선 분리 전략을 설명할 수 있으면 좋음
링크🔗
-
Next.js 공식 문서 – 인증 가이드
https://nextjs.org/docs/app/building-your-application/authentication -
Next.js 공식 문서 – 서버 액션 보안
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#security -
Next.js 13 라우팅 그룹 정리
https://rocketengine.tistory.com/entry/NextJS-13-Routing-Route-Groups -
Virtual Keyboard JS 라이브러리
https://virtual-keyboard.js.org/