2025-01-10

목차

1. 개발자 커뮤니케이션과 분위기
2. React 개발 습관과 공식문서 권장 방식
3. Next.js SSR 비활성화와 컴포넌트 래핑
4. React 상태관리: setState 중첩과 플래그 처리
5. useRef와 state 선택 기준
6. 효과적인 1년 계획 수립법
7. 기타: 탈모 이야기와 잡담

1. 개발자 커뮤니케이션과 분위기

• 대화 시작은 주로 날씨와 이직 이야기를 중심으로 친근하게 진행됨
• 면접이나 이직 과정에서 받은 긍정적인 경험이 공유됨 (특히 CTO의 친절함)
• 개발뿐만 아니라 개인적인 관심사(연애, 탈모 등)도 자유롭게 이야기하며 분위기가 편안함
• 이런 자연스러운 소통이 멘토링과 협력적 개발 문화 형성에 중요함

2. React 개발 습관과 공식문서 권장 방식

• React 공식문서에서 권장하는 컴포넌트 분리와 props 전달 방식이 있음
• 예: props를 개별적으로 일일이 전달하는 대신, {...props} 스프레드 문법 사용 권장
• useEffect 및 Hook 사용에서 라이프사이클을 고려한 코딩 중요
• 실제 프로젝트에서 다소 다르게 구현된 코드가 있었고, 이를 공식문서 스타일로 개선하려는 시도
• 기존 습관과 공식 권장 방식 간 차이가 생기는 경우가 많고, 공식문서와 좋은 오픈소스 코드 참고 권장
• GitHub에서 잘 작성된 React 프로젝트 코드 참고해보는 것이 큰 도움이 됨
• 공식문서는 좋은 케이스와 나쁜 케이스 모두 제시하기 때문에 읽어보는 것만으로도 인사이트 획득 가능

3. Next.js SSR 비활성화와 컴포넌트 래핑

• 특정 컴포넌트를 항상 클라이언트 사이드에서만 렌더링하고 싶을 때가 있음 (SSR off)
• 매번 dynamic(import(), { ssr: false }) 쓰기 번거로움
• 해결책: 해당 컴포넌트를 SSR 비활성화로 래핑한 HOC(Higher Order Component)를 만들어 재사용 가능
• 예시: withNoSSR(Component) 함수로 래핑하여 SSR 비활성화 적용하고 여러 곳에서 편리하게 사용
• HOC는 React 컴포넌트를 인자로 받고, 새로운 컴포넌트를 반환하는 함수로 재사용성과 코드 가독성 향상에 도움됨

4. React 상태관리: setState 중첩과 플래그 처리

• setState 안에 또 다른 setState 호출은 코드 리뷰에서 문제가 될 수 있으나 불가능한 것은 아님
• 상태 업데이트 시 "derived state"(파생 상태)를 잘 설계하는 것이 중요
• 예를 들어, flag 상태를 text 상태 값에 의존한다면 별도의 상태로 관리하기보다는 하나의 상태 객체로 합치는 방법 권장
• 상태 업데이트를 위한 useCallback이 필요한지 검토 요구됨
• 복잡한 상태 변경 시 useEffect를 활용해 변경 감지 및 추가 로직 처리하는 것이 안전한 방법
• 상태 관리 설계가 복잡해지면 코드 유지보수 어려워지므로 간결하고 명확한 설계 필요

5. useRef와 state 선택 기준

• UI 업데이트와 상관없는 변수는 useRef로 관리해 리렌더링을 방지할 수 있음
• 예: DOM 조작 관련 변수, 렌더링 상태와 무관한 로직용 변수
• 하지만 상태 변화에 따라 UI 업데이트가 필요한 경우 useState 사용 권장
• ref는 컴포넌트 리렌더링 시 초기화 되지 않는 특성 때문에 메모이제이션이나 값 유지에 용이
• 공식문서 어디에도 ref 사용을 무조건 권장한다는 내용은 없고, 필요한 경우에만 신중히 사용
• 과도한 useRef 사용은 오히려 코드 복잡성을 증가시킬 수 있음
• 따라서 상황에 맞게 적절한 선택과 설계가 중요

6. 효과적인 1년 계획 수립법

• 여러 개발자가 1년 계획을 어떻게 세우는지 의견 교환
• 대부분 계획 수립 후 실행이 어려운 현실을 공유하며, 무계획이 계획이라는 유머 섞인 견해도 나옴
• 중요한 것은 ‘살아간다 - 지킨다 - 완성’하며 꾸준한 실행
• 개인별로 건강, 공부, 재정 등 카테고리를 나누어 관리하는 방법 추천
• 앱 사용 사례 공유: 열품타(시간 집중 및 스터디 관리), 네이버 캘린더(일정 공유), 플랜핏(운동 기록), 하루조각(소비 기록), The Day Before(D-day 관리) 등
• 자신에게 맞는 도구를 찾아 꾸준히 활용하는 것이 핵심

7. 기타: 탈모 이야기와 잡담

• 개인적인 탈모 고민 및 머리 관리 질문과 경험 공유
• 스트레스, 나이 들면서 나타나는 탈모 현상이 화제
• 약물 치료, 두피 관리, 모발 이식 등 방법에 대한 의견 교환
• 개발자들도 일상적인 고민을 나누며 소통 강화
• 탈모 치료에 대한 음모론부터 최신 치료 기술 기대까지 다양한 반응 존재

면접팁⚡

• 면접도 멘토링처럼 친절한 분위기를 만들면 좋은 경험이 됨
• 기술 질문 외에도 커뮤니케이션 태도, 배움 자세가 중요
• 본인의 습관이나 코드 방식을 공식문서와 비교해 개선하려는 자세를 강조하면 인상적임
• GitHub나 공식 문서 등 신뢰할 수 있는 자료를 기반으로 성장하는 모습을 보여주는 것이 좋음

링크🔗

• React 공식문서: https://reactjs.org/docs/getting-started.html
• Next.js dynamic import: https://nextjs.org/docs/advanced-features/dynamic-import
• React useRef 설명 (wikidocs): https://wikidocs.net/203669
• GitHub Ghost 계정(토론 중 언급): https://github.com/ghost
• 열품타 (스터디 및 집중 관리 앱): https://www.yeolpumta.com
• 네이버 캘린더: https://calendar.naver.com