2023-11-29

목차

1. 채용공고의 우대사항 vs 필수요건
2. 모노레포(Monorepo) 개념과 실무 이슈
3. 테일윈드 CSS와 Atomic/Functional CSS 패러다임
4. React 리렌더링과 성능 최적화 팁
5. Electron과 React 배포 개념
6. 협업 시 유연근무제와 코어타임(Core Time)
7. 퇴사, 이직, 커리어 고민과 현실 이야기
8. MongoDB 쿼리 성능과 프로젝트 규모 이야기
9. React 상태 공유 및 컴포넌트 설계 고민
10. 기타: 개발툴, 커밋 메시지, 기술 강의 추천, 잡담

1. 채용공고의 우대사항 vs 필수요건

• 필수요건은 반드시 갖춰야 하는 기술이나 경험.
• 우대사항은 있으면 좋지만 없어도 지원 가능하며 학습여지가 있는 부분.
• 채용 공고에 우대사항으로 적힌 기술은 입사 후 반드시 해야 할 업무와 연관된다.
• 다만, 경험이 있어도 면접에서 방향성이나 지향점이 맞지 않으면 가산점이 어려움.
• 예시: 리액트는 필수, 리네(React Native)는 우대사항으로 분리되는 경우가 많음.

2. 모노레포(Monorepo) 개념과 실무 이슈

• 모노레포(Monorepo): 여러 프로젝트를 하나의 저장소(repository)에 관리하는 방식.
• 비주얼 스튜디오의 .sln(Solution) 파일이 오래전부터 모노레포 비슷한 역할을 했음.
• 장점: 코드 공유 용이, 일관된 버전 관리, 개발 편의.
• 단점:
  • 빌드 설정과 배포가 복잡해질 수 있음.
  • 서로 다른 프로젝트가 다른 라이브러리 버전을 요구할 때 충돌 발생 가능.
  • 작은 변경에도 전체 시스템에 영향이 갈 수 있어 신중함 필요.
  • 배포 시 롤백이 어려울 수 있고, 협업 커뮤니케이션이 중요함.
• 실무 팁:
  • 공용 라이브러리는 별도 레포지토리로 분리하거나 서브모듈로 관리 권장.
  • 깃허브 액션 같은 CI/CD에서 버전별 캐싱 전략 활용 가능.
  • 프로젝트 규모, 팀 문화, 배포 방식에 따라 모노레포 도입 여부 결정해야 함.

3. 테일윈드 CSS와 Atomic/Functional CSS 패러다임

• Atomic CSS / Functional CSS란?
  • 스타일을 개별 CSS 속성 단위(원자)로 쪼개어 필요한 조합만 사용하는 방식.
  • 재사용성이 기존 CSS보다 낮다는 평가로 초기에 외면받았음.
• Utility-first CSS는 Atomic CSS에서 발전한 개념으로, 이름이 바뀌면서 인지도가 상승했음.
• 예: 테일윈드CSS(TailwindCSS)는 "Utility-first CSS Framework"로 빠른 UI 구현에 최적화됨.
• 테일윈드 성공 요인:
  • 이름 변화가 아닌 문서화가 잘 되어있고, 클래스 네이밍이 직관적임.
  • 빠른 구현과 반복 작업 감소에 초점 맞춤.
  • 불필요한 추상화를 줄여 개발 속도가 빨라짐.
• 실제 현업에서는 어드민 대시보드 등 UI 반복 작업에 많이 사용됨.
• 참고 링크:
  • Tachyons - Functional CSS
  • 테일윈드 문서 및 Functional CSS 토론글

4. React 리렌더링과 성능 최적화 팁

• React의 Virtual DOM이 변경된 부분만 실제 DOM에 반영해서 불필요한 전체 리렌더링을 방지함.
• 개발자가 직접 모든 리렌더링을 줄이려 하는 것은 오히려 버그를 초래할 수 있음.
• useMemo, useCallback, React.memo 등의 성능 최적화 훅을 남용하는 것은 권장되지 않음.
• 좋은 접근법:
  • 리렌더링이 문제인 경우 먼저 문제 원인을 명확히 파악하고, 프로파일링 도구 사용 권장.
  • 변경이 반드시 필요한 부분만 state로 관리하고 컴포넌트를 적절히 분리.
• 참고글: Fix the slow render before you fix the re-render
• 면접 시 물음표가 많은 주제이므로, VDOM과 React 리렌더링 메커니즘에 대해 명확히 이해하고 토론 가능하도록 준비할 것.

5. Electron과 React 배포 개념

• Electron은 웹 기술을 사용해 데스크탑 애플리케이션을 만드는 플랫폼.
• React를 Electron 앱 내에서 사용 시:
  • 앱 내부에 React 빌드 결과물(HTML/CSS/JS)를 포함해야 하며, 별도로 React 개발 서버가 실행될 필요 없음.
  • .exe 실행 시 React 앱이 포함된 HTML 파일을 로드해 화면이 보여짐.
• 실행 중 빈 화면만 나오는 문제는 보통 경로 문제 또는 빌드된 파일 불포함에서 비롯됨.
• 팁:
  • Electron 메인 프로세스에서 loadFile 또는 loadURL 경로가 올바른지 확인.
  • 개발 중에는 개발 서버 주소(localhost:3000)를 로드하지만, 배포시에는 프로덕션용 빌드파일 포함 필수.

6. 협업 시 유연근무제와 코어타임(Core Time)

• 유연근무제에서 코어타임은 반드시 출근해야 하는 시간을 의미함.
• 코어타임 외 시간은 개인 자율 출퇴근 가능.
• 신입/초급 개발자들의 경우 서브 도움이나 협업이 필수적인데, 코어타임을 통해 팀 간 최소한의 조율이 이루어짐.
• 재택 또는 원격 근무 시에도 커뮤니케이션과 업무 분배, 진행 상황 공유에 신경 쓸 것.

7. 퇴사, 이직, 커리어 고민과 현실 이야기

• 야근이 잦고 과한 업무 부담 시 정신적·신체적 건강 악화 위험.
• 적절한 면담과 의견 개진을 통해 업무량 조절과 팀 지원 요청 권장.
• 1년 미만 재직 후 이직 시 커리어 영향은 개인 상황에 따라 다름.
• 퇴사 시 유종의 미를 지키는 태도와 마지막 업무 인수인계 중요성 언급.
• 주변의 조언:
  • 상황에 따라 빠른 이직 준비 권장.
  • 스트레스와 건강 관리는 최우선 가치.
• 본인의 성장과 학습을 위해 꾸준한 자기개발 필요.

8. MongoDB 쿼리 성능과 프로젝트 규모 이야기

• 1만 건 데이터 조회가 5초정도 걸리는 것은 쿼리 구조, 인덱스 설정, 조인 상황에 따라 다름.
• 일반적으로 인덱스가 잘 되어 있으면 1만 건 조회도 훨씬 빠름.
• 프로젝트 규모와 목적에 따라 DB 선택 및 서버 구성, 쿼리 최적화 필요.
• 클라우드 서비스(AWS RDS 등) 사용 여부도 성능에 영향.

9. React 상태 공유 및 컴포넌트 설계 고민

• 자식-형제 컴포넌트 간 상태 공유 시,
  • 부모 컴포넌트에 상태를 올려서 관리하는 "상태 올리기(lifting state up)" 방식이 일반적.
  • 이 경우 부모 리렌더링으로 자식까지 불필요하게 리렌더링 될 수 있음.
• 최적화 방법: React.memo, useMemo, useCallback 사용 가능하나 남용은 금물.
• 컴포넌트 설계가 잘못되었을 경우 상태 관리는 어려워질 수 있음.
• 상태관리 라이브러리 사용 고려 (예: Redux, Recoil 등).
• 면접에서 상태 공유 설계와 최적화 전략 질문 대비 필요.

10. 기타: 개발툴, 커밋 메시지, 기술 강의 추천, 잡담

• 개발툴 리뷰:
  • VS Code, 비주얼 스튜디오는 윈도우 환경 최적화 됨.
  • Xcode는 macOS/iOS 개발에 필수이지만, 레거시 지원 문제 & 불편함 존재.
  • JetBrains IDE는 기능 좋으나 구독형 라이센스 부담.
• 커밋 메시지: 한국인만의 팀에서는 한글 명사 위주 사용도 충분히 의미 있음.
• React 학습 자료 추천:
  • 타입스크립트 + 넥스트js + React Query 관련 강의 많이 없음, 조각 조각 찾아서 조합하는 게 현실.
• 커뮤니티 내 친목과 짤, 잡담 많음.
• 면접 준비용 팁 관련 논의도 활발하며 경험 공유 중심.

면접팁⚡

• 모노레포의 장단점을 명확히 설명할 수 있어야 함.
• React 리렌더링 과정과 성능 최적화에 대한 오해와 현실적인 최선책을 알고 있을 것.
• 테일윈드 CSS 및 Atomic/Functional CSS 개념을 이해하고, 이름 변화가 의미하는 바를 아는 것이 유리함.
• 상태관리와 컴포넌트 설계에 관한 자신의 경험 및 고민을 말할 수 있을 것.
• Electron에서 React 앱 빌드 및 배포 원리 설명 가능하면 점수 업.
• 지원자의 코드 이해력과 디버깅 능력 체크하는 간단한 코드 리딩 문제 대비.

링크🔗

• 모노레포 이해 및 단점 분석
• Kent C. Dodds: Fix the slow render before you fix the re-render
• Tachyons Functional CSS 소개
• Tailwind CSS 실무용 문서 및 체험기
• Electron React 연동 개념(6년전 자료)
• MDN Web Docs - CSS Flexbox
• MDN Web Docs - CSS flex-flow
• 깃모지 깃헙 이모지 모음
• Emoji Kitchen
• 공식 React 문서 내 Reconciliation (VDOM 비교) 설명: https://ko.legacy.reactjs.org/docs/reconciliation.html