목차
- 이른 출근과 퇴근 소소한 이야기
- 캘린더 앱 비교 및 추천
- Next.js 라우팅과 XState 적용 고민
- 브라우저 히스토리 제어 및 Stackflow 라이브러리
- 상태관리 라이브러리: Zustand vs Jotai vs Recoil 이야기
- React 빌드 도구: CRA vs Vite 차이점
- 연봉 협상 및 이직 상담
- API란 무엇인가? 비개발자에게 설명하는 방법
- SPA SEO 관련 최신 정보
- 현업 야근 이슈 및 스타트업 일정 관리 고민
Zustand #Jotai #Stackflow #SPA_SEO #연봉협상 #스타트업개발
1. 이른 출근과 퇴근 소소한 이야기
- 아침부터 초스피드 출근, 퇴근하는 개발자들 간 유쾌한 대화
- 배포 관련 실수 (알파배포 누락)로 퇴근한 경험 공유
- 일상 소소한 먹거리 및 일정 이야기로 분위기 환기
2. 캘린더 앱 비교 및 추천
- Amie 캘린더가 최근 깔끔하게 업데이트되어 인기
- Reflect 앱은 캘린더 기능도 있지만 ‘캘린더기반 노트’를 추구해서 목적이 다름
- 노트 중심 앱과 캘린더 중심 앱은 각각 장단점 있음
- 연간 구독으로 바로 구매하는 열렬 사용자 등장
- “sig-생산성” 등 키워드로 기능 점검 추천
3. Next.js 라우팅과 XState 적용 고민
- 페이지간 복잡한 이동 로직 관리 위해 XState 상태 머신으로 라우팅 관리 고민
- XState로 완전 라우팅 대체는 어려우며 이벤트 수신 방식으로 접근 권장
- Next.js 라우팅 구조가 고정적이고 개조가 어려워 한계 존재
- 단순히 다음 경로(path)만 추출하는 형태로도 의미 있음
- 이벤트 기반 이동과 라우터 메서드(router.push, Link) 사용 방법 논의
XState란?
XState는 상태 머신 및 상태 차트(statecharts) 기반 상태 관리 라이브러리다. 복잡한 UI 상태나 비즈니스 로직을 명확하게 모델링하는 데 용이하다.
4. 브라우저 히스토리 제어 및 Stackflow 라이브러리
- 브라우저 히스토리를 완전히 컨트롤하기 어려운 현실
- Next.js가 브라우저 히스토리 직접 수정이나 인터셉팅을 제한함
- 당근마켓 ‘Stackflow’ 라이브러리 소개, 자체 라우터이며 브라우저 히스토리와 싱크 가능
- Stackflow는 광고 웹뷰에서 특정 시점 이전 히스토리 삭제(포핑) 구현 사례 있음
- 백내비게이션 상태 머신과 히스토리의 동기화 중요
Stackflow 라이브러리란?
Stackflow는 React 기반 모던 라우터 라이브러리로, SPA 라우팅을 스택 개념으로 관리하고, 브라우저 히스토리와 싱크하여 자연스러운 내비게이션 경험을 제공한다.
5. 상태관리 라이브러리: Zustand vs Jotai vs Recoil 이야기
- 상태관리 라이브러리 선택 기준과 실제 경험 공유
- Zustand: Redux 내부 패턴 차용, 단순성 추구, 강력한 성능
- Jotai: Atomic state 컨셉, React Context 비사용으로 렌더링 이슈 개선
- Recoil: Facebook이 만든 상태관리, Jotai와 유사한 Atomic 접근
- Zustand와 Jotai 모두 단점 존재(예: Jotai atomFamily는 메모리 누수 이슈)
- 추천 팁: 상황에 맞게 선택, 무조건 하나가 정답은 아님
- Suspend와 React Fiber 이해 중요, 직접 라이브러리 소스 보는 것도 큰 도움
6. React 빌드 도구: CRA vs Vite 차이점
- 빌드 속도는 Vite가 압도적으로 빠름 (CRA 대비)
- CRA는 Webpack 기반, Vite는 Rollup과 ES Module 기반 빌드
- 최종 사용자 대상 서비스 성능은 동일, 개발 편의성 및 빌드 속도 차이가 주된 차이
- 환경변수 로딩 방식 차이, import.meta.env(Vite) vs process.env.REACT_APP_...(CRA)
- 프로젝트 전환 시 충분한 테스트와 문서 확인 필수
7. 연봉 협상 및 이직 상담
- 20% 연봉 인상 제시 받으면 전반적으로 이직 권장하는 의견 다수
- 현재 재직중인 회사에서 충분한 협상이 어렵다면 이직으로 커리어 상승 기대 가능
- 입사 초기(1년 미만)라도 성장과 보상에 감안하여 이직 고민 적극 권장
- 연봉 협상 시 솔직하고 정확한 커뮤니케이션 중요, 미리 정정 가능
- 코드 리뷰 문화 및 팀 분위기도 이직 판단 요소로 고려
8. API란 무엇인가? 비개발자에게 쉽게 설명하는 방법
- API는 프로그램끼리 상호작용하는 ‘약속’ 또는 ‘창구’라는 비유가 일반적
- 예시: 리모컨과 TV, 창고와 요청 시스템, 음식 주문과 주방의 관계
- 상호작용의 기준과 절차를 의미하는 개념으로 비개발자도 이해 가능하게 연결
- 상황과 청중에 맞는 쉬운 예시를 준비하는 것이 효과적
9. SPA SEO 관련 최신 정보
- SPA(Single Page Application)도 최근 구글 크롤러가 CSR(Client Side Rendering) 콘텐츠를 수집 가능
- SEO 최적화를 위한 sitemap 제공과 함께 meta 태그(타이틀, 디스크립션) 관리는 중요
- JSON-LD 같은 구조화 데이터 활용도 권장
- 일부 사이트는 CSR 기반임에도 타이틀과 본문을 크롤링해 노출 중
- 최신 브라우저와 검색 엔진의 렌더링 기술 발달이 주원인
10. 현업 야근 이슈 및 스타트업 일정 관리 고민
- 스타트업에서 부족한 기획과 과도한 일정 압박 속 야근 급증 사례 공유
- 기획서 미비, API 개발 불안정, 여러 프로젝트 동시 진행 어려움 토로
- 경력자와 신입 모두 일정 부담 가중, QA 부재 문제
- 일정 산정과 리소스 배분의 중요성 재확인
- 대표나 경영진과 개발팀 간 현실적 소통 필요성 강조
면접팁⚡
- 대면 면접 시 긴장 완화 방법: 사전에 충분한 연습과 경험 공유 준비
- 상황별 질문에는 솔직하고 논리적인 답변, 문제 해결 접근법을 구체적으로 설명
- 연봉 협상 관련 질문에 대비하여 현재 스킬과 성과 중심으로 설득력 있게 표현
- React 및 최신 프레임워크 관련 질문 대비: 상태관리, 라우팅, 빌드도구 이해 필수
- 팀워크 및 커뮤니케이션 경험을 강조하는 것도 긍정적 영향
링크🔗
- Stackflow Github - Next.js 호환 자체 라우팅 라이브러리
- Routing Using State Machines - Medium - XState와 라우팅 관련 POC 사례
- Lightning CSS - 빠른 CSS 번들러 비교
- Sagen Monorepo (zustand vanilla 구현체) - zustand 내부 구현 참고
- Next Auth Reddit Discussion - NextAuth 단점과 불만 토론
- Chrome Selenium Webdriver Issue
#Nextjs#XState#React#상태관리#Zustand#Jotai#Stackflow#SPA_SEO#연봉협상#스타트업개발