2024-03-22

목차

1. 알고리즘 문제와 문법 연습
2. VSCode CSS 실시간 반영 문제와 해결법
3. SCSS와 Tailwind CSS 공존에 대한 토론
4. React 전역 상태관리와 캐싱 관련 이슈
5. Next.js SSR, Vercel 배포 그리고 콜드 스타트 현상
6. 코드 리뷰 시 중점 사항과 면접 관련 팁
7. Yarn, Vite 프로젝트 생성 문제와 해결 방법
8. i18n 국제화 라이브러리와 Next.js app router 지원 현황
9. 개발자 노트북 선택 기준과 업무 환경 이슈
10. 개발자 잡담 및 근황 공유

1. 알고리즘 문제와 문법 연습 🧩

• 알고리즘 문제를 풀면 자연스럽게 문법 연습이 됨.
• 프로그래머스, 백준 등 코테 플랫폼 난이도 조절이 어려워 운이 안 좋으면 올솔(올 문제 솔루션 시도)만 겨우 통과 가능.
• 코테 유형 다양 (객관식, 주관식, 타임어택 등)이며, 유형별 대비 필요함.
• 코테 준비는 문제를 집중해서 풀기보다는 정답을 보고 유형별로 익히는 것이 효율적일 수 있음.

2. VSCode CSS 실시간 반영 문제 해결법 🎨

• 실시간 CSS 변경이 안 될 때 가장 흔한 원인: 저장 안 함 또는 다른 파일 수정 중.
• 저장을 꼭 확인해야 함.
• 간혹 에디터 설정 또는 라이브 리로드 플러그인 문제일 수도 있음.

3. SCSS와 Tailwind CSS 공존 문제점과 의견 🎨

• SCSS는 CSS 전처리기로 네스팅, 변수, 믹스인 등 기능 제공.
• Tailwind는 유틸리티 퍼스트 CSS 프레임워크로 클래스 이름으로 스타일 제어.
• 두 방식 병행 시 관리 포인트 증가, 충돌 위험 있음.
• 대개 팀 내 합의가 중요하며, 한 가지로 통일하는 것이 유지보수에 유리.
• SCSS의 네스팅은 최근 CSS 기본 문법으로도 지원되나, 호환성 문제 주의 필요.
• Tailwind는 클래스가 장황해질 수 있어 객체나 함수로 관리하는 패턴도 활용됨.
• 프로젝트 규모와 팀 경험에 따라 선택할 것.

4. React 전역 상태관리와 캐싱 이슈 ⚛️

• React Context API로 상태관리 시, 전역 프로바이더 범위에 따라 상태 유지 여부 결정됨.
  • 페이지 단위로 감싸면 페이지 이동 시 상태 리셋됨.
  • 앱 전체를 감싸면 상태 유지 가능하나 목적과 성능 고려 필요.
• React Query(현재 TanStack Query로 명칭 변경) 사용 중 일부 데이터는 캐싱 불필요해 Axios로 직접 페칭 권고 사례 존재.
• 서버 상태와 클라이언트 상태 용도 구분 중요.
• 캐싱의 단점은 오래된 데이터 노출 가능성으로 최신성 기준에 따라 선택해야 함.
• React Query는 서버 상태 캐싱, Context나 전역 스토어는 클라이언트 상태 관리에 적합.
• 기존 React Query 쓰다가 다른 방식 섞으면 일관성 문제 발생 가능하니 팀 내 기준 필요.

5. Next.js SSR과 Vercel 배포 시 콜드 스타트 현상 이해 🌐

• SSR(서버 사이드 렌더링)은 요청마다 HTML을 생성.
• Vercel같은 서버리스 환경은 코드가 일정 시간 비활성 시 꺼지고, 재실행 시 준비 시간이 소요되어 콜드 스타트 발생.
• 콜드 스타트 현상은 느린 응답으로 이어질 수 있음.
• 캐싱은 주로 클라이언트나 서버에 저장된 데이터 재사용이며, SSR HTML 자체 재사용과는 별개.
• 비서버리스 백엔드에서는 콜드 스타트 이슈 적음.
• 서버리스 환경이 아닌 백엔드 API가 캐싱한다면, 클라이언트는 더 빠른 응답을 받음.
• 콜드 스타트와 캐싱은 개념과 원인이 다름.

6. 코드 리뷰 시 중점 사항과 면접 관련 팁 ✍️

• 코드 리뷰 핵심은 놓친 케이스, 비즈니스 로직 개선, 컨벤션 준수 및 가독성 등.
• 비즈니스 로직과 UI 로직 완전 분리는 이상적이나 현실에선 완전 분리 어렵고 적절히 섞어도 유지보수 가능하면 문제 없음.
• 면접에서는 React Query 사용 여부, 상태 관리 일관성, 캐싱 이해도 등을 질문할 수 있음.
• 질문 의도를 파악하고 상황에 맞게 경험과 의견을 명확히 설명하는 것이 중요.
• 코테 준비는 유형별 문제를 빠르게 파악하고 넘어가는 전략도 추천됨.

7. Yarn, Vite 프로젝트 생성 문제 해결 🛠️

• "type: module" 관련 오류는 프로젝트 루트의 package.json 설정 문제.
• 프로젝트 생성 전 npm init 또는 yarn init으로 package.json 생성 필요.
• Yarn 버전 차이, 글로벌 설치 상태도 이슈에 영향.
• yarn 4.x 버전 업데이트 권장.
• 문제 지속 시 프로젝트 초기화, 폴더 경로, Node.js 버전 확인 필수.

8. i18n 국제화 라이브러리와 Next.js app router 지원 현황 🌍

• Next.js의 새 app directory 기반 라우터는 기존 next-i18next가 아닌 새로운 방식을 권장.
• 공식 문서에서는 next-intl 같은 라이브러리 사용 권장.
• 기존 Trans 컴포넌트와 유사한 기능은 useTranslations 훅을 바탕으로 직접 구현 가능.
• 최소한의 기능만 제공하는 경량 react-intl 라이브러리도 참고할 만함.
• i18n 지원은 프로젝트 필요, 팀 편의성, 라이브러리 성숙도 고려.

9. 개발자 노트북 및 업무 환경 이야기 💻

• 다수 개발자 맥북 프로 사용 중.
• 회사 내부 기준은 입사자가 노트북 선택 가능하거나 팀 내 표준화 진행.
• 포터블 모니터, 저소음 키보드 등 주변기기 관심 높음.
• 업무 환경 소음, 전원, 네트워크 이슈에 따른 고충 공유.
• 개발에 집중하기 좋은 환경 조성이 중요함.

10. 기타 잡담 및 근황 공유 ☕

• 출퇴근, 점심 메뉴, 커피 이야기에 이어 군대, 이직, 개인 사정 등 자유로운 대화.
• 개발 중 겪는 소소한 문제, 장비 추천, 취미생활 등 친목 목적도 큼.

면접팁⚡

• React Query와 상태 관리 라이브러리의 역할과 차이를 명확히 이해할 것.
• 코드 리뷰 시 비즈니스 로직 누락, 케이스 검증, 가독성에 초점 맞추기.
• 알고리즘 코테는 유형별 문제 접근법과 빠른 이해도가 중요.
• Next.js SSR, Vercel 배포 시 콜드 스타트 원리와 대응 방법 숙지.
• Yarn 및 Node.js 환경 설정 관련 문제 해결 경험은 실무적 가치가 높음.

링크🔗

• lit-intl Github - 경량 React Intl 라이브러리
• Next.js i18n 공식문서
• 구글 구조화 데이터 가이드
• Yarn 4.0 릴리즈 노트
• 코테 준비 페스타 이벤트