COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-11

목차

  1. Controlled 컴포넌트와 defaultValue 차이
  2. 경력 단축 시 커리어 영향과 이직 조언
  3. 프론트엔드, 백엔드 경력과 풀스택 방향성
  4. 개발팀 조직 형태: 목적 조직 vs 기능 조직
  5. 개발 환경 선호도 질문과 면접 팁
  6. 신입 수습기간(온보딩)과 업무 적응 이야기
  7. JWT 토큰 만료 검증과 서버·클라이언트 처리
  8. TypeScript enum 사용과 대안
  9. Next.js 서버 컴포넌트에서 document 접근 문제
  10. 무한 스크롤 라이브러리 추천과 개발자 일상

1. Controlled 컴포넌트와 defaultValue 차이

  • React input 요소에서 controlled 컴포넌트는 컴포넌트 상태(state)와 value를 직접 연결해 관리함.
  • 반면 defaultValue는 초기 값만 설정하고 이후에는 DOM에서 자체적으로 관리.
  • 문제: Controlled 컴포넌트인데 defaultValue를 쓰면 React가 상태와 DOM 간의 일관성을 보장 못해 오류 발생.
  • 배운 점: controlled 컴포넌트는 반드시 value 속성을 통해 상태를 제어해야 하며 defaultValue는 비제어 컴포넌트에 사용.

2. 경력 단축 시 커리어 영향과 이직 조언

  • 1년 미만 퇴사해도 반드시 커리어가 망하는 것은 아님.
  • 비성장적이거나 맞지 않는 회사라면 조기 퇴사 후 좋은 곳을 준비하는게 낫다는 의견이 다수.
  • 첫 직장이 아닌 경우 특별한 이유 없이 오래 있지 않아도 무방.
  • 커리어 관리 시 본인이 의미 있다고 생각하는 경험에 집중하는 것이 중요.
  • 이직 시 스트레스나 소모는 가능한 줄이고 자신의 성장에 도움이 되는 곳 선택 권장.

3. 프론트엔드, 백엔드 경력과 풀스택 방향성

  • 프론트 개발만 오래 하면 **'물 프론트엔드'(특화 기술 없는 평범한 개발자)**가 되기 쉽다는 고민 있음.
  • 장기적으로는 풀스택 개발자가 되길 권장.
  • 풀스택은 백엔드도 이해해 서버 로직과 데이터 흐름을 파악 가능해야 협업과 문제 해결에 유리.
  • 클라이언트만 알면 백엔드와 제대로 소통하기 어렵고, 업무가 불필요하게 늘어나기도 함.
  • 꼭 깊게 서버 개발을 하지 않아도 기본적인 API 개념과 데이터 흐름 이해 수준은 필요.

4. 개발팀 조직 형태: 목적 조직 vs 기능 조직

  • 목적 조직(Product Team) : FE, BE, PO, PD 등이 한 팀에 모여 하나의 제품을 책임지고 개발 운영.
    • 제품 실패 시 팀 자체가 영향을 받음.
    • 유연하게 역할이 확장될 수 있고, 팀 단위 책임감이 강함.
    • 예시: 토스의 개발 조직.
  • 기능 조직(Function Team) : FE, BE 등이 각각 전문 기능별로 나뉘어져 일하고, 프로젝트나 제품별로 지원함.
    • SI(시스템 통합) 방식에 가깝고, 특정 제품에만 집중하지 않음.
    • 역할이 명확히 구분되고 역할 외 작업이 적음.
    • 예시: 무신사의 FE 팀.
  • 면접 때 조직 형태를 물어보는 이유는 지원자의 일하는 스타일, 협업 환경 선호도, 팀 문화 적합도를 파악하기 위함.

5. 개발 환경 선호도 질문과 면접 팁

  • 면접에서 "선호하는 개발 환경"을 물어보는 것은 단순히 OS나 IDE를 묻는 게 아님.
  • 지원자의 업무 스타일, 성장 방안, 팀 문화 적합도를 파악하려는 의도.
    • 예: 주 1회 코드 리뷰 또는 세미나를 통한 학습 문화 선호 여부.
    • 팀 조직 형태, 담당 업무 범위, 커뮤니케이션 방식 등도 포함.
  • 답변 시 회사 환경과 자신의 성향 차이부터 솔직하게 말해 건강한 기대치 조율 가능.
  • 핏 맞음(Fit) 이 중요하므로, 자신의 희망 사항과 회사 분위기를 미리 탐색하는 게 좋아짐.

6. 신입 수습기간(온보딩)과 업무 적응 이야기

  • 수습기간은 보통 1~2개월이며 온보딩(교육과 업무 적응 기간)을 포함.
  • 온보딩 기간에 업무 적응 여부, 팀과의 협업 태도 등을 평가함.
  • 수습 중 극단적으로 잘리는 경우는 드물지만 부적응 시 스스로 그만두는 경우가 많음.
  • 신입에게는 간단한 실무 업무부터 시작하며 점차 책임을 늘려가는 방식이 일반적.
  • Tip: 수습기간에도 적극적이고 긍정적인 태도가 중요.

7. JWT 토큰 만료 검증과 서버·클라이언트 처리

  • JWT(Json Web Token)는 복호화시 기본 정보를 누구나 볼 수 있지만 서명(signature)로 위변조 방지함.
  • 토큰 만료 시간(exp)은 디코딩하여 확인 가능하므로 클라이언트·서버 모두 검증 가능.
  • 토큰 만료 검증만 목적이라면 decode 후 exp 체크해도 무방.
  • 하지만 토큰 안전성과 위변조 여부 검증(서명 확인)은 서버에서만 수행해야 함.
  • Next.js middleware에서 토큰 디코드 후 만료 여부 확인은 가능하나,
    • 토큰이 없거나 만료됐다면 로그인 페이지로 리다이렉트하는 방식 권장.
  • 리프레시 토큰이 유효하면 엑세스 토큰 재발급 로직을 클라이언트나 서버에서 적절히 구현 필요.

8. TypeScript enum 사용과 대안

  • TypeScript enum은 코드 가독성과 타입 안정성에 유리하지만 번들 사이즈가 커질 수 있음.
  • ex) const enum 은 컴파일 시 상수로 대체되지만 일반 enum은 런타임 객체가 생겨 번들 크기 증가 원인.
  • 대안으로는 유니언 타입(union type, 예: 'apple' | 'banana' | 'orange') 또는 상수 객체(as const) 사용도 많음.
  • 유니언 타입은 트리 쉐이킹에 유리하고, 간단한 값 집합을 타입으로 정의할 때 편리.
  • 회사나 팀 코드 스타일에 따라 적절하게 선택하는 것이 좋음.

9. Next.js 서버 컴포넌트에서 document 접근 문제

  • Next.js 13 서버 컴포넌트(Server Components)는 서버에서 렌더링되며, 브라우저 전용 객체인 document, window에 접근 불가.
  • document is not defined 에러는 이 때문.
  • 해결법:
    • 클라이언트 컴포넌트로 분리해서 브라우저 환경에서 접근하도록 함.
    • 내부 코드에서 환경 구분 (typeof window !== 'undefined') 하는 조건부 처리를 포함.
    • 서버/클라이언트 각 환경별 데이터 페칭 함수를 따로 만들어 관리.
  • 클라이언트 전용 로직은 꼭 use client 지시어로 클라이언트 컴포넌트 선언 필요.

10. 무한 스크롤 라이브러리 추천과 개발자 일상 공유

  • 많이 쓰이는 React 무한 스크롤 라이브러리 3가지:
    • react-window: 성능 최적화에 특화된 가상 스크롤링 가능.
    • react-infinite-scroll-component: 쉬운 무한 스크롤 구현 가능.
    • react-infinite-scroller: 무한 스크롤용 컴포넌트로 간편한 사용.
  • 각 라이브러리 특징과 필요에 따라 선택 권장.
  • 개발자 일상에는 코딩 환경, 팀 문화, 간식(붕어빵 프리미엄 버전 이야기) 등 가벼운 이야기도 섞여 분위기 환기됨.
  • 면접, 커리어 조언, 팀워크 관련 다양한 경험담도 공유됨.

면접팁⚡

  • 개발 환경 질문: 단순 OS나 IDE 선호 묻기보다는, 조직 문화와 성장 환경에 맞는 팀인지 판단하는 질문임.
  • 조직 유형 파악하기: 목적 조직(제품 중심) vs 기능 조직(기능별) 구분을 알고, 본인 성향에 맞는 팀 환경을 선택.
  • 경력 짧은 경우: 빠른 퇴사보다 본인이 얻는 것과 발전을 중시하되, 이직 시 포지션과 회사 문화 잘 따져야 함.
  • JWT 토큰 검증: 만료 시점 판단은 클라나 서버에서 가능하지만 위변조 방지는 서버에서만 강력하게 해야 하는 점 숙지 필수.
  • 서버 컴포넌트와 클라이언트 컴포넌트 분리: Next.js 13 환경에서 이 부분을 명확히 하여 에러 예방과 유지보수에 도움.

링크🔗

#React#TypeScript#JWT#Nextjs#개발면접#커리어#풀스택#조직문화#프론트엔드#개발환경
이전 포스트

2023-11-10

2023년 11월 10일
다음 포스트

2023-11-12

2023년 11월 12일