react 썸네일react

2024-01-22

목차

  1. 이력서와 포트폴리오 어필 방법
  2. 프론트엔드와 백엔드 취업 동향 및 직무 고민
  3. React 및 프론트엔드 기술 논의
  4. 풀스택 개발자에 대한 현실적 시각
  5. 개발자 면접 및 커뮤니케이션 팁
  6. MacBook 및 개발 환경 관련 이야기
  7. AWS S3 파일 관리 방법
  8. React Hooks (useEffect, useCallback 등) 이해하기
  9. TypeScript (TS) 사용 경험과 장단점
  10. 웹 개발 도구 및 라이브러리 추천

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개의 질문만 남겨서 효과적으로 질문하라.
  • 블라인드 채용에 적극 도전해보며 객관적 평가 경험을 쌓자.

링크🔗

#이력서#React#프론트엔드#백엔드#취업#풀스택#TypeScript#AWS#Hooks#개발환경