react 썸네일react

2024-02-18

목차

  1. 수습 기간과 개발 시장 현황
  2. TypeScript 배열 표기법 비교
  3. rem, em, px 단위의 차이와 활용법
  4. 신입 개발자 취업 준비와 면접 전략
  5. 프로덕션 개발 시 개발 도구와 라이브러리 사용법
  6. 키보드, 마우스 관련 추천 및 경험 공유
  7. React 컴포넌트 관리 및 타입스크립트 활용 팁
  8. 깃 브랜치, 머지 충돌 경험과 팁
  9. 개발자의 학습 및 구글링 방법
  10. 수습 짤림 사례와 이유

1. 수습 기간과 개발 시장 현황

  • 최근 수습 기간 중 계약 해지가 종종 발생함.
  • 회사 입장에선 인력 채용 비용이 크기 때문에 하드 스킬이나 팀 핏에 현저히 미달하지 않는 이상 대부분 수습은 통과시키는 편임.
  • 다만 급격한 회사 사정 변화, 구조조정 등으로 수습자를 내보내는 경우도 있음.
  • 코로나 이후 개발 시장이 변동성이 커진 상태.
  • 수습 짤린 경험이나 사례가 종종 공유되어 긴장감 조성.

핵심 용어

  • 수습기간: 신입 개발자가 정규직 전 임시로 평가받는 기간. 이 기간에 업무 능력과 적응도를 평가받음.
  • 하드 스킬: 개발 능력, 프로그래밍 기술 등 직무와 직접 관련된 능력.
  • 소프트 스킬: 커뮤니케이션, 협업 능력 등 직무 외 인간관계 능력.

2. TypeScript 배열 표기법 비교

  • Item[]와 Array<Item> 두 가지 배열 선언 방식이 있음.
  • Item[]가 간결하고 자주 사용됨.
  • Array<Item>는 제네릭 타입 문법으로, 여러 타입 조합이나 복잡한 경우에 유리함. 예컨대 (string | number)[]와 같은 복잡한 타입에서 소괄호 문제를 피할 수 있음.
  • TypeScript 배열 타입표현은 가독성과 오류를 줄이는 전략에 따라 상황별로 다르게 선택.

추가 설명

  • TypeScript 제네릭(Generic)은 클래스나 함수, 인터페이스 등을 타입에 구애받지 않고 사용할 수 있게 해주는 기능으로, 배열 선언에도 적용 가능함.
  • 가독성, 유지보수성 측면에서 적절한 표기법 선택이 중요.

3. rem, em, px 단위의 차이와 활용법

  • px (픽셀): 고정 크기 단위, 변경 불가능. 해상도, 브라우저 설정에 무관하게 일정한 크기를 유지함.
  • em: 상위 요소의 폰트 크기에 상대적인 단위. 부모 요소 크기에 따라 변함.
  • rem: 루트(html) 요소의 폰트 크기에 상대적인 단위로, em과 비슷하지만 기준이 최상위 요소임.
  • 보통 브라우저 기본 폰트 크기 16px이 설정되어 있으며, 이를 62.5%로 줄여 10px 기준(1rem=10px)으로 잡는 경우가 많음. 이 방식을 쓰면 rem 계산이 더 쉬워짐.
  • rem 단위는 사용자 브라우저 설정에 따라 폰트 크기 조정이 반영되므로 접근성과 사용자 맞춤 경험 제공에 유리함.
  • padding, margin에도 rem을 쓰는 추세이며 Tailwind CSS같은 모던 CSS 프레임워크는 기본 단위로 rem을 자주 활용함.
  • 하지만 특정 UI 요소에는 px 단위가 더 안정적일 때가 있음.

4. 신입 개발자 취업 준비와 면접 전략

  • 블로그 작성, 포트폴리오 프로젝트 제작이 매우 중요함.
  • React, Next.js, TypeScript 등을 활용한 프로젝트 1~2개가 기본으로 추천됨.
  • 단순 공부보다 실제로 '만들어보는 것'이 합격률을 올림.
  • 면접에서는 단순 암기보다는 공식 문서를 즐겨 보고, 문제 해결 방법을 스스로 탐색하는 태도를 높이 평가함.
  • 초보라도 끈기와 인내, 열정을 보여주면 좋은 평가를 받음.
  • TypeScript는 필수 트렌드지만 전부 익히지 않아도 성장 의지가 중요.
  • 수습 기간 내 역량 발휘가 중요하지만, 회사마다 온보딩 기간과 기대치가 다를 수 있음.

5. 프로덕션 개발 시 개발 도구와 라이브러리 사용법

  • Tailwind CSS 기본 단위가 rem이며, padding/margin도 rem으로 주는 추세임.
  • React Query, Zustand 같은 상태관리, 데이터 페칭 라이브러리는 현대 프론트엔드 필수 도구로 자리잡음.
  • 퍼블리셔와 개발자의 역할 경계가 점점 허물어지고 있음.
  • UI 개발과 데이터 연동을 프론트엔드가 함께 처리하는 회사가 많음.
  • Git 브랜치 관리와 머지 충돌 경험은 필수적인 실전 경험임.

6. 키보드, 마우스 추천 및 경험 공유

  • 로지텍 MX Keys, MX Master 3S 제품이 개발자들에게 인기.
  • 로지볼트(USB 무선 수신기)를 활용하면 키보드와 마우스 여러 개를 하나의 수신기로 사용할 수 있음.
  • 내구도와 AS 기간 이슈가 있으니 구매 전에 참고할 것.
  • 개발 환경에서 장비 편의성은 생산성에 큰 영향을 끼침.
  • 손 크기, 소음 등 개인 취향과 작업 환경에 따라 선택이 다름.
  • Keychron 키보드도 추천됨.

7. React 컴포넌트 관리 및 TypeScript 활용 팁

  • 타입별 컴포넌트를 map 객체로 관리하는 방식은 안티패턴이 아니며 실제로 많이 쓰임.
  • Record<키 타입, 값 타입> 등 TypeScript 유틸리티 타입을 잘 사용하면 관리가 편리해짐.
  • 제네릭, 타입 유니온 등을 활용해 컴포넌트 매핑 로직을 깔끔하게 짤 수 있음.
  • Record는 객체 키와 값의 타입을 지정할 때 탁월한 도구로, 초보자는 꼭 익혀두는 게 좋음.

8. 깃 브랜치, 머지 충돌 경험과 팁

  • 깃(branch) 사용하는 초보자라면 충돌 상황을 맞닥뜨리기도 함.
  • 머지 충돌은 협업 필수 경험이니 두려워하지 말고 충돌 해결법을 반복 학습 권장.
  • 충돌 후 직접 코드를 비교, 수정하는 과정에서 깊은 이해가 생김.
  • 충돌 예방법으로는 자주 Pull, 작은 단위 커밋 추천.

9. 개발자의 학습 및 구글링 방법

  • 구글링 시 Stack Overflow, 공식 문서, Velog, 개인 블로그, 유튜브 등 다양한 채널 활용.
  • ChatGPT를 1차 도구로 사용 후, 좀 더 전문적인 내용은 구글과 공식 사이트에서 확인하는 패턴이 보임.
  • 영어 키워드로 검색하면 더 풍부한 자료를 얻음.
  • 공식 문서 보는 습관이 좋아야 실력을 빠르게 늘리고 면접 질문에도 잘 대응 가능.
  • 독학하면서 동료 개발자, 사수와의 소통도 중요하다고 강조됨.

10. 수습 짤림 사례와 이유

  • 수습 중 계약 해지 사례도 실제로 많음.
  • 역량 부족 또는 회사 내부 사정, 구조조정 등이 원인.
  • 갑작스러운 인원 감축 시, 수습 직원이 우선 대상이 될 때가 많음.
  • 수습 해지를 두려워하지 말고, 실력과 소프트 스킬을 계속 키우는 것이 중요.

면접팁⚡

  • 공식 문서를 즐겨보고 문제를 스스로 해결하는 태도를 보여라!
  • 단순히 지식 암기보다 ‘어떻게 공부하는지’를 중요하게 본다.
  • 블로그, 포폴, 사이드 프로젝트로 성장 의지를 증명하라.
  • 질문에 틀리더라도 논리적으로 이유를 설명하거나 추론해보려는 자세가 긍정적.
  • 실무에서 쓰는 라이브러리 경험(React Query, Zustand 등) 있으면 가산점.
  • TypeScript 기본 타입과 제네릭을 익혀두면 개발 효율이 올라가고 면접 질문 대응도 쉬워짐.

링크🔗

#개발자일상#TypeScript#CSS단위#신입개발자#면접팁#개발도구#React##커뮤니티#코딩팁