2024-03-14

목차

1. Next.js App Router 이슈 및 이용 현황
2. 키보드와 마우스 추천 이야기
3. Tailwind CSS v4 미리보기와 의견
4. React Router v6 변경 사항과 클래스 컴포넌트에서 쿼리 스트링 다루기
5. Input type=number 문제와 해결법 (inputmode 속성)
6. MSW(Mock Service Worker)와 백엔드 개발 없는 상황 대응
7. React Hook useEffect 의존성 관련 고민과 해결 방향
8. AI(인공지능)와 AGI(범용 인공지능) 관련 토론
9. Node.js, Express, MongoDB와 풀스택 관련 조언
10. 대화 속 기타 에피소드 및 개발자 생활 이야기

1. Next.js App Router 이슈 및 이용 현황 🚧

• Next.js 13 도입 초기부터 app router가 도입됐으나, 현장 적용까지는 어려움이 많음.
• app router의 문제점
  • 서버사이드에서 request 객체 접근 불가 (기본 제공 안됨)
  • nextUrl 헤더가 dev와 prod에서 다르게 동작하는 버그(예: 14.1.0 버전)
  • 캐싱 이슈, SSR 환경에서 새로고침 후 라우팅 문제 많음
  • 요청 정보(쿠키, 헤더)는 middleware를 통해 전달하고, 페이지 컴포넌트에서는 headers(), cookies() 등으로 접근해야 함
  • 직접 request 객체를 페이지에서 사용하는 것은 현재 공식 지원하지 않음.
• 대안 및 팁
  • 인증이나 리다이렉트는 Layout 혹은 middleware에서 구현하고, 필요한 정보만 헤더나 쿠키에 직렬화해 넘기는 방식 권장
  • use client를 피하려는 시도가 있으나, 본질적으로 완전히 피하는 것은 어렵다고 봄
  • app router 동시 사용 시 legacy 페이지 라우터 유지하는 곳도 많음. 신규 개발에만 app router 적용 권장
• 참고: Next.js 공식 문서와 GitHub issues에 관련 버그와 설정 노트가 많음
• 면접 대비: app router의 SSR 이슈, 요청 정보 전달 방법, 미들웨어 역할에 관한 이해는 중요

2. 키보드와 마우스 추천 💻

• 많은 개발자가 Mac 전용 키보드에 관심이 많음
• 추천 제품:
  • 로지텍 K380 (작고 무선, 다중기기 지원)
  • 매직 키보드(1세대는 터치 아이디 미지원)
  • 벗어나기 힘든 Mac 키보드 시장, 무선 및 미니멀 디자인 인기
• 마우스는 로지텍 버티컬마우스가 인기

3. Tailwind CSS v4 미리보기 및 의견 🎨

• Tailwind CSS 4.0 Alpha 발표
• 주요 목표: 자바스크립트 라이브러리 느낌 대신 CSS 네이티브에 가깝게 개선
• 커뮤니티 반응
  • 테일윈드 장점에 공감하면서도, 메인테이너의 의견과 커뮤니티 사용 행태는 다를 수 있음
  • CSS 추상화보다는 스타일이 적용된 컴포넌트 중심 관리 추천
  • 경쟁 프레임워크 및 CSS 도구와 비교 시 장단점 존재
• 초보자라면 기본 CSS 개념(MDN 등)과 함께 Tailwind 학습 권장

4. React Router v6 변경 사항 및 클래스 컴포넌트에서 URL 쿼리 파라미터 가져오기 🔄

• React Router v6에서는 <Routes>가 <Route>를 감싸야 하고, 기존 v5 방식과 문법 크게 변경됨
• 클래스 컴포넌트에서 location, history, match 등의 props가 기본 제공되지 않음
• 해결 방법
  • withRouter HOC가 공식 지원 종료, 대신 Hooks 사용 권장 (함수형 컴포넌트 전환)
  • 클래스 컴포넌트에서 쿼리 스트링을 사용하려면 window.location.search를 직접 사용하거나, 함수형 컴포넌트를 만들어 쿼리 파라미터를 전달하는 방식을 활용해야 함
• 공식 리액트 라우터 문서는 https://reactrouter.com/en/main 참고
• 면접 팁: React Router 문법변경에 따른 마이그레이션 방법과 Hooks의 중요성 이해

5. Input type=number 문제 및 inputmode 속성 활용 방법 🔢

• input type="number"는 브라우저 기본 동작으로 숫자 앞 0이 보이지 않는 등 UI/UX가 제한적임
• 모바일에서 숫자 키패드를 띄우고 싶을 때는
  • inputmode="numeric" 속성을 type="text" 인풋에 추가하면 숫자 키패드가 활성화됨
  • pattern="[0-9]*"를 추가해 구형 디바이스 fallback 보완 가능
• inputmode는 HTML 글로벌 속성으로, 입력 방식 제어 도움
• 참고: MDN 문서 https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/inputmode

6. MSW(Mock Service Worker) 및 백엔드 없는 상황에서 임시 데이터 관리 🛠️

• 백엔드 팀이 없거나 늦어져 프론트 작업부터 시작해야 할 때, MSW.js 사용 추천
• MSW는 네트워크 레벨에서 API를 가로채고 모킹하여 실제 서버 없이 개발 가능
• 단점: MSW 라이브러리 자체 버그 및 버전 관리가 까다로울 수 있음
• 대체 방법: Firebase 등 백엔드 없이 데이터 저장 가능한 솔루션 활용 가능
• 팁: Dependencies 관리 주의, 자주 버전 업데이트 확인 필요

7. React Hook useEffect 의존성 배열 고민과 해결 방안 ⚙️

• useEffect 의존성 배열에 상태 값(isLoading 등)을 넣으면 무한 반복 실행될 수 있음
• 권장 패턴
  • 상태 하나에 의존하는 효과는 주의 깊게 설계
  • 비동기 데이터 로딩 등은 함수로 분리하거나 useRef로 상태 저장해 관리
  • 복잡한 로직 분리 및 커스텀 훅 활용 권장
• 간단한 접근법부터 복잡한 설계로 단계적 개선 추천
• 면접 대비: Hook 기본 이해와 의존성 배열 설계 중요성

8. AI(인공지능)와 AGI(범용 인공지능) 토론 🤖

• 전문가 다수가 인간 수준 또는 그 이상의 범용 인공지능(AGI)은 2029년보다는 더 먼 미래로 예상
• AI 발전은 빠르지만, 완전한 인간 수준 인지 능력은 아직 미지수
• 대기업들이 자율주행 등 일부 AI 프로젝트를 철수하는 사례가 있어 더욱 신중한 평가 필요
• AI는 활용 가능한 도구로 보는 시각이 강해지고 있음
• AI 관련 기술을 배우는 개발자들도 많음, 다만 정확한 원리와 심층 이해는 여전히 도전 과제
• 참고: Gary Marcus, Ernest Davis 저서 등과 최신 연구 동향

9. Node.js, Express, MongoDB와 풀스택 공부 조언 💡

• Next.js를 배우더라도 Node.js, Express, MongoDB 등 서버 사이드 기술은 별도로 공부하는 게 좋음
• Next.js는 프론트엔드에 가까운 풀스택 프레임워크지만, 서버 사이드 및 DB 지식은 따로 필요
• 추천 학습 순서: 자바스크립트 기초 → Node.js 기초 → Express(백엔드 프레임워크) → DB(관계형 또는 NoSQL)
• AI나 클라우드 도입도 좋으나 기본 백엔드 개념 확립이 바탕이 됨
• 면접 준비 시 클라이언트-서버 아키텍처 및 API 설계 기본 개념 숙지 필수

10. 기타 개발자 라이프 & 에피소드 💬

• 야근에 대한 고민과 회사 문화, 개인 생활 균형 이야기
• 개발 관련 커뮤니티나 라이브 방송의 유용성 및 주의점
• 개발자용 하드웨어(키보드, 마우스) 및 주변기기 사소한 이야기
• 작은 기능 구현, 프론트엔드와 백엔드 협업, 풀스택으로서 커리어 고민 나눔
• 기술 질문 공유 및 커뮤니티 피드백 적극 활용 권장

면접팁⚡

• Next.js app router vs pages router의 SSR 및 요청객체 처리 차이 이해
• React Router v6 문법 변화와 함수형 컴포넌트, 훅으로의 전환 중요성
• useEffect 의존성 배열 내 상태 값 관리의 일반적인 문제점과 해결책
• 클라이언트-서버 역할 구분 및 풀스택 개발자로서 기본 API 및 DB 개념 파악
• AI에 대한 현실적 기대와 기술 트렌드에 대한 최소한의 지식

링크🔗

• Next.js 공식: https://nextjs.org/docs
• React Router 공식: https://reactrouter.com/en/main
• MDN inputmode: https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/inputmode
• Tailwind CSS v4 알파: https://tailwindcss.com/blog/tailwindcss-v4-alpha
• MSW (Mock Service Worker): https://mswjs.io/
• AI 관련 서적(예) : ‘2029 기계가 멈추는 날’ (Gary Marcus 외 저서)
• React useEffect 관련: https://reactjs.org/docs/hooks-effect.html
• React Router v6 업그레이드 가이드: https://reactrouter.com/en/main/upgrading/v5
• Twilio + React 가이드: https://www.twilio.com/en-us/blog/building-twilio-apps-react-guide-frontend-developers