COMMIT.chat
View Bookmarks
react 썸네일react

2023-10-25

목차

  1. 많은 언어에서 한 줄씩 명령어 입력하는 방식과 스크립트 실행 방식 비교
  2. WebGPU와 React기반 LLM 모델 서비스 소개
  3. Agile 문화와 스타트업 경험담
  4. React Query와 버전 이슈 및 캐싱 동작 원리
  5. Next.js 13, BFF(Backend For Frontend), 서버액션 이해
  6. React의 export/import 문법과 모듈 관리 팁
  7. UI 개발 팁: NativeWind, Tailwind, CSS 마스킹, ResizeObserver 에러
  8. 면접 및 코딩테스트 경험 공유
  9. 협업에서 기획자와 개발자간 커뮤니케이션
  10. 커스텀 훅과 리액트 로직 재사용 공부 자료

1. 명령어 입력 방식 이해하기 🔄

  • 대부분 CLI 환경에서 한 줄씩 명령어를 입력해 작업함 (ex. Bash 쉘).
  • 하지만 한 줄씩 입력하는 것이 아니라 문자열 전체를 받아서 일괄 실행할 수도 있음.
  • 노드(Node.js)나 스크립트 환경은 이 두 가지 모두 가능하며 용도에 따라 다름.

2. WebGPU와 React 기반 LLM 모델 서비스 소개 🎛️

  • WebGPU는 GPU 자원을 웹에서 활용할 수 있게 해주는 최신 기술.
  • React 기반 웹앱에 WebGPU를 적용해 대형 언어 모델(LLM)을 서비스하는 사례가 등장.
  • 초기 단계 기술임에도 관심과 실험이 활발히 진행 중.
  • WebGPU는 구글의 WebGL 다음 세대 그래픽 API로, 고성능 컴퓨팅과 병렬처리에 적합.

3. Agile 문화와 스타트업 경험 🍀

  • Agile(애자일)은 빠른 개발 주기와 유연한 대응을 목표로 하지만, 현실에선 '일정만 쫓는 주먹구구' 사례도 많음.
  • 초기 스타트업의 장점: 다양한 시도를 해볼 수 있고, 기술 스택과 업무 영역이 넓음.
  • 단점: 일정에 쫓기고, 리팩토링이나 테스트에 시간 배분이 적음.
  • 3~6개월 후 자신의 역할과 방향에 대해 회의감이 드는 경우도 많음.
  • 스타트업 선택 시 개발 문화와 기술적 고민 여부를 꼭 확인할 필요가 있음.

4. React Query 이해와 버전 관리 ⏳

  • React Query는 서버 상태 관리와 데이터 페칭을 쉽게 하는 라이브러리.
  • HTTP 캐시(304 Not Modified)와 React Query 자체 캐시(메모리 캐싱)는 별개 개념임.
  • React Query 캐시는 쿼리 키와 staleTime, cacheTime 기반으로 내부 상태관리.
  • 버전 업데이트(예: v5) 도입 시 기존 설정과 충돌 가능성이 있어 종종 이전 버전으로 다운그레이드 하기도 함.
  • 네트워크 응답이 200이어도 React Query는 내부적으로 캐싱 처리 가능.

5. Next.js 13, BFF, 서버 액션 정리 🌐

  • BFF(Backend For Frontend): 클라이언트별 맞춤형 API 레이어로, 불필요한 데이터 전송 감소 및 보안 강화 목적.
  • BFF는 GET, POST, PUT 등 HTTP 메소드 모두에서 사용 가능하며, 애플리케이션 아키텍처에 따라 다름.
  • Next.js 13의 app directory와 서버/클라이언트 컴포넌트 구조 안에서 BFF 역할 수행 방법 고민 중.
  • 서버 액션(Server Actions)은 Next.js 13에서 서버 쪽 코드를 컴포넌트에서 직접 호출할 수 있는 기능으로, BFF 역할을 대신할 수 있음.
  • BFF 레이어는 데이터 과다 전송(오버페칭) 또는 부족(언더페칭) 문제를 줄이고, 클라이언트 코드 단순화에 도움.

6. React의 모듈 export/import 이해하기 📦

  • export default const는 문법적으로 허용 안 됨.
  • 화살표 함수나 익명 함수는 export default () => {} 형태로 가능.
  • 모듈을 export할 때는 보통 개별 export({})를 권장해 트리 쉐이킹(tree shaking) 효과를 극대화함.
  • 트리 쉐이킹은 사용하지 않는 코드를 최종 번들에서 제거하는 작업으로, 번들 크기를 줄임.
  • 컴포넌트나 라이브러리 단위로 기본 export(default export)를 쓰기도 함.

7. UI 개발 팁 및 문제 해결 💡

  • NativeWind: React Native용 Tailwind CSS 스타일링 라이브러리
    • border-color가 적용 안 되고 그림자(shadow)가 먹히지 않는 경우가 있음
    • 스타일 클래스 작성법, React Native의 스타일 우선순위 확인 필요
  • CSS 마스킹 처리
    • UI에서 사용자 입력 필드를 마스킹 처리(일부 문자 숨김)하면서도 서버에는 원본 데이터를 보내는 방법
    • 보통 별도의 상태 변수에 원본 값을 저장하고 UI에는 마스킹 된 값을 보여주는 방식 권장
    • 라이브러리 활용 추천: use-mask-input
  • ResizeObserver Loop 에러는 웹에서 ResizeObserver가 무한 루프에 빠지며 생기는 경고문, 리액트나 antd 레이아웃 컴포넌트 활용 시 주의 필요.
  • onClick 이벤트 전달법
    • 상위 컴포넌트에서 하위 컴포넌트의 함수를 실행시키려면 이벤트 위임(Event Delegation) 또는 prop으로 이벤트 핸들러를 내려줌.

8. 면접 및 코딩테스트 경험 공유 📝

  • 코딩테스트 문제 수와 시간은 회사마다 다름. (예: 4시간에 5문제, 30분 제한 등)
  • 과제 제출시 깃허브를 통해 프라이빗 repo 형태로 제출 요구하는 사례도 있음.
  • 면접 준비 팁:
    • 알고리즘 문제 풀기와 별개로, 실제 업무에서 사용하는 라이브러리나 프레임워크 문서 잘 보기
    • PR(코드 리뷰)에 적극적으로 참여해 커뮤니케이션 능력 기르기
    • 클린코드와 설계에 대해 꾸준히 공부
  • 기술 문제와 더불어 회사 문화, 개발자와 PM 간 협업 분위기도 잘 확인해야 함.

9. 협업 시 기획자와 개발자 커뮤니케이션 🎯

  • 기획 변경이나 기능 추가 시 개발자로서 구현 가능성 및 일정 조율 위해 의견 제시 필요.
  • 기획자와 대화 시 건설적이고 구체적인 이유를 설명하면 협업이 원활해짐.
  • 기획자가 프론트엔드를 잘 모를 경우가 많아, 개발팀은 일정 약속 시 기술적 어려움에 대한 명확한 대응 방안 제시가 중요.
  • 좋은 팀 문화에서는 기획과 개발이 상호 존중하며 의사소통함.

10. 리액트 커스텀 훅 공부 꿀자료 📚

면접팁⚡

  • 회사가 기술적으로 고민하는지 확인하는 질문 준비하기:
    • “테스트 코드 작성 현황”, “리팩토링 문화”, “코드 리뷰 프로세스” 등 물어보면 회사 개발 문화 파악에 도움.
  • 스타트업 지원 시 기술 스택과 프로젝트 규모, 팀 내 시니어 개발자 유무 확인하기.
  • 코딩테스트는 시간과 문제 수 다 다르니, 지원사마다 미리 조건 체크 필수.
  • 깃허브 사용 능력은 기본으로 요구하는 곳 많으니, 미리 프로젝트 올려두고 익숙해지기.
  • 기술 면접에서 모듈 export/import 개념, React Query 캐싱 원리, Next.js의 서버 액션과 BFF 이해도를 갖추면 큰 도움이 됨.

링크🔗

#React#NextJS#ReactQuery#BFF#WebGPU#스타트업#면접팁#JavaScript#TypeScript#UI개발
이전 포스트

2023-10-24

2023년 10월 24일
다음 포스트

2023-10-26

2023년 10월 26일