COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-10

목차

  1. TypeScript와 타입 추론에 대한 대화
  2. CORS 문제와 프록시 서버 활용
  3. React Suspense 및 API 호출 훅 패턴
  4. JWT 토큰 에러 처리와 상태 코드 논의
  5. Tailwind CSS에 대한 의견 및 사용 경험
  6. React Hook 최적화와 useCallback/useMemo 활용
  7. Next.js의 notFound() 함수 문제
  8. 브라우저 및 플랫폼별 개발 테스트 방법
  9. Vite와 CRA 비교 및 전환 고민
  10. 리눅스 기본 지식과 서버 환경 관련

1. TypeScript와 타입 추론에 대한 대화

  • TypeScript에서 변수를 정의할 때 타입을 명시하지 않아도 컴파일러가 타입을 추론해서 타입 안전성을 제공함.
  • (v)처럼 괄호로 감싸도 타입이 명시된 것은 아님. 명시적 타입 선언 없이도 추론이 가능하다면 굳이 타입을 적을 필요는 없음.
  • 다중 early return을 어떻게 처리할지, 삼항 연산자와 비교할 때 장단점에 대한 의견도 오갔음. 결국 코드를 깔끔하게 작성하는 방식에 대한 고민.
  • 타입스크립트 초보자도 이해할 수 있도록, 타입 추론(Type Inference)은 코드 작성 시 타입을 명시하지 않아도 TS 컴파일러가 자동으로 타입을 판단하는 기능임.

2. CORS 문제와 프록시 서버 활용

  • CORS(Cross-Origin Resource Sharing)는 다른 도메인 간 리소스 요청 시 발생하는 보안 정책 에러.
  • 백엔드와 프론트엔드가 다른 도메인/포트로 운영될 때 주로 발생하며, 이를 우회하거나 해결하려고 프록시 서버를 사용함.
  • 프록시는 프론트엔드 요청을 받아서 실제 API 서버로 전달해주는 중간 서버 역할을 하여, 동일 출처 정책 문제를 회피함.
  • 프록시 사용 시 API 요청 URL을 프론트엔드 주소 기준으로 /api 등의 경로로 설정하고, 개발 서버에서 프록시 설정을 통해 백엔드 서버로 요청을 전달하도록 함.
  • 프록시 서버의 위치나 구성에 따라, API 요청 포트를 맞춰주거나 헤더 설정이 필요할 수 있음.
  • 단, 프록시는 문제 해결의 임시방편일 뿐, 장기적으로는 백엔드에서 CORS 정책을 올바르게 설정하는 것이 바람직함.
  • CORS 오류는 프론트엔드와 백엔드 모두에서 발생 가능하며, 협업 과정에서 책임 위임이 문제 될 때는 직접 공부하고 해결하려는 태도가 필요함.
  • 보안 관점에서 프록시 서버가 실제 API 도메인을 숨긴다고 생각할 수 있으나, 네트워크 추적 도구로 어느 정도는 노출됨을 이해해야 함.

3. React Suspense 및 API 호출 훅 패턴

  • React Suspense는 컴포넌트 렌더링을 지연시켜 비동기 작업이 완료될 때까지 로딩 상태를 보여주는 기능임.
  • API 호출 훅에서 데이터를 상태(state)로 관리하기보다, Suspense를 활용해 비동기 프로미스가 해결될 때까지 렌더링을 중단하는 패턴이 대세로 떠오름.
  • promise throw 방식과 React 18에서 도입된 use() 훅 활용은 비슷한 효과를 내는 데, use()는 아직 experimental(canary) 단계임.
  • 에러 핸들링은 API 호출 훅이 아니라, React의 ErrorBoundary 컴포넌트에서 처리하는 게 깔끔함.
  • 기존에는 API 호출 결과를 useState에 세팅하고, 그 상태를 컴포넌트에서 받아 쓰는 패턴이 일반적이었으나, 비동기 흐름과 에러 관리를 위해 Suspense 기반 처리 권장.
  • SWR이나 React Query 같은 라이브러리를 사용하는 것도 좋은 대안.
  • Hooks 내에서 API 호출 시 promise를 반환해 then/catch로 처리하는 패턴도 여전히 많이 사용됨.

4. JWT 토큰 에러 처리와 상태 코드 논의

  • 프론트에서 Access Token이 만료되어 쿠키에 토큰이 없는 상태에서 API 요청 시, 서버가 404(Not Found) 상태 코드를 반환하는 게 정상인지 질문.
  • 보통은 인증 오류 시 401(Unauthorized)이 반환되어야 하며, 404는 리소스가 없을 때 사용됨.
  • 백엔드에서 올바르게 401을 반환해야 하고, 프론트에서 인터셉터로 401를 감지하여 리프레시 토큰 요청 및 재발급 로직을 구현하는 패턴이 권장됨.
  • 401/403 오류 처리 및 토큰 재발급 로직 설계는 보안상 매우 중요한 부분임.
  • 또한, 프론트와 백엔드가 모두 협력해서 올바른 상태 코드 및 응답 처리 방식을 갖춰야 함.

5. Tailwind CSS에 대한 의견 및 사용 경험

  • Tailwind CSS는 유틸리티 퍼스트(utility-first) CSS 프레임워크로, 빠른 UI 개발과 관리가 장점.
  • 디자이너가 Tailwind 스타일 가이드를 잘 따라주면 효율적인 협업 가능하지만, 그렇지 않으면 CSS 커스텀 비용 증가 우려가 있음.
  • 팀 내에서 Tailwind에 대해 호불호가 갈리고, “민트초코같은 존재”라는 우스갯소리도 있었음.
  • 공용 컴포넌트 구현 시 Prop으로 스타일링하는 방법과 Context API 또는 전역 상태 관리를 이용하는 방법에 대한 토론.
  • Tailwind를 싫어하는 이유로는 유지보수 곤란, 디자이너와 협업 어려움 등이 있었으며, 대중적 인기는 여전히 강함.
  • Shadcn UI처럼 Tailwind 기반 UI 라이브러리를 쓰면 일관된 디자인과 개발이 수월함.

6. React Hook 최적화와 useCallback/useMemo 활용

  • useCallback과 useMemo는 함수 및 값 재생성을 방지하여 렌더링 최적화를 돕는 Hook임.
  • 팀 내에서는 과도한 사용을 권장하지 않고, 불필요할 경우 오히려 에러나 무한 렌더링을 유발할 수 있어 주의 필요.
  • 의존성 배열을 적절하게 관리하지 않으면 캐싱 기능이 무용지물임.
  • 기본적으로 반드시 필요한 경우에만 사용하고, 그렇지 않으면 그냥 평범하게 작성하는게 좋다는 의견 우세.

7. Next.js의 notFound() 함수 문제

  • Next.js app router에서 notFound() 함수를 호출했는데 404 페이지가 정상적으로 보이지 않는 이슈 발생.
  • notFound()를 호출하면 해당 경로에서 not-found.tsx가 있어야 하며, 이 컴포넌트로 UI가 전환됨.
  • 하지만 next-intl 같은 i18n 라이브러리 사용 시 호환 문제가 발생할 가능성 있음.
  • 공식 문서와 이슈 체크를 권장하며, 버전이나 라이브러리 간 충돌 여부도 확인 필요.

8. 브라우저 및 플랫폼별 개발 테스트 방법

  • 안드로이드와 iOS에서 웹 동작이 다르게 나오는 경우가 종종 있음.
  • 크롬의 iOS 모드 시뮬레이션만으로는 충분하지 않고, 실제 기기에서 테스트가 중요함.
  • 가능하다면 macOS, Windows, 모바일 실제 환경에서 다양한 브라우저 테스트 필수.
  • 플랫폼별 렌더링 차이, User-Agent 스니핑 방식 대안으로 미디어 쿼리 사용도 고려할 수 있음.

9. Vite와 CRA 비교 및 전환 고민

  • Vite는 빠른 빌드 시간과 빠른 HMR으로 CRA(Create React App) 대비 성능이 우수함.
  • CRA에서 Vite로 마이그레이션 시 초기 세팅과 플러그인 대응이 필요하지만, 장기적으로 빌드 효율이 개선됨.
  • 팀과 회사 환경에 따라 전환 리스크와 학습 비용을 고려해야 하고, 일부 프로젝트에서는 안정성 우선으로 CRA 유지하기도 함.
  • 참고 자료로 Vite 마이그레이션 관련 좋은 아티클과 커뮤니티 경험 공유됨.

10. 리눅스 기본 지식과 서버 환경 관련

  • 개발자에게 리눅스 기본 지식은 서버 관리, 배포, 로그 확인을 위해 필수적임.
  • EC2, Nginx 설치 및 SSL 인증서(HTTPS) 설정 경험은 매우 유용.
  • 특히 SSL 인증서 발급은 Let’s Encrypt를 통해 무료로 받을 수 있다.
  • 리눅스는 GUI 없이 CLI 환경에서 많이 작업하며, 윈도우/맥과 달리 쉘 명령어, 권한 관련 지식 필요.
  • 장애 상황 발생 시 SSH 접속, 재부팅, 로그 확인 등 간단한 대응 능력은 기본 소양임.

면접팁⚡

  • CORS와 프록시: CORS 정책은 왜 필요한지, 프록시 서버가 어떤 역할을 하는지 정확히 설명하고, 문제 발생 시 어떻게 대응할지 구체적 사례로 말할 수 있어야 함.
  • React Suspense: Suspense가 무엇인지, 기존 비동기 처리 방식과 어떤 차이가 있는지, ErrorBoundary와의 관계를 설명해보자.
  • JWT 인증 흐름: Access Token 만료 시 클라이언트가 어떻게 처리하는 것이 이상적인지, 상태 코드별 의미와 적절한 에러 핸들링 방법을 이해하고 있음을 보여주자.
  • React Hook 최적화: useCallback, useMemo를 언제 사용하고, 무분별한 사용이 왜 문제인지 사례 중심으로 정리해두면 좋음.
  • Next.js notFound 이슈: Next.js app router에서 404 처리 방법, 서버사이드 렌더링과 클라이언트 사이드 변화 이해도가 높다는 인상을 줄 수 있음.

링크🔗

#TypeScript#CORS#ReactSuspense#JWT#TailwindCSS#ReactHooks#Nextjs#FrontendTesting#Vite#LinuxBasics
이전 포스트

2024-10-09

2024년 10월 9일
다음 포스트

2024-10-11

2024년 10월 11일