COMMIT.chat
View Bookmarks
react 썸네일react

2023-10-24

목차

  1. React와 Next.js 학습 조언과 SEO
  2. NextAuth JWT 토큰 활용 방법
  3. React useEffect, useState와 const 변수 이해
  4. React 18 성능 개선 및 Suspense API
  5. 엑셀 출력 라이브러리와 동적 UI 구현 조언
  6. 전역 상태관리 라이브러리 추천: Jotai, Recoil, Just-stand
  7. React 컴포넌트 단위와 외주 견적 팁
  8. 구직 경험 공유 및 취업 준비 팁
  9. 다양한 개발 도구와 기술 질문들
  10. 인터프리터와 컴파일러 개념 이해

1. React와 Next.js 학습 조언과 SEO 🚀

  • 핵심: Next.js는 React 기반의 프레임워크로, SSR(Server-Side Rendering, 서버 사이드 렌더링) 지원을 통해 SEO 및 초기 로딩 속도를 개선.
  • React는 CSR(Client-Side Rendering) 방식으로 기본적 SEO에 한계가 있음.
  • 처음 React를 공부하고 있다면 Next.js를 바로 배우지 않아도 됨. Next.js는 React를 기반으로 하며, React 지식이 바탕이 되어야 함.
  • Next.js 앱 라우터(App Router)는 구조가 달라져 진입 장벽이 있을 수 있지만, 페이지 라우터를 선택해 점진적으로 배워도 무방.
  • 핵심 개념 요약:
    • CSR (Client-Side Rendering): 브라우저에서 자바스크립트가 실행되어 화면을 렌더링함.
    • SSR (Server-Side Rendering): 서버에서 HTML을 만들어 보내 SEO에 유리.
    • Next.js는 메타 프레임워크로서 React 앱을 쉽고 효율적으로 SSR 및 SSG(Static Site Generation) 방식으로 제공할 수 있게 해줌.
  • 개인 프로젝트에 SEO가 중요하다면 Next.js 학습을 추천.

2. NextAuth JWT 토큰 활용 방법 🔐

  • NextAuth는 Next.js에서 쉽게 인증을 지원하는 라이브러리.
  • 백엔드에서 JWT 토큰을 받아 인증을 관리할 수 있음.
  • NextAuth는 자체적으로 JWT를 생성하며, 백엔드 JWT를 감싸서 관리 가능.
  • 흐름 예시:
    • Provider에서 유저 정보와 액세스 토큰을 받아옴.
    • JWT 콜백에 토큰을 저장하거나 갱신.
    • Session 콜백에서 클라이언트에 데이터를 전달.
    • 클라이언트 컴포넌트에서 useSession() 훅으로 토큰 사용 가능.
  • 백엔드에서 받은 토큰을 직접 NextAuth 세션에 저장하는 방식도 가능하며, 상황에 따라 구조를 조정할 수 있음.
  • JWT는 인증의 표준 방식이며, 토큰 관리를 편리하게 하는 것이 목적.

3. React useEffect, useState와 const 변수 이해 🎯

  • React에서 const [state, setState] = useState() 처럼 선언하는 이유:
    • JS의 const는 변수 재할당 금지지만, 객체나 배열처럼 참조형 데이터의 내부 변경은 가능.
    • useState는 상태와 상태를 변경하는 업데이트 함수(불변성을 유지하며 리렌더링 유도)를 배열 형태로 반환.
    • React는 상태값 자체가 아닌 상태 변경 함수 호출로 리렌더링이 발생.
  • 이 개념은 참조와 불변성 및 클로저(변수의 범위와 유지) 이해와 연관.
  • React 훅은 대수 효과(algebraic effects) 개념처럼 컴포넌트 외부에서 작동하는 흐름제어 방식이라 직관적 이해에 시간이 필요.
  • const를 써도 값이 변하는 것처럼 보이는 이유는 내부 데이터 변경이지 변수 자체 재할당이 아님.
  • 학습 팁: 자바스크립트 클로저와 참조형 데이터의 이해가 중요하며, 직접 useState를 구현해보면 개념 이해에 도움 됨.

4. React 18 성능 개선 및 Suspense API 🌟

  • React 18의 주요 개선 포인트는 concurrent rendering(동시 렌더링) 지원.
  • Fiber 아키텍처에 기반해 렌더링 작업을 중단 및 재개하며, 사용자 경험을 부드럽게 개선.
  • Suspense는 비동기 컴포넌트 렌더링 시 fallback UI(로딩 상태)를 관리하는 API.
  • Suspense 바운더리는 컴포넌트 트리 상에서 가장 가까운 상위 컴포넌트가 비동기 상태를 감싸고, 그 안에서 발생하는 비동기 throw를 캐치함.
  • Suspense 내에 또 다른 Suspense를 둬서 비동기 범위를 세밀하게 관리 가능.
  • SSR과 Suspense는 목적과 처리 방식이 다르지만, React 18에서는 SSR도 스트리밍 방식 지원으로 Suspense와의 호환 개선.
  • 주의: Suspense를 제대로 사용하지 않으면 화면이 빈 상태(화이트스크린)가 뜰 수 있음.
  • 면접 시에는 React 18의 concurrency와 Suspense의 작동 원리를 이해하는 것이 플러스.

5. 엑셀 출력 라이브러리와 동적 UI 구현 조언 📊

  • xlsx 라이브러리는 클라이언트(브라우저)에서 엑셀 파일 생성에 쓰이며 무료.
  • 스타일 적용(글자색, 배경 등)을 하고 싶다면 xlsx-js-style 같은 xlsx 포크 라이브러리를 사용.
  • 기본 XLSX.utils.table_to_sheet() 함수는 HTML 테이블을 엑셀 시트로 변환 가능하며, table id만 지정하면 테이블 모양 그대로 추출 가능.
  • 동적 폼 UI(한 단계 입력 완료 후 다음 입력 표시) 구현:
    • 직접 상태(useState)를 활용해 보여줄 컴포넌트를 조건부 렌더링.
    • 폼 상태 관리 라이브러리(Fomik, React Hook Form) + 유효성 검사(Yup)를 결합해 간결하고 안정적인 코드 작성 권장.
    • 토스의 useFunnel 같은 라이브러리도 참고 가능.

6. 전역 상태관리 라이브러리 추천 🗂️

  • Just-stand, Jotai, Recoil이 인기이나 기능상 차이는 크지 않음.
  • 개인 취향이나 프로젝트 특성에 맞춰 선택하면 됨.
  • Redux Toolkit은 코드를 명확히 쓰고 싶을 때 추천.
  • 미묘한 차이가 있지만, 학습 진입 장벽은 Recoil과 Jotai가 낮음.
  • 개발자 커뮤니티에서는 Just-stand를 추천하는 의견도 많음.
  • 선택 팁: 복잡성, 문서화, 팀 역량 고려.

7. React 컴포넌트 단위와 외주 견적 팁 💼

  • 외주 시 컴포넌트 수를 묻는 경우가 있으나, 컴포넌트 갯수 구분이 모호할 수 있음.
  • 보통은 페이지 단위 견적이 일반적이며, 컴포넌트는 기능별(사이드바, 헤더 등)로 구분.
  • 함수 개수는 코딩 스타일에 따라 달라 의미가 크지 않음.
  • 정확한 견적을 내려면 기획서 페이지 수와 주요 기능을 먼저 파악하는 것이 바람직.
  • 코드를 너무 쪼개는 것도 관리 난이도 증가 원인.

8. 구직 경험 공유와 취업 준비 팁 🎯

  • 서류 합격률은 대체로 5~10% 수준이며, 경쟁이 매우 치열함.
  • 자소서는 상황에 따라 작성, 보통 포트폴리오와 프로젝트 결과물이 더욱 중시됨.
  • 포트폴리오 사이트를 따로 배포(Vercel, S3 등)하는 경우가 많음.
  • 외주나 인턴 경험은 기간보다는 사용 기술, 수행 역할, 결과물 퀄리티에 중점.
  • 면접 및 과제 퀄리티가 중요하며, 피드백을 적극적으로 받아들이는 태도가 필요.
  • 휴식도 취업 준비의 일부이므로 적절한 휴식 권장.

9. 다양한 개발 도구 및 기술 질문들 💡

  • ESLint와 Prettier 충돌 문제는 설정 확장 순서와 플러그인 충돌 여부 확인 필요.
  • export default const는 문법 오류가 있으니 함수 컴포넌트 선언 시 주의해야 함.
  • React에서 컴포넌트 선언할 때 함수 선언문과 화살표 함수의 차이점:
    • 함수 선언문은 호이스팅 가능, this, arguments 등의 바인딩이 다름.
    • 화살표 함수는 바인딩이 고정되어 있고 호이스팅되지 않음.
  • React Query에서 공통 키(['product','list'])를 invalidate하면 관련된 여러 쿼리를 갱신 가능해 효율적.
  • GitHub Actions에서 monorepo 환경의 node_modules 순환참조 문제는 빌드 및 업로드 경로 설정으로 해결할 수 있음.
  • utils 폴더는 순수 함수(상태와 무관한 기능)를 모아놓는 곳으로, 훅(Hook)은 포함하지 않는 것이 좋음.

10. 인터프리터와 컴파일러 기본 개념 🖥️

  • 인터프리터는 고수준 언어 코드를 한 줄씩 읽고 바로 기계어(0과 1)로 변환해 실행하는 프로그램.
  • 컴파일러는 전체 코드를 먼저 기계어로 변환 후 실행하는 방식.
  • 기계는 0과 1만 아는 게 맞고, 컴파일러/인터프리터가 인간이 작성한 코드를 기계어로 번역해서 실행함.

면접팁⚡

  • React 18 성능 개선과 concurrent rendering에 대해 간단히 설명할 수 있으면 좋음.
  • React Suspense의 역할과 비동기 렌더링에서의 작동 방식을 이해하고 설명 가능해야 함.
  • useState 훅에서 const를 사용하는 이유, 상태 변경 메커니즘 설명 능력 중요.
  • Next.js에서 SSR과 CSR 차이점 및 SEO 관련 이해도가 면접관에게 좋은 인상을 줌.
  • NextAuth 인증 토큰 관리 구조를 이해하고 실제 인증 플로우를 설명할 수 있으면 차별점.

링크🔗

#React#NextJS#NextAuth#ReactHooks#Suspense#UI#상태관리#취업준비#개발팁#자바스크립트
이전 포스트

2023-10-23

2023년 10월 23일
다음 포스트

2023-10-25

2023년 10월 25일