목차
- 자유로운 회사 및 프론트엔드 직군 비교 이야기
- 상위 10% 생산성과 파레토 법칙
- UI 라이브러리 커스텀과 재생산
- React 컴포넌트 분리 및 역할 구분 (Smart vs Dumb Components)
- 유튜브의 공식 폰트와 웹 폰트 이야기
- 리액트 컨텍스트 API 및 상태관리 툴 사용현황
- 테이블 드래그앤드랍 구현 관련 팁
- Chakra UI의 Portal 동작 방식
- 윈도우 환경에서의 React 개발과 크로스 플랫폼 이슈
- 기타 소소한 이야기 및 분위기
1. 자유로운 회사 및 프론트엔드 직군 비교 이야기
- 토스, 당근 마켓 등 유명 회사들의 FE 수준은 높은 편이라 평가됨.
- 회사 간 업무 스타일 차이 크고, 본인 성향 및 흥미에 맞는 곳 선택하는 게 중요.
- "끌리는 곳에서 일하는 게 가장 좋다"는 의견 다수.
2. 상위 10% 생산성과 파레토 법칙
- 상위 10% 그룹은 열정적이고 꾸준함이 특징.
- 파레토 법칙(80:20 법칙)은 상위 20%가 80%의 결과를 낸다는 경험적 법칙이다.
- 꾸준한 노력(매일 걷기 등)이 상위권에 쉽게 들 수 있는 요인임을 강조.
- 일반적으로 전체 중 10~20%만 진짜 열심히 하는 모습이 관찰됨.
- 파레토 법칙 나무위키 링크 참고.
3. UI 라이브러리 커스텀과 재생산
- UI 라이브러리는 디자인 요구사항에 따라 다르게 사용됨.
- 보통 색상 정도만 바꾸는 경우도 있지만, 요구사항이 심할 땐 직접 재생산하는 편이 낫다.
- 예: MUI 같은 라이브러리는 커스텀 여지가 많음.
- 너무 과도한 커스텀은 유지보수 어려움으로 연결될 수 있음.
4. React 컴포넌트 분리 및 역할 구분 (Smart vs Dumb Components)
- 컴포넌트 분리 방식인 Smart(Dumb) 컴포넌트 개념이 소개됨.
- Smart Component는 상태관리, 로직 담고, Dumb Component는 UI와 표시만하는 역할을 수행.
- 이 구조는 유지보수와 협업에 좋음.
- 관련 자료 링크:
5. 유튜브의 공식 폰트와 웹 폰트 이야기
- 유튜브에서 공식적으로 사용하는 ‘YouTube Sans’ 폰트에 대한 토론이 있었음.
- 웹 폰트 변환과 유튜브 UI 개선에 따른 변화.
- '산스'를 ‘샌즈’라고 부르는 실수 해프닝.
6. 리액트 컨텍스트 API 및 상태관리 툴 사용현황
- 여러 프로젝트에서 컨텍스트 API나 리덕스 같은 상태관리 라이브러리를 사용하는 모습.
- 상태 관리 복잡도에 따라 적절한 도구 선택 필요.
- 컨텍스트 API는 컴포넌트 간 전역 상태 공유 편리하지만, 대규모 앱에선 퍼포먼스 이슈 주의해야 함.
7. 테이블 드래그앤드랍 구현 관련 팁
- 이미 만들어진 테이블 컨테이너에 드래그앤드랍으로 행 순서 변경 구현 문의.
- 답변: 라이브러리 활용 권장(예: React Beautiful DnD).
- 직접 구현 시, 테이블 CSS와 드래그 이벤트를 동시에 잘 다뤄야 하므로 난이도 있음.
- 질문 시 구체적으로 목적과 상황을 명확하게 하는 게 답변 얻기에 도움됨.
8. Chakra UI의 Portal 동작 방식
- Chakra UI에서 createPortal을 사용해도 내부적으로 chakra-portal이라는 div가 자동 생성됨.
- Portal은 React에서 DOM 트리 밖으로 컴포넌트를 렌더링하는 기술.
- Chakra UI는 포털 컨테이너를 따로 관리하는 방식을 내장하고 있어 이런 동작이 정상적임.
- appendToParentPortal 옵션이 없으면 기본적으로 body에 추가됨.
9. 윈도우 환경에서의 React 개발과 크로스 플랫폼 이슈
- 윈도우에서 React 개발하는 점에 대한 질문 등장.
- 실무에선 맥과 리눅스가 주 사용 OS이나, 윈도우 환경도 문제없음.
- 단, 외부 모듈 호환성 문제나 스크립트 경로 이슈는 주의해야 함.
- Safari 브라우저 테스트 등이 윈도우에선 어렵다는 점은 상대적 불편 사항.
- Electron 개발 등에서는 윈도우 사용이 필수적임.
10. 기타 소소한 이야기 및 분위기
- 면접 준비, 공부 의지, 할로윈 분위기 등 친근한 대화 다수.
- 개발자 커뮤니티의 자유로운 질문과 답변 분위기 확인 가능.
면접팁⚡
- 질문은 주어, 목적어를 명확히 해서 구체적으로 하는 것이 중요함.
- Smart/Dumb 컴포넌트 구분 원리와 장점은 React 면접에서 자주 등장하는 주제임.
- 파레토 법칙을 자신의 노력과 시간 관리에 접목시켜 설명할 수 있다면 좋은 인상.
링크🔗
#프론트엔드#React#UI커스텀#상태관리#ChakraUI#파레토법칙#개발환경#웹폰트#테이블드래그앤드랍#면접준비