COMMIT.chat
View Bookmarks
react 썸네일react

2024-01-19

목차

  1. Next.js 에서 JWT 인증 구현 경험 및 팁
  2. Next.js Fetch와 React Fetch 차이
  3. Tailwind CSS 미디어 쿼리 커스텀 및 사용법
  4. VSCode 개발 환경 추천 익스텐션 모음
  5. 효율적 데이터 중복 검사 방법 및 설계 고민
  6. 업무일지 작성과 IT 현장 실무 고민
  7. 개발자 취업 준비, 포트폴리오, 면접 경험 공유
  8. 차트 구현 방법과 라이브러리 활용
  9. 도커(Docker) 사용 시나리오와 경험 공유
  10. 기타 개발 잡담 및 생활 이야기

1. Next.js 에서 JWT 인증 구현 경험 및 팁 🔐

  • Next.js에서 next-auth 패키지를 안 쓰고 JWT 인증을 직접 구현하는 분들도 있음.
  • React처럼 직접 JWT를 발급하고 검증 로직을 작성하면 되지만, Next.js의 특성(서버 사이드 렌더링이나 API 라우트 등)을 고려해야 함.
  • Next-auth는 편리하지만, 커스터마이징이 어려울 때 직접 JWT 로직을 구현하는 게 나을 수 있음.
  • JWT는 토큰 기반 인증방식으로, 서버가 토큰을 발급하고 클라이언트가 매 요청마다 토큰을 보내 신원 확인을 하는 구조.
  • 직접 구현시 보안(토큰 만료, 갱신, 암호화)과 클라이언트 저장 위치(localStorage vs 쿠키) 선택도 중요.

2. Next.js의 Fetch와 React Fetch의 차이 🌐

  • React에서 fetch API를 사용하는 것과 Next.js에서 fetch를 사용하는 것은 다름.
  • Next.js 13의 app 디렉토리 내에서 fetch는 서버 컴포넌트 서버사이드에서 실행되어 캐싱 및 SSR에 최적화되어 있음.
  • React fetch는 클라이언트 사이드에서 데이터를 요청함.
  • Next.js fetch는 기본적으로 ISR(Incremental Static Regeneration) 또는 SSR 용으로 캐시 정책을 다룰 수 있으며, 성능과 SEO에 유리.
  • 때문에, Next.js에서 fetch를 사용할 때는 cache: "no-store" 같은 옵션이나 revalidate 설정에 주의해야 함.
  • 혼동 없이 사용하려면 Next.js 공식 문서의 서버 컴포넌트 fetch에 대한 설명 참고 필수.

3. Tailwind CSS 미디어 쿼리 활용법 및 커스텀 설정 🎨

  • Tailwind CSS 기본 미디어 쿼리는 min-width 방식으로 정의됨. (예: sm:hidden, md:block → 화면이 md 이상일 때 block)
  • 특정 상황에 max-width 조건을 적용하려면 tailwind.config.js에서 사용자 정의 커스텀 미디어 쿼리를 설정 가능.
  • 예) max-sm 같은 이름으로 커스텀하면 스마트 기기 이하에서만 스타일 적용 가능.
  • 조건부 렌더링을 함께 사용하면 간결하고 깔끔한 UI 제어가 가능.
  • Tailwind 바이블 및 공식 문서를 참고해 필요에 따라 미디어 쿼리를 자유자재로 활용할 수 있음.

4. VSCode 개발 환경 추천 익스텐션 모음 ⚙️

  • 개발 생산성 향상을 위한 주요 익스텐션 소개:
    • Power Mode: 코딩할 때 마법같은 효과 제공해 집중력 상승
    • CodeSnap: 코드 스니펫을 이미지로 캡처해 공유 편리
    • Change Case: 케이스 변환 자동화 지원
    • Emoji: 코드에 이모지 삽입 가능
    • ErrorLens: 에러를 인라인으로 강조해 빠른 수정 가능
    • Auto Rename Tag: HTML 태그 닫는 부분 자동 수정
    • Git Graph: 깃 커밋 로그 시각화 툴
    • Figma Extension: VSCode 내 Figma 디자인 미리보기
  • 개발자마다 선호하는 익스텐션은 다르지만, 위 도구들은 널리 사랑받음.
  • 본인 취향에 맞춰 조합하면 코딩 효율 극대화 가능.

5. 효율적인 데이터 중복 검사 설계 고민 💭

  • 사용자 가입 시 이메일, 닉네임, 아이디 중복 검사 방법에 대한 논의.
  • 개별 필드마다 별도 쿼리를 날리는 방법과 모든 컬럼을 통째로 조회해서 비교하는 방법이 있음.
  • 서버 비용과 네트워크 비용 고려 시, 필요한 필드만 쿼리하는 것이 일반적으로 더 효율적.
  • 다만, 여러 필드를 한꺼번에 검사하는 로직을 만들려면 쿼리를 동적 조건 (WHERE name=? OR email=? OR nickname=?) 형태로 구성하는 방법 추천.
  • ORM이나 쿼리메서드(countBy, findBy 등)를 활용해 모듈화하면 유지보수가 쉬워지고 성능도 충분함.
  • 어떤 방식을 선택하든, 서비스 규모와 사용 패턴을 고려해 적절히 조정해야함.

6. 업무일지 작성과 IT 현장 실무 고민 📝

  • 주간 또는 일간 업무일지 작성은 회사마다 의견이 다름.
  • 일부 개발자는 업무일지를 비효율적이라 생각하지만, 버그 분석, 진행상태 공유, 커뮤니케이션 측면에서 도움됨.
  • IT 특성상 자동화 도구 활용해 가볍게 작성하는 사례 많음.
  • 업무일지는 단순 업무 기록이 아닌 개발 프로세스 개선과 협업의 도구로 인식 필요.

7. 개발자 취업 준비, 포트폴리오, 면접 경험 공유 🎯

  • 포트폴리오는 단순한 CRUD가 아닌 자신만의 아이디어와 기술을 담는 것이 중요.
  • 면접에서는 기본기(자료구조, 알고리즘), 실무 기술, 소통 능력 등 다방면 평가.
  • 질문 정리 후 한번에 물어보는 습관, 공식 문서 먼저 보는 태도 강조.
  • 경력이 전부가 아니며, 이해도와 문제해결 능력이 중요하다는 조언.
  • JS/React/Next.js 등 주요 기술 공식 문서 반복 학습 추천.
  • 스터디, 사이드 프로젝트 참여가 실력 향상에 도움됨.
  • 면접에서 코드 설계와 로직 설명을 명확히 할 수 있어야 함.

8. 차트 구현 방법과 라이브러리 활용 📊

  • 차트 라이브러리(예: ApexCharts, react-virtualized) 외에 CSS, HTML, JS로 직접 차트 마크업 구현도 가능.
  • 심플한 차트 데이터 (1~3개)일 경우 직접 구현이 오히려 간편하고 자유도 높음.
  • 다만, 복잡하고 데이터 변동이 많거나 반응형 요구가 있으면 차트 라이브러리 사용 권장.
  • 개발 경험과 회사 요구에 따라 맞춤형 선택 필요.

9. 도커(Docker) 사용 시나리오와 경험 공유 🐳

  • 프론트앤드, 백엔드 모두 개발용 및 배포용 컨테이너로 나누어 운영하는 사례 있음.
  • 단일 서버에서 여러 컨테이너를 띄워 서비스 관리 및 배포 용이.
  • 도커로 롤백이 쉬워, 이미지 버전만 바꾸면 서비스 즉시 복구 가능.
  • ECS, 컴포즈 등을 활용한 마이그레이션 경험 공유.
  • 정적 파일 배포 시 nginx와 도커 연동 시 405 에러 주의 필요(POST 요청 처리 설정 확인).
  • 도커는 협업과 운영 자동화 측면에서 유용.

10. 기타 개발 잡담 및 생활 이야기 🌈

  • 개발자 건강관리(코피, 운동, 식습관, 단것 섭취)에 대한 이야기
  • 한국 기업/채용 시장 분위기와 연봉 이야기
  • 개발 중 겪는 스트레스와 마음가짐 공유
  • 유튜브 강의, 공식문서 학습 추천 및 경험담
  • 개발 대상과 도구 선택에 대한 다양한 의견
  • 타직군과 협업 및 역할분담 관련 의견 나눔

면접팁⚡

  • 질문 정리 후 한꺼번에 명확하게 질문하기
    면접관이나 멘토들에게 질문할 때 포인트를 짚고 깔끔하게 정리해서 묻는 것이 중요함.

  • ORM에서 중복검사 쿼리 설계
    여러 필드 중복 검사는 WHERE 조건에 필요한 필드를 넣어 동적 처리하는 방법과 countBy 타입 메서드를 활용해 효율적이고 유지보수 좋은 코드를 작성할 수 있음.

  • Next.js 인증 구현 시 고려 사항
    JWT 토큰 관리, 클라이언트 저장 위치, 만료 및 갱신 로직은 반드시 숙지할 것. next-auth 대안으로 직접 구현 시 보안에 유의.

  • fetch API 활용법 이해
    Next.js (서버 컴포넌트)와 React (클라이언트 컴포넌트)의 fetch 작동 원리 및 차이점을 반드시 파악할 것.

  • 코딩 면접 시 코드 및 설계 설명 연습
    면접관에게 로직을 어떻게, 왜 이렇게 작성했는지 설명할 수 있어야 됨.

링크🔗

읽기 쉽고 핵심적인 대화만 정리했으며, 기술 내용에는 이해를 돕기 위한 부가 설명을 포함했습니다.
다양한 실무 경험과 고민, 도구 추천까지 풍부한 내용으로 개발자분들께 도움이 되길 바랍니다!

#Nextjs#JWT#TailwindCSS#VSCode#React#DataValidation#취업준비#도커#개발일지#차트
이전 포스트

2024-01-18

2024년 1월 18일
다음 포스트

2024-01-20

2024년 1월 20일