2023-10-27

목차

1. 부업과 사이드잡에 대한 의견
2. Next.js 14 출시와 주요 변경점
3. 유닛 테스트 실태와 팁
4. React의 useEffect 동작 이해
5. 네트워크 상태 감지 방법과 위치
6. 함수 매개변수 중 일부만 지정하는 방법
7. Next.js 13/14 API 라우트 핸들러와 서버 컴포넌트의 역할
8. Next.js 라우터 캐싱 문제와 해결법
9. 이론 vs 실무, 개발자의 준비 자세
10. 면접 경험과 준비 조언

1. 부업과 사이드잡에 대한 의견

• 부업으로 배민 배달 같은 일도 있지만 보통 퇴근 후에 하기는 매우 힘듦
• 직장에 적응한 후 도전해보라는 조언이 많음
• 블로그, 유튜브, 인스타그램 마케팅 등 다양한 부업 아이템이 존재함
• 사업이나 창업, 스터디 모임을 통한 성장도 추천됨
• 사이드는 다양한 방법(프리랜스, 외주 등) 가능하나 체력적 부담 큼

2. Next.js 14 출시와 주요 변경점

• Next.js 14가 최근에 나왔으며, 주로 개발자 경험(DX)과 성능 향상이 중심
• 터보팩(turbopack)과 같은 빌드 도구 개선도 포함됨
• 하지만 큰 기능 추가보다는 점진적인 업그레이드 성격
• 현업에서는 아직 13 버전도 익숙하지 않은 경우가 많음
• Next.js는 React 기반의 SSR 및 SSG 지원 프레임워크로, 서버 컴포넌트와 API 라우팅 기능이 추가돼 점점 다양해지고 있음

3. 유닛 테스트 실태와 팁

• 대부분 회사에서 유닛 테스트를 잘 작성하지 않는 편
• UI 컴포넌트는 테스트 작성이 거의 없고, 비즈니스 로직만 테스트하는 경우가 많음
• 테스트코드 작성이 부담스럽고 레거시 코드 리팩토링하면서 고생하는 사례 경험 공유
• 솔직하게 못 한다고 얘기하는 것이 현실적
• 테스트가 필요한 부분과 아닌 부분을 구분하는 것이 중요
• jest, e2e 테스트 등 다양한 테스트 유형 존재하며 테스트 작성이 점점 중요해짐

4. React의 useEffect 동작 이해

• useEffect 훅은 컴포넌트 마운트 시 한번 실행됨(의존성 배열이 빈 경우)
• 의존성 배열이 없으면 매 렌더링마다 실행됨
• 마운트는 컴포넌트가 "생성"되어 화면에 최초로 그려지는 시점, 렌더링은 마운트 이후 상태 변화 등에 의해 다시 화면을 그리는 과정
• 클래스 컴포넌트에서의 componentDidMount와 유사한 역할
• 업데이트 시점과 렌더링 개념 구분이 중요함

5. 네트워크 상태 감지 방법과 위치

• 네트워크 연결 상태를 체크할 때 navigator.onLine API 사용 가능
• 브라우저에서 online과 offline 이벤트 리스너 활용 가능
• React 프로젝트에선 루트 레이아웃 컴포넌트에 네트워크 상태 감지 로직을 배치하는 것이 효과적
• 네트워크 오류 발생 시 사용자에게 toast 알림 같은 UI를 통해 바로 알리는 것도 일반적
• axios, fetch 등 HTTP 클라이언트에 에러 핸들링 추가 후 리디렉션도 고려할 수 있음

6. 함수 매개변수 중 일부만 지정하는 방법

• JavaScript 기본 함수에서는 매개변수 중간에 값을 건너뛰고 지정하는 문법은 없음
• 보통 매개변수를 객체로 받아서 필요한 값만 명시하는 패턴 추천
• arguments 객체를 사용해 내부에서 특정 인자만 분리할 수는 있지만 타입스크립트 사용시 typing 어려움 있음
• 선택적(optional) 파라미터는 뒤쪽에 두고, 기본값 지정해서 사용하는 것이 실용적
• 매개변수를 객체로 받아 구조분해할당 하면 가독성, 확장성 모두 좋음

7. Next.js 13/14 API 라우트 핸들러와 서버 컴포넌트의 역할

• Next.js 13+에서는 서버 컴포넌트와 API 라우트를 모두 지원
• API 라우트 핸들러(route.ts)는 서버에서 REST API 엔드포인트 역할
• 서버 컴포넌트 내부에서 DB 호출 및 처리도 가능하지만, API 라우트는 역할 분리, 코드 정리, 외부 호출 차단(보안) 목적 있음
• API 라우트에는 인증, 프라이빗 URL 숨김 등의 목적도 포함됨
• BFF(Backends for Frontends) 패턴으로 API 라우트를 사용해 서버에서 필요한 데이터를 조합할 수 있음
• 때로는 API 라우트가 별도 필요 없을 수도 있으니 상황별 선택

8. Next.js 라우터 캐싱 문제와 해결법

• Next.js는 기본적으로 라우터에서 데이터를 캐싱해 후방 탐색(back)이 빠름
• 이로 인해 최신 데이터 반영이 늦거나 안 되는 문제가 발생
• 해결법 중 하나는 클라이언트 컴포넌트에서 router.refresh()를 호출해 강제로 캐시 무효화하기
• router.refresh()는 현재 페이지의 서버 컴포넌트를 다시 렌더링하여 최신 상태 반영
• 라우터와 서버 컴포넌트 캐싱 정책(revalidate, revalidateTag) 세밀하게 조절해야 함
• SSG(Static Site Generation)를 끄고 SSR(서버 사이드 렌더링)만 사용하는 것도 캐싱 문제 완화에 도움이 됨
• 여러 상황과 버그 케이스 존재하니 테스트 중요

9. 이론 vs 실무, 개발자의 준비 자세

• 실무에 바로 투입 가능한 인력은 기본 이론과 구현 능력을 모두 갖춰야 함
• 이론만 알고 문서 보고 코딩하는 것과, 직접 손코딩 할 수 있는 실력이 차이 큼
• 특히 구조나 내부 동작 원리를 이해하지 못하면 중고급 개발자로 성장하기 어려움
• 현장에서는 시간이 부족해 GPT 같은 AI 도움을 받기도 하지만, 좋은 개발자는 적어도 로직과 원리를 직접 이해하고 구현 가능해야 함
• 객체지향 설계, SOLID 원칙 등 기초 이론은 꼭 공부 필요
• 현업과 면접에서 자주 등장하는 주제이므로 꾸준히 학습하는 것이 좋음

10. 면접 경험과 준비 조언

• 신입 면접에선 CS 기초, 구현 능력, 관심 기술, 협업 태도, 가치관 등 다양한 질문 다뤄짐
• 어려운 질문 나와도 편안한 마음으로 답변하는 게 중요하며, 모르는 것은 솔직히 말하는 게 낫다는 의견 다수
• 면접 시간은 길어도 좋은 신호일 수 있으나 케바케라 정답 없음
• 면접 준비시 자주 묻는 객체지향 설계 원칙(SOLID)와 React 비동기 처리 원리, useEffect, Promise 개념은 반드시 숙지
• 실제 현업 경험과 프로젝트 사례를 중심으로 대답 준비
• 복장과 태도 등 기본 매너도 중요

면접팁⚡

• 모르면 솔직히 “모른다”라고 하되, 관련 개념에 대한 학습 의지를 보여주자
• ‘관심 기술’ 질문은 회사가 어떤 기술 스택에 호기심 많고 적응할 자세가 되어있는지 보려는 의도임
• 객체지향 설계와 SOLID 원칙, 자바스크립트의 Promise, React 라이프사이클 이해를 준비할 것
• 긴장해도 평정심 유지하고, 경험한 프로젝트나 공부한 내용을 중심으로 자신감 있게 이야기할 것

링크🔗

• Next.js 14 릴리즈 노트
• Excalidraw - 손그림 다이어그램 툴
• Navigator.onLine MDN 공식문서
• Next.js 13 라우터 캐싱 이슈 사례
• Jest 테스트 기본 사용법 동영상
• Yarn 4.0 릴리즈