COMMIT.chat
View Bookmarks
react 썸네일react

2025-04-01

목차

  1. 출퇴근과 거주지 선택 경험 공유
  2. Relay와 클라이언트 상태 관리
  3. React Context API와 폴더 구조 관습
  4. Yup, Zod 등 타입 검증 및 폼 유효성 라이브러리 논의
  5. Next.js와 Express.js 서버 구성 고민
  6. 개발 도구 및 워크플로우 이야기
  7. 국가 기술 투자 및 그래픽카드 국산화 언급
  8. 커뮤니티 예절 및 커뮤니케이션 문제
  9. 개발 초기 경험과 라이브 서비스 이야기
  10. 잡담 및 기타

1. 출퇴근과 거주지 선택 경험 공유 🏠🚗

  • 직접 거주지를 다녀보고 출퇴근 시간을 경험해 보는 것이 가장 효과적임.
  • 교통비, 이동시간, 출퇴근 편의성 등은 실제 이동해 봐야 체감 가능.
  • 파주시 문산 및 운정, 관악구 등 서울 근교 거주 경험 공유.
  • 특정 지역(예: 관악구)이 교통과 생활면에서 무난하다는 의견.
  • 출퇴근 경로를 네이버 지도와 같은 앱으로 미리 조회하는 것도 추천.

참고: 출퇴근 시간과 교통비 문제는 단순히 정보 검색만으로 해결하기 어려움. 직접 체험하고 발로 뛰어보는 것이 중요함.

2. Relay와 클라이언트 상태 관리 📊

  • Relay는 그래프QL 클라이언트로 주로 서버 데이터 관리에 사용.
  • 클라이언트 상태(로컬 상태)는 보통 React의 useState, Context API로 관리.
  • Relay의 클라이언트 스키마(로컬 스테이트 확장) 기능도 있지만 많이 쓰이지 않음.
  • Relay는 서버 상태의 캐시와 동기화에 중점, 로컬 상태 전용 도구는 아님.

기초 개념:

  • useState: 컴포넌트 내부에서 상태를 관리하는 기본적인 React 훅.
  • Context API: 전역 상태나 여러 컴포넌트에서 공유할 상태를 쉽게 전달하는 React 내장 기능.
  • Relay: 페이스북이 만든 GraphQL 클라이언트 라이브러리로 서버와 데이터 연동에 최적화됨.

3. React Context API와 폴더 구조 관습 📁

  • Context API를 구현할 때 코드 위치는 자유롭고 정해진 관습은 없음.
  • 일부 강의나 프로젝트에서 Context 관련 코드를 store/ 폴더에 둔다고 하지만, 엄밀히 말해 Context API는 상태 저장소(Store)가 아님.
  • 상태 저장소는 보통 리덕스(Redux), 리코일(Recoil), 주스탄드(Zustand) 같은 별도 라이브러리와 연관.
  • Context는 주로 '상태 전달용 터널' 역할이라 명확히 구분하는 게 좋음.

참고: 프로젝트 구조는 팀과 개인 스타일에 따라 다르나, Context와 Store 개념을 혼동하지 않는 것이 중요.

4. Yup, Zod 등 타입 검증 및 폼 유효성 라이브러리 🛠️

  • Yup과 Zod는 JavaScript/TypeScript에서 폼 입력값 및 API 데이터 검증에 많이 쓰임.
  • Yup은 간결하고 널리 쓰이며, Zod는 TypeScript와의 호환성이 좋고 더 최신 트렌드에 맞음.
  • 런타임 밸리데이션을 지원하고, 타입 안정성을 강화하는 데 도움을 줌.
  • 단점은 스키마 정의가 귀찮고 코드가 길어질 때가 있다는 점.

최신 트렌드:
런타임에서도 타입을 검사해 주는 점 때문에 Zod 선호도가 높아짐.

5. Next.js와 Express.js 서버 구성 고민 ⚙️

  • Next.js는 프레임워크 수준에서 SSR(서버사이드 렌더링)을 지원하는 React 기반 프레임워크임.
  • Express는 Node.js 백엔드 서버 프레임워크로 API 서버 구축에 적합.
  • Next.js를 Express 서버 안에 통합하는 커스텀 서버 방식은 권장되지 않음.
  • 보통 Next.js와 Express를 별도 서버로 두고 Nginx 등 리버스 프록시로 통합하는 게 일반적.
  • Next.js 단독으로 SSR과 프론트엔드를 담당하고 Express는 API 용도로 분리하는 것이 관리와 유지보수에 효율적.

팁: 만약 단순 SSR만 필요하다면 Next.js를 독립적으로 쓰고, 복잡한 API는 Express 혹은 별도 서버에서 처리 권장.

6. 개발 도구 및 워크플로우 이야기 🔧

  • ESLint, Prettier, Vitest 등을 로컬, CI/CD 파이프라인에서 활용하며 빌드와 테스트에 시간을 적절히 분배하는 게 필요.
  • 빌드 테스트를 파이프라인에 맡기고, 로컬은 최소한의 린트와 유닛 테스트만 수행해 개발 효율성을 높이는 전략 추천.
  • WebStorm, VSCode 등의 IDE 선택과 JetBrains AI 도구에 대한 의견도 공유됨.

7. 국가 기술 투자 및 그래픽카드 국산화 가능성 🌏

  • 그래픽카드 및 주요 하드웨어 국산화는 기술력과 투자 부족이 주요 원인.
  • 짧은 성과 중심의 지원 정책은 장기 성장에 걸림돌이 될 수 있음.
  • 인력 유출과 연구개발 투자 미흡 현상이 복합적으로 작용.

유의점: 꾸준한 투자가 뒷받침되어야 산업 경쟁력 및 기술 자립을 이룰 수 있음.

8. 커뮤니티 예절 및 커뮤니케이션 문제 🤝

  • 질문할 때 진심으로 도움 요청함에도 불구하고, 답변 중 말투가 강하게 느껴져 오해 발생.
  • 도움 주려는 의견들도 있었으나, 상대방 입장 고려해 부드러운 소통 권장.
  • 커뮤니티 내 예절이 중요하며, 상처받은 사람을 배려하는 분위기가 필요함.

9. 개발 초기 경험과 라이브 서비스 이야기 👩‍💻👨‍💻

  • 짧은 경험이라도 직접 해보고 삽질하는 과정이 직무 능력 향상에 도움 됨.
  • 실무 프로젝트, 크롤링, API 연동 경험 사례 공유.
  • 기술 이력서에 경험을 잘 녹여내는 것도 중요하다는 얘기.

10. 잡담 및 기타 🎉

  • 만우절 농담, 퇴근 인사, 식사 추천, 애니메이션 이야기 등 가벼운 일상 대화.
  • 단순 재미와 친목 도모를 위한 소통도 활발히 이뤄짐.

면접팁⚡

  • Relay와 상태관리 구분
    면접에서 Relay가 클라이언트 상태 전역 관리를 대체한다고 생각하는지 묻는 질문 자주 등장. Relay는 서버 데이터와 캐시 관리에 집중하고, 클라이언트 로컬 상태는 useState/Context API로 해결한다는 점 명확히 이해하고 답변할 것.

  • Context API와 Store 구분
    Context API는 리액트 전역 상태 공유용 ‘데이터 전달 터널’이고, Redux, Recoil과 같은 ‘상태 저장소’(Store)와는 다른 개념임을 설명할 수 있어야 함.

  • Next.js와 Express 서버 역할 분리
    Next.js는 프론트엔드 SSR 및 정적 사이트 생성에 최적화 되어 있고, API 서버 역할은 Express 같은 백엔드 프레임워크가 담당하는 것이 일반적임을 말할 수 있어야 함.

링크🔗

#출퇴근#React#Relay#ContextAPI#NextJS#Express#유효성검증#커뮤니케이션#개발도구#기술투자
이전 포스트

2025-03-31

2025년 3월 31일
다음 포스트

2025-04-02

2025년 4월 2일