2024-01-27

목차

1. 프로젝트 기획과 명세의 중요성
2. Next.js 동적 라우팅 이슈와 해결법
3. 라이브러리 과도 사용에 대한 견해
4. 무한 스크롤과 윈도잉 기법 소개
5. 출퇴근 시간과 삶의 질 변화 이야기
6. 개발자 연봉 및 부자 되는 이야기
7. React useState 초기값 콜백과 lazy initialization
8. Vite vs Webpack, 빌드 도구 비교
9. 구글 로그인 Cross-Origin-Opener-Policy 문제 해결 팁
10. 개발자 건강과 운동 강조

1. 프로젝트 기획과 명세의 중요성

• 기획과 기능 명세가 없으면 백엔드 개발이 어려움
• 무작정 코딩하는 대신 기획을 먼저 명확히 해야 함
• 명확한 명세가 있다면 개발자는 바로 코딩에 집중 가능
• 커뮤니케이션이 잘 안 될 때 명세 정리를 요청하는 것이 중요

기능 명세란?
기능 명세서는 프로젝트에서 구현해야 하는 기능을 체계적으로 정리한 문서임. 개발자와 기획자 간 의사소통의 기준점을 제공해줌.

2. Next.js 동적 라우팅 이슈와 해결법

• /asset/[slug]/[id]/page.tsx 생성했는데 404 오류 발생
• Next.js에서 layout 파일은 공통 레이아웃을 담당하므로, 파라미터에 따른 데이터 처리는 page.tsx에서 하는 게 권장됨
• 동적 라우팅은 URL의 특정 부분을 변수처럼 받아와서 해당 페이지를 렌더링하는 방법임
• page.tsx 내부에서 서버 컴포넌트 params를 받아 API 호출 후 렌더링 가능
• 레이아웃 영역을 유지하면서 일부 contents만 리렌더링하려면 Parallel Route, Nested Route(병렬/중첩 라우트) 구조를 활용할 수 있음

팁: Next.js 13+에서는 /app 디렉토리 기반 라우팅을 사용하는 경우, [param] 디렉토리와 page.tsx 파일 위치를 정확히 맞추는 게 중요함.

3. 라이브러리 과도 사용에 대한 견해

• 라이브러리는 개발 생산성 향상의 강점이 있음
• 지나치게 라이브러리에 의존하면 직접 문제 해결 능력, 설계 능력 저하 우려
• 채용과 면접에서는 기본적인 JS/React 지식과 문제 해결 능력 중점 평가
• 과제 시 라이브러리 사용 제한하는 경우도 많음 (기본 기능 위주 활용 권장)
• 필요에 따라 라이브러리를 직접 제작하는 것도 좋은 학습과 경험이 됨

라이브러리 활용법 요약

• 프로젝트 상황과 팀 역량에 맞게 적절히 라이브러리를 사용하되, 기초 원리 이해와 직접 구현 경험도 필수!

4. 무한 스크롤과 윈도잉 기법 소개

• 무한 스크롤: 사용자가 스크롤할 때마다 새로운 데이터를 계속 불러와 화면에 이어서 보여주는 UI 기법
• 윈도잉(Windowing): 스크롤 영역에 보여지는 부분만 렌더링하고, 비가시 영역의 DOM 요소는 제거해 성능을 최적화하는 기법
• 두 기법을 함께 써서 렉을 최소화함
• Intersection Observer API를 주로 활용하여 스크롤 위치 감지 및 데이터 로딩 처리
• 복잡한 무한 스크롤은 바닐라 JS로 구현 시 매우 난이도가 높아 라이브러리 활용 추천

5. 출퇴근 시간과 삶의 질 변화 이야기

• 출퇴근 시간이 줄면 삶의 질이 크게 개선됨
• 왕복 2시간 이상 출퇴근했던 경험담 공유
• 이사와 이직으로 출퇴근 시간 20분대로 단축된 사례에서 여유로운 아침과 운동 시간 확보 가능
• 개발자들도 워라밸(Work-Life Balance) 중요성 인식하고 있음

6. 개발자 연봉 및 부자 되는 이야기

• 서울 개발자 평균 연봉은 4천만원대 초중반 수준 언급
• 부자 되려면 단순 월급쟁이보다는 창업이나 사업 필요
• 개발자로서 부자가 되기 어려운 현실과 노력의 중요성 토론
• 마음가짐 조언: 남과 비교하지 말고 어제의 나보다 나아지자는 긍정적 태도 강조

7. React useState 초기값 콜백과 lazy initialization

• useState 초기값에 콜백 함수를 넘기면, 처음 마운트 시에만 초기화 함수 실행됨 (lazy init)
• 이는 초기값 계산 비용이 클 때 효율적임
• 예: useState(() => expensiveCalculation())
• 콜백 없이 초기값을 그냥 넘기면 매 렌더마다 초기화 코드 실행 우려

8. Vite vs Webpack, 빌드 도구 비교

• Vite는 빠른 빌드 타임과 개발 서버를 제공해 최근 선호도가 높음
• Webpack은 익숙하고 기능이 풍부하지만 느린 편
• 회사 프로젝트 특성이나 안정성 고려해 선택하지만, 개인 프로젝트에는 Vite 추천
• bun.js 빌드 도구 조합은 아직 초기 단계지만 매우 빠름
• 빌드 도구 선택은 안정성과 생산성의 균형에 달림

9. 구글 로그인 Cross-Origin-Opener-Policy 문제 해결 팁

• 구글 OAuth 로그인 중 Cross-Origin-Opener-Policy 정책에 의해 window.close() 호출 차단 에러 발생
• 해결 방법: 구글 개발자 콘솔에서 관련 도메인 및 설정 확인 필요
• 공식 문서(구글 Identity Services) 참고하여 Cross-Origin-Opener-Policy 헤더 및 권한 설정 권장

10. 개발자 건강과 운동 강조

• 건강이야말로 어떤 성공보다 우선이라는 공감대 형성
• 부자여도 건강 잃으면 무의미하다는 경험 공유
• 주말 2시간 걷기, 헬스장 운동 등 꾸준한 운동 권장
• 개발자들도 바쁜 업무 속에서 건강 챙기는 습관 필요

면접팁⚡

• Next.js 동적 라우팅 구조와 기본 원리 정확히 알고 있으면 좋은 인상
• React 상태관리(useState 초기값 콜백 포함) 개념 숙지
• 라이브러리 의존도의 장단점 이해하고 필요 시 직접 구현 경험 어필
• 문제 해결 능력과 기본기 중심의 면접 대비
• 코딩 과제 시 불필요한 라이브러리 남용 자제 및 코드 가독성 유지

링크🔗

• Next.js 공식 문서: https://nextjs.org/docs
• React useState lazy initialization: https://reactjs.org/docs/hooks-reference.html#lazy-initialization
• 구글 OAuth Cross-Origin-Opener-Policy 관련: https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid
• 무한 스크롤과 Intersection Observer: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Vite 공식 사이트: https://vitejs.dev
• bun.js 소개: https://bun.sh