2024-01-25

목차

1. 개발자 채용 및 협업 문화 이야기
2. React 개발 시 API 데이터 관리 방법
3. 자바스크립트(ES6+) 문법과 React 관련 팁
4. 개발자 연봉 및 직무 이야기
5. 프론트엔드 라이브러리 및 스타일링 이슈 (Vanilla Extract 등)
6. React Hook Form과 커스텀 인풋 컴포넌트 이슈
7. 웹폰트 사용 방식과 CSS 선택자 컨벤션
8. 백엔드 API 리팩토링 및 협업 팁
9. 개발자 공부 및 입문 관련 질문과 조언
10. 기타: 개발 환경, 퇴근 문화, 스트레스 이야기

1. 개발자 채용 및 협업 문화 이야기

• 예비창업패키지 산출물 관련 협업 인력 모집 논의(React Native, C/Python)
• 재택 가능, 지역 무관 채용 진행 중, 부산 포함
• 외주 개발 시 가이드 문서, 명확한 API 명세서, 요구사항 중요성 강조
• 협업 중 프론트-백엔드 간 의사소통 문제 사례 공유 (400 에러 처리, API 응답 데이터 누락 등)
• 외주 개발자 실력 편차와 경력에 대한 신뢰 문제 언급
• 채용 공고 시 방장 및 운영진의 승인 필요 (공식 구인 플랫폼 링크 포함 권장)
• 외주 또는 프리랜서 개발자 구할 때 지인 추천과 커뮤니티 활용 조언

2. React 개발 시 API 데이터 관리 방법

• API 호출 위치 논쟁:
  • 각 컴포넌트에서 직접 API 호출하는 방법
  • 페이지 상위 컴포넌트가 한 번 호출 후 props로 하위 컴포넌트에 데이터 전달하기
• 재사용성 확보 측면에서는 후자가 일반적이고 권장됨
• 협업 상황에서는 후자가 더 선호되며, 개인 작업 시 전자가 간편할 수 있음
• API 호출이 여러 번 중복되는 문제는 효율성 및 서버 부하 관점에서 고민 필요
• 상위 컴포넌트에서 상태를 관리하면 상태 저장소(state store) 증가를 막을 수 있음 (예: Recoil 스토어 등 과도한 상태 분산 방지)
• 큰 규모 서비스는 스토어 관리가 중요하나 소규모는 유연한 접근이 효율적임
• 참고 영상: 토스 진유림님의 React 상태 관리 발표 (https://www.youtube.com/watch?v=NwLWX2RNVcw)
• 초보자를 위한 설명:
  React 컴포넌트가 여러 개일 때 각각 API를 호출하면 데이터 요청이 중복 될 수 있다. 그래서 보통은 페이지 단위에서 한 번만 요청하고, 그 결과를 하위 컴포넌트에 전달하여 재사용성도 높이고 관리도 용이하게 한다.

3. 자바스크립트(ES6+) 문법과 React 관련 팁

• Array.prototype.forEach 메서드 내 화살표 함수의 파라미터(fixed, index, origin)는 호출 시 배열 요소, 인덱스, 원본배열을 각각 전달하는 것임
• Java의 람다식과 유사한 개념으로 콜백 함수에 인자를 넘겨 호출하는 방식
• 템플릿 리터럴(css) 문법은 문자열 내 변수 처리와 멀티라인 문자열 작성에 매우 유용
• JSX에서 style 속성의 fontFamily는 **CSS 표준 문자열("sans-serif")**를 써야 하며 대소문자 구분 주의
• 예: element.style.fontFamily = "sans-serif" (맞음) / "sanSerif"(틀림)
• React Hook Form 등 라이브러리 사용 시 커스텀 Input 컴포넌트에 register 넘기기 이슈는 uncontrolled 컴포넌트와 ref 전달 방식을 이해해야 함

4. 개발자 연봉 및 직무 이야기

• AI 개발자 연봉이 가장 높고 프론트엔드 개발자 연봉은 중간 수준
• 지방 스타트업 풀스택 개발자 연봉 범위 매우 다양 (2천만원부터 2억까지 농담 섞임)
• 경력·이력서·면접 중요성 강조, 단순 경력만으로는 실력 판단 어렵다는 토론
• 연봉 협상 시 보통 15~20%, 30% 이상 인상은 탁월한 케이스
• 연봉 데이터 출처: Stack Overflow 2023 Survey (https://survey.stackoverflow.co/2023/#section-salary-salary-by-developer-type)
• 면접 준비에서 태도와 노력도 큰 점수 요인
• 소득세 감면 정책과 스타트업에서의 현실적 연봉 체계 이야기

5. 프론트엔드 라이브러리 및 스타일링 이슈 (Vanilla Extract 등)

• Vanilla Extract 스타일링에서 theme 변수 적용 시 import 문제로 스타일 미적용 사례 공유
• createTheme와 createGlobalTheme 함수 사용법 차이 및 전역/지역 테마 선언 방식 소개
• CSS 클래스명에 & 같은 특수문자 포함 불가, 웹 표준과 컨벤션 준수 필요
• 대안: data-* 속성 활용, JS에서 함수로 클래스명 매핑 처리
• 재사용성 높은 BEM 방식 등 유지보수 친화적 네이밍 추천
• CSS 선택자 관련 공식 문서: https://developer.mozilla.org/ko/docs/Web/CSS/Class_selectors
• CSS specificity를 높이려는 &&& 사용법 설명
• CSS Module, Emotion, Styled Components 등과 비교해볼 만한 유행 방식

6. React Hook Form과 커스텀 인풋 컴포넌트 이슈

• React Hook Form register를 하위 컴포넌트에 props로 전달 시 값이 등록되지 않는 문제
• 원인: React Hook Form은 기본 input요소와 ref를 통해 동작하며, 커스텀 인풋 컴포넌트 구현 시 ref 전달이 중요함
• 해결 팁: 하위 컴포넌트가 forwardRef를 사용하거나, Controller 컴포넌트를 활용해 제어 컴포넌트 방식으로 구현
• 참고: official docs 및 Github 이슈 검색 권장

7. 웹폰트 사용 방식과 CSS 선택자 컨벤션

• 웹폰트 적용시 <link> 태그를 HTML 헤더에 직접 넣는 방식이 보편적이며, CSS @import는 퍼포먼스에 불리할 수 있음
• CSS 선택자에 특수문자(&) 사용 금지, 퍼블리셔와 협업 시 컨벤션 맞춤 필요
• 긴 클래스명 문제 및 hashing, BEM, CSS Module 활용으로 관리 용이
• 실무에서는 클래스명 규칙을 강제해 혼란 방지

8. 백엔드 API 리팩토링 및 협업 팁

• API 리팩토링 완료 후 프론트엔드에 변경사항을 전달할 때, 수정 로그보다 공식 문서(예: Swagger) 활용 권장
• API 문서에 어떤 항목이 변경되었는지 요약해서 알려주는 게 협업에 효율적
• 백엔드 변경 시 프론트 API 호출 방식이 깨지지 않도록 커뮤니케이션 필수
• 응답 값이 빈 배열([]) 또는 null 처리 기준 사전 협의 필요
• 버전 관리와 문서화 자동화 도구 활용 권장

9. 개발자 공부 및 입문 관련 질문과 조언

• 자바스크립트가 자바보다 쉬운 언어라는 평가는 '엄격성 부족' 때문, 즉 에러를 잘 내지 않아 입문자는 편하지만 심화되면 어려움 많음
• JS는 싱글 스레드이기 때문에 스레딩, 메모리 관리, 타입 관리 등에서 자바보다 신경 쓸 부분이 적은 편
• 반면 남이 작성한 JS 코드는 가독성 문제, 비동기 처리 복잡성, 느슨한 타입 검사 등으로 어려움 있음
• 반복적인 알고리즘 문제 해결로 JS 문법 익히기 추천
• 개발자로서 포기 시도하는 감정 공유, 꾸준한 자기계발과 협업이 중요하단 조언
• 온라인 강의, 유튜브, 좋은 공식 문서(예: MDN) 적극 활용

10. 기타: 개발 환경, 퇴근 문화, 스트레스 이야기

• 재택 근무와 유연 근무제에 대한 토론, 실사례 공유
• 업무 스트레스, 회의와 단순 반복 작업에 대한 고민 활발
• 최신 기술 버전 변화 빠름 (React 18, Node.js 21등)
• 업무 외 대화: 개발자들끼리 친목, 일상 공유, 취미 이야기 등으로 분위기 활성화
• 집중을 깨지 않고 코딩할 수 있도록 건강 챙기기(휴식과 영양 섭취)의 필요성 강조

면접팁⚡

• 협업 경험에서 자신의 역할과 문제 해결 과정을 구체적이고 쉽게 설명할 준비
• API 변경 시 프론트와의 원활한 소통 방법에 대해 질문받을 수 있으니 관련 경험 준비
• React 상태관리 방식(상위 컴포넌트 vs 개별 컴포넌트 API 호출) 선택 이유를 명확히 설명
• React Hook Form, 커스텀 컴포넌트 간 통신 방식 이해 여부 점검 가능
• 본인이 경험해본 어려움과 이를 어떻게 극복했는지 사례 중심으로 준비

링크🔗

• 토스 진유림 React 상태관리 영상: https://www.youtube.com/watch?v=NwLWX2RNVcw
• React 공식 문서(forEach 등 JS 기본): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
• Stack Overflow 2023 Developer Survey: https://survey.stackoverflow.co/2023/#section-salary-salary-by-developer-type
• Vanilla Extract 스타일링 공식: https://vanilla-extract.style/
• CSS 선택자 문서: https://developer.mozilla.org/ko/docs/Web/CSS/Class_selectors
• CKEditor5 Docs (테이블, 이미지): https://ckeditor.com/docs/ckeditor5/latest/api/table.html
• Chrome iOS 디버깅 가이드: https://developer.chrome.com/blog/debugging-chrome-on-ios?hl=ko
• Swagger API 문서 툴: https://swagger.io/tools/swagger-ui/
• React Hook Form 공식: https://react-hook-form.com/
• Bash split 명령어 이슈 참고:
  • (관련 내용 직접 언급은 없으나, 긴 라인 분할 시 데이터 손실 주의 필요)