2024-03-05

목차

1. React와 이벤트 버블링
2. 운동과 건강관리 대화
3. React, TypeScript 사용 경험담
4. 직장 내 상사 문제 및 커뮤니케이션
5. 면접 경험과 전략
6. Mac과 Windows 환경 적응기
7. React 자식 컴포넌트에 props 전달법
8. 토큰 저장 위치 및 보안 이슈
9. 프로젝트 및 포트폴리오 준비 팁
10. 기타 개발 관련 Q&A

1. React와 이벤트 버블링

• 이벤트 버블링이란 이벤트가 하위 요소에서 시작해 상위 요소로 전달되는 현상임.
• React에서는 이벤트를 캡처 단계와 버블 단계에서 처리할 수 있으나 기본은 버블 단계.
• 복잡한 UI에서 이벤트 중복 처리를 막기 위해 이벤트 캡처 혹은 stopPropagation 등을 활용.

2. 운동과 건강관리 대화

• 아침 운동을 꾸준히 하는 개발자들이 많음. 새벽, 아침 시간이 생산성에 좋다는 의견.
• ‘천국의 계단’ 같은 고강도 운동 경험 공유 및 하체 운동이 힘들다는 공감.
• 운동 기록 어플 ‘플랜핏’ 소개. 애플워치 연동 가능 여부 토론.
• 꾸준한 운동이 장기적으로 체력 향상과 건강에 긍정적 효과를 준다고 결론.

3. React, TypeScript 사용 경험담

• TypeScript(TS)를 사용하면 코드 작성 시 문법 체크, 자동완성(IntelliSense) 기능이 강력함.
• TS를 쓰는 것이 개발 생산성과 유지보수성에 좋다는 의견이 지배적.
• 혼자 프로젝트 시에도 TS 권장. JS만 쓰는 회사도 있지만 TS가 점차 대세.
• TS 학습 곡선 완만하고 도입 추천.

4. 직장 내 상사 문제 및 커뮤니케이션

• 일부 상사의 욕설, 폭언, 이간질 문제와 관련된 고민.
• 이런 상황에서는 대화를 시도하거나 개인 면담으로 문제를 공유하는 것이 첫 단계.
• 가스라이팅(일상적 심리 조작 및 기만)은 심각한 문제로, 지속 시 이직 고려 권장.
• ‘팀핏’(조직 문화와 개인간 궁합)을 면접 때 꼭 확인할 것.
• 팀 내 탓 문화는 문제 해결에 방해가 되므로, 문제 발생 시 빠르고 투명한 공유가 중요함.

5. 면접 경험과 전략

• 면접 질문은 CS 기본 지식부터 창의력, 상황 판단, 코딩 테스트까지 다양함.
• 특이 질문 예: “비행기에 탁구공 몇 개 들어갈까?”, “구슬 문제” 등.
• 좋은 면접 태도는 긴장 완화, 대화하듯 편안하게 임하는 것.
• 이력서 및 포트폴리오 작성 시 단순한 수량보다 ‘스스로 생각한 개선점과 결과’를 스토리로 전달하는 게 중요.
• 네이버, 토스 등 대형 회사 면접 준비는 CS 지식이 매우 중요.
• 면접관과 첫 대화 분위기가 중요하며, 진솔하게 소통하는 태도가 긍정적 영향.

6. Mac과 Windows 환경 적응기

• Windows에서 Mac으로 전환 시 적응 어려움이 있지만, 터미널 사용 및 WSL2(Windows Subsystem for Linux)가 큰 도움이 됨.
• Mac은 기본적으로 터미널이 많이 활용됨.
• GUI 기반 도구도 커버 가능하나, CLI(Command Line Interface) 사용에 익숙해질 필요가 있음.
• Mac의 M 시리즈 칩이 성능 좋다는 평가 존재.
• 각 OS 특성에 맞는 키보드 단축키 및 마우스 스크롤 방향 설정 추천.

7. React 자식 컴포넌트에 props 전달법

• React에서 <Component>{children}</Component> 형태로 자식 컴포넌트를 주입할 때
  • 자식에 props를 직접 넘기고 싶으면 React.cloneElement(child, props)를 사용.
• React.Children.map API를 활용해 여러 자식에게 반복 적용 가능.
• context API를 활용하여 전역 상태를 하위 컴포넌트들에게 넘길 수도 있음.
• props.children은 배열 또는 단일 요소일 수 있으므로 사용 시 타입 확인 중요.

8. 토큰 저장 위치 및 보안 이슈

• 로그인 토큰 저장 위치로 로컬스토리지와 쿠키(특히 HttpOnly 및 Secure 옵션) 중 선택 고민.
• HttpOnly 쿠키는 자바스크립트에서 접근 불가해 XSS 공격 피해 감소 효과.
• 로컬 스토리지는 사용자가 직접 접근 가능해 보안에 취약할 수 있으나 사용 용이.
• Refresh Token을 발급받아 갱신 주기를 관리하는 패턴이 표준화되어 있음.
• 프론트엔드는 토큰을 가지고 API 요청 시 서버로 보내, 서버에서 토큰 유효성 검사 수행.

9. 프로젝트 및 포트폴리오 준비 팁

• 완성도 높은 포트폴리오 1~2개가 좋은 여러 개 만든 것보다 낫다는 의견.
• 프로젝트에서 겪었던 문제점과 개선 과정, 결과를 상세히 기록해 스토리로 만드는 것이 중요함.
• TypeScript 경험이 서류 심사 시 경쟁력 상승 요인.
• 블로그 운영이나 기술 글 작성도 성장과 취업에 도움 됨.
• 새로운 기술(ex. React Server Components, Turbopack, Astro 등) 습득도 긍정 평가 요인.

10. 기타 개발 관련 Q&A

• React.Fragment: 불필요한 <div> 없이 여러 요소 그룹핑 가능, 렌더링 시 가상 요소로 처리되어 실제 DOM에 생성되지 않음.
• nvm 사용 중 버전 전환 문제는 nvm alias default <버전> 설정과 환경 변수 확인 권장.
• 큰 용량의 Git 저장소 클론 시 에러 나는 경우 zip 다운로드 또는 분할 클론 방법 고려.
• GUI Git 툴로는 Sourcetree, VSCode GitGraph 등이 많이 사용됨.
• 바이너리 데이터를 Blob이나 File 객체로 변환 시 new Blob([data], {type: 'mime/type'}) 사용 가능.
• React Native에서 웹뷰가 아닌 네이티브 컴포넌트를 사용하는 것이 더 효율적인 경우가 많음.
• Day.js에서의 DST(썸머타임) 처리 문제는 moment.js보다 지원이 적지만, 필요에 따라 라이브러리 조합 가능.

면접팁⚡

• 면접 질문에 답하기 전에 명확한 개념 정리 필수. 예를 들어, React 상태 관리법, 이벤트 버블링 등 기초 개념 숙지.
• 예상치 못한 창의적인 질문에 대비해 평소 다양한 사고 실습 권장.
• 회사 및 팀 문화(컬쳐핏)를 지원 전에 충분히 파악하고, 면접 시 질문할 것.
• 기술 스택의 깊이도 중요하지만, 커뮤니케이션 능력과 문제 해결 역량도 강조.
• 포트폴리오는 문제 해결 과정과 성과 중심으로 작성하면 더욱 인상적.

링크🔗

• Astro: https://astro.build/
• React Children API: https://react.dev/reference/react/Children#children-map
• DeepL Chrome Extension: https://chrome.google.com/webstore/detail/deepl-%EB%B2%88%EC%97%AD/cofdbpoegempjloogbagkncekinflcnj
• React Fragment 이해: https://velog.io/@lilyoh/React-Fragments-%EC%82%AC%EC%9A%A9%EC%9D%B4%EC%9C%A0-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95
• React Toastify 문제 해결 (Stack Overflow): https://stackoverflow.com/questions/74401312/javascript-convert-binary-string-to-blob
• Toss Next Developer Challenge: https://toss.im/career/next-developer-2023
• Apple M3 MacBook Air 발표: https://www.apple.com/kr/newsroom/2024/03/apple-unveils-the-new-13-and-15-inch-macbook-air-with-the-powerful-m3-chip/