2024-03-13

목차

1. 면접 준비와 기술 공부
2. PG 연동 및 금융 API 이슈
3. Webpack 설정과 polyfill 오류
4. Next.js 토큰 관리 방법
5. GraphQL 활용과 장단점
6. Redis 및 캐시 서버 이해
7. 연애, 회사 내 인간관계 팁
8. 생산성 도구 및 투두리스트 추천
9. 주식, 투자 이야기
10. 개발자 면접 준비 팁

1. 면접 준비와 기술 공부

• Java 공부 후 토스 API 등 TypeScript 공부 시작 예정.
• 면접 일정 중 코딩 테스트와 실기 병행에 부담감 표현.
• Java 면접 대비에 집중하며 TS는 그 이후에 시작.
• 프론트엔드 초급자를 위한 면접 준비 팁은 따로 아래 면접팁에서 설명.

2. PG 연동 및 금융 API 이슈

• 사업자 등록증 없이 PG 결제 연동 가능한 API 문의.
• 일반 개인용으로는 금융법상 입금자명, 금액 등 입금 내역 API 제공 제한.
• 금융 데이터 보안과 법적 제한 때문에 일반 API는 접근 어려움.
• PG 연동은 대체로 사업자 인증 필요함을 확인할 것.

3. Webpack 설정과 polyfill 오류

• "useBuiltIns": "usage" 옵션 추가 후 polyfill 경고는 해결될 수 있음.
• 그러나, 브라우저에서 앱 실행이 안 되는 문제 발생, 크롬 개발자도구 콘솔에는 에러 없음.
• WebpackDevServer 설정 누락 의심. 개발 서버를 띄우지 않았을 경우 정상 동작하지 않을 수 있음.
• 해결 팁:
  • webpack-dev-server 설정 확인 및 실행 필요.
  • entry 점검, babel-loader 옵션 포함한 babel 설정 재검토.
  • 브라우저 개발자도구의 Console 및 Network 탭 상태 꼼꼼히 확인.
• 참고: https://webpack.kr/configuration/dev-server/

4. Next.js 토큰 관리 방법

• 로그인 응답으로 받은 토큰을 로컬스토리지에 저장 시 Next.js 서버 컴포넌트에서 접근 불가 문제.
• 서버에서 쿠키에 토큰을 저장하여 인증 처리 권장.
• Next.js 13에서는 next/headers 모듈 내 cookies().set() 메소드를 통해 쿠키 설정 가능.
• 클라이언트와 서버 모두에서 쿠키 접근 가능해 SSR 및 API 요청 시 인증에 활용 용이.
• 미들웨어에서 헤더로 토큰 확인 방식도 병행 가능.

5. GraphQL 활용과 장단점

• GraphQL의 주요 장점은 오버페칭(필요 이상의 데이터 요청)과 언더페칭(부족한 데이터 요청) 문제 해결.
• 그러나 장점은 이외에도 데이터 관계형 조회의 편리함, 서버-클라이언트 간 명확한 계약 제공 존재.
• 오버페칭만 문제 삼는 것은 GraphQL 본질 이해 부족에 해당.
• 참고 문서:
  • https://graphql.org/learn/thinking-in-graphs/
  • https://relay.dev/docs/principles-and-architecture/thinking-in-graphql/
  • https://relay.dev/docs/principles-and-architecture/thinking-in-relay/

6. Redis 및 캐시 서버 이해

• Redis는 빠른 메모리 기반 인메모리 데이터베이스로, 주로 캐시 서버로 사용.
• 모든 데이터를 저장하는 것이 아니라, 자주 쓰는 데이터나 임시 데이터를 휘발성으로 저장해 빠른 데이터 접근 제공.
• Redis 사용 경험 없는 사람도 많으나, 기본적인 캐시 서버 개념 이해와 활용 필요.
• 캐시 서버는 웹 앱 성능 향상에 중요하다 설명.

7. 연애, 회사 내 인간관계 팁

• 회사에서 호감 있는 사람이 있을 때 접근하는 팁 공유.
• 반지 착용 위치(왼손 약지)는 대체로 커플링일 가능성 높음. 무조건 커플링일 수는 없으나 오해 줄이는 방법 참고.
• 인사, 점심 같이 하기, 작은 선물(츄파춥스 등) 활용해 자연스럽게 접점 만들기 추천.
• 부서, 업무가 다르면 이름 파악이나 메일, 메신저를 통한 접근도 고려.
• 말 걸기 전 용기 가지기와 자연스러운 대화 시도 중요.

8. 생산성 도구 및 투두리스트 추천

• 개인 일정, 할 일 관리는 Microsoft To Do, Notion, Apple 내장 투두리스트 등 다양하게 활용.
• Notion은 개인 용량 제한이 있으나 협업과 다목적 사용에 강점.
• Microsoft To Do는 모바일 연동과 알림 기능 강력, PC 앱 부재 시엔 아쉬움.
• 할 일 관리를 일정 시간 동기화하고 알림을 활용해 습관으로 만드는 것이 중요.

9. 주식, 투자 이야기

• 엔비디아, 애플, 테슬라 등 해외 주식 관심 많음.
• 주식 투자 초기 여유자금 50~200만원 권장, 코인보다는 안정성 좋은 주식 투자 추천.
• 국내 주식은 변동성, 작전 세력 등 위험 많음으로 조심 필요.
• 기본적인 차트 라이브러리로는 nivo, chart.js, recharts 등이 자주 사용됨.
• 주식 공부와 장기 투자, 단기 변동성 인내가 중요하다는 의견.

10. 개발자 면접 준비 팁⚡

• React 프론트엔드 면접 시 꼭 알아야 할 기술:
  • HTML/CSS: 시맨틱 태그와 플렉스박스, 그리드 등 레이아웃 이해.
  • JavaScript: 클로저, 프로토타입, 이벤트 버블링 등 기본 개념.
  • React: 상태 관리(useState, useEffect), 컴포넌트 생명주기 이해.
  • TypeScript: 주요 타입, 인터페이스 작성법, 타입 추론.
• 실무 경험은 중요하지만 기본 원리와 개념 설명 능력에 중점.
• 알고리즘 문제 풀이 병행 권장.
• 기술검토 보고 시 구현 목적, 막히는 부분, 해결 방안 및 모르는 내용 솔직히 보고하는 게 좋음.

링크🔗

• Webpack Dev Server 설정 가이드: https://webpack.kr/configuration/dev-server/
• GraphQL 공식 문서: https://graphql.org/learn/thinking-in-graphs/
• Relay 문서 (GraphQL 아키텍처): https://relay.dev/docs/principles-and-architecture/thinking-in-relay/
• 토스 UX 플랫폼 채용 페이지: https://toss.im/career/ux-platform-2024
• Nivo 차트 라이브러리: https://nivo.rocks