COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-23

목차

  1. Next.js 풀스택 프레임워크와 백엔드 연동
  2. React 빌드 속도 개선 방법
  3. React 고차 컴포넌트(HOC)와 커스텀 훅(Custom Hook)의 차이
  4. GraphQL Relay와 React Query 비교 논쟁
  5. 개발자 연봉과 직장생활 이야기
  6. 테스트 코드와 TDD 토론
  7. 코드 관리 및 지식 정리 도구 추천
  8. 웹소켓과 React 상태 관리 실무 팁
  9. 면접 준비 및 코딩 테스트 이야기
  10. 커뮤니티 문화, 협업, 그리고 개발자 성장 이야기

1. Next.js 풀스택 프레임워크와 백엔드 연동 🚀

  • 핵심
    Next.js는 React 기반의 풀스택 프레임워크지만, 이것만으로 모든 백엔드 기능을 대체하지는 않음.

  • 설명

    • Next.js는 서버 사이드 렌더링(SSR)과 SEO 향상을 위해 프론트엔드와 간단한 API 서버 기능(서버 사이드 로직)을 같이 수행할 수 있음.
    • 하지만 복잡한 비즈니스 로직, 데이터베이스 연동, 인증 등은 여전히 Express, NestJS, Spring Boot 같은 별도 백엔드 서버가 필요.
    • Next.js 내부에 노드 서버가 포함되어 있어 일부 간단한 API나 BFF(Backend For Frontend) 역할을 하기도 함.
    • 따라서 Next.js와 다른 백엔드 서버의 조합이 일반적이며, Next.js는 프론트엔드 호출을 단순화하는 역할도 함.

  • 의견

    • Next.js만으로 모든 백엔드 업무를 처리하려 하면 비효율적.
    • 팀과 프로젝트 상황에 맞게 조합해서 사용하는 게 좋음.
    • Next.js 자체 문서를 꼭 정독할 필요 있음.

2. React 빌드 속도 개선 방법 ⚡️

  • 핵심
    CRA(Create React App) 기반 프로젝트 빌드 시간이 오래 걸릴 때 개선 옵션을 탐색.

  • 설명

    • CRA는 기본적으로 Webpack을 사용하며, 빌드 시간이 길면 Webpack 설정에 최적화가 필요.
    • esbuild-loader 같은 Webpack 로더를 추가해 빌드 성능을 개선할 수 있음.
    • Vite, Bit 같은 최신 빌드 도구들은 개발 환경에서 핫리로드와 빌드 속도가 월등히 빠름.
    • Vite는 SSR 지원도 하여 Next.js 대안으로 각광받음.
    • 프로젝트 규모와 설정 복잡도에 따라 마이그레이션 난이도가 있을 수 있으므로 실험 후 도입 권장.

  • 팁

    • Webpack Bundle Analyzer로 불필요한 모듈 제거
    • esbuild 또는 Vite로 점진적 마이그레이션 고려

3. React 고차 컴포넌트(HOC)와 커스텀 훅(Custom Hook)의 차이 🧩

  • 핵심
    HOC와 커스텀 훅은 공통 로직 재사용을 위해 사용되지만 구조와 사용 목적이 다름.

  • 설명

    • 고차 컴포넌트(HOC): 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환함. 컴포넌트 레벨에서 로직을 확장하거나 주입할 때 사용.
    • 커스텀 훅: React 훅을 조합하여 기능적 로직을 재사용 가능하게 만든 함수. 보통 상태 관리, API 호출 등의 로직 재사용에 사용함.
    • HOC는 컴포넌트 자체를 반환하기 때문에 React 컴포넌트 트리 조작에 적합
    • 커스텀 훅은 값이나 함수 반환 가능하며, 컴포넌트 내부 로직 분리나 상태 추상화 용도로 쓰임.

  • 의견

    • 커스텀 훅은 도구 같은 존재로 생각
    • HOC는 컴포넌트를 감싸서 기능 확장하는 방식이라 다르게 접근해야 함.

4. GraphQL Relay와 React Query 비교 논쟁 🔍

  • 핵심
    복잡한 상태와 데이터 모델이 있는 프로젝트에서는 Relay가 React Query보다 더 나은 선택일 수 있음.

  • 설명

    • React Query(RQ)는 REST API 기반 쿼리 캐싱과 상태관리를 지원하지만, 데이터 정규화 및 복잡한 그래프 모델 관리가 미흡함.
    • Relay는 GraphQL 클라이언트로, 데이터 모델 그래프를 컴포넌트별로 관리하고 최적화된 캐싱 및 업데이트가 가능.
    • 큰 규모 또는 복잡도 높은 앱에 적합하며, 쿼리 키 관리 및 데이터 연관성을 자동으로 처리함.
    • RQ는 간단하고 가벼운 앱에 적합하나, 복잡한 모델에선 관리가 어려워짐.
    • Relay는 자체 컴파일러를 통해 쿼리를 최적화하고 Suspense와도 잘 조합됨.

  • 의견

    • Relay 도입은 초반 진입장벽이 있으나 장기적 유지보수에 유리
    • 소규모 프로젝트나 단순 구조에는 RQ도 충분
    • 현실적으로는 팀과 프로젝트 요인 따라 혼용 가능

5. 개발자 연봉과 직장생활 이야기 💰

  • 주요 이슈

    • 연봉 격차와 직장 내 현실적인 경험담 공유
    • 높은 연봉이 꼭 행복이나 안정으로 연결되지 않음
    • 좋은 회사 문화, 신뢰, 직무 만족도가 중요하다는 의견 많음
    • 신입 대비 경력직 연봉 차이, 베스팅(stoking option) 기간과 행사 방법 등 복잡한 회사 내 보상 제도 언급
    • 스타트업과 대기업 근무 경험 차이 및 장단점 토론

  • 팁

    • 스톡옵션 행사 시 세금 문제 주의
    • 기본급 인상 우선 고려
    • 회사와 개인 성장 가능성도 중요

6. 테스트 코드와 TDD 토론 🧪

  • 핵심 내용

    • 테스트 코드 작성과 TDD(Test-Driven Development)의 본질과 적용 방법에 대해 활발한 논의
    • TDD는 코드를 작성하기 전에 테스트 케이스를 먼저 만드는 개발 방법론
    • TDD가 제대로 되려면 테스트 커버리지가 예측 가능한 모든 경우를 포함해야 함
    • UI 테스트와 로직 테스트 어떤 부분에 TDD를 적용할지에 대한 다양한 의견
    • 완성도 높은 TDD가 어렵고 시간 소요가 크지만, 유지보수와 신뢰성 향상에 도움

  • 의견

    • 애매하게 하는 TDD는 의미 없으며 오히려 혼란 유발 가능
    • UI 테스트는 별도 도구(Playwright, Selenium 등)를 사용하는 게 일반적
    • 실무에서는 프로젝트 특성에 맞게 테스트 범위 조정함

7. 코드 관리 및 지식 정리 도구 추천 🗃️

  • 요약
    • 개발 지식과 링크, 이미지, 블로그 글 등 자료를 체계적으로 관리할 필요성 공감
    • 개인적으로 노션(Notion), Devonthink, GitHub 이슈, 북마크 매니저 등이 추천됨
    • 태그 기능이 좋은 도구 선택 권장
    • 혼자 또는 팀 차원에서 지식 공유 플랫폼 마련도 중요

8. 웹소켓과 React 상태 관리 실무 팁 🔄

  • 핵심

    • 웹소켓 리스너와 React 상태(Recoil 등)를 함께 사용할 때 클린업과 재등록 문제
    • 상태가 변경될 때마다 리스너를 재등록하는 것은 비효율적
    • 웹소켓 연결은 훅으로 감싸고, 상태 변화에 영향을 받지 않도록 설계 필요
    • React의 클로저 특성과 상태 관리 방식 이해 필수

  • 팁

    • useEffect의 클린업 함수로 리스너 해제
    • 상태 구독을 최소화하여 불필요한 재연결 방지
    • 웹소켓 로직은 별도의 커스텀 훅으로 분리하는 것을 권장

9. 면접 준비 및 코딩 테스트 이야기 🎯

  • 내용
    • 많은 개발자가 코딩 테스트(Coding Test, 코테) 준비 중
    • 난이도와 문제 이해에 대한 어려움 공유
    • 언어 능력(국어, 영어 등)이 문제가 될 수 있으며, 기본 언어 능력 보완도 중요
    • “무지성 지원” 전략으로 많이 지원하라는 조언
    • 면접 후기는 다양하지만 꾸준한 연습과 자기 성장 마인드 필요

10. 커뮤니티 문화, 협업, 그리고 개발자 성장 이야기 🤝

  • 주요 내용

    • 한국 개발 문화에서 '삽질'과 고군분투에 대한 인정과 현실 인식
    • 해외파 개발자들은 팀원과 적극적인 소통을 중요시하는 경향이 강함
    • 개발자 성장에는 개인적 고민과 팀내 의사소통, 피드백이 큰 역할
    • 영어 문서 및 해외 커뮤니티 활용이 어려움을 주기도 하지만 극복하려는 노력이 필요
    • 재택근무, 사무실 문화, 신뢰, 조직 내 정치 문제 등 여러 현실적인 고민 공유

  • 의견

    • 기술과 소통 모두 개발자 역량의 중요 부분
    • 개인의 성장과 조직의 협업 문화가 함께 발전해야 함

면접팁⚡

  • 코딩 테스트 준비는 꾸준한 문제 풀이와 기본기 다지기가 최우선
  • 코테 문제 이해가 어렵다면 문제를 천천히, 여러 번 읽고 풀이 계획을 세울 것
  • 영어 문서 이해는 해외 개발 커뮤니티 정보 활용에 필수이므로 지속 학습 권장
  • 기술 면접에서는 단순 암기보다는 문제 해결 과정과 사고과정을 논리적으로 설명하는 연습이 중요
  • 면접 복장이나 태도에 너무 부담 갖지 말고 자연스럽게 자신을 표현할 것

링크🔗

#Nextjs#React#BuildOptimization#GraphQL#Relay#ReactQuery#TDD#테스트코드#커스텀훅#풀스택
이전 포스트

2023-11-22

2023년 11월 22일
다음 포스트

2023-11-24

2023년 11월 24일