개발자들이 남긴 기록..

연봉동결과 이직 고민
신년회 및 동료 소통
테일윈드 CSS 동적 스타일링 방법
React 상태 업데이트와 함수형 업데이트 이해
기술 면접 및 실력 평가 토론
캐싱 전략과 낙관적 UI 업데이트
코드 주석 작성 문화와 실무 팁
i18n(국제화) 타입스크립트 자동완성 문제
라이브러리 및 툴 질문과 경험 공유
기타 잡담 및 새해 인사

1. 연봉동결과 이직 고민 💸

회사에서 5년간 대표가 일하고 5년 후에 대표직을 그만둘 계획이라 전해짐.
연봉동결 소식에 이직을 고민하는 분위기.
이미 지난해에 연봉을 많이 올렸고, 이번 동결은 큰 타격이 아니라고도 언급됨.
동결 시 이직을 하면 인상받을 가능성도 있다는 의견 분출.
전반적으로 연봉 이슈는 민감하지만, 긍정적 자세 유지 당부.

2. 신년회 및 동료 소통 🍖🎉

1월 말 리액트방 신년회 계획 제안.
보드게임, 고기 구워주기 등 편안한 모임 분위기.
참석 독려 및 친근한 대화 오가며 친목 도모.

3. 테일윈드 CSS 동적 스타일링 방법 🎨

"토글 상태에 따라 색상을 변경하고 싶을 때, className에 조건부로 토글해서 넣는 게 맞는지" 질문.
답변:
- data-* 속성을 활용해 data-active="true" 같은 식으로 상태를 지정하고
- data-[active=true]:bg-red-500처럼 테일윈드가 상태별로 CSS를 제어할 수 있음.
- 이렇게 하면 클래스 이름을 항상 고정(static)으로 유지하며, 상태만 변경할 수 있어 React 렌더링에 최적.
추가로 classnames나 clsx 같은 라이브러리로 동적 클래스명을 결합하고, tailwind-merge 라이브러리로 중복/충돌하는 유틸리티 클래스 제거 가능.
shadcn UI에서 제공하는 cn 함수가 이 기능을 제공한다고 소개.

테일윈드의 data attribute 스타일링
테일윈드는 동적 상태에 따라 CSS를 제어할 때 data-* 속성을 함께 사용하면, CSS 클래스 이름을 미리 정의해놓고 React에는 data-active 이런 식으로 상태만 전달해서 불필요한 클래스명 재생성을 줄여 성능과 유지보수를 동시에 잡을 수 있음.

4. React 상태 업데이트와 함수형 업데이트 이해 ⚛️

React 상태 업데이트에서 setState(prev => prev + 1) 같은 함수형 업데이트가 필요한 이유 토론.
일반적인 setState(year + 1)는 여러번 호출해도 동일한 클로저 내 최신 값이 아니기 때문에 누적이 안 됨.
함수형 업데이트는 이전 상태를 정확히 가져와서 누적 계산 가능.
내부적으로 React는 Fiber 아키텍처를 활용해 상태 업데이트를 비동기적, 배치 처리하지만, 함수형 업데이트는 내부 컨텍스트 내 상태값 충돌 현상을 방지함.
클로저 개념과 연관하여 함수 내부 시점별 변수값을 정확히 이해해야 버그 없이 상태를 관리할 수 있음을 강조.
비동기 처리와 클로저는 구분되어야 함.

초보 개발자 팁
React Hook에서 상태를 업데이트할 땐, 이전 상태에 의존적이면 꼭 함수형 업데이트를 사용하세요. 이렇게 하면 여러 setState 호출이 서로 값을 덮어쓰지 않고 모두 누적 반영됩니다.

5. 기술 면접과 실력 평가 토론 🎯

“연봉은 개발자 실력의 정량적 지표인가?”에 대해 활발한 의견 교환.
일부는 "연봉은 실력에 따른 결과물로 볼 수 있다"고 주장.
그러나 여러 변수(지역, 회사 규모, 타이밍, 경력, 협상력 등)가 많아 단순 비교는 어렵다고 반론도 많음.
"연봉과 실력 사이에 명확한 상관관계는 없다"는 의견도 다수.
개발자의 다면적 역량(커뮤니케이션, 기획력, 문서화, 협업 능력 등) 중요성 강조.
면접에서 알고리즘 문제 풀이 적절성에 대한 검토도 필요함.

6. 캐싱 전략과 옵티미스틱 업데이트 🗃️

무결성(데이터 정확도)과 실시간성(데이터 최신성)에 대해 구분하며 캐싱 전략 토론.
무결성이 그렇게 중요하지 않은 데이터(예: 좋아요 수)는 옵티미스틱 UI 업데이트(낙관적 업데이트)를 종종 사용.
에러 발생시 invalidate(데이터 무효화)를 통해 재요청하는 방식 권장.
실시간성이 떨어지는 데이터엔 캐시 전략이 효과적이나, 자주 변하면 캐싱을 피해야 함.
데이터 무결성과 실시간성은 다른 개념이며 요구 사항에 맞춰 선택적으로 적용할 필요 있음.

7. 코드 주석 작성 문화와 실무 팁 📝

주석은 반드시 써야 한다 vs 주석은 남용 시 오히려 가독성을 해친다 논의.
공통 의견:
- 복잡하거나 상황 설명이 필요한 부분에만 의미 있게 작성하자.
- “TODO”, “FIXME” 주석 등은 기술 부채를 보여주며, 관리가 어렵다면 문제 불러옴.
- 주석과 코드가 일치하지 않는 경우가 리뷰 시 문제.
주석 작성시 코드 수정과 함께 문서 업데이트가 필요하며, PR 리뷰 과정에서 확인 요청 및 소통이 중요.
슬랙이나 이슈 트래커 링크를 주석에 추가하는 사례도 있음.
직원 간 문화 차이 존재하며, 불필요한 주석은 독으로 작용할 수 있음.

실무 팁
주석은 “왜 이렇게 했는지” 맥락 설명용으로 쓰고, 코드 자체가 의도를 잘 나타내는 네이밍과 구조로 작성하는 게 최선의 방법입니다.

8. i18n TypeScript 자동완성 애로사항 🌐

react-i18next 등 i18n 라이브러리에서 키 값을 타입스크립트로 추론하는 게 매우 어려움.
t() 함수의 키 자동완성은 일부 지원되나, 추상화해 래핑하면 타입 추론 불가능해짐.
제네릭, 오버로드 등 복잡한 타입 선언 때문에 해결이 쉽지 않음.
실제 라이브러리 코드는 제너릭 헬게이트(복잡하고 어렵다는 뜻) 문제를 안고 있어 초심자에게 난관.
코드 샌드박스 등에서 연구하며 타입 추론 유지 방법을 모색 중.

9. 라이브러리 및 툴 질문과 경험 공유 🛠️

Grid 시스템 라이브러리:
- ag-Grid(부분 유료), Kendo UI(유료), 그리마(무료) 등 논의.
- MIT 라이센스는 상업적으로 자유롭게 사용 가능하나, 엔터프라이즈 라이센스는 제한적임.
테일윈드 어려울 때는 샤드씨엔(Shadcn UI) 사용 추천.
pnpm 설치 시간이 오래걸리는 현상은 주로 네트워크 속도, 컴퓨터 성능, 의존성 복잡성 때문.
Chakra UI는 커스텀 가이드라인에 따라 사용할 때 좋다고 언급.
clsx와 tailwind-merge 조합으로 동적 클래스관리 효율성 설명.
커리어 관련 프로그램, 특강, 프로젝트 경험 공유도 다수.

10. 기타 잡담 및 새해 인사 🎉

연말 분위기 속, 새해 인사와 개인적인 건강, 취업 걱정 등 인간적인 대화 진행.
각자 개인 근황(공부, 휴식, 가족, 졸업, 게임 등) 나누며 친목 유지.
재미있는 개발 농담, 코드 난독화 문제, 업무 스트레스 등 다채로운 이야기.

면접팁⚡

연봉과 실력은 완벽히 일치하지 않으니 면접시 복합적인 질문과 태도 평가 중요
→ 개발자는 커뮤니케이션, 문제해결 능력, 협업 태도도 꼭 평가할 것.
리액트 상태 업데이트 시 함수형 업데이트 사용 이유 설명 가능해야 함
→ 비동기 배치, 클로저 이슈 등 기본 개념 숙지 필수.
기술 면접에서 알고리즘 외에도 실무 문제 해결능력, 프로젝트 경험 중심 질문 필요
→ 알고리즘 문제만으로 실력 판단은 제한적임을 기억.
i18n 타입 추론 문제 대응 능력이나 라이브러리 구조 이해도 면접에서 장점으로 작용됨

2024-12-31

목차