2023-11-24

목차

1. 사이트 디자인 및 코딩 이야기
2. 코딩 테스트 및 문제풀이 경험
3. JavaScript/TypeScript 개발 이야기와 패키지 관리 이슈
4. 브라우저 호환성 및 프론트엔드 개발 환경
5. 리액트 네이티브 iOS 배포 및 자산 이미지 문제
6. 면접질문 및 기술 면접 준비 전략
7. 국비 교육과 독학에 대한 의견
8. 프론트엔드 라이브러리와 차트, 지도 구현 경험
9. 개발자 일상과 스트레스, 퇴사 이야기
10. 이벤트 핸들러 타입스크립트 타입 지정 논의

1. 사이트 디자인 및 코딩 이야기

• 괜찮은 사이트를 추천하면 사이트 디자인을 코딩으로 만들어 주는 재미있는 제안이 있었음.
• 직접 만든다고 하니 긍정적인 반응이 나왔으며, 프론트엔드 관련 이야기로 자연스럽게 넘어감.

2. 코딩 테스트 및 문제풀이 경험

• 프로그래머스 문제 링크 공유하며 문제 풀이 도중 예외 케이스(테스트 케이스)에서 어려움을 겪었음.
• 완전탐색(Brute force) 방법으로 접근 중이며 이동 위치를 고려해 풀이 중임.
• 코딩 테스트 준비는 평소 꾸준한 문제풀이가 필수.
• 총 문제 316개까지 남은 상태를 공유하며 목표에 대한 의욕 표출.

판단TIP: 완전탐색(Brute Force)는 가능한 모든 경우의 수를 다 탐색하여 문제를 해결하는 단순하지만 명확한 방법. 그러나 시간복잡도가 크고 효율성이 떨어질 수 있어 최적화 필요.

3. JavaScript/TypeScript 개발 이야기와 패키지 관리 이슈

• 타입스크립트와 개발 중 겪는 타입 문제 사례 공유.
• npm과 pnpm 패키지 매니저로 동일 @radix-ui/react-icons 설치시 타입 에러가 발생하는 차이 이야기.
• 원인 중 하나로는 legacy node_modules hoisting 정책 차이, 캐시 문제, lock 파일 차이 등이 거론됨.
• pnpm은 모듈 별로 의존성을 격리 관리하기 때문에 상황에 따라 타입 충돌 문제 감소 가능.
• package-lock.json과 pnpm-lock.yaml 파일 관리도 패키지 버전 일관성을 위해 중요.
• lock 파일은 버전 고정을 위해 꼭 필요하나 상황에 따라 재생성도 가능하지만 신중해야함.

4. 브라우저 호환성 및 프론트엔드 개발 환경

• 맥(macOS)과 윈도우 환경에서 프로젝트 UI 차이 발생 사례 토론 (특히 사파리).
• 프론트엔드 호환성 문제는 종종 브라우저 별 CSS, JS 해석 차이로 UI가 깨지는 현상이 발생.
• 백엔드는 컨테이너 기술(Docker 등)을 활용해 환경을 통일하는 추세.
• 크롬 브라우저에서도 버전별 디테일한 문제 발생 가능하며, 단일 브라우저 고정과 업데이트 정책에 한계 존재.
• IE 같은 구버전 브라우저는 서비스 지원에서 점점 제외되고 있음.

5. 리액트 네이티브 iOS 배포 및 자산 이미지 문제

• iOS 배포 후 앱 내 assets 폴더에 있는 이미지가 정상적으로 표시되지 않는 이슈 발생.
• 시뮬레이터에서는 정상 작동하지만 실제 배포 후 미출시 문제라 경로 문제 가능성 낮음.
• iOS 앱은 각각 아이콘 및 스플래시 이미지에 대해 다양한 크기별 자산이 필요하며, 프로젝트별 빌드 설정 문제도 고려해야 함.
• Flutter 경험 공유: 앱 아이콘, 스플래시 이미지 별도로 관리하며 앱 내부 이미지는 프로젝트 내부에서 참조하도록 함.

6. 면접질문 및 기술 면접 준비 전략

• 신입과 경력을 막론하고 기술 면접에서 자주 나오는 질문 소개
  • 함수 선언식과 함수 표현식 차이
  • 불변성(immutability) 개념
  • 웹 브라우저에서 URL을 입력할 때 화면 렌더링 과정
  • 실행 컨텍스트(Execution Context) 개념
  • 이벤트 캡처링(Event Capturing)
• 실무 경험 바탕 질문은 대부분 본인이 직접 해본 내용 위주가 많으며, 너무 어려운 질문보단 이해도 확인 위주라 조언.
• 면접 준비 팁으로는
  • 모르는 부분에는 솔직하게 인정하고, 공부하고 있음을 어필할 것
  • 미리 예상 질문 리스트를 만들어보고 답변을 연습하는 것도 효과적
  • 면접 중 막히는 부분은 메모 후 나중에 보완하고, 검색 학습 병행.

7. 국비 교육과 독학에 대한 의견

• 국비 지원 교육과 부트캠프 등 유료 교육 이수자들의 경험 공유
• 장점: 환경 제공, 멘토링 가능, 집단 공부 분위기
• 단점: 배울 내용이 실무와 크게 다를 수 있어 효율적이지 않은 경우도 있음
• 독학 우선 추천 의견 많으며, 실무에서 바로 쓰는 스킬 위주로 학습할 것을 권장
• 취업을 위한 기본 지식과 기술만 빠르게 학습하고, 필요시 국비 및 교육 활용하는 게 효율적.
• 유데미 등 온라인 강의 사이트 활용 사례도 많이 나옴.

8. 프론트엔드 라이브러리와 차트, 지도 구현 경험

• 지도(OpenLayers)와 차트 라이브러리(amChart, reChart, eChart 등) 사용 경험 공유
• 차트의 경우 SVG 태그를 활용해 커스터마이징 함으로써 시각적 디테일 조정 가능
• 지도 구현은 오픈 소스인 OpenStreetMap(OSM)을 활용하기도 하며, 실무에서 적용 경험 토론
• 일부 라이브러리와 실제 스펙 간 괴리 문제 발생 가능성 있음.

9. 개발자 일상과 스트레스, 퇴사 이야기

• 퇴사 직전 과중 업무, 디자인 팀과의 갈등, 리드 부사수와 마찰 등 현실적 이야기 공유
• 시니어 개발자 부재로 주니어가 모든 프론트엔드 업무를 도맡아야 하는 상황 비판
• 대표와의 소통 문제, 경영진 무리한 요구 등 스트레스 요인 언급
• 업무 환경 개선과 적절한 인력 충원 필요성 강조됨.

10. 이벤트 핸들러 타입스크립트 타입 지정 논의

• onChange, onClick 등 이벤트 핸들러에 TypeScript를 활용한 타입 지정 방식 토론
• 보통 ChangeEvent<T>와 같이 이벤트 객체의 타입을 명확히 지정해 줌으로써 코드 안정성을 높임
• 자동 추론은 제한적이며, 특히 콜백 함수 파라미터 타입은 명시하는 게 좋음
• 타입 지정이 없으면 타입 오류(빨간 줄)가 뜨며, 타입 안전성과 코드 가독성을 위해 권장됨
• 제네릭(Generic) 타입과 JSDoc을 활용한 타입 지정 방법도 잠깐 언급됨.

면접팁⚡

• 면접 질문은 기본적이고 익숙한 내용 중심으로 준비하되, 이해와 응용 능력을 강화할 것
• "브라우저에 URL 입력시 화면 렌더링 과정" 같은 실무 지식 질문은 HTML 파싱, DOM 생성, CSSOM 생성, 렌더 트리 구축, 레이아웃, 페인트 순서를 이해하고 설명하면 좋음
• 함수 선언식 vs 함수 표현식, 이벤트 캡처링, 실행 컨텍스트 등은 대표적인 프론트엔드 주요 개념으로 꼭 정리할 것
• 모르는 질문에 당황하지 말고 솔직하게 답변하며, 부족한 부분은 면접 후 보완하려는 태도 어필
• 실제 본인이 해본 기술과 경험을 구체적으로 이야기하는 게 가장 효과적.

링크🔗

• 프로그래머스 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/181908
• MDN String.prototype.endsWith 참고문서: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith
• GitHub 프로필(참조): https://github.com/terrorboy
• Fastcampus 마이크로 프론트엔드 강좌: https://fastcampus.co.kr/dev_online_mfa
• 유데미(Udemy) 할인 행사: https://www.udemy.com
• OpenLayers 지도 라이브러리: https://openlayers.org
• reChart 차트 라이브러리: https://recharts.org/en-US
• 관련 면접 질문 참고 자료: [면접 질문 관련 핵심 개념은 본문 참조]