COMMIT.chat
View Bookmarks
react 썸네일react

2024-01-18

목차

  1. 코딩 테스트와 이직 준비 전략
  2. React 훅과 상태관리 라이브러리 이해하기
  3. React Query 에러 처리 방법과 고민
  4. Next.js 14와 서버 컴포넌트 동적 라우팅
  5. CSS 클래스명 짓기와 스타일링 팁
  6. ContentEditable 사용 경험과 주의점
  7. 폼 관리 라이브러리 비교와 설계 이슈
  8. 테스트 환경과 DB 운영 실무
  9. Tailwind CSS에 대한 개발자 의견과 활용법
  10. 연봉 협상 및 직장 분위기 이야기

1. 코딩 테스트와 이직 준비 전략 💻

  • 대부분 개발자들이 2~3개월 집중적으로 코딩 테스트(코테)와 기술 스택 학습에 몰입하면 실력이 크게 향상됨.
  • 중요한 기술로는 타입스크립트, React 훅, Next.js, 그리고 상태관리 라이브러리를 꼽음.
  • 토이 프로젝트를 통해 실무 능력을 키우는 것을 추천. 공공기관 API 연동 같은 간단한 추가 작업을 통해 완성도를 높일 수 있음.
  • 실력과 지식 흡수력 향상은 타입스크립트와 Next.js를 제대로 익혔을 때 크게 느낀다고 함.
  • 백수 기간에는 집중 공부가 가능하므로 시간을 활용해 단기간에 실력을 끌어올리자고 격려함.

2. React 훅과 상태관리 라이브러리 이해하기 🌀

  • 필수 훅: useState, useEffect, useContext — React 공식 문서에 따르면 기본 중 기본.
  • 자주 쓰는 추가 훅: useReducer, useRef, useMemo, useCallback.
  • useRef는 DOM 요소 접근 및 특정 값의 유지에 주로 사용됨. 예를 들어 스크롤 위치 참조 등에 활용.
  • 상태관리 라이브러리로는 Redux, Recoil, Zustand 등이 있는데, 팀에 따라 React 자체 훅으로 해결하는 경우도 많음.
  • useCallback과 useMemo는 주로 성능 최적화를 위해 사용하며, 복잡한 계산이나 함수 재생성을 방지해 렌더링 성능을 개선함.

3. React Query 에러 처리 방법과 고민 ⚠️

  • 최신 React Query에서는 useQuery 훅 내에서 onSuccess, onError 옵션이 사라짐.
  • 에러 처리는 주요 비즈니스 로직 분리 및 일관된 에러 대응을 위해 고민이 필요함.
  • 보통은 에러 바운더리(Error Boundary)에서 처리하거나, queryFn 내부에서 직접 핸들링하는 방법이 제안됨.
  • 에러 로직이 흩어지면 관리가 어려워질 수 있으므로 구조적인 접근이 중요함.
  • 공식 토론(discussion) 링크: React Query Discuss #5279

4. Next.js 14와 서버 컴포넌트 동적 라우팅 🚀

  • 서버 컴포넌트에서 동적 경로 params는 컴포넌트의 props.params로 접근 가능.
  • 예: const ServerComponent = ({ params }) => { const { id } = params; ... }
  • 서버에서 API를 두 번 호출하는 경우가 있을 수 있음(데이터 Fetch 후 렌더링).
  • 추가 공식 문서나 참고 자료가 필요하면 Stack Overflow 같은 커뮤니티에서 해결책을 찾아보자.
    예: StackOverflow 관련 질문

5. CSS 클래스명 짓기와 스타일링 팁 🎨

  • 클래스명이 너무 길어지거나 의미 전달이 안 되는 경우가 많아 고충.
  • BEM(Block Element Modifier) 방식 추천 — 블록, 요소, 수정자 형태로 나누어 명확한 구조를 갖출 수 있음.
  • 회사나 프로젝트에 따라 한글 클래스명을 사용하는 경우도 있는데, 보통 영어 권장.
  • 유틸성 클래스는 최대한 간단히, 의미 있는 이름으로 유지하는 걸 권장.
  • 클래스명에 상수값을 활용하면 관리와 타이핑에 편리함 (예: const PROFILE_TYPES = { ONE: "소플" } as const).

6. ContentEditable 사용 경험과 주의점 📝

  • React 환경에서 contentEditable 사용 시 렌더링 제어나 포커스 유지가 일반 인풋 요소보다 까다로움.
  • 긴 텍스트에 따라 자동으로 width를 늘리는 등 동적인 스타일 조정이 필요할 때는 CSS만으로는 한계가 많음.
  • 커서 위치 조절 등 세밀한 동작은 JavaScript (useRef, 이벤트 핸들러)로 처리하는 게 현실적.
  • 화면 깜빡임, 낮은 성능 문제 발생 가능성에 대비해 퍼블리셔나 프론트엔드 담당자와 협업 권장.
  • 대체로 프로덕션에서 contentEditable는 사용을 신중히 고려할 필요가 있음.

7. 폼 관리 라이브러리 비교와 설계 이슈 🛠️

  • 대표 폼 라이브러리: Formik, React Hook Form, Ant Design Form.
  • React Hook Form은 명령형 프로그래밍 패러다임이라 다소 복잡함.
    사용법과 관리가 까다로워 실 사용자 피드백은 엇갈림.
  • Ant Design은 UI와 폼이 밀접하게 결합되어 있고, 커스텀 에러 핸들링에 제약이 있음.
  • XState 같은 상태 머신 라이브러리를 도입해 폼 상태를 관리하는 사례도 있음.
  • 폼 설계 시, 사용성, 에러 처리, 유지보수 편의성 모두 고려하는 게 중요.

8. 테스트 환경과 DB 운영 실무 🧪

  • 일반적으로 테스트는 실제 서비스 DB가 아닌 별도의 테스트 DB에서 수행.
  • 운영 DB 데이터를 주기적으로 복제해 테스트 환경에 반영하는 방식 많이 사용.
  • 트랜잭션 롤백을 통해 테스트 데이터를 남기지 않는 전략을 사용하기도 함.
  • 실 DB를 그대로 테스트에 사용하는 것은 데이터 오염과 보안 문제로 권장하지 않음.
  • 개인정보보호법 및 전자상거래법 등 법적 보존 기간과 데이터 보관 정책도 프로젝트에 따라 준수해야 함.

9. Tailwind CSS에 대한 개발자 의견과 활용법 ⚡

  • Tailwind CSS는 유틸리티 퍼스트 방식으로 빠른 개발과 유지보수가 가능하다는 평가.
  • 한국에서는 일부 개발자들이 부정적인 인식을 갖기도 하지만, 실제 사용자는 편리함을 체감.
  • 자동완성 도구와 함께 사용하면 클래스 이름을 모두 외우지 않아도 됨.
  • 전체 레이아웃, 컴포넌트별 스타일 등 계층적으로 관리 가능.
  • styled-components 등 전통적 CSS-in-JS와 병행하거나 대체하는 경우 많음.
  • 유지보수 시 복잡함을 줄이려면 CSS 방법론(BEM, Atomic CSS 등)을 참고할 것.

10. 연봉 협상 및 직장 분위기 이야기 💼

  • 요즘 대체로 신입 연봉이 상승하는 추세, 4,000만 원 이상인 사례도 다수.
  • 연봉 협상 시 회사에서 원하는 금액을 직접 적으라고 할 때, 자신감 있게 적는 것이 좋음.
  • 수당, 식대 포함 여부는 꼼꼼히 확인할 것.
  • 대기업이나 팀 규모에 따라 신기술 도입 자유도 차이가 큼.
  • 팀 내 결정사항과 책임 소재가 명확해야 기술 결정 및 도입이 원활함.
  • 정시 퇴근과 자율 출퇴근 문화에 대한 이야기도 활발하며, 야근 수당과 눈치 문화에 대한 고민도 나옴.

면접팁⚡

  • React 훅: useState, useEffect, useContext는 반드시 숙지할 것. 추가로 useReducer와 useCallback, useMemo도 알아두면 좋음.
  • 상태관리 라이브러리 사용 경험과 한계점에 대해 질문 받을 수 있음. React 자체 상태관리 vs 외부 라이브러리 활용 장단점 이해 필요.
  • Next.js 서버 컴포넌트에서 동적 라우팅 처리 방법 숙지 권장 (props.params 활용).
  • 폼 관리 라이브러리(Formik, React Hook Form 등) 사용 경험과 각각의 특징, 단점에 대해 설명할 수 있어야 함.
  • Tailwind CSS의 장점과 단점, 유지보수 시 고려점 등에 대해서도 대비하면 좋음.

링크🔗

#React#NextJS#코딩테스트#상태관리#ReactQuery#TailwindCSS#폼관리#CSS#이직#연봉협상
이전 포스트

2024-01-17

2024년 1월 17일
다음 포스트

2024-01-19

2024년 1월 19일