2023-11-01

목차

1. Next.js 버전별 특징과 실무 적용 고민
2. 중소기업 풀스택 연차별 연봉과 경력 고민
3. React 함수형 컴포넌트 상태 관리와 useEffect 이야기
4. 깃(Git) 이슈와 로컬 개발 환경 팁
5. 면접과 과제 준비, 질문 스킬
6. Tailwind CSS 유틸리티 그룹화와 커스텀 플러그인
7. MacBook M3 모델별 구매 고민과 추천
8. 타입스크립트 인터페이스 및 폼 관리
9. 대형 프로젝트 클론코딩과 실전 경험
10. 알고리즘 공부와 코딩 테스트 난이도 토론

1. Next.js 버전별 특징과 실무 적용 고민

• Next.js 14 릴리즈 소식과 호응
• Next.js 12는 이미 레거시, 13과 app router 기능 차이 강조
• 앱라우터(App Router) 사용 권장, 페이지라우터(Page Router)는 점차 레거시화 예상
• 실무에서는 안정성 때문에 새 버전 도입 시점 신중하게 결정
• Next.js 14 출시로 13에서 14로의 마이그레이션이 편해져 기대감 존재

설명:
Next.js는 React 기반의 서버사이드 렌더링(SSR) 프레임워크로, 점진적 기능 개선이 이뤄지고 있음. 앱라우터는 페이지라우터 대비 라우팅과 서버 컴포넌트 관리가 현대적이며 효율적. 단, 버전업을 실무에 적용 시 안정성 및 팀 합의가 중요.

2. 중소기업 풀스택 연차별 연봉과 경력 고민

• 수도권과 지방 IT 일자리 차이 존재: 서울 강남권 3년차 4천 중반, 지방 3천 후반 수준
• 3년차 개발자 슬럼프 겪는 경우 많음
• 개발 외 기획, 사업부담 증가에 대한 고민
• 개발 즐거움 유지와 외적 부담 감당 여부에 따라 이직도 고려 추천
• 프리랜서 현실과 장단점 공유

설명:
중소기업은 개발 이외 업무 부담, 낮은 연봉도 많아 경력 초중반에 회의감이 들 수 있음. 이직 또는 환경 변화가 해답 될 수 있으며, 프리랜서는 자기 영업과 인맥관리, 프로젝트 이동성 등 현실적 제약도 큼.

3. React 함수형 컴포넌트 상태 관리와 useEffect 이야기

• 클래스형 setState 콜백과 달리 함수형은 값 변경 후 바로 콜백 기능 없음
• 주로 상태 변경 감지에 useEffect를 사용해 API 호출 로직 처리
• useEffect 많아지는 부담과 지연 문제 제기
• 대안으로 setState에 함수형 업데이트, 상태를 직접 파라미터로 넘기는 방식 사용 가능
• SWR 라이브러리 사용 시에도 파라미터 전달로 의존성 관리 필요
• React 18 동시성 기능과 useDeferredValue 같은 훅으로 최적화 가능
• 상태 업데이트 콜백을 흉내내는 커스텀 훅 설계도 고려

설명:
React 함수형 컴포넌트는 상태 관리가 선언적이며 비동기적임. 상태 변경 후 바로 값을 읽어 처리하는 것은 클래스형과 다름. useEffect는 상태 변화 감지를 위한 표준 수단이며, API 호출 시 주로 활용됨.

4. 깃(Git) 이슈와 로컬 개발 환경 팁

• git init 위치 문제로 상위 폴더가 깃 관리 대상이 되어 불필요한 파일 커밋 시도
• node_modules 폴더 커밋 제외를 위한 .gitignore 설정 중요
• vscode와 git 연동시 경로 문제 발생 가능성 있음
• Next.js 개발 서버가 macOS에서는 안정적이나 Windows 환경에서 개발 서버가 자주 종료되는 문제 언급
• 문제 해결 위한 npm run dev 재실행 외 근본적 대책 필요

5. 면접과 과제 준비, 질문 스킬

• 2차 면접(임원/심화)은 회사 및 직무마다 다름, 라이브코딩 또는 심층질의 가능성
• 객관적 평가가 가능한 온라인 코딩 테스트, 과제가 증가하는 추세
• 질문할 땐 자신이 시도한 내용과 결과를 자세히 정리해서 명확히 질문해야 좋은 인상
• 질문을 빨리 하고, 시간이 정해진 티켓 업무는 빠른 피드백 권장
• 코딩 테스트 난이도가 높을수록 경쟁자는 적음, 난이도 낮으면 경쟁률 증가
• 경력보다 실력을 봐주는 채용 문화도 존재

면접팁⚡

• 과제는 주관적 평가를 피하기 위해 객관적인 플랫폼 활용이 증가중
• 질문 능력은 개발자로서 성장에 필수, 단순 질문보단 시도와 문제점 공유 중요
• 취업 경쟁 치열, 코딩 테스트와 주관적 면접을 적절히 준비하자

6. Tailwind CSS 유틸리티 그룹화와 커스텀 플러그인

• 여러 클래스를 하나로 묶으려면 px-6 같이 축약 클래스 사용
• 프로젝트 내 커스텀 유틸리티 만들 땐 @apply 또는 tailwind.config.js 내 플러그인 등록 가능
• React Native 환경에서는 nativewind 지원 차이 존재
• 디자인 토큰 개념 도입으로 컬러 등 속성을 일괄 관리하고, 유틸리티는 최소화하는 방향 추천
• 별도의 CSS 파일에 스타일 정의 후 클래스와 연결도 가능하나 우선순위, import 등 확인 필요

설명:
Tailwind CSS는 유틸리티 퍼스트(utility-first) 방식으로 빠르게 스타일 조합 가능. 복잡한 스타일은 커스텀 플러그인이나 @apply를 활용해 재사용성 확보. 디자인 토큰은 일관성 유지에 도움.

7. MacBook M3 모델별 구매 고민과 추천

• M3 기본형, M3 Pro, M3 Max 스펙과 가격 차이 존재
• 개발 환경에 맞게 램 최대 확장이 가장 중요
• 모니터 지원 개수가 구매 결정에 큰 변수 (Air는 모니터 1대만 지원)
• 개발자 대다수는 M3 Pro 모델 선호, M1 Air도 아직 충분히 쓸만하다는 평가
• 할인 기간(블랙프라이데이, 신학기)에 구매 타이밍 추천
• 회사 지원으로 장비 대여하는 경우도 많음

8. 타입스크립트 인터페이스 및 폼 관리

• 인터페이스에서 키값과 타입이 같으면 Record<string, string>으로 간단히 표현 가능
• React 폼 관리는 react-hook-form 같은 라이브러리 활용 추천
• 폼 컨트롤, 상태 관리, 유효성 검사에 초점 맞추는 게 중요
• 직접 구현해 보는 경험이 라이브러리 이해와 활용에 도움됨
• 프로젝트 규모에 따라 커스텀 훅과 모듈화가 필요할 수 있음

설명:
타입스크립트는 코드 안정성을 높이기 위해 타입 명시 필수. react-hook-form은 복잡한 폼을 간편하게 다루고 성능 최적화에도 유리.

9. 대형 프로젝트 클론코딩과 실전 경험

• 클론코딩은 실습 및 이해에 좋은 출발점이나 실제 대형 프로젝트와는 차이 존재
• 큰 프로젝트는 여러 기능 서비스 모듈 집합으로 봐야 함
• 유튜브, 노션, 에어비앤비, 네이버, 카카오 UI 플랫폼 클론 추천
• CSS, 상태 관리, 풀링, 소켓, 댓글, 업로드 기능 포함 시 실제 개발 경험 풍부해짐
• 클론보다 이해와 설계, 팀 협업 경험 쌓는 게 중요

10. 알고리즘 공부와 코딩 테스트 난이도 토론

• 백준 등에서 설컴, 네카라쿠배 출신 신입들의 높은 알고리즘 실력 증언
• 다이아 등급은 PS와 수학 지식도 같이 갖춰야 함
• 신입 채용에서는 코딩 테스트가 매우 중요한 합격 기준
• 난이도 높은 문제는 자연스레 경쟁자 줄어듦
• 정량적 평가를 통한 객관적 실력 증명이 중요하며, 주관 평가는 회사와 핏 맞음 여부 평가에 필요

면접팁⚡

• 질문은 시도한 내용, 결과, 문제점 등을 구체적으로 정리해 간결하고 명료하게 할 것
• 온라인 코테와 과제는 객관적이고 공정한 평가 수단이며 충분히 대비 필요
• 업무시간 내 문제 해결 불가 시 즉시 질문해 팀과 협력하는 자세 중요
• 회사 문화와 업무 방식에 대해 이해하는 질문도 면접관에게 좋은 인상 제공

링크🔗

• Tailwind CSS 커스텀 스타일 추가
• SWR 공식 문서 - 데이터 패칭
• NPM - @material-tailwind/react
• 네이버 FE 채용 이슈(깃허브)
• React Hook Form 소개