COMMIT.chat
View Bookmarks
react 썸네일react

2023-10-26

목차

  1. 캘린더 / 소켓 통신과 알람 기능
  2. 상태관리 라이브러리 이야기 (Redux, Zustand, XState 등)
  3. 개발 도구, 라이브러리 설치 및 버전 관련 이슈 (Tailwind, Chakra UI)
  4. Next.js 서버 요청 처리 및 대규모 트래픽 관리
  5. React Suspense 관련 상태 유지 고민
  6. React 텍스트 위지윅(WYSIWYG) 에디터 추천
  7. React Query 최신 버전 변화 및 콜백 API 이슈
  8. CSS-in-JS와 Tailwind의 장단점
  9. 개발 문화, 팀 소통과 개인 경험 공유
  10. 기타 소소한 질문과 팁, 대화 내용

1. 캘린더 / 소켓 통신과 알람 기능

  • 캘린더 개발은 생각보다 어려움. 실제로 구글 캘린더 같은 기능 개발은 고난도.
  • 면접에서 캘린더 알람 기능에 소켓통신(양방향 통신)이 사용될 수 있음.
  • 소켓(socket.io 등)은 실시간 데이터 갱신에 사용되며, 채팅처럼 실시간 알림이 필요한 경우 유용.
  • 캘린더 자체에 소켓을 쓰는 건 일반적이지 않고, 알람 기능에 소켓이나 AJAX(비동기통신) 사용 가능.
  • 면접 준비 시, 알람 동작 원리와 비동기 처리 방법(ajax, async/await, 소켓) 이해 필요.

소켓이란?

  • 소켓은 네트워크 통신에서 데이터 송수신 채널을 의미.
  • 웹 개발에서는 보통 웹소켓(WebSocket)을 통해 서버-클라이언트 간 양방향 실시간 통신 구현 시 사용.
  • 채팅, 실시간 알림 등에 적합.

2. 상태관리 라이브러리 이야기

  • Redux, Zustand, Recoil, Jotai, XState 등이 언급됨.
  • Redux는 탑다운 설계에 적합, 설계가 어렵고 보일러플레이트가 많음.
  • Zustand, Jotai는 가볍고 단순, 작은 프로젝트에 적합하나 완벽한 설계 툴은 아님.
  • XState는 유한 상태 머신(Finite State Machine)을 기반으로 하며, 컴포넌트 생명주기와 상태를 연계해서 복잡한 상태 제어에 유리함.
  • 리액트쿼리는 서버 상태 캐싱에 집중, 전역 상태관리 용도로는 제한적.
  • 상태 관리 시, 프로젝트 특성에 맞게 선택하는 것이 관건이며, 무조건적인 도구 사용은 오히려 생산성 저하로 연결 가능.

XState란?

  • 복잡한 UI와 비즈니스 로직의 상태 전환을 명확하고 선언적으로 관리할 수 있게 돕는 상태 머신 및 상태차트 라이브러리.
  • 컴포넌트 Lifecycle과 상태가 밀접히 연결되어, 일정 규모 이상의 프로젝트에서 유용.
  • Visual 툴이 지원되어, 상태 흐름 시각화와 관리 가능.

3. 개발 도구, 라이브러리 설치 및 버전 관련 이슈

  • TailwindCSS와 Chakra UI 설치 시 npm i (dependencies)와 npm i -D (devDependencies) 사이 혼란.
  • Tailwind는 주로 빌드 시 CSS를 컴파일하기에 devDependency로 설치하는 게 권장됨.
  • Chakra UI는 런타임 의존성이 있어 보통 dependencies에 설치.
  • 패키지 설치 명령어와 위치(dependencies vs devDependencies)는 패키지 사용 특성에 따라 결정되므로 공식 문서 참고 권장.
  • 각 패키지의 최신 버전과 주요 변경사항(예: React Query v5의 콜백 API 제거)도 주기적으로 확인 필요.

4. Next.js 서버 요청 처리 및 대규모 트래픽 관리

  • Next.js 서버는 Node.js 이벤트 루프와 비동기 처리를 기반으로 함.
  • 여러 클라이언트 동시 요청 처리 시, 실제 I/O 작업 등 기다리는 동안 다른 요청을 처리할 수 있어 효율적.
  • '순차적 처리'는 요청 큐 순서대로 처리한다는 의미이나, Node.js 비동기 특성상 병렬성도 존재.
  • 대규모 서비스는 서버 확장, 오토스케일링, 캐싱 전략 등이 중요하며, Vercel과 같은 플랫폼이 자동 지원하는 경우도 많음.
  • 단, 아무 생각 없이 짜면 요금 폭탄이나 서비스 장애 우려가 있으므로 인프라 지식도 필요.

5. React Suspense 관련 상태 유지 고민

  • Suspense 컴포넌트 내에서 상태가 초기화되어 불편함을 겪는 사례.
  • 자식 컴포넌트 상태를 유지하려면 부모 컴포넌트에서 상태관리 하거나 Context API 사용 권장.
  • Suspense는 데이터 로딩 중 fallback UI를 보여주는 기능이며, 내부 상태는 별도 관리가 필요.
  • 리렌더링 시 상태 유지 패턴을 익히는 것이 중요.

6. React 텍스트 위지윅(WYSIWYG) 에디터 추천

  • 사진, 테이블 삽입 지원하는 에디터로 Lexical 추천.
  • Lexical은 페이스북에서 만든 확장성 좋은 에디터 라이브러리.
  • Quill 대비 커스터마이징과 React 호환성에서 유리함.
  • 실제 프로젝트 도입 시 공식 문서와 GitHub 참고 바람.

7. React Query 최신 버전 변화 및 콜백 API 이슈

  • React Query v5부터 useQuery 내 콜백 API onSuccess 등의 옵션이 사라짐.
  • 신규 버전에서는 효과를 useEffect 등 React 자체 훅으로 관리 권장.
  • 이 변화로 인해 코드 수정 및 리팩토링 필요.
  • 관련 해결 방법은 커뮤니티나 공식 문서 참고 가능.

8. CSS-in-JS와 Tailwind의 장단점

  • TailwindCSS는 클래스 유틸리티 단위로 스타일을 직접 지정하며, 빠른 개발과 번들 최적화에 유리.
  • 다만 세밀한 픽셀 단위 조정(1px~3px 등)에는 한계가 있고, 디자이너와 협업 시 스타일 작업 분리가 필요할 수 있음.
  • CSS-in-JS는 컴포넌트 단위로 스타일을 관리하지만 퍼포먼스 이슈나 스타일 오버헤드가 있을 수 있음.
  • 개인과 팀 취향, 유지보수성에 따라 선택.
  • VSCode Tailwind 확장 설치 시 클래스 추천, 컬러 라벨 등 사용 편의성 상승.

9. 개발 문화, 팀 소통과 개인 경험 공유

  • 개발 중 GPT 같은 AI 도구를 활용하면 기능구현이 쉬워지나, 코딩 재미는 줄어듦.
  • 변수명 추천, 논리 생성 등 단순 반복 작업은 AI 활용 가능.
  • 개발자는 설계, 로직, 문제 해결 등 "사람만 할 수 있는" 부분에 집중하는 게 효율적.
  • 업무 중 겪는 난감함, 팀원 간 소통, 작업 방식 공유 다수가 공감하는 부분.
  • 선배와 동료의 조언, 경험 공유가 개발 역량 향상에 큰 도움.

10. 기타 소소한 질문과 팁, 대화 내용

  • React 타입스크립트 배열 nullable 접근 시 payload?.[0] 문법으로 처리 가능.
  • React DevTools는 브라우저뿐만 아니라 React Native 등 비브라우저 환경 디버깅에도 사용됨.
  • XState 선언부와 Hook 연동 구조, 상태 전달 방식 간략히 소개.
  • UI 중앙 정렬은 CSS flexbox에서 justify-content: center와 align-items: center 조합이 대표적임.
  • GitHub, YouTube 등 공유된 다양한 링크들은 별도 참고용으로 확인 권장.

면접팁⚡

  • 캘린더 프로젝트 면접 시, 알람 기능의 실시간 통신 방식을 숙지하라. (예: socket.io, AJAX)
  • 상태관리 라이브러리 별 장단점과 프로젝트 특성에 따른 선택 이유를 명확히 설명할 수 있어야 함.
  • Next.js 동시 요청 처리와 서버 확장성, 캐싱 전략에 대한 기본 이해 필요.
  • React Suspense의 동작 원리 및 상태 유지 패턴, 부모-자식 상태 연결 방법 습득 필수.
  • 최신 React Query 변경사항과 대응 전략(콜백 → useEffect 전환) 숙지.

링크🔗

#React#NextJS#상태관리#XState#TailwindCSS#ReactQuery#소켓통신#개발팁#프론트엔드#WYSIWYG
이전 포스트

2023-10-25

2023년 10월 25일
다음 포스트

2023-10-27

2023년 10월 27일