2024-04-02

목차

1. SSR과 CSR 데이터 동기화 및 리렌더링 방법
2. Next.js 빌드 및 배포 관련 팁
3. React-query의 queryKey 이해와 활용법
4. REST API 응답 코드: 200 VS 204 처리 방식
5. Docker 개발 환경 활용법 및 장점
6. Prisma + Nexus 코드 생성 문제
7. React와 관련 디자인 패턴 및 사용 경험
8. Next.js 라우팅(App Router, Parallel Routing) 소개
9. 취업, 연봉, 커리어 관련 고민과 경험
10. 잡담 및 커뮤니티 소식

1. SSR과 CSR 데이터 동기화 및 리렌더링 방법🧑‍💻

• 핵심: SSR 페이지에서 유저 데이터를 받아오고, UserCard 컴포넌트에서 CSR 방식으로 유저 삭제 요청을 보낼 때 리렌더링은 어떻게 해야 하나?
• 설명:
  • SSR(Server-Side Rendering)은 서버에서 초기 데이터를 렌더링해 화면에 전달하는 방식임.
  • CSR(Client-Side Rendering)은 클라이언트에서 상태를 변경하거나 API 요청을 처리하는 방식임.
  • 유저 삭제 후 데이터를 클라이언트 상태와 동기화해서 화면에서 삭제된 유저가 사라지도록 처리해야 함.
• 의견:
  • 삭제 요청 후 페이지 전체 새로고침(리프레시)은 UX가 떨어짐.
  • 보통 서버에 삭제 요청 후, 클라이언트 상태(state)를 업데이트해서 리렌더링함.
  • React Query 같은 상태 관리 라이브러리를 이용하면 데이터 자동 동기화 및 캐시 관리를 통한 UI 변경이 간편.
  • SSR 자체만으로 이 리렌더링을 처리하는 건 부적절하며, 혼용하는 방식이 일반적임.

2. Next.js 빌드 및 배포 관련 팁🚀

• 핵심: Next.js 앱을 pm2로 배포하려고 할 때 build 과정에서 .next 폴더가 변경되어 기존 프로세스가 죽는 문제 발생.
• 설명:
  • npm run dev는 개발용 명령어로, 코드 변경 시 .next 폴더 내 파일들이 실시간 수정됨. 운영 환경에선 적합하지 않음.
  • next build는 production 빌드를 수행해 최적화된 결과물을 생성하며, 이 과정은 시간이 걸림.
  • pm2 같이 프로세스 관리 도구를 사용할 땐, 빌드 전 pm2 프로세스를 종료하고 빌드 후 재시작하는 것이 안전함.
• 의견 및 팁:
  • 개발 환경과 배포 환경은 명확히 분리하는 것을 권장.
  • standalone 빌드 옵션을 사용해 별도의 폴더에 빌드 산출물을 생성 후 배포 시 복사하는 방법을 사용하면 더 안정적임.
  • 개발 중에는 npm run dev를 사용하고, 배포 전에는 반드시 빌드를 완료해야 함.
  • 빌드와 실행 환경의 차이로 인해 발생하는 캐싱 문제, SSG(Static Site Generation) 오작동을 방지하기 위한 조치임.

3. React-query의 queryKey 이해와 활용법🔑

• 핵심: queryKey가 정확히 무엇이며, refetch할 때마다 queryKey를 바꿔야 하는가?
• 설명:
  • React Query에서 queryKey는 캐시된 데이터의 고유 식별자임.
  • 이 키를 이용해 내부적으로 데이터를 저장/관리하고, 같은 queryKey는 같은 데이터를 의미함.
  • queryKey는 보통 고유하면서도 일정해야 하며, refetch마다 바꿀 필요 없음.
• 의견:
  • queryKey가 자꾸 바뀌면 캐싱이 제대로 안되어 불필요한 네트워크 요청이 발생할 수 있음.
  • 데이터를 특정 조건별로 구분하고 싶다면 queryKey에 조건 값을 포함시키는 것이 적절함.
  • refetch는 queryKey를 유지한 채 데이터를 다시 요청하는 것임.

4. REST API 응답 코드: 200 vs 204 처리 방식📝

• 질문: 리스트 조회 시 조회 결과가 없으면 200 + 빈 배열([])을 보내는 게 맞나, 아니면 204 No Content를 보내야 하는가?
• 설명:
  • HTTP 200 OK는 정상 응답이며, 내용이 비었어도 빈 배열로 의미를 명확히 전달할 수 있음.
  • HTTP 204 No Content는 본문이 없는 응답에 쓰임. 보통 데이터가 없음을 명시적으로 표현할 때 사용됨.
• 의견 및 팁:
  • 대부분의 API에서는 200 + [] 방식을 선호함. 클라이언트에서 데이터 타입이 일관되고, 빈 상태도 명확히 처리 가능함.
  • 204는 본문이 전혀 없으므로 클라이언트에서 별도의 예외 처리가 필요할 수 있음.
  • 팀 내 컨벤션에 따라 결정하며, API 스펙과 문서에 명확히 명시하는 것이 중요함.

5. Docker 개발 환경 활용법🐳

• 핵심: 혼자 개발할 때도 Docker를 쓰는 게 좋은가? 개발 중 컨테이너에서 직접 코딩하는 경우도 있나?
• 설명:
  • Docker는 같은 개발 환경을 어디서든 구축할 수 있게 해 주는 컨테이너 환경임.
  • 혼자 개발한다면 로컬 환경에 비해 환경 문제를 줄이고, DB 등 의존 서비스도 컨테이너로 간단히 띄울 수 있어 편리함.
• 의견:
  • 실제 코딩은 보통 로컬 에디터에서 하며, 컨테이너 내부에서 직접 개발하는 경우는 드뭄.
  • 컨테이너는 빌드 및 테스트, 배포용으로 주로 사용하며, 개발 중에는 볼륨 마운트 기능을 사용해 코드를 동기화함.
  • 특히 DB를 컨테이너로 실행하면 설치나 포트 문제를 피할 수 있어서 유용함.

6. Prisma + Nexus 코드 생성 문제⚠️

• 문제점: Prisma + Nexus를 사용할 때 코드 제너레이션이 불안정해 가끔 랜덤하게 타입 생성 누락 등의 문제가 발생함.
• 설명:
  • Prisma는 데이터베이스 ORM이고, Nexus는 GraphQL 스키마를 코드로 만들 때 유용한 툴임.
  • 두 툴이 함께 작동할 때 자동 생성 코드가 일관성 없이 생성돼 개발에 방해가 되는 문제가 일부 존재함.
• 해결 및 팁:
  • 문제 발생 시 VSCode 재시작 등으로 임시 해결 가능.
  • 최신 버전 사용과 별도의 빌드 및 린트 단계를 두어 문제를 최소화할 수 있음.
  • 대안으로 Angular 같은 다른 프레임워크 추천하는 의견도 있음.

7. React와 관련 디자인 패턴 및 사용 경험🎨

• 질문: React에서 커스텀 훅 이외에 추천하는 디자인 패턴은?
• 설명 및 추천:
  • 기본적인 아키텍처 패턴은 아토믹 디자인, 플럭스(Flux) 패턴 등이 있음.
  • 아토믹 디자인은 UI 컴포넌트를 원자(Atom), 분자(Molecule), 유기체(Organism) 단위로 쪼개서 구성하는 방식임.
  • 플럭스 패턴은 단방향 데이터 흐름을 유지해 상태 관리를 체계적으로 하는 패턴임.
• 요약:
  • 명확한 컴포넌트 분리와 상태 관리가 중요하며, 상황과 프로젝트에 따라 적절한 패턴을 사용하면 됨.

8. Next.js 라우팅(App Router, Parallel Routing) 소개🛣️

• 내용: Next.js 13+에서 App Router 기능과 관련 폴더명 기능 업데이트 (예: @name, (name), [...name])
• 설명:
  • App Router는 새로운 라우팅 시스템으로, 동적 라우팅 및 페이지 레이아웃 병렬 처리 병행 가능.
  • Parallel Routing은 여러 페이지를 동시에 렌더링하거나 레이아웃을 복잡하게 구성할 때 쓰임.
  • 이런 기능들은 복잡한 UI 상태 관리 및 모달, 팝업 구현을 쉽게 해 주나, 필요하지 않으면 사용하지 않아도 무방함.
• 팁:
  • 공식 문서나 강의를 참고하여 필요할 때만 도입하는 게 좋음.
  • 실무에서 활용 빈도가 높지 않은 경우 별도의 학습 없이 기본 라우팅만 해도 무방함.

9. 취업, 연봉, 커리어 관련 고민 및 경험💼

• 대화 내용 일부:
  • 2년차 프론트엔드 개발자가 풀스택 전환 지시 받고 연봉 재협상 고민 중.
  • 백엔드 인력 구인난과 전공 비전공자 차별화 이슈 토의.
  • 연봉 2500만원의 현실적 고민과 이직 준비 이야기 공유.
  • 회사 내부 사정 및 개발 환경, CI/CD, 코드 리뷰 문화에 대한 경험 공유.
• 조언:
  • 풀스택으로 확장 시 연봉 재협상은 상황과 개인 역량에 따라 신중히 결정.
  • 팀 내 커뮤니케이션과 개발문화, 기술 스택 적응력이 중요함.
  • 꾸준히 기술 역량을 높이고 컨벤션 지키는 것이 좋은 평판으로 연결됨.

10. 기타 주요 이슈 및 소식🗣️

• 잡담 및 커뮤니티 소식:
  • 만우절 이벤트, 커뮤니티 멤버들 닉네임 이야기.
  • 자동차 관련 잡담(사이드스커트, 골뱅이 주차법).
  • 개발툴(에디터, vscode, 서브라임) 사용 경험.
  • 국내 IT 기업 경쟁 상황과 국내외 임금 비교.
  • 인기 프론트엔드 프레임워크 논의: React, Svelte, Remix, Next.js 차별점.
  • 업무 및 사생활 유머 섞인 대화 다수.

면접팁⚡

• React-query FAQ:
  • queryKey는 데이터 캐싱의 유일한 키이며, 리렌더링이나 refetch 시 변경해서는 안 됨.
  • 캐시 관리와 네트워크 최적화 사례를 설명할 준비하기.
• SSR과 CSR 구분:
  • SSR은 초기 렌더링, CSR은 클라이언트 내 상호작용에 사용되는 방식으로 구분 가능.
  • 데이터 삭제 시 클라이언트 상태 관리 방법을 이해하고 설명할 수 있으면 좋음.
• Next.js 빌드 및 배포 절차:
  • 빌드 후 서비스 재기동 과정을 명확히 인지, pm2 같은 프로세스 관리 도구와 함께 상황 설명 가능 필요.

링크🔗

• Next.js Storybook 8 소개
• LocalPilot GitHub
• FauxPilot GitHub
• Docker 이미지 공유 관련 블로그
• React 공식 문서 - Add React to an Existing Project
• 쿠팡 관련 뉴스
• 인스타그램 이더리움 창시자 방문 기사