COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-28

목차

  1. 알고리즘 & 코딩 테스트 경험과 팁
  2. 자바스크립트(JS) 및 타입스크립트(TS)의 특징과 학습법
  3. 리액트(React) 및 리액트 훅, Next.js 관련 질문과 조언
  4. 백준, 프로그래머스 등 코딩 테스트 대비 플랫폼 비교
  5. 개발자 취업 준비와 면접 대응 전략
  6. 개발 환경과 장비 이야기 (M1, M3 Mac, 키보드 등)
  7. 프로젝트 협업 및 인수인계 문화 현실
  8. 라이브러리 및 상태관리 도구 복수 사용 이슈
  9. 이미지 최적화 및 SVG 사용법 (Next.js 관점)
  10. 커뮤니티 문화, 친목과 갈등 이슈

1. 알고리즘 & 코딩 테스트 경험과 팁

  • 백준, 프로그래머스 등에서 문제를 풀면서 자연스럽게 공부하는 경우가 많음.
  • 대형 문제 풀이 시에는 답지를 보는 경우도 있으나 핵심 수학식이나 논리 이해가 중요.
  • 오프라인 쿼리: 문제에서 모든 질문을 한꺼번에 받고 한 번에 답을 처리하는 방식. 효율적으로 처리 위해 쿼리를 정렬 후 투포인터 등으로 풀이.
  • DFS/BFS, 백트래킹(N-Queen) 같은 알고리즘 기초는 필수, 차근차근 차근히 접근 권장.
  • 코딩 테스트 공부는 꾸준함이 가장 중요하며, 결국 주변에서 포기하는 사람들이 많은 상황에서 꾸준히 하면 상대적 경쟁력 상승 가능.
  • 문제 풀이 후에는 코드를 가공 및 복습하여 효율성을 높이고 선형탐색 대신 Set 자료구조 활용 같은 기본 최적화 팁도 중요.

2. 자바스크립트(JS) 및 타입스크립트(TS)의 특징과 학습법

  • JS는 프로토타입 상속, 호이스팅, this 바인딩, apply/call 등 독특한 호출 패턴과 개념이 많아 헷갈릴 수 있음.
  • 약타입 언어 특징: 타입 안정성이 낮아서 큰 프로젝트에서 문제가 생길 수 있으나 TS로 보완 가능.
  • TS는 JS보다 강타입이며 타입과 인터페이스, 제네릭 등의 개념을 배우면 코드 안정성이 증가.
  • TS의 복잡한 기능(예: infer 등)은 단계별 공부를 권장하며, 기본적인 타입 선언과 제네릭부터 차근차근 시작.
  • TS를 배우면 컴파일러 기반 언어 학습장벽이 낮아지는 경우가 많음.
  • "애니(any)" 타입는 남용 용도를 피해야 하며, TS 공부 초반에는 기본 타입, 함수 타입, 인터페이스부터 이해하는 것이 좋음.

3. 리액트(React) 및 리액트 훅, Next.js 관련 질문과 조언

  • 리액트 훅(Hooks)은 함수형 컴포넌트에서 사이드 이펙트 관리, 상태 관리에 편리함을 제공하는 귀중한 기능.
  • Vue에는 컴포저블(Composition API)이 비슷한 역할을 하고, Svelte는 state 변화 관리를 할당 연산자로 간단히 함.
  • Next.js의 <Image> 컴포넌트는 이미지 최적화(지연 로딩, 크기 조정 등)를 자동 지원하지만, SVG는 벡터라 최적화 필요성이 낮아 별도로 최적화를 제공하지 않음.
  • SVG는 <Image> 컴포넌트 대신 직접 인라인 사용하거나 웹팩 설정(@svgr/webpack)을 활용하는 게 효율적.
  • Next.js에서 이미지 크기 조절은 px 단위만 지원하며, rem 단위를 넣으려면 fill 레이아웃 등으로 처리하나 공식 문서는 px 사용 권장.

4. 백준, 프로그래머스 등 코딩 테스트 대비 플랫폼 비교

  • 백준: 문제 수가 압도적으로 많아 양치기용으로 적합, 하지만 관리 및 IDE 환경은 다소 불편.
  • 프로그래머스: 문제 수는 적지만 실전 코테 대비에 좋고, 편리한 온라인 IDE 제공.
  • 영어로 출제된 코테도 늘고 있어, 영어 문제 대비를 병행하는 게 실전에서 유리함.
  • 카카오, 넥슨 등 대기업 계열사 코테는 영어 출제 비중이 높은 편.

5. 개발자 취업 준비와 면접 대응 전략

  • 신입 개발자는 완벽한 실력보다 기본 언어 숙련도, 자료구조/알고리즘 기초, DB 기초 이해, 그리고 적극적인 학습 태도가 더 중요.
  • 면접 시 회사 상황이 안 좋거나 퇴사 사유 질문경우는 최대한 긍정적이고 개선 의지를 보여주는 방향으로 답변할 것.
  • 과제형 면접은 비교적 난이도가 낮을 수 있으나, 라이브 코딩과 기술 질문은 난이도가 높음.
  • 긴장하지 말고 솔직하게 모르는 부분은 모른다고 답변하면서 배우려는 자세를 보이는 것이 좋음.
  • 면접에서 “함께 일할 만하다”는 인상을 주는 것이 가장 중요하다는 의견이 많음.

6. 개발 환경과 장비 이야기 (M1, M3 Mac, 키보드 등)

  • Mac M1 Pro 이상 급 장비는 프론트엔드 개발자에게 충분하며, 램 64GB 정도면 대부분 작업에 적합.
  • M3 칩, M2와 비교 시 크게 달라지지 않으며, 램과 저장공간 선택이 성능과 직결.
  • 키보드 추천 및 포지션 잡기 질문도 존재하며, 개인 취향과 손목 건강 고려가 필요.

7. 프로젝트 협업 및 인수인계 문화 현실

  • 스타트업이나 소규모 팀에서는 공식 문서화나 인수인계가 제대로 이루어지지 않는 경우가 많아 코드 자체가 인수인계가 되는 경우도 있음.
  • 팀 내 커뮤니케이션과 코드 리뷰가 중요하며, 비효율적인 인수인계 문화가 퇴사 이유가 되기도 함.

8. 라이브러리 및 상태관리 도구 복수 사용 이슈

  • 리덕스(Redux), 리코일(Recoil), Jotai 등 상태관리 라이브러리를 여러 개 혼용하는 곳도 존재하지만, 보통 이중으로 쓰는 것은 권장되지 않음.
  • 각각의 목적과 특성에 따라 도구 선택과 집중이 필요하며, 혼용 시 팀 내 컨벤션과 협의를 필수로 해야 함.

9. 이미지 최적화 및 SVG 사용법 (Next.js 관점)

  • 이미지 최적화란 서버가 사용자 디바이스 해상도에 맞게 비트맵 이미지를 리사이징해 전송하는 것을 의미.
  • SVG는 벡터이므로 해상도에 무관하며, 서버가 별도 리사이징 하지 않아도 품질 손실 없음.
  • Next.js <Image> 컴포넌트는 BMP에 최적화되며 SVG는 최적화를 제공하지 않기에 별도 처리 권장.
  • rem 단위 크기 지정은 지원하지 않고 px만 공식 지원하며, fill같은 방식으로 대응 가능.
  • 웹팩의 svgr-loader를 이용하는 방법으로 SVG를 React 컴포넌트 형태로 활용하는 방법이 있음.

10. 커뮤니티 문화, 친목과 갈등 이슈

  • 친목이 심해지면 톡방 내 갈등과 카르텔 형성이 발생해 건강하지 않은 분위기가 조성될 수 있음.
  • 타 개발자 커뮤니티 일부는 군대식 위계질서나 서열 문화가 있어서 불편함.
  • 이 방은 비교적 수평적이고 건설적인 정보를 주고받는 분위기임.
  • 필요에 따라 차단 기능을 이용해 관계를 관리하며, 의견 충돌 시 존중하는 태도가 권장됨.

면접팁⚡

  • 면접에서 회사가 어려운 상황임을 솔직히 말하되, "개선하려고 노력했지만 변화가 없어 이직 결심" 정도로 우회하는 전략이 효과적.
  • 기술 질문 모를 땐 모른다고 인정하고 배우려고 한다는 태도를 보여주는 것이 긍정적 인상.
  • 기본 CS 지식(쓰레드, 뮤텍스 등)과 주력 언어 표준 라이브러리에 익숙한 정도면 신입 면접에 충분.
  • 자기주도 학습 태도와 끈기가 대단히 중요하며, 꾸준한 문제 풀이가 실력을 키움.
  • 면접 전 간단한 기술 숙어(예: DB 키 종류, JS this, TS 기본 타입 등) 숙지 권장.

링크🔗

#코딩테스트#리액트#자바스크립트#타입스크립트#Nextjs#면접팁#개발환경#이미지최적화#상태관리#커뮤니티
이전 포스트

2023-11-27

2023년 11월 27일
다음 포스트

2023-11-29

2023년 11월 29일