목차
- 이직 시즌과 구직 전략
- 맥북 구매 고민 & 사양 비교
- React와 Next.js SEO & SSR 이슈
- Redux-thunk로 CRUD 구현 고민
- 테스트 코드 작성 및 모킹(Mocking) 팁
- 개발 생산성 도구 : Copilot과 GPT 비교
- 영양제, 건강관리 관련 경험 공유
- 면접 질문과 준비 팁
- 개발 관련 꿀팁과 질문 (jQuery 셀렉터, VSCode 단축키 등)
- 링크 모음 및 유용한 자료
1. 이직 시즌과 구직 전략
- 이직 시즌은 명확히 정해져 있지는 않지만, 구직 중일 때가 사실상 '이직 시즌'임.
- 지원 시에는 우선순위를 정해 조건에 맞는 곳을 먼저 거르고, 3단계로 나누어 우선순위 낮은 곳부터 지원해보는 전략 추천.
- 면접 초대가 오면 자신감을 갖고 가는 것이 중요하며, 실제 업무 경험이 부족해도 공부한 내용을 깃허브 등으로 보여주면 기회가 만들어지기도 함.
2. 맥북 구매 고민 & 사양 비교
- 맥북 프로 16인치(M2 Pro, M2 Max)와 14인치 모델 간 무게 차이 약 550g 정도.
- 14인치는 '프로'만 있고 기본 에어 모델은 13인치임.
- 가격대가 높아서 고사양일수록 부담되며, 할부 구매로 부담을 나누는 방법도 있음.
- 에어 모델과 프로의 차이는 해상도, 포트 지원 개수, 외장 모니터 연결 가능 수 등이 있음.
- 맥북 인텔 모델은 발열과 팬 소음 이슈가 많았으나, 실리콘 칩 탑재 모델은 팬이 적게 돌고 발열이 줄어 개선됨.
- 개발자 입장에서는 외장 모니터 지원 여부가 중요하며, 웹스톰 같은 무거운 IDE 사용 시 가끔 자동 완성이 늦는 경우도 보고됨.
3. React와 Next.js SEO & SSR 이슈
- Next.js 13 버전에서 use client가 붙은 컴포넌트는 클라이언트 사이드 렌더링(CSR) 되며, 나머지 컴포넌트는 SSR(Server Side Rendering) 됨.
- React의 useEffect 훅은 SSR 단계에서는 실행되지 않아, 이 훅에서 데이터를 불러오면 초기 HTML에는 해당 데이터가 반영되지 않음.
- 이 때문에 useEffect 사용 시 SEO에 불리하며, 검색 엔진이 읽는 HTML이 빈 화면일 수 있음.
- SEO 최적화를 원하면 Next.js에서 서버 컴포넌트 또는 React Helmet 같은 도구를 사용해 메타 태그를 SSR 시점에 동적으로 설정하는 방법이 있음.
- 클라이언트 컴포넌트 내에서 SEO를 완전하게 구현하는 것은 한계가 있으므로, SSR과 CSR의 차이를 이해하는 것이 중요함.
4. Redux-thunk로 CRUD 구현 고민
- Redux-thunk를 사용할 때, 비동기 데이터 처리(fetch 등)는 thunk 함수로 구현함.
- Create, Update, Delete 기능도 각각의 액션과 리듀서가 별도로 필요하므로, 리듀서가 많아질 수 있음.
- 하지만 기능별로 구분하는 것이 유지보수 및 확장성에 도움이 됨.
- 전체를 하나로 합치려 하면 코드 관리가 어려워질 수 있음.
- 또한 모듈별로 액션 타입과 리듀서 로직을 나누는 것이 권장됨.
5. 테스트 코드 작성 및 모킹(Mocking) 팁
- Jest로 컴포넌트 테스트할 때, 리덕스 스토어, 네비게이션, Axios 요청 등 사용하는 외부 모듈들은 전부 모킹(mocking) 처리해야 에러가 줄어듦.
- 원리 : 테스트 대상 외부 의존성을 제거해 순수한 컴포넌트나 함수만 테스트할 수 있도록 함.
- 꼭 모든 것을 모킹할 필요는 없으나, 에러 발생 원인을 파악 후 중요 의존성은 적절히 모킹.
- 순수 함수를 분리해서 테스트 가능한 구조로 설계하는 것이 바람직함.
6. 개발 생산성 도구 : Copilot과 GPT 비교
- GitHub Copilot은 반복 코드 작성, 기본 함수 스니펫 생성 등에 매우 효율적이며 개발 생산성을 크게 높여줌.
- GPT 계열 언어 모델과 비교할 때, Copilot은 코드 자동 완성에 특화되어 있고, GPT는 보다 포괄적으로 코드 설명, 문제 해결이 가능함.
- 스니펫 기반 자동 입력과 다르게 Copilot은 문맥을 파악해 동적으로 코드를 제안함.
- 다만, 무분별한 사용보다는 코딩 패턴과 개념을 알고 적절히 활용하는 게 중요함.
7. 영양제, 건강관리 관련 경험 공유
- 오메가3, 마그네슘, 멀티비타민, 밀크씨슬 등의 섭취 시기와 효과에 대해 경험담 공유.
- 마그네슘은 근육 경련 및 눈 떨림 완화에 도움을 줄 수 있다고 알려짐.
- 유산균은 장 건강에 가장 빠르고 체감되는 효과가 있다고 평가됨.
- 영양제는 개인 차가 크므로 무작정 많이 복용하기보다 자기 몸에 맞는지 확인하는 것이 중요.
- 비용 부담이 크니 여러 제품을 비교해보거나 자연식 섭취도 고려할 만함.
8. 면접 질문과 준비 팁
- Axios 요청-응답 과정 설명을 묻는 질문은 "HTTP 요청이 만들어지고, 서버로 보내지며, 응답 수신, 그리고 그 후 실제 UI 반영" 흐름을 이해하는 걸 보여주는 게 중요함.
- React 면접에서 useEffect, useReducer, 클로저, this 키워드, 프로토타입 체인 등 자바스크립트 핵심 개념에 대해 질문받는 상황 많음.
- 리액트 현업 경험이 부족해도 공부한 내용과 프로젝트들을 깃허브에 보여주면 채용 가능성이 있음.
- 코딩 테스트는 알고리즘 문제보다는 구현, 라이브 코딩 문제를 주는 경우가 많으므로 실무 중심 준비 추천.
9. 개발 관련 꿀팁과 질문
- jQuery 셀렉터 [id][name='phone']는 "id 속성을 가지고, name 속성이 'phone'인 요소"를 동시에 선택하는 문법임.
- VSCode 글자 크기 변형은 Ctrl + - 키로 축소가 가능함(윈도우 기준).
- Next.js의 next/link 컴포넌트는 상대경로 입력 시 절대경로로 처리되는 경우가 있으니 / 포함한 절대경로 형태를 권장.
- 로컬스토리지에 토큰을 저장하는 방식은 Next.js(특히 서버 컴포넌트)에서 제한적이며, 보안이나 접근성 문제로 쿠키 저장을 권장함.
- use client명칭 때문에 사람들이 SSR이 전혀 안 되는 것으로 오해할 수 있으나, 실제로는 SSR과 클라이언트 렌더링이 혼재된 환경임을 이해하는 것이 중요.
면접팁⚡
- Axios 요청 흐름을 면접에서 상세히 설명하기 위해서는, HTTP 요청 생성, 네트워크 전송, 서버 처리, 응답 수신, 프론트엔드 상태 반영의 단계별 개념을 잡자.
- React와 관련된 핵심 자바스크립트 개념 (클로저, this, 프로토타입 체인 등)을 탄탄히 익히는 것이 고급 면접에서 도움됨.
- CSR과 SSR 차이에 대해 꼭 이해하고, Next.js에서 use client와 Server Components의 역할과 특징을 명확히 설명할 줄 알아야 함.
- Redux-thunk 사용 시 CRUD 액션과 리듀서 관리 방법을 정리해두면 실무 면접에서 좋은 인상 줄 수 있음.
링크🔗
#이직#맥북#React#NextJS#SEO#ReduxThunk#테스트코드#코파일럿#면접팁#영양제