목차
- 이력서와 포트폴리오 어필 방법
- 프론트엔드와 백엔드 취업 동향 및 직무 고민
- React 및 프론트엔드 기술 논의
- 풀스택 개발자에 대한 현실적 시각
- 개발자 면접 및 커뮤니케이션 팁
- MacBook 및 개발 환경 관련 이야기
- AWS S3 파일 관리 방법
- React Hooks (useEffect, useCallback 등) 이해하기
- TypeScript (TS) 사용 경험과 장단점
- 웹 개발 도구 및 라이브러리 추천
1. 이력서와 포트폴리오 어필 방법 🎯
- 비전공자 또는 국비 지원자의 경우, 이력서에서 학력이나 나이를 앞에 적으면 편견을 가질 우려 존재.
- 작업물이나 프로젝트 결과를 먼저 보여 주는 것이 효과적. 쿼리 실행 과정과 결과를 함께 보여주면 실무 이해도를 어필 가능.
- 포트폴리오에 단순 결과물 노출보다, 작업 과정(예: API 요청/응답, DB 쿼리)에 집중하는 것이 좋음.
- 커밋 메시지 컨벤션(feat:, fix: 등)을 이용해 Git 내역을 체계적으로 관리해 신뢰도를 높일 수 있음.
- 국비 학원 출신이라는 점은 이력서에 굳이 적지 않아도 되며, 전공과 나이는 취업 시 큰 장벽이 되지 않음.
- 자신감을 잃지 말고 꾸준히 공부하고 지원하는 것이 가장 중요함.
포트폴리오 어필 팁:
서류 심사자는 빠르게 프로젝트의 핵심 가치를 파악하려 함.
따라서 간결하면서도 핵심 내용을 부각시키는 것이 중요.
2. 프론트엔드와 백엔드 취업 동향 및 직무 고민 🤔
- 백엔드 개발자 구인 공고는 프론트엔드 대비 훨씬 많음. 특히 자바 백엔드 공고가 여전히 높은 수요를 보임.
- 풀스택 개발자는 회사에서 '노예'처럼 여기기도 하지만, 시니어급은 풀스택 능력을 인정받음.
- 프론트엔드 분야는 신입 공고가 줄고, 인공지능 관련 기술로 관심이 이동하는 경향이 있음.
- 직무를 정하기 어려운 경우, 빠르게 어느 한 쪽에 취업 후 전직을 고민하는 방법 추천.
- 공기업 전산직 등 안정적인 직무도 좁은 문임을 인지해야 함.
3. React 및 프론트엔드 기술 논의 ⚛️
- React의 주요 장점:
- 가상 DOM 사용으로 사용자 경험 개선
- 컴포넌트 재사용성 증가로 개발 속도 향상
- 상태 기반 리렌더링에 유리한 구조
- React와 옛날 JSP, Servlet, PHP 방식과 비교 시, 각 방식 모두 장단점 존재.
Component 기반 개발은 코드 유지보수에 도움을 줌. - Vue.js도 러닝커브가 낮고 많은 기업에서 채용 중임.
- Zustand와 Redux 같은 상태관리 라이브러리는 용도와 개발 성향에 따라 선택.
- React 관련 면접에서 초등학생에게 설명하듯이 개념을 쉽게 설명할 수 있는가 묻는 경우가 있음.
4. 풀스택 개발자에 대한 현실적 시각 🧑💻
- 풀스택 개발자를 ‘다방면 잡부’로 부르기도 할 만큼 업무량이 방대하나, 시니어는 확실히 능숙함.
- 많이 바뀌는 프론트엔드와 달리 백엔드는 패러다임 변화가 적고 안정성을 중시.
- 신입/주니어 입장에서 풀스택을 목표로 하면 쉽지 않으니 한쪽에 집중하는 전략 추천.
- 회사 입장에서는 시니어 풀스택의 가치를 높게 평가함.
5. 개발자 면접 및 커뮤니케이션 팁 💬
- 면접 시 핵심은 본인의 실력을 정확하고 간결하게 표현하는 능력.
- 많은 질문을 하기 전에 스스로 공부하고 최대한 정리하는 연습이 필요함.
- 상대방(면접관 또는 동료)이 이해하기 쉽도록 설명하는 능력이 중요.
- ‘1가지 내용을 5분 설명하지 말고, 1분 안에 끝내는 연습’을 권함.
- 질문은 적당히 하되, 준비를 철저히 한 후 남은 진짜 궁금증만 남기는 것이 효과적.
6. MacBook 및 개발 환경 관련 이야기 🍎
- 맥북 에어 13인치와 14/16인치 프로 모델의 듀얼 모니터 지원 여부 논의.
- M1 프로/맥스와 인텔 맥북의 성능 차이에서 인텔 모델은 다소 느리다는 의견.
- MacOS의 개발 관련 유틸 및 에디터 설정, 듀얼 모니터 사용법에 대한 팁 공유.
- 개발자 장비 투자에 대한 부담과 추천 의견도 활발히 공유.
7. AWS S3 파일 관리 방법 ☁️
- 여러 파일을 고객 별로 관리할 때는 하나의 폴더에 몰아서 저장하기보다 고객별 폴더를 따로 만드는 게 관리에 유리.
- 파일명에 고객 ID나 UUID 등 고유 식별자를 포함시켜 중복 방지 및 추적 용이.
- 백엔드에서 고객 ID를 받은 후 파일 업로드를 처리하는 방식이 일반적임.
- S3의 사전 서명 URL(pre-signed URL)을 사용해 클라이언트 측에서 직접 안전하게 파일 업로드 가능.
8. React Hooks (useEffect, useCallback 등) 이해하기 ⚙️
- useEffect는 부수 효과(side effects)를 관리하는 훅이지만, 과도한 사용은 코드를 복잡하게 만들고 성능 저하를 초래할 수 있음.
- 여러 useEffect를 하나로 합치거나, 사용을 최소화하는 방향을 권장.
- useCallback은 함수 메모이제이션을 위해 사용하며, 자식 컴포넌트에 함수를 props로 넘길 때 불필요한 렌더링 방지에 도움.
- Hooks는 컴포넌트 최상위 레벨에서만 호출해야 하며, 조건문이나 중첩 함수 내에서 호출하면 안 됨. 이것이 ‘Hooks 룰’의 기본임.
- 정확한 호출 순서 보장이 중요, 그렇지 않으면 상태 관리에 문제가 생길 수 있음.
9. TypeScript (TS) 사용 경험과 장단점 🔍
- TypeScript는 자바스크립트에 타입을 추가하여 코드 작성 시 실수를 줄이고 안정성을 높임.
- 타입 오류를 컴파일 시점에 파악할 수 있어 런타임 오류 감소 효과.
- 강력한 타입 시스템 덕분에 API 명세나 함수 사용법을 쉽게 파악 가능. 이는 개발자 경험(DX)을 크게 향상시킴.
- 타입 선언(@types/*)이 잘 갖추어진 라이브러리를 사용하면 편리함.
- 하지만 타입 정의가 잘못되거나 부족하면 불편함이 있을 수 있으며 학습 곡선 존재.
- 현업에서는 필수로 사용하는 경우가 많음.
10. 웹 개발 도구 및 라이브러리 추천 🛠️
- Jest: React 프로젝트에서 테스트 코드 작성에 자주 쓰임.
- Next.js 14: 최신 버전에서는 서버 컴포넌트와 클라이언트 컴포넌트의 조합과 상태 관리 방법 논의.
- Rspack: Webpack 대체 빌드 도구로 관심 급증 중이며 빌드 속도 개선 기대.
- Zustand, Vue Query (@tanstack/vue-query): 상태 관리 및 데이터 패칭 라이브러리로 주목 받음.
- ESLint: 코드 품질 유지를 위한 필수 도구이며, 모노레포에서 설정 관리가 도전적인 경우가 있음.
- StyleX: CSS-in-JS 솔루션 중 하나로 적용 방법과 장점 소개.
면접팁⚡
- 어려운 기술적 내용을 쉽게 풀어 설명하는 연습을 하자.
- 준비한 프로젝트와 코드를 논리적으로 잘 정리해 자신의 성장 과정을 알려주자.
- 기술 면접에서는 알고리즘뿐 아니라 커뮤니케이션 능력도 중요.
- 질문시 10번 중 9번은 스스로 풀 수 있도록 공부하고, 정말 중요한 1개의 질문만 남겨서 효과적으로 질문하라.
- 블라인드 채용에 적극 도전해보며 객관적 평가 경험을 쌓자.
링크🔗
- 현대오토에버 블라인드 채용: https://recruit.hyundai-autoever.com/
- 네이버 웹마스터 도구: https://searchadvisor.naver.com/diagnose
- robots.txt 온라인 테스트: https://www.websiteplanet.com/ko/webtools/robots-txt/
- Next.js 서버/클라이언트 컴포넌트 조합: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components
- StyleX 설치 및 문서: https://stylexjs.com/docs/learn/installation/
- Vue Query: https://tanstack.com/query/latest/docs/vue/overview
- React 공식 학습 자료: https://react.dev/learn/you-might-not-need-an-effect
#이력서#React#프론트엔드#백엔드#취업#풀스택#TypeScript#AWS#Hooks#개발환경