COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-31

목차

  1. 질문 문항별 페이지 구성과 유지보수성에 대한 고민
  2. 실제 회사 프로젝트 경험을 포트폴리오에 반영하는 영향
  3. 경력 초기 이직에 대한 의견과 팁
  4. 리액트와 뷰(Vue)의 차이점 및 사용 현황
  5. 공공기관 프로젝트에 Tailwind CSS 사용 가능성
  6. React Query의 무한 로딩 문제와 쿼리키 관리 팁
  7. 드롭다운 메뉴와 다이얼로그 컴포넌트 상태 관리 문제 해결하기
  8. 코드샌드박스(Codesandbox)에서 발생하는 모달 이벤트 문제
  9. 반복적인 이직과 실력 입증의 중요성
  10. 러닝(마라톤)과 개발자 생활에 관한 자유로운 대화

1. 질문 문항별 페이지 구성과 유지보수성에 대한 고민

  • FH는 포트폴리오에서 질문 문항별로 페이지를 구성했을 때 유지보수성이 떨어질까 고민함.
  • TZ는 문항이 배열 형태로 관리될 때 오히려 유지보수가 어려울 수 있다고 조언.
  • TZ는 문항별 페이지 구성은 설계만 잘하면 보일러플레이트가 많아도 유지보수에 큰 문제 없다고 설명.
  • 문항 간 상태 관리가 중요하며, runtime type-safe한 상태 관리를 도입·설명하면 좋다고 조언.
  • 상태 관리란? : 사용자의 현재 답변 상태, 페이지 이동 상태 등을 코드에서 정확히 추적·관리하는 방법으로, 타입 안전성이 높으면 코드 오류를 줄임.

2. 실제 회사 프로젝트 경험을 포트폴리오에 반영하는 영향

  • GT가 회사에서 리액트 기반 관리자 페이지를 직접 개발한 경험이 면접에 얼마나 도움이 되는지 질문.
  • ZX, FH 등은 회사에서 실제 사용되는 프로젝트라면 포트폴리오에서 매우 긍정적으로 작용한다고 답함.
  • 중요한 점: 단지 만든 게 아니라 어떻게 만들었고, 무엇을 배웠는지가 더 중요함.

3. 경력 초기 이직에 대한 의견과 팁

  • 6개월 만에 이직하는 것이 실력 있는 개발자에게 오히려 불이익이 되지 않는다는 의견이 우세.
  • JG는 능력만 있으면 대기업, 높은 연봉, 빠른 이직 모두 가능하다고 강조.
  • 이직 사유는 '회사와 맞지 않음', '회사 환경 부족' 등 긍정적으로 포장하는 것이 좋음.
  • UA는 면접 시 실력과 태도가 더 중요한 평가 요소라고 조언.
  • 빠른 이직 시 면접에서 진솔한 이유 설명과 본인의 성장 과정 어필이 중요.

4. 리액트와 뷰(Vue)의 차이점 및 사용 현황

  • TE가 리액트와 뷰의 난이도, 활용도를 질문.
  • 일반적으로 리액트가 더 많이 쓰이고 npm 다운로드 수 등으로도 확인 가능함.
  • 단방향 vs 양방향 데이터 바인딩 설명:
    • 리액트는 단방향 데이터 흐름에 집중해 데이터의 변경이 명확하고 예측 가능함.
    • 뷰는 v-model 등의 양방향 바인딩을 지원해 개발 초보자가 다루기 쉽지만 리액트에 비해 구조가 복잡할 수 있음.
    • 이 때문에 리액트가 대형 프로젝트나 복잡한 상태 관리에 더 적합하다고 여겨짐.

5. 공공기관 프로젝트에 Tailwind CSS 사용 가능성

  • MO는 공공기관 프로젝트에서 Tailwind CSS를 써도 되는지 질문.
  • LK, HA 등은 보통 프로젝트에 따라 다르지만 강제사항이 없다면 사용 가능하다고 조언.
  • Tailwind CSS는 유틸리티 클래스 기반 빠른 스타일링 도구로, 짧은 기간 내 개발할 때 효율적임.

6. React Query의 무한 로딩 문제와 쿼리키 관리 팁

  • BV는 두 개 이상의 useQuery 컴포넌트가 있을 때 무한로딩 문제 발생 사례 공유.
  • CP는 쿼리키가 중복되거나 순환 참조가 원인일 수 있으니 꼼꼼히 점검하라고 조언.
  • 쿼리키(queryKey)란? : React Query에서 캐싱 및 데이터 관리 기준이 되는 고유 키로, 배열이나 문자열 형태로 전달.
  • 올바른 쿼리키 관리와 렌더링 조건 제어(setFinishRender 같은 flag 활용)가 문제 해결에 효과적임.

7. 드롭다운 메뉴와 다이얼로그 컴포넌트 상태 관리 문제 해결하기

  • ZX가 shadcn 라이브러리를 사용하면서 드롭다운 메뉴 내 다이얼로그 닫혀도 드롭다운 메뉴가 닫히지 않는 문제를 겪음.
  • 여러 의견 중 context API 사용이 해결책으로 제안됨.
    • Context API란? : React에서 전역 상태나 데이터 공유를 위해 컴포넌트 트리 전체에 상태값을 전달해주는 기능.
    • 이를 활용하면 여러 컴포넌트가 상태를 공유하거나 이벤트를 트리거할 때 드릴링(Props 전달 반복)을 피할 수 있음.
  • UA는 Radix UI 기반 구조라 open 상태를 관리하는 방식에 따라 해결책이 다르니 구체적인 재현 환경 공유 필요하다고 조언.

8. 코드샌드박스(Codesandbox)에서 발생하는 모달 이벤트 문제

  • WP는 코드샌드박스 내에서 ESC키로 모달을 닫는 기능 구현 중 특정 상황에서 이벤트가 전달되지 않는 문제를 토론.
  • 포커스 관리와 이벤트 전파 차단, 모달이 중첩됐을 때 부모/자식 컨텍스트 상태 관리가 핵심.
  • 일반 UI 키트들은 모달 포커스 순서에 따라 문제를 해결하며, ESC 누르면 가장 위 모달만 닫히고 아래 모달은 유지되도록 구현됨.

9. 반복적인 이직과 실력 입증의 중요성

  • JG, UA 등은 경력 기간보다는 실력과 직무 적합성이 더 중요하다고 강조.
  • 면접 시 실력 부족이 이직 불합격의 주요 원인이며, "회사가 나를 품을 그릇이 아니다"라는 표현이 흔한 이직 사유라고 설명.
  • 실력 입증에는 코드 작성 능력, 설계 능력, 도메인 이해도, 커뮤니케이션 스킬 등이 포함됨.
  • 블로그나 유튜브 등 자신만의 컨텐츠로 PR하는 것도 자신의 역량을 드러내는 좋은 방법임.

10. 러닝(마라톤)과 개발자 생활에 관한 자유로운 대화

  • JG가 하프 마라톤 도전을 계획 중이라는 개인 이야기 공유.
  • 대화 중 키로당 페이스(분:초 단위로 1km를 달리는 시간)와 대회 정보 공유가 오갔음.
  • 개발자 커뮤니티에서 건강과 운동 이야기가 활발히 오가는 모습도 확인됨.

면접팁⚡

  • 포트폴리오 작성: 단순히 ‘무엇을 만들었는지’보다는 ‘어떻게 구현했는지’, ‘어떤 문제를 해결했는지’를 구체적으로 작성할 것.
  • 경력 초기 이직 질문에 대해: 솔직하고 긍정적인 이직 사유를 준비하고, 자신의 성장을 강조할 것.
  • 기술 질문 대응: React Query 쿼리키 관리, Context API 사용법 등 구체적이고 체계적인 설명이 면접에서 좋은 인상을 줌.
  • 프론트엔드 라이브러리 선택: 지원 회사의 기술 스택과 시장 트렌드를 미리 파악해 관련 경험 어필할 것.
  • 실력 증명 방법: 코딩 테스트 외에도 블로그, 깃허브 등 다양한 채널을 통해 자신의 역량을 꾸준히 알리는 것이 중요.

링크🔗

#리액트#포트폴리오#ReactQuery#상태관리#이직#프론트엔드#Vue#TailwindCSS#모달#드롭다운
이전 포스트

2024-10-30

2024년 10월 30일
다음 포스트

2024-11-01

2024년 11월 1일