2024-05-14

목차

1. 인사와 분위기 나누기
2. 모노레포(Monorepo)와 관련 도구 비교
3. 아이패드 및 웹 IDE 개발 환경 경험
4. React 개발, 상태관리, Context API 활용
5. 이미지 최적화 및 로딩 속도 개선 팁
6. CSS Grid 와 Flexbox 간격 조절 고민
7. GPT-4o 및 AI 챗봇 경험 공유
8. 포트폴리오와 이력서 작성 관련 조언
9. React Router, Next.js 관련 문제 해결 팁
10. JavaScript 공부법 및 개발 철학

1. 인사와 분위기 나누기

• 하루 시작과 함께 가벼운 인사와 좋은 기운 나눔.
• 친근한 분위기 속에서 각자 근황과 일상 이야기 공유.

2. 모노레포(Monorepo)와 관련 도구 비교

• 모노레포란? 여러 프로젝트(여러 패키지)를 하나의 저장소(repo)에 관리하는 방법.
• 주요 도구: Turbo, Lerna, Nx.
• 의견 요약
  • Turbo, Lerna 각각 장단점이 존재하며 둘 다 완벽하지는 않음.
  • Nx는 대규모 프로젝트에 적합하며 깔끔한 설정과 기능 제공.
• 선택 시 프로젝트 규모와 팀 스타일 고려가 중요.

3. 아이패드 및 웹 IDE 개발 환경 경험

• 아이패드에서도 외장 키보드와 온라인 IDE(예: GitHub Codespaces)로 개발 가능.
• 모바일 환경에서의 한계 있지만 간단한 코드 작업이나 수정엔 무리 없음.
• “코드스페이스” 기능으로 웹에서 Visual Studio Code 같은 환경 즉시 접속 가능.
• 폰에서는 개발이 어렵다는 의견, 패드는 적당한 타협점.

4. React 개발, 상태관리, Context API 활용

• 컴포넌트 내 깊은 상태 전달(props drilling)이 불편할 때 Context API가 좋은 대안.
• 전역 상태관리 라이브러리(Redux, Recoil)는 Context와 별개로 복잡한 상태에 적합.
• 상태 공유가 일부 페이지만 해당될 경우 Context가 적절.
• 참고로 React 공식 문서와 Dan Abramov의 글(https://overreacted.io/before-you-memo/) 추천.

5. 이미지 최적화 및 로딩 속도 개선 팁

• 로컬 이미지가 용량 클 때 최적화 필요.
• 이미지 최적화란? 화면에 보여질 크기로 이미지를 줄이고 압축하여 용량을 줄이는 작업.
• 리액트 내에서 원본 이미지를 직접 최적화하기보다는, 저장 전에 외부 도구나 라이브러리로 처리 추천.
• 트릭: 섬네일이나 저용량 버전 먼저 로드 후, 원본 이미지가 로드되면 교체하는 방식도 활용 가능.
• 개발자와 디자이너 간 이미지 해상도 차이에 대한 줄다리기 존재.

6. CSS Grid와 Flexbox 간격 조절 고민

• Grid rowGap은 간단하나 columnGap을 Flexbox의 space-between처럼 각 항목의 width 기준으로 균등하게 하기가 까다로움.
• 해결책
  • grid-template-columns를 minmax와 repeat로 적절히 조절.
  • 각 아이템에 flex:1 적용해 균등 분배.
• 완벽한 space-between 대체는 Grid에서 직접 어렵고 경우에 따라 Flexbox 혼용 필요.

7. GPT-4o 및 AI 챗봇 경험 공유

• GPT-4o는 GPT-4 대비 빠르고 약간 더 정확한 답변 제공.
• 신규 출시 기념 무료 사용 가능.
• AI 채팅봇 링크 및 가입 방법 공유됨(https://chatbotapp.ai/landing).
• 음성 인식 및 응답 기능 포함.
• AI 모델 버전별 비교와 기대감도 높음.

8. 포트폴리오와 이력서 작성 관련 조언

• 포트폴리오는 선택 사항이나 지원하는 회사 문화에 따라 필요 여부 결정.
• 이력서와 같은 내용을 두 번 제출할 필요는 없음.
• 그래도 포트폴리오에 프로젝트를 직접 구현한 상세 내용이나 코드가 있으면 좋음.
• GitHub에 프로젝트를 정리하는 것도 좋은 포트폴리오 대체 수단.
• 개인의 취업 방향과 대상 회사 요구사항에 맞춰 작성할 것.

9. React Router, Next.js 관련 문제 해결 팁

• Next.js에서는 getServerSideProps로 받은 데이터를 Cypress 테스트에서 Stub 처리 가능.
• React Router 사용 시 페이지 이동 후 이전 페이지 상태 유지 방법은
  • 전역 상태관리
  • 로컬 스토리지 또는 세션 스토리지 활용
• 다만 전역 상태나 스토리지 사용에 신중해야 하며, 상황에 맞는 적절한 방법 선택 권장.
• Next.js 14.3.0부터 React 19 지원 예정이며, 기존 Next.js에선 React 카나리 채널로 미리 사용 가능.
• 웹뷰 내 페이지 뒤로가기 문제는 앱 쪽 처리 필요 가능성 있음.

10. JavaScript 공부법 및 개발 철학

• 독학과 실전 병행 추천: 기본서 학습과 박치기(직접 구현) 병행.
• 책과 온라인 강의(예: 코딩애플, 인프런 코드캠프)에서 정독과 실습 겸비할 것.
• 단순 암기보다는 실무에 직접 써보며 문제를 해결하는 과정이 성장에 크게 도움됨.
• 프로젝트를 만들면서 구글링하고 문제 해결하는 방법이 진짜 실력 향상에 효과적.
• 개발은 재미와 깊이의 균형을 맞추는 것이 중요.

면접팁⚡

• React 상태 관리 방법을 물어볼 때 Context API와 Redux/Recoil의 차이를 명확히 설명할 수 있으면 좋음.
• 모노레포 관련 툴 선택 사유를 구체적으로 이야기하면 실무 이해도와 팀워크 감각 어필 가능.
• 이미지 최적화 경험이나 웹 성능 문제 해결 사례는 프론트엔드 실무 면접에서 긍정적.
• AI 챗봇 트렌드 이해와 GPT 모델 차이점을 간략히 설명해도 트렌드 감각으로 플러스임.

링크🔗

• shadcn UI 소개: https://pyjun01.github.io/v/shadcn-ui/
• React 상태관리 관련 글: https://overreacted.io/before-you-memo/
• Nx 공식 홈페이지: https://nx.dev/
• GPT-4o 사용 링크: https://chatbotapp.ai/landing?utm_source=GoogleAds&utm_medium=cpc&utm_campaign={campaign}&utm_id=21162280270&utm_term=163066044880&utm_content=695718645557&gad_source=1&gclid=CjwKCAjw9IayBhBJEiwAVuc3fuuX7gbmzuNaEcZEvKn-pGQnhvSdTbf2ctIAIyYeKTWHCsyCmDo_nxoC6s4QAvD_BwE
• React 공식 문서: https://reactjs.org/