2023-11-14

목차

1. 공기청정기 및 건강 관리
2. 프론트엔드 이직과 포트폴리오 제출
3. React 관련 기술 토론: CSS-in-JS, Debounce, React Query 등
4. 개발용 키보드 추천과 특징
5. 그래픽 카드 및 노트북 업그레이드 경험
6. GraphQL, Relay, React Query 설계 이슈와 비교
7. 개발자 면접 및 면접 장소 팁
8. 타입스크립트, 클래스 접근 제한자, 제네릭 관련 질문
9. 업무 환경과 휴가, 연차 제도 이해
10. 기타 개발 관련 질의응답 및 커뮤니티 소식

1. 공기청정기 및 건강 관리

• 공기청정기는 필수 아이템으로 인식됨.
• 사무실이나 집에 공기청정기, 필터 등 구매하는 중인 사람 많음.
• 거북목 예방을 위해 모니터 암과 스탠딩 데스크 추천.
• 폼롤러를 이용한 스트레칭과 운동이 거북목 개선에 도움됨.
• 운동하는 사람들은 거북목이 적고 교정된다고 이야기됨.

거북목은 컴퓨터 작업 등 장시간 고개를 숙여 목에 무리가 가는 상태를 말함.
모니터 암은 모니터 위치를 자유롭게 조절해 올바른 목 자세를 유지하는 데 도움을 주는 기구이며,
스탠딩 데스크는 서서 작업할 수 있도록 높이를 조절할 수 있는 책상으로, 장시간 앉아있는 것의 부작용을 줄임.

2. 프론트엔드 이직과 포트폴리오 제출

• 경력자 이직 시 회사 프로젝트 사진과 설명을 포트폴리오로 제출하는 경우 많음.
• 일부는 이력서에 간단히만 기재.
• “얼굴이 명함”, 즉 첫인상이 중요하다는 유머도 있었음.
• 비대면 면접이 보편적이며, 점심시간 등 장소 고민도 많음.
• 면접 장소는 독서실, 스터디룸, 조용한 카페를 추천.

3. React 관련 기술 토론: CSS-in-JS, Debounce, React Query 등

• Runtime CSS-in-JS와 Zero Runtime CSS-in-JS 비교:

  • Zero Runtime 접근법이 서버사이드 렌더링(SSR)에서 성능이 훨씬 빠르다고 체감됨.
  • CSS-in-JS는 JS 코드 안에 CSS 스타일을 작성하는 기법이며, SSR에서는 스타일 생성 방식에 따라 렌더링 속도가 달라짐.

• Debounce 기법:

  • 입력 이벤트가 자주 발생할 때 서버 요청을 줄이기 위한 기술.
  • React 18 이상에서는 useDeferredValue 훅을 이용해 성능 개선 가능.
  • Lodash 등 라이브러리의 debounce 함수 활용도 일반적임.

• React Query 및 Relay 논쟁:

  • React Query는 REST API 기반 캐싱에 강점이 있으나 쿼리 키 관리와 고도화에 어려움 존재.
  • Relay는 GraphQL 클라이언트로, 타입 안전성 및 컴파일러 지원으로 최적화에 유리하다 평가됨.
  • GraphQL은 API 요청의 데이터 오버페칭(불필요한 데이터 요청) 및 언더페칭(필요 데이터 부족) 문제 해결에 도움.
  • Relay 사용 시 높은 학습 곡선과 복잡도 존재하지만, 데이터 모델링 측면에서 우수하다고 봄.
  • React Query는 간편하게 사용할 수 있지만 복잡한 캐싱, 쿼리 키 관리 문제를 갖고 있어 적절한 설계와 숙련이 필요함.

GraphQL: 데이터를 필요한 형태로 쿼리할 수 있는 API 언어이며, 서버와 클라이언트 간 데이터 요청 최적화에 도움.
Relay: Facebook이 만든 GraphQL 클라이언트 라이브러리로, 데이터 페칭과 캐싱을 자동으로 처리하고 최적화하는 데 집중.
React Query: REST API 호출을 관리하고 데이터를 캐싱, 갱신하는 React 라이브러리로 사용이 쉽고 인기가 높음.

4. 개발용 키보드 추천과 특징

• 고급 키보드로 리얼포스, 해피해킹, 레오폴드 등이 추천됨.
• 가격대는 보통 10만 원 이상.
• 앱코, 콕스 등 가성비 좋은 모델도 있음.
• 펑션키 기본값(win/맥)은 변경 가능하고 실사용에 문제 없음.
• 인체공학 키보드 사용으로 손목 건강 챙기기 권장.

5. 그래픽 카드 및 노트북 업그레이드 경험

• 노트북 그래픽 카드 교체는 대부분 납땜되어 있어 직접 분리가 어렵고 위험함.
• 7년 된 노트북은 eGPU 지원도 어려워 새 기기 구입 권유.
• 게임용이 아니면 SSD 업그레이드로 성능 개선 가능.
• MacBook M1 모델 사용자가 많음.

6. GraphQL, Relay, React Query 설계 이슈와 비교

• React Query는 서버 응답을 그대로 저장하지만 모델 정보를 유지하기 어려워 상태 관리와 동기화가 까다로움.
• Relay는 GraphQL을 기반으로 하여 쿼리 키를 컴파일 타임에 엄격하게 관리, 타입 안전성 제공.
• GraphQL 도입은 단순 요청 방식 변화가 아니라, 백엔드 API 설계 및 클라이언트 상태 관리를 함께 고려해야 성공적임.
• Relay는 높은 러닝 커브로 인해 도입 시 조직 내부에서 숙련도가 필요함.
• 캐싱과 데이터 업데이트 전략에 따라 성능과 개발 편의성이 크게 달라짐.
• 실제 운영 환경에서는 백엔드 신뢰성과 테스트 코드 작성도 중요 재점검 대상임.

7. 개발자 면접 및 면접 장소 팁

• 점심시간 면접이 많아 장소 선정이 까다로움.
• 비대면 면접은 줌, 구글밋이 대세이며 주변 소음과 안정적인 환경이 중요.
• 가능하다면 스터디룸, 독서실, 조용한 카페를 추천.
• 면접 중 회사 관련 불필요한 이야기 자제 권장.
• 합격 후 결과 공유 및 면접 후기 간단히 작성하는 것이 긍정적.
• 면접 질문으로는 TS/JS 기초, React 상태관리, GraphQL, 코딩 테스트 등이 자주 등장.

8. 타입스크립트, 클래스 접근 제한자, 제네릭 관련 질문

• 자식 클래스가 부모 클래스의 protected 멤버에 접근하는 조건은 같은 인스턴스 내에서만 가능하며, 다른 인스턴스 접근은 제한됨.
• TS에서 any와 unknown 타입의 차이는 unknown이 더 안전하게 타입을 미정 상태로 두는 용도.
• 제네릭은 복잡한 타입 매핑에 도움이 되나, 고차 제네릭 사용 시 복잡도가 급격히 증가하고 어렵다 보임.
• 클래스 접근 제한자, 제네릭 이해는 면접에서 자주 출제되는 심화 주제.

9. 업무 환경과 휴가, 연차 제도 이해

• 연차는 법적으로 입사일 기준 1년 만근 시 부여됨 (366일차에 연차 발생).
• 회사별로 연차 산정 및 사용 정책이 다르므로 인사 담당자와 확인 필요.
• 휴가 미사용 시 현금 보상 여부도 회사 정책에 따라 크게 다름.
• 업무 환경에 따라 사생활 보호 필름 사용 등 개인 프라이버시 중요성도 언급됨.

10. 기타 개발 관련 질의응답 및 커뮤니티 소식

• VSCode에서 ngrok, tmux, nohup 등의 툴로 외부 접속 가능하도록 개발 서버 공유하는 방법 안내.
• Next.js App Router가 파일 많아졌을 때 구조화가 중요하다는 의견.
• 면접 준비 시 긍정적 마인드와 변화를 주는 도전 자세 권장.
• 커뮤니티 멤버 간 운동, 식단, 취미 등 개인적 소소한 이야기와 응원도 활발함.

면접팁⚡

• React 상태 업데이트 후 최신 state 접근법:
  기존 이벤트 리스너가 초기 상태만 참조하기 쉽다.
  해결책으로는 state 변경 시마다 리스너 재할당 또는 useRef로 함수 참조 관리 권장.
  자동으로 해주는 React용 addEventListener 훅도 활용 가능.

• GraphQL vs REST 기반 React Query, Relay 선택 이슈:
  GraphQL(Relay)은 쿼리 설계와 타입 안전으로 최적화에 강점.
  React Query는 REST API 쉽게 사용 가능하나 고도화 시 설계가 복잡하고 관리 어려움.
  면접에서 각 방식의 장단점을 명확히 말할 수 있으면 좋음.

• 비대면 면접 장소 선택 팁:
  주변 소음 적고 안정적인 장소 권장.
  스터디룸, 독서실, 조용한 카페 추천.
  면접 시간 앞뒤 여유 확보 후 준비 집중.
  면접 관여자 혹시 모른다는 전제를 잊지 말 것.

• TypeScript의 any vs unknown 차이:
  any는 타입 검사를 하지 않음(안전하지 않음).
  unknown은 타입 미확정 상태로 처리하여, 사용하는 쪽에서 검증 필요.
  면접 시 이 두 타입의 차이를 설명하면 좋은 인상.

링크🔗

• GraphQL 공식 문서: https://graphql.org/learn/thinking-in-graphs/
• Relay 공식 문서: https://relay.dev/docs/principles-and-architecture/
• React Query 관련 글 공유: https://youthfulhps.dev/web/stale-while-ravalidate/
• React Query 설계 관련 트윗: https://x.com/tkdodo/status/1724082589068075450?s=46
• React Query Kit: https://github.com/liaoliao666/react-query-kit
• Jest와 GraphQL 서버 테스트: https://medium.com/entria/testing-a-graphql-server-using-jest-4e00d0e4980e
• ngrok 다운로드: https://ngrok.com/download
• Tailwind Prettier 플러그인: https://github.com/tailwindlabs/prettier-plugin-tailwindcss
• Relay PoC 정리 노션: https://yongbeen-im.notion.site/Relay-POC-a1ca507001b24521b27de391fe48a4b3?pvs=4
• GraphQL JS 코드 예제: https://graphql.org/code/#javascript
• 기술면접 참고 유튜브: https://www.youtube.com/watch?v=p-VP3pT8GEg?si=LToEshC8DfCWsA-Z
• 면접 준비 및 관련 블로그: https://yunwoong.tistory.com/131
• 나무위키_선택과 집중: https://namu.wiki/w/%EC%84%A0%ED%83%9D%EA%B3%BC%20%EC%A7%91%EC%A4%91