2023-11-02

목차

1. CORS 문제와 Next.js에서의 프록시 우회
2. React, Next.js 최신 동향 및 React Query, React Router 업데이트
3. 면접 경험과 팁 공유
4. React 상태관리와 useMemo, useCallback, useEffect 활용법
5. Strict Equality(===)와 JavaScript 타입 비교 이슈
6. 클론코딩과 개발 실력 향상 팁
7. Next.js 빌드 후 모듈 오류 및 Docker 레이어 문제
8. 스톡옵션과 기업 문화 관련 이야기
9. React-modal, Open Graph(OG) 태그 이슈
10. 페이지네이션과 API 요청 패턴 사례

1. CORS 문제와 Next.js에서의 프록시 우회

• 외부 API를 Next.js에서 호출할 때 흔히 CORS(Cross-Origin Resource Sharing) 에러가 발생.
• CORS는 브라우저가 다른 출처의 리소스를 호출할 때 보안 정책으로 막는 경우를 말함.
• 해결법 중 하나는 Next.js next.config.js에서 프록시를 설정해 서버 사이드에서 API를 우회하는 방법.
• 프록시 설정은 API 요청을 Next.js 서버가 중계하기 때문에 브라우저에 노출되는 출처가 같아져 CORS 차단을 우회 가능.

2. React, Next.js 최신 동향 및 React Query, React Router 업데이트

• React Router에 데이터 로더(loader), Form 지원 등 새로운 기능이 추가되어 상태 관리와 라우팅이 더 편리해짐.
• Next.js 13의 app 디렉토리와 서버 컴포넌트(Server Components) 개념이 계속 업데이트 중이며, 발표와 실제 출시 사이 시간 차이가 있음.
• React Query를 이용한 데이터 페칭과 관리가 매우 인기를 끌고 있음.
• CRA(Create React App)는 점차 구식으로, Vite나 Next.js 같은 최신 툴 사용이 권장됨.
  • CRA는 React 앱을 빠르게 시작할 수 있게 도와주는 도구.
  • Vite는 번들러로 개발 시 빠른 빌드와 HMR을 지원.

3. 면접 경험과 팁 공유

• 면접 후 피로감과 긴장으로 심신이 지치는 경우 많음.
• 질문 의도 파악과 답변 내용을 면접 중 메모하는 것이 도움이 됨.
• 면접은 실력 외에도 회사와 개인 간 '핏(fit)'이 중요하다는 의견.
• 신입일 경우 많이 떨어지는 것이 정상이며, 꾸준히 지원하고 경험 쌓는 걸 권장.
• 면접 중 자기 성장과 진실성을 표현하는 것이 긍정적 평가로 이어짐.

4. React 상태관리와 useMemo, useCallback, useEffect 활용법

• useMemo: 컴포넌트 내에서 복잡한 연산 결과를 메모리제이션해 불필요한 재계산을 방지함.
• useCallback: 함수를 메모리제이션하여 자식 컴포넌트에 props로 넘길 때 불필요한 재생성을 막음.
• useEffect: 의존성 배열(dependency array)에 따라 특정 상태나 props 변경 시 실행되는 사이드 이펙트를 다룸.
• 의존성 배열에는 상태 및 props, 메모이징된 값 등을 정확히 명시해야 원하는 시점에 함수가 실행됨.
• useRef는 상태가 변경돼도 리렌더링이 일어나지 않는 값을 유지할 때 사용.
• 무분별한 useMemo 사용은 성능 오히려 저하할 수 있으므로, 필요한 곳에만 활용하는 것이 좋음.

5. Strict Equality(===)와 JavaScript 타입 비교 이슈

• 자바스크립트의 === 연산자는 타입과 값이 모두 같아야 true를 반환함.
• true === 1은 false이며, true == 1은 true다.
• ChatGPT 같은 AI도 때때로 정확하지 않은 정보를 줄 수 있으니, 기술적인 사실은 공식 문서나 믿을 만한 자료 확인이 필수.
• 타입스크립트 등 엄격한 타입 검사 환경에서는 비교 연산에 더 신경 써야 함.

6. 클론코딩과 개발 실력 향상 팁

• 클론코딩은 서비스 구조와 기능을 익히기 위한 좋은 방법이나 단순 따라하기는 부족.
• 반드시 클론한 코드를 스스로 분석하고 변형해 본인의 것으로 만드는 과정이 중요.
• 공부 목적이 명확해야 꾸준히 성장 가능.
• 직접 기능을 구현하며 문제를 해결하는 경험이 개발 실력 향상에 효과적.
• 주변 동료나 커뮤니티에서 도움 받는 것도 좋은 방법.

7. Next.js 빌드 후 모듈 오류 및 Docker 레이어 문제

• 빌드 후 배포 시 ERR_MODULE_NOT_FOUND 오류가 나는 경우가 있음.
• 주로 Docker 이미지에서 의존성 패키지가 누락되었거나, 복사하는 파일 구성이 잘못되어 발생.
• 빌드와 실행 레이어를 나누고 패키지 캐시를 활용해 효율적인 Dockerfile 작성 필요.
• .next/standalone 모드 사용 시 필요한 모든 의존성을 올바르게 포함시키는지 확인해야 함.
• 문제 해결 시 .next, .yarn 캐시 정리 후 재빌드하는 것도 권장됨.

8. 스톡옵션과 기업 문화 관련 이야기

• 스톡옵션(Vesting)은 주식매수선택권으로, 주로 IT 기업에서 직원 성과 및 장기 근속 인센티브로 활용됨.
• 베스팅 기간은 보통 4~5년이며 회사 성장과 맞물려 주가가 오르면 큰 보상이 됨.
• 일부 기업은 외부 활동 제한, 회사 정보 유출 방지 등 내부 규정을 엄격히 하는 문화가 있음.
• 직원이 공개적으로 회사 정보를 밝히거나 외부 활동 시 주의가 필요.

9. React-modal, Open Graph(OG) 태그 이슈

• react-modal 사용 시 fade-out 트랜지션 효과가 제대로 동작하지 않는 문제 발생.
• modal을 context로 관리할 때 동작하지 않는 경우, 프로바이더 구조 확인 및 트랜지션 설정을 재검토할 필요.
• Next.js나 React에서 react-helmet을 통해 메타 태그(OG 태그)를 추가해도 SSR(Rendering)과 클라이언트 렌더링 차이 때문에 공유 시 적용 안 되는 현상이 있음.
• OG 태그는 사전 SEO 설정이 중요하며 서버 측에서 메타 데이터를 제대로 렌더링해야 함.

10. 페이지네이션과 API 요청 패턴 사례

• 댓글 페이지네이션에서 데이터가 특정 페이지에만 존재할 때 그 페이지까지 순차적으로 요청하는 패턴.
• 네트워크 부하 문제와 사용자 경험 저하 우려가 있음.
• 좋은 방식은 서버에서 필요한 데이터만 쿼리하거나 커서 기반 페이지네이션(cursor pagination) 사용 권장.
• 클라이언트는 응답 메타 데이터(ex: next page token)로 효율적 데이터 요청 가능.
• 무한루프 요청 또는 과도한 폴링(Polling)은 서버에 부하를 줄 수 있어 주의해야 함.

면접팁⚡

• 면접은 능력만큼 회사와 개인 간 문화 및 성향 적합도가 중요함.
• 질문 의도를 파악하고 답변 내용을 면접 중 메모해 두는 것이 도움이 됨.
• 긴장하고 몸이 아프더라도 솔직하고 성실한 태도가 긍정적 인상을 남김.
• 계속 떨어질 때는 실력 외에도 경험 부족일 수 있으니 꾸준한 지원과 피드백 반영을 권장.
• 코드 작성은 물론 문제 이해 과정과 논리 전개 능력을 보여주는 것이 중요.

링크🔗

• React 공식 문서 - 시작하기
• MDN - Strict Equality (===) Operator
• MDN - for-await...of
• React Query 공식 문서
• React Router 데이터 로더
• Next.js 공식 문서
• React useEffect, useMemo, useCallback 개념
• Feature toggle 활용 사례
• Quotabook - 스톡옵션 용어 정리