개발자들이 남긴 기록..

아침 일상과 개발자 출근 풍경
Next.js와 Client/Server 컴포넌트 활용
Next.js i18next 다국어 라이브러리 사용 경험
Postman을 활용한 부하 테스트 팁
리액트 전역 상태 관리와 리렌더링 문제
코드 디버깅과 리액트 useRef 활용 어려움
React 학습 자료 및 커뮤니티 공유
개발자 개인 소소한 이야기와 유머
면접 경험 및 조언
기타 잡담 및 정보 공유

1. 아침 일상과 개발자 출근 풍경

출근길 버스에서 개발자들이 서로 인사를 나눔
오전 15.1 macOS 업데이트 알림에 대한 반응
출근 시간 자율 근무 환경 소개
출근길 지하철 및 버스 경로 공유
개발자들의 소소한 일상 및 근황 나눔

2. Next.js와 Client/Server 컴포넌트 활용

Next.js 13 앱 라우터에서 layout.tsx는 SSR, page.tsx에 use client를 붙여 CSR 방식으로 구현하는 사례 공유
use client는 서버 사이드 렌더링(SSR)과 별개의 개념으로, SSR 지원하면서도 클라이언트에서만 동작하는 컴포넌트 선언임
SSR과 CSR을 동시에 쓰는 이유: SEO 최적화와 초기 로딩 속도 개선
프로젝트 특성, 라이브러리 호환성, 개발자 역량에 따라 최적 사용법 달라짐
use client를 남발하는 것이 너무 CSR에 치우치는 것 같다는 고민
전문가 의견: Next.js는 SSR만을 위한 프레임워크가 아니며, 편리한 라우팅과 서버 기능도 장점
실제로 use client 사용해도 SSR 기능 유지 가능
유저가 경험한 하이드레이션 에러, Dynamic Import 사용 등 고전적인 Next.js 사용법도 효과적
다국어 지원 라이브러리 i18next의 Next.js 연동 정보도 구글 검색과 공식 문서 참고 권장

기술 개념 설명 - use client
Next.js 13부터 도입된 개념으로 React 컴포넌트가 클라이언트 사이드에서 실행되어야 한다는 것을 명시함.
서버 컴포넌트와 클라이언트 컴포넌트를 명확히 구분하여 앱 성능 최적화에 도움을 줌.
use client를 붙인 컴포넌트는 브라우저에서만 동작하고 SSR이 적용되지 않으나, Next.js 앱 전체의 SSR 기능에는 영향이 없음.

3. Next.js i18next 다국어 라이브러리 사용 경험

i18next는 주로 CSR을 중심으로 동작하는 다국어 지원 라이브러리
Next.js와 함께 SSR 환경에 적용 시 제약이 있을 수 있음
react-i18next로 전환하면서 발생하는 하이드레이션 문제 해결 중
서버 컴포넌트와 클라이언트 컴포넌트를 적절히 분리하여 사용
SSR 중에도 i18next 데이터를 서버에서 미리 불러오는 전략 필요
Next.js 전용 i18next 패키지 활용 권장

4. Postman을 활용한 부하 테스트 팁

Postman의 Virtual User(VU)를 이용해 최대 100명까지 부하 테스트 가능
컬렉션을 실행, VU 수와 테스트 시간을 설정해 부하 시뮬레이션
가상 유저 별로 서로 다른 유저 아이디 요청 포함 여부 테스트 필요
실제 로컬에서는 모든 가상 유저가 같은 IP로 인식됨(로컬 테스트 환경 한계)
요청 루프 횟수에 따라 CPU 부하 및 응답 시간 변화 관찰 가능
간단한 부하 테스트 용도로도 정석적으로 활용 가능

기술 개념 설명 - Postman 부하 테스트
Postman은 API 테스트 툴로 주로 기능 테스트에 쓰이지만, 가상 사용자를 설정해 부하 테스트 용도로도 사용 가능.
Virtual User 수를 늘리면 동시 요청 수가 증가해 서버의 처리량과 한계를 평가할 수 있음.
상용 부하 테스트 툴과 달리 기능이 제한적이므로, 대규모 테스트는 전용 솔루션 사용 권장.

5. 리액트 전역 상태 관리와 리렌더링 문제

React Context 하나에 여러 상태를 넣으면 일부 상태 변경 시 Context를 구독하는 모든 컴포넌트가 리렌더링 됨
이로 인해 성능 저하 및 불필요한 리렌더링 발생 우려
Redux는 별도 상태 슬라이스별로 관리하여 독립적인 리렌더링 제어 가능하며, new Map 같은 비직렬화 변수 사용 시 에러 발생할 수 있음
결국 상태 별로 Context 분리하는 방법 추천
대규모 대시보드처럼 상태가 많고 독립적인 동작이 필요한 경우 Context 다중 사용도 방법 중 하나
메모이제이션, useMemo, React.memo 등의 최적화 기법도 같이 고려해야 함

기술 개념 설명 - React 전역 상태관리와 리렌더링
React Context는 전역 상태 공유에 유용하지만, 하나의 Context에 여러 상태를 넣으면 상태 변경 시 구독하는 컴포넌트 전체가 다시 렌더링됨.
Redux는 상태 변경 시 관련 슬라이스만 재렌더링되어 상대적으로 성능관리 유리함.
리액트에서 성능 최적화를 위해 상태 규모, 분리, 메모이제이션 등 다양한 전략이 필요함.

6. 코드 디버깅과 리액트 useRef 활용 어려움

useRef가 내부적으로 상태 업데이트가 아닌 레퍼런스를 유지하는 특성상 디버깅 시 추적이 어렵다는 의견
.current로 직접 상태를 변경하면 React가 인지하지 못해 생기는 리렌더링 문제
setState 함수를 통한 상태 변경과 달리 useRef 변경은 추적 대상에서 누락 가능
팀 내 코딩 컨벤션과 디버깅 가이드 마련 권장
코드 난독화와 잦은 상태 변동이 혼동을 불러일으키기도 함

7. React 학습 자료 및 커뮤니티 공유

공식 문서 및 RFC(요청 의견서) 문서를 중심으로 학습 추천
open.kakao.com, github react-rfcs 등에서 다양한 정보와 토론 가능
샤드씨엔(shadcn/ui)와 같은 컴포넌트 라이브러리 활용 사례 소개
리액트 관련 좋은 온라인 커뮤니티와 오픈소스 링크를 계속 확인할 것

8. 개발자 개인 소소한 이야기와 유머

사무실 출근 환경, 커피 소비량, 점심 메뉴 등 일상 공유
연애 이야기, 취미(게임, 운동) 이야기 간간히 등장
아침 샤워 습관에 대한 논쟁, 개발자 특유의 피곤함과 웃음
디지털 치매(기억력 저하 농담)와 기타 농담들

9. 면접 경험 및 조언

면접에서 라이브러리 사용 여부 질문 시 기억 착오로 당황했던 사례
긴장으로 인한 실수는 누구나 할 수 있음 → 솔직하고 침착한 대응 권장
면접 질문에 정확히 답할 수 있도록 자신의 프로젝트 사용 라이브러리를 명확히 숙지할 것
실무 경험을 언급하면서 면접관과 커뮤니케이션 능력도 중요

10. 기타 잡담 및 정보 공유

깃허브, 깃랩 이슈와 상태 확인 관련 이야기
리액트 재조정(리렌더링)과 DOM 커밋 단계 관련 설명
Next.js의 use cache 기능 소식
각종 커뮤니티 내 친목방 및 인원 변동 현황
사내 공통 모듈, npm 업로드 관련 의견 토론
개발자들의 일상 속 유행어와 밈 소개

면접팁⚡

면접 시 본인이 사용한 기술 스택과 라이브러리, 구현 방식을 명확히 기억하고 설명할 것
긴장하거나 혼동된 경우 솔직하게 인정하고 바로잡는 자세가 오히려 긍정적 인상임
React 프로젝트에서는 전역 상태 관리 방법과 리렌더링 최적화 경험을 구체적으로 이야기하면 좋음
Next.js의 SSR과 CSR 개념을 정확히 이해하고 활용 방법에 대해 질문받을 수 있으므로 준비할 것
실무에서 발생한 문제와 해결 사례(예: 하이드레이션 문제, 재검증 로직) 공유도 유리함

링크🔗

Toss 기술 블로그 TypeScript 패턴: https://toss.tech/article/ts-pattern-usage
React RFCs: https://github.com/reactjs/rfcs
shadcn/ui 컴포넌트 라이브러리: https://ui.shadcn.com/docs/react-19
Next.js 공식 블로그 (캐싱 관련): https://nextjs.org/blog/our-journey-with-caching
Kakao Open Chat (React 정보 공유): https://open.kakao.com/o/gboLOUQb
Github Status (액션 오류 확인): https://www.githubstatus.com/

2024-10-30

목차