목차
- 소개팅과 인생 계획 이야기
- 닉네임 및 발음 관련 토론
- 인증 및 보안(2FA, TOTP) 이슈
- React Query & RTK Query 캐싱 및 동작 이슈
- Copilot vs GPT 활용법과 AI 코딩 지원
- Yarn Berry, PnP, 모노레포 및 패키지 관리
- Next.js 앱 라우터 vs 페이지 라우터 비교
- React 실무 설계: MVVM 패턴과 컴포넌트 쪼개기
- 금연 도전 및 금연 팁
- 기타 질문 및 개발자 일상 대화
1. 소개팅과 인생 계획 이야기 💬
- 소개팅 경험에 대해 자연스럽게 '계획'과 '인생 방향성'에 대한 이야기가 많았음.
- 인생 계획이 없는 모습은 매력 저하 요인으로 언급됨.
계획은 단순히 미래상 그리기가 아닌, 삶과 시간 관리를 효율적으로 한다는 의미.
- 재테크, 계층 이동과 연봉 등에 대한 현실적인 냉정함 언급됨.
- “무계획이 답일 수 있다”는 의견과 함께, 계획이 있더라도 의미를 갖지 못하는 경우도 존재.
- 소개팅 시 상대를 ‘괜찮은 사람’으로 보는 열린 마음이 필요하다는 조언도 나옴.
2. 닉네임 및 발음 관련 토론 🤔
- 닉네임 '림에'의 의미와 변형에 대해 다양한 재밌는 논의.
- "Dialog" 발음을 두고 일본식 '다이아로그', 영어권의 '다이얼로그' 등 여러 의견이 오감.
- 발음은 문화권과 언어권에 따라 다름을 확인할 수 있음.
- 영어 단어 "direction" 발음 역시 영미권 차이를 겪음.
3. 인증 및 보안(2FA, TOTP) 이슈 🔐
- 깃허브 로그인 시 2단계 인증 문제 사례 공유.
- TOTP(Timed One-Time Password, 시간 기반 일회용 비밀번호) 사용 강조.
- 2FA를 위해 구글 OTP 앱이나 복구코드 활용 권장.
- 문자(SMS)의 경우 도착 지연 및 미도착 이슈도 발생할 수 있음.
- 네트워크 보안과 인증 편의성 간 트레이드오프 문제 논의됨.
4. React Query & RTK Query 캐싱 및 동작 이슈 🧩
- React Query에서 enabled 옵션이 false일 때 쿼리 실행 대기에 대한 질문.
enabled는 쿼리의 실행 조건을 제어, false일 경우 쿼리 실행이 멈추거나 대기 상태가 됨.
- RTK Query에선 cache 동작과 자동 invalidation, 속성 tag로 캐싱 제어 가능.
- staleTime 설정을 통해 데이터 새로고침시기를 조절하고 최적화 가능.
- 개발 모드와 프로덕션 빌드 간 동작 차이 주의 필요, 종종 환경 설정 차이에서 영향 받음.
5. Copilot vs GPT 활용법과 AI 코딩 지원 🤖
- Copilot은 IDE 내에서 코드를 자동완성 및 보조하는 ‘부기장’ 역할.
- GPT는 질문에 답하거나 코딩 관련 지식 제공에 강점이 있음.
- Copilot을 잘 쓰려면 깨끗한 코드 구조와 추상화가 중요함 — AI가 이해하기 쉽도록.
- AI 활용은 개별 습관과 코드베이스에 영향을 받음.
- AI를 효율적으로 쓰기 위해선 질문 명확히, 결과물은 검증이 필수임.
6. Yarn Berry, PnP, 모노레포 및 패키지 관리 📦
- Yarn Berry는 Yarn의 최신 메이저 버전(2.x 이상)을 의미.
- PnP(Plug'n'Play)는 node_modules 폴더 없이 효율적 모듈 관리를 하는 기술.
- 하지만 기존 라이브러리 중 의존성 선언이 부실한 경우 충돌과 문제 발생.
- PnP는 선택적 사용 가능하며 Yarn Berry의 대표 기능 중 하나.
- 모노레포(monorepo)는 여러 패키지를 한 저장소에서 관리하는 기법.
- Workspaces로 여러 패키지 쉽게 관리 가능하지만, 의존성 문제와 빌드 도구 지원에 주의.
- 타입스크립트 버전 업그레이드는 패키지간 호환 문제를 일으키는 블로커 요소가 될 수 있음.
7. Next.js 앱 라우터 vs 페이지 라우터 비교 🛣️
- Next.js 13 버전부터 기본 라우팅 모드는 앱 라우터(App Router)임.
- 앱 라우터 특징: React 서버 컴포넌트 지원 → 서버 렌더링 효율 증가.
- 페이지 라우터는 전통적이며, 클라이언트 사이드 네비게이션 중심.
- 앱 라우터는 아직 몇 가지 자잘한 이슈가 있으나, 생산 환경 사용 가능 수준.
- 앱/페이지 라우터 선택은 프로젝트 규모, 요구사항, 팀 경험에 따라 달라짐.
8. React 실무 설계: MVVM 패턴과 컴포넌트 쪼개기 🧱
- MVVM 패턴은 UI와 비즈니스 로직 분리를 돕는 소프트웨어 아키텍처.
- React에서 MVVM 적용은 어렵다는 의견 다수.
- 대부분 컴포넌트를 기능별, 재사용성 기준으로 잘 쪼개는 것이 실용적임.
- 상태 관리 도구(xstate, recoil 등)의 적극 활용 필요.
- 좋은 컴포넌트 설계는 유지보수성과 협업 효율을 극대화함.
9. 금연 도전 및 금연 팁 🚭
- 금연 1일차 고충과 의지 공유, 응원 주고받음.
- 니코틴 패치, 껌 등 보건소 무료 금연 보조제 활용 권장.
- 주변 흡연 환경과 심리적 유혹 관리가 중요.
- 금연 실패 경험과 도전 과정이 솔직하게 공유됨.
- 금연은 단기간 의지만으로 어려우니 환경과 보조 기구 활용 권장.
10. 기타 질문 및 개발자 일상 🗣️
- 공공기관 사이트는 전통적으로 개별 페이지를 정적으로 제작하거나 MPA(멀티 페이지 앱) 형태가 많음.
- 점차 SSR(Server Side Rendering)과 API 통신 사용 늘어나는 추세임.
- 개발 중 커피, 노래, 건강, 직장 내 익명 커뮤니티(블라인드) 등 일상 소회도 활발함.
- 다양한 도구(IDE, 패키지 관리자, 테스트 등)와 최신 기술 트렌드에 대한 관심 지속.
면접팁⚡
- 연봉 협상 시기: 계약서에 명시된 기본급과 상여금의 포함 여부를 정확히 파악할 것.
- React 설계 질문 대비: MVVM 패턴에 대한 이해, 컴포넌트 쪼개기와 상태 관리 방법론을 사례와 함께 설명할 준비.
- 패키지 관리 경험: Yarn Berry, PnP, 모노레포 등에 대한 활용 경험과 해결한 문제 사례를 준비하면 좋음.
- AI 도구 활용: Copilot과 GPT의 장단점 구분과 언제 어떻게 활용하는지에 대한 명확한 답변 가능해야 함.
- Next.js 라우터 이해: 앱 라우터와 페이지 라우터의 차이를 이해하고 프로젝트 상황별 선택 근거를 말할 수 있으면 가산점.
링크🔗
- React Query 캐싱 Behavior - https://tanstack.com/query/latest/docs/react/guides/caching
- RTK Query Cache Behavior - https://redux-toolkit.js.org/rtk-query/usage/cache-behavior
- React Source Code Walkthrough - https://jser.dev/series/react-source-code-walkthrough/
- Yarn Berry 공식마이그레이션 가이드 - https://yarnpkg.com/migration/overview
- Next.js Route Segment Config - https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
- Stack Overflow: Yarn Workspaces with Different Dependency Versions - https://stackoverflow.com/questions/56944265/using-different-versions-of-a-dependency-in-different-packages-of-a-yarn-workspa
- TOSS Tech Article: Node Modules and Yarn Berry - https://toss.tech/article/node-modules-and-yarn-berry
- Okky React Hook Form 질문 - https://okky.kr/questions/1488960
- Okky React Hook Form 질문 2 - https://okky.kr/questions/1489217
#React#Nextjs#YarnBerry#ReactQuery#RTKQuery#Copilot#AI코딩#패키지관리#MVVM#금연도전#개발자일상