2024-01-23

목차

1. 리액트 입문 강의 추천 및 공부법
2. 수면과 집중력 관리 팁
3. 리액트 상태관리와 관련 이슈 (리덕스, 리코일, 주스탄드)
4. 교통 카드 하차 찍기의 중요성 및 추가요금 이해
5. 맥 vs 윈도우 개발 환경 비교
6. 리액트 쿼리(react-query) 데이터 갱신 문제 해결 팁
7. 개발자 영어 공부 팁
8. 개발자 도구(DevTools) 활용 및 제약사항
9. 사내 문화 및 일과 환경에 대한 이야기
10. three.js / glTF 3D 모델 다루기 입문 문제

1. 리액트 입문 강의 추천 및 공부법

• 리액트 초보라면 공식문서의 튜토리얼부터 시작하는 것이 가장 바람직함.
• '노드버드' 프로젝트가 인기 추천 리액트 공부용 프로젝트임.
• 프로젝트를 통해 트위터 클론 같은 간단한 SNS를 만들어보는게 학습에 도움이 된다.
• 직접 해보면서 이해도가 높아짐.
• 공식 튜토리얼은 기초 문법부터 생태계 이해까지 커버해줌.
• 한 번에 너무 무리하지 말고 차근차근 단계를 밟아가는 것이 중요함.

2. 수면과 집중력 관리 팁

• 평균 성인은 7~8시간 수면 권장. 프로게이머 페이커도 8시간 이상 자는 것으로 알려짐.
• 개인에 따라 4시간만 자도 괜찮은 경우도 있지만 드문 편임.
• 집중력이 짧아 1시간 공부 후 휴식이 필요한 경우도 많음.
• 공부와 휴식 사이에 균형을 적절히 맞춰야 지속가능한 학습 가능.
• 잠을 충분히 자야 뇌가 리프레시되고 효율적인 학습이 이루어짐.

3. 리액트 상태관리와 관련 이슈 (리덕스, 리코일, 주스탄드)

• 리덕스(Redux)는 안정적인 상태관리 도구로, 여전히 많은 회사와 프로젝트에서 사용됨.
• 리코일(Recoil)은 메모리 누수 문제 등으로 최근 유지관리 이슈가 있었음. 메인테이너 교체로 관리 공백 발생.
• 주스탄드(Zustand)는 리덕스보다 간단하고 가볍게 상태 관리가 가능하며, 최근 각광받는 대안으로 떠오름.
• 회사에서는 구형 코드를 많이 써서 리덕스를 계속 사용하는 경우도 많음.
• 메모리 누수 문제나 유지보수 어려움은 상태관리 도구 선택시 고려할 중요한 요소임.

상태관리 툴 설명

• 리덕스(Redux): 전역 상태를 하나의 저장소(store)에서 관리. 액션과 리듀서를 통한 명확한 상태 업데이트 흐름을 제공.
• 리코일(Recoil): 페이스북이 개발한 상태관리 라이브러리로, 더 간단한 API와 원자(atom) 단위 상태 관리를 지원.
• 주스탄드(Zustand): 간단한 사용법과 가벼운 구조, 미니멀한 API를 지원하는 상태관리 라이브러리로 현대적 프로젝트에 적합.

4. 교통 카드 하차 찍기의 중요성 및 추가요금 이해

• 서울 및 수도권 기준 버스 이용 시 **하차 시 카드 태그(찍기)**는 필수.
• 하차 정보가 없으면 시스템이 가장 먼 정류장까지 이동한 것으로 판단하여, 최대 요금이 부과될 수 있음.
• 환승 요금 정책과 연결되어 있기 때문에, 환승 할인도 제대로 받으려면 하차 시 찍어야 함.
• 지역마다 정책 차이가 있으나 수도권에서는 대부분 하차 찍기가 꼭 필요함.
• 포스팅을 통해 빅데이터 기반 노선 개선도 이뤄지므로 시민 모두에게 이득.
• 하차 태그를 안 찍으면 추가요금 발생과 환승 제한이라는 불이익이 따름.

5. 맥 vs 윈도우 개발 환경 비교

• 최신 웹 개발 및 리액트 네이티브, iOS 앱 개발은 맥(macOS) 환경이 필수인 경우가 많음.
• 윈도우도 개발 가능하지만, CLI 도구, 패키지 호환성, iOS 빌드 등에서 제한이 있음.
• macOS는 Bun, 최신 자바스크립트 라이브러리 등 지원 면에서도 우수함.
• 개인 개발자나 학생은 비용 문제로 윈도우로 시작하더라도, 취업 등 실무 환경에서는 맥을 선호하는 추세.
• 개발자 도구 및 단축키 체감상에서도 맥이 편리하다는 평이 많음.

6. 리액트 쿼리(react-query) 데이터 갱신 문제 해결 팁

• useMutation의 onSuccess에서 queryClient.invalidateQuery를 호출해도 데이터가 갱신되지 않는 경우가 있음.
• 문제는 서버 측 캐시 혹은 DB 갱신 지연이 원인일 가능성이 큼.
• 네트워크 탭에서 요청은 새로 보내진 것으로 나타나지만 데이터는 예전 것이 내려옴.
• 해결책:
  • 딜레이(0.5초 이상)를 추가해 서버가 데이터 갱신을 마칠 시간을 주기
  • 서버에서 Cache-Control 헤더를 적절히 설정하여 캐시 무효화
  • 백엔드 개발자와 협력하여 트랜잭션 처리 및 캐시 정책 개선 요청
• 프론트엔드에서는 임시방편으로 옵티미스틱 업데이트나 강력 새로고침을 할 수 있으나, 근본 해결은 백엔드 문제.
• refetch 호출도 동일 증상 발생 시 백엔드 캐시 문제 점검 필수.

7. 개발자 영어 공부 팁

• 개발자로서 공식 문서를 빠르게 이해하고 검색할 수 있는 영어 능력이 중요함.
• 토익, 토플 같은 시험용 영어가 아닌 개발자 영어책(개발 전문 용어 및 문서 독해 중심) 추천.
• 일상에서 영어 문서를 읽고 단어를 익히는 습관이 실력 향상에 도움됨.
• 영어 회화보다는 읽기 (reading)와 쓰기 (writing) 역량 우선.
• 영어 학습 방법:
  • 번역하면서 공식 문서 읽기
  • 외국인 친구와 대화 혹은 영어 스피킹 앱 활용 (ex. 스픽)
  • 개발 관련 영어책 구입 및 활용
• 꾸준한 활용이 중요하며, 배운 것을 즉시 사용하지 않으면 잊기 쉬움.

8. 개발자 도구(DevTools) 활용 및 제약사항

• 개발자 도구 연타(빠르게 여러 번 눌러 열 때) 시 발생하는 디자인 깨짐 이슈가 존재함.
• 일부 프로젝트에서는 이런 경우 대응하지 않아도 된다는 의견 많음.
• 특정 은행 및 금융 사이트에서는 보안상 개발자 도구 실행 자체를 차단하거나 창을 닫기도 함.
• 개발자 도구 막기는 브라우저 기능이 아닌 외부 프로그램이나 보안 솔루션을 통해 시행됨.
• 개발 중에는 이런 제약 사항을 감안해야 하며, 문제 발생 시 별도의 대응책보다는 우회나 환경 변경 권장.

9. 사내 문화 및 일과 환경 이야기

• 주 52시간 근무제가 법으로 시행되지만, 스타트업이나 IT업계에서는 사실상 초과 근무가 일상적임.
• 일부 기업은 70~100시간 근무도 흔하며, 초과 근무 인정 받기 어려움.
• 이직 시기는 개인 발전 목표에 맞추는 것이 중요하며, 회사 발전과 개인 발전이 항상 일치하지는 않음.
• 개발업무 외 문서작업, PM 역할에 대한 고민도 있었음.
• 업무에 몰입하면서도 휴식과 재충전의 균형 필요.

10. three.js / glTF 3D 모델 다루기 입문 문제

• glTF 모델에서 여러 캐릭터가 하나의 씬(scene)에 통합되어 있을 때, 개별 캐릭터와 애니메이션을 분리하는 법 궁금증 존재.
• three.js는 웹에서 3D 렌더링을 가능케 하는 라이브러리로, glTF는 3D 모델을 효율적으로 표현하는 포맷임.
• 각각의 메쉬(mesh), 애니메이션 클립을 따로 접근하려면 glTF 파일의 구조를 파악해야 함.
• 보통 scene.children 배열에 포함된 개별 오브젝트를 탐색, 애니메이션 클립도 분해 가능함.
• 3D 기초 지식과 WebGL 이해가 필요하며, 여러 자료와 튜토리얼 참고 추천.

면접팁⚡

• 상태관리 도구 선택 경험을 묻는다면 각 라이브러리(리덕스, 리코일, 주스탄드)의 장단점과 유지관리 이슈를 설명하면 좋음.
• react-query로 데이터 갱신 문제를 어떻게 해결할지 기술적인 접근 방식 및 백엔드와의 협업 중요성 언급 바람.
• 맥OS와 윈도우 개발 환경 차이점을 답변할 때, 특히 iOS 앱 빌드와 최신 도구 지원 여부를 강조할 것.
• 영어 능력 관련 질문에는 개발자 영어 읽기, 공식문서 이해, 검색 능력 향상이 중요함을 어필.

링크🔗

• 노드버드 프로젝트 - 리액트 입문 프로젝트 추천
• react-query 공식 문서 - 상태 및 서버 상태 관리 라이브러리
• three.js 공식 사이트 - 3D 웹 라이브러리
• glTF 파일 구조 설명 - 3D 모델 포맷
• 스픽 앱 - 영어 스피킹 연습 앱
• GDWEB 시상식 - 웹어워드 수상 소식