개발자들이 남긴 기록..

마우스 브랜드 및 품질 논쟁
PM(프로젝트 매니저) 역할과 현실 문제
React 개발 관련 질문과 경험 공유
Docker 관련 디렉토리 관리 팁
상태관리 라이브러리 비교 및 사용 꿀팁
리액트 컨텐츠에디터 구현 중 발생한 문제와 토론
사이드 프로젝트 및 무료 호스팅, 도메인 추천
면접과 연봉 토론
테스트 코드 필요성과 Jest 활용 이유
React 렌더링 최적화와 프로파일러 사용법

1. 마우스 브랜드 및 품질 논쟁 🖱️

레이저 마우스가 로지텍보다 성능이 좋다는 의견이 많았음.
로지텍 마우스는 더블 클릭 이슈(클릭이 두 번씩 인식되는 문제)가 있어 비선호하는 사람도 있음.
로지텍 304 모델은 다소 이 문제가 개선되어 쓰기 괜찮다는 평가도 있음.

더블 클릭 이슈란?
더블 클릭 이슈는 마우스 버튼이 한 번 클릭되었을 때 실수로 두 번 클릭으로 인식되는 현상이다. 이는 하드웨어 스위치 문제 혹은 내부 전자 회로 문제 때문이多. 주로 오래 쓰거나 저가형 마우스에서 빈번하게 발생하며, 작업 효율과 정확도에 영향을 미침.

2. PM 역할과 현실 문제 프로젝트 관리 🗂️

비개발자 PM이 개발 일정과 작업 방식을 관리하며 많은 갈등 발생.
PM이 실무를 잘 모르는 상태에서 개발자 의견을 무시하거나 제대로 반영하지 않아 스트레스가 큼.
PM 교육 과정(PM 스쿨, 신입 PM 부트캠프 등)이 있으나, 짧은 교육으로 실무 능력을 완벽히 갖추기는 어려움.
좋은 PM이 되려면 의사소통 능력과 일정 조율력, 그리고 기본적인 개발 지식이 중요함.
PM과 PO(Product Owner), 오너(Owner)는 역할과 책임이 다르며 회사 규모와 문화에 따라 요구하는 역할이 다양함.

PM(Project Manager)
PM은 프로젝트 목표 달성과 일정, 자원 관리 등을 총괄하며 개발팀과 협업하는 역할임. 비개발자가 PM인 경우 개발 진행을 이해하기 어려워 갈등이 발생할 수 있음.

3. React 개발 관련 질문과 경험 공유 ⚛️

React에서 긴 컴포넌트(300~500줄 이상)는 유지보수 어려움의 원인으로 꼽힘.
상태관리 라이브러리는 복잡한 상태를 관리할 때 유용하지만, 너무 광범위하게 쓰면 반대 효과가 날 수 있음.
JSX 내 함수 호출 표현식(<div>{renderFn()}</div>)은 안티패턴은 아니지만 구조와 가독성에 따라 개발자가 선호도가 다름.
React Query와 Redux의 선택 고민: Redux는 전통적으로 널리 쓰이고 복잡하지만 React Query + Recoil 조합도 인기 있으며 배우기 쉽고 실무 적용이 많음.
서버 컴포넌트와 React Query 초기 데이터 캐싱 논의. 캐시는 fetch보다 React Query에서 관리하는 편이 많음.

4. Docker 관련 디렉토리 관리 팁 🐳

Dockerfile에서 기존 디렉토리를 삭제하고 복사하는 방법 문의.
RUN rm -rf /디렉토리 명령으로 기존 디렉토리 삭제 가능(리눅스 기본 명령어 활용).
Docker 명령어 중 REMOVE는 없고, 리눅스 쉘 명령어로 파일/폴더 조작함.
Docker COPY 명령은 대상을 덮어쓰지 않고 복사하므로 클린업이 필요한 경우 직접 삭제 명령어 사용.

5. 상태관리 라이브러리 비교 및 사용 꿀팁 🗃️

Zustand는 전역 상태관리에 적합하지만, 특정 컴포넌트부터 시작하는 지역적 상태관리에는 Context API가 더 나은 선택.
전역 상태관리 시 Props Drilling(단계별로 props 전달)은 가독성과 관리 측면에서 불편할 수 있음.
Context API는 상태가 자주 변경되면 성능 문제를 일으킬 수 있으나, 작은 프로젝트나 특정 구간엔 충분히 효과적임.
React의 리렌더링 최적화를 위해 무조건 useMemo, useCallback, memo 등을 남용하지 말고 React Developer Tools Profiler를 활용해 정확한 병목 현상을 분석하는 게 중요함.

Props Drilling
컴포넌트 구조가 깊을 때 부모에서 자식, 다시 자식의 자식으로 props를 계속 넘겨야 하는 상황.

Context API
중간 컴포넌트에 값을 전달하지 않고 여러 후손 컴포넌트가 직접 값을 공유하도록 하는 React 내장 도구.

6. 리액트 컨텐츠에디터 구현 중 발생한 문제와 토론 ✍️

Notion 스타일의 텍스트 에디터 개발 중 ContentEditable 컴포넌트에서 onChange 핸들러는 정상 작동하지만, onKeyDown 핸들러 내에서 React 상태 업데이트 함수(setState)가 작동하지 않는 상황 발생.
onKeyDown에서는 최신 상태값이 undefined로 나오는 문제가 있음.
원인으로 함수 컴포넌트와 상태 비동기 처리, 이벤트 특성으로 인한 React 상태값의 일시적 불일치 가능성 제안.
해결법: 이벤트 핸들러 내에서 상태를 직접 변경하지 말고 효과(useEffect) 내에서 상태 변화를 다루거나, ref를 활용해 상태 동기화 시도.

7. 사이드 프로젝트 및 무료 호스팅, 도메인 추천 🌐

무료 혹은 저비용 클라우드 호스팅 추천: Vercel, Netlify, AWS 프리 티어 등.
Vercel은 배포가 쉽고 빌드 자동화 지원, 단 외부 도메인은 별도 구매 필요.
도메인은 가비아, 카페24 등 저렴한 곳이 있음.
DB는 MongoDB Atlas 등의 클라우드 DB 서비스 추천.
AWS RDS(관계형 DB 서비스)도 무료 이용 가능하며, EC2에 직접 DB 설치도 가능하지만 복잡하므로 초보자에겐 권장하지 않음.

8. 면접과 연봉 토론 💼

서울/경기권 4~5년차 웹 프론트엔드(React/Next.js, TypeScript) 개발자 연봉은 5천만 원 이상이 대략적인 선.
백엔드 개발자는 경력과 회사 규모에 따라 연봉 차이가 클 수 있음.
면접 질문이나 스펙 결정 시 특정 상태관리 라이브러리(Redux vs React Query+Recoil) 사용 여부보다는 전달 능력과 실제 프로젝트 적용 경험이 더 중요함.
면접에서 특정 라이브러리만을 고집하지 않고 여러 상황에 대해 설명할 수 있는 능력이 합격의 관건임.

9. 테스트 코드 필요성과 Jest 활용 이유 🧪

브라우저에서 직접 테스트하는 편이 빠르고 직관적일 수 있으나, 브라우저 실행 환경이 필요한 경우 테스트 자동화가 힘듦.
Jest 같은 테스팅 라이브러리는 인증, 예외 처리 등 복잡한 환경과 함수 단위 테스트를 코드 상에서 빠르게 수행할 수 있음.
반복적이고 자동화된 테스트 환경 구축을 위해, 브라우저 실행을 최소화하는 것이 중요.
Jest는 Node 환경에서 동작하며, Mocking, 커버리지 측정 등 풍부한 기능 제공.

10. React 렌더링 최적화와 프로파일러 사용법 ⚙️

React에서 useMemo, useCallback, memo 등으로 리렌더링 최적화를 시도하는 사례 많지만, 실제로는 불필요한 부담이 될 수 있음.
React 개발자 도구(React DevTools)의 Profiler 기능을 활용해 렌더링 성능 병목 현상을 시각적으로 확인하는 게 바람직함.
불필요한 최적화는 오히려 코드를 복잡하게 만들고 버그를 유발하므로, 적절한 시점에 분석 후 필요한 부분만 적용하는 것이 좋음.
React의 가상돔(Virtual DOM)은 실제 DOM 조작 최소화를 기본으로 하므로, 리렌더링 자체에 대해 너무 과민 반응하지 않아도 됨.

면접팁⚡

특정 라이브러리를 고집하기보다, 자신이 왜 그 기술을 선택했고 어떻게 활용했는지를 명확히 설명하는 능력을 키우자.
PM 역할에 지원할 경우, 기술적 이해뿐 아니라 커뮤니케이션과 문제 해결 경험을 강조하는 게 유리.
React 성능 최적화 관련 질문 시, 프로파일러를 통한 분석 경험과 무분별한 최적화 방지 중요성을 언급하면 좋음.
테스트 코드에 대한 이해는 실무 능력 및 개발 문화 적응력을 보여준다. 자동화 테스트의 필요성을 정확히 이해하고 있어야 함.

링크🔗

PM 교육과정 예시: https://zero-base.co.kr/category_biz_camp/school_PM?gclid=Cj0KCQjwsp6pBhCfARIsAD3GZuaeBYxuG5Ig2SDcbG29FK2tymKHqZ2IQNEa5WKAzS1FDLyxG43q5bIaAonwEALw_wcB
React ContentEditable 강좌: https://medium.com/swlh/how-to-build-a-text-editor-like-notion-c510aedfdfcc
React Developer Tools Profiler 설명: https://x.com/been_dev/status/1596549412435951621?s=12
웹 접근성 검사 도구: https://wave.webaim.org/
몬드리안에이아이 채용 페이지: https://mondrianai.career.greetinghr.com/

2023-10-13

목차