COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-15

목차

  1. Next.js에서 JWT 저장 위치와 서버/클라이언트 컴포넌트 사용 문제
  2. httpOnly 쿠키와 클라이언트 접근 제한
  3. Next.js 인증 라이브러리 및 대안들
  4. CORS와 Mixed Content 문제 경험 공유
  5. React 상태관리 라이브러리 선택 이야기
  6. 리액트 생태계 및 프레임워크 비교 (Next.js, Remix, SolidJS 등)
  7. npm 패키지 소스코드 확인 방법
  8. TypeScript의 초기 진입 난이도와 사용법 조언
  9. 디자인 시스템과 개발 협업 경험
  10. 개발자 일상 및 친목 대화 소소한 이야기

1. Next.js에서 JWT 저장 위치와 서버/클라이언트 컴포넌트 사용 문제

  • JWT accessToken 저장 위치는 보안과 컴포넌트 사용성에 따라 고민이 많음.
  • 로컬스토리지에 저장하면 서버 컴포넌트(SSR)에서 접근 불가.
    서버 컴포넌트는 서버에서 실행되므로 브라우저 저장소를 읽을 수 없음.
  • 쿠키에 저장하면 httpOnly 설정 유무에 따라 클라이언트에서 접근 실패 가능.
    httpOnly 쿠키는 클라이언트 JavaScript 공격을 막기 위해 브라우저에서 읽지 못함.
  • 실무 팁: react-cookie 같이 쿠키를 편리하게 다룰 수 있는 라이브러리 활용 권장.
  • query string이나 URL에 토큰을 넣는 것은 보안상 매우 위험하므로 권장하지 않음.
  • Next.js 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 이해하는 것이 중요함.
    Next.js는 컴포넌트별로 서버/클라이언트 실행 환경이 분리돼 임의 접근이 불가능함.

2. httpOnly 쿠키와 클라이언트 접근 제한

  • httpOnly 쿠키는 보안 강화용으로 JS 접근 불가 설정이다.
  • 따라서 클라이언트 컴포넌트에서 직접 쿠키를 읽을 수 없고, 이를 우회하려면 서버에서 쿠키를 읽고 필요한 데이터를 응답 헤더나 API로 내려줘야 함.
  • httpOnly 해제를 권장하지 않음. 대신 서버-클라이언트 간 통신 구조 설계를 고민하는 것이 좋음.

3. Next.js 인증 라이브러리 및 대안들

  • next-auth는 인증을 쉽게 구현해 주는 Next.js 전용 라이브러리지만,
    • 초창기 문서가 불충분하고 버그가 많아 호불호가 있음.
    • 최신 버전(v5 이상)에서는 많이 개선됨.
  • 커스터마이징이 어려운 편이라, 복잡한 요구사항이 있으면 직접 구현하거나 iron-session 같은 심플한 세션관리 라이브러리를 선택하기도 함.
  • 주변에 실제 사용하는 사례가 적고, 문제 발생 시 지뢰를 밟은 느낌일 수 있음.
  • 용도와 팀 상황에 따라 정해서 사용하는 것이 바람직함.

4. CORS와 Mixed Content 문제 경험 공유

  • 개발 중 백엔드와 프론트엔드 분리시 CORS(Cross-Origin Resource Sharing) 문제를 자주 경험함.
  • HTTPS 환경에서 HTTP 리소스 요청 시 'Mixed Content' 경고 발생 가능.
    HTTPS 페이지에서 HTTP 리소스를 불러오면 브라우저는 보안 문제로 차단함.
  • 해결책:
    • 서버와 클라이언트 모두 HTTPS로 통일
    • CORS 설정 올바르게 적용
    • 프록시 서버 사용 등을 검토

5. React 상태관리 라이브러리 선택 이야기

  • 많이 쓰는 상태관리 라이브러리는 Recoil, Zustand, Jotai(조타이) 등이 있음.
  • 개인적으로 Zustand를 선호하는 경우가 많음.
  • 어떤 라이브러리를 써야 할지 고민될 때는 복잡도와 프로젝트 특성을 고려해 결정하는 것이 중요함.
  • 꼭 상태관리가 필요한 경우에만 도입하고, 불필요하면 백엔드에서 데이터 직접 받아서 쓰자는 의견도 있음.

6. 리액트 생태계 및 프레임워크 비교 (Next.js, Remix, SolidJS 등)

  • Next.js는 매우 대중적이고 생태계가 풍부하지만 **"버셀(Vercel)의 방향성"**이 강하게 반영됨.
  • Remix는 풀스택 프레임워크를 지향하며, 리액트 라우터를 기반으로 하지만 최신 React 스펙 지원이 부족하다는 평가도 있음.
  • SolidJS는 React 메인테이너 중 일부가 독립하여 만든 라이브러리로, React보다 빠르고 효율적이나 생태계가 작음.
  • 프레임워크 선택은 팀 및 프로젝트 요구사항, 최신 스펙 지지 여부, 생태계 지원 등 고려해야 함.
  • 최근엔 SSR(서버 사이드 렌더링)을 꼭 써야 하는 경우가 아니면 CSR+Vite 조합 등도 선호됨.

7. npm 패키지 소스코드 확인 방법

  • npm에서 설치한 패키지는 대부분 빌드된 파일만 포함됨.
  • 소스 코드를 직접 보고 싶다면:
    • 공식 깃허브 리포지토리 방문하여 소스 확인 권장
    • 리포지토리 클론 후 직접 로컬에서 살펴보기
  • 빌드 파일은 난독화 혹은 트랜스파일되어 원본과 차이가 있음.

8. TypeScript의 초기 진입 난이도와 사용법 조언

  • TypeScript는 타입 체킹으로 개발 생산성 향상하지만, 처음엔 어렵게 느껴짐.
  • 단계적으로 적용하고 관련 개념(인터페이스, 타입, 제네릭 등)을 익혀나가는 것이 중요함.
  • DEF 팁: TypeScript는 자바스크립트 위에 타입을 얹는 개념이라, 기본 JS 문법부터 충분히 익힌 후 도전 권장.

9. 디자인 시스템과 개발 협업 경험

  • 디자인 시스템은 디자이너가 중심이 되어 예외없이 명확한 기준을 만들어야 성공.
  • 개발자가 직접 디자인 시스템을 주도하면 실패 가능성 높음.
  • 디자인 시스템은 제품 자체처럼 정형화된 디자인 가이드와 컴포넌트 명세를 의미함.
  • 각 팀의 협업 문화와 여건에 맞춰 잘 조율할 필요가 있음.

10. 개발자 일상 및 친목 소소한 이야기

  • 출근길, 비 오는 날 우산 챙김 자랑 토크부터 헬스 시작, 간식 추천, 점심 회식 문화 등 개발자의 일상을 공유함.
  • 재택 근무 희망, 집값과 출퇴근 시간 토론, 그리고 소소한 웃음과 농담들이 함께 어우러짐.

면접팁⚡

  • 서버 컴포넌트와 클라이언트 컴포넌트의 차이점을 명확히 이해하고 설명할 것.
  • JWT 저장 위치별 장단점과 보안 이슈를 논리적으로 설명 가능해야 함.
  • Next.js 인증 라이브러리의 한계점과 커스터마이징 시 고려사항에 대해 이야기할 준비.
  • CORS 및 Mixed Content 관련 발생 가능한 문제와 해결 방법을 실무 경험 중심으로 답변.
  • React 상태관리 라이브러리 종류와 자신이 선호하는 이유를 말할 수 있으면 좋음.

링크🔗

#Nextjs#JWT#httpOnlyCookie#NextAuth#React#TypeScript#CORS#상태관리#프레임워크비교#개발자일상
이전 포스트

2024-10-14

2024년 10월 14일
다음 포스트

2024-10-16

2024년 10월 16일