231110 - 카카오 로그인 (feat. KOE010)

카카오 로그인 토큰 받기 문제 카카오 로그인 중 2단계에 해당하는 토큰을 받아오는 과정에서 axios로는 정상적으로 받아오는데 fetch로는 받아오지 못하는 문제가 발생했다. 처음에 fetch를 사용했던 방법은 const url = `https://kauth.kakao.com/oauth/token` const body = { grant_type: 'authorization_code', client_id: process.env.REST_API as string, redirect_uri: process.env.REDIRECT as string, code, } const result = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'applic..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 11. 10.
• textsms

231109 - Monorepo를 이용한 Next.js 프로젝트 구성하기 (feat. pnpm)

Monorepo를 이용한 Next.js 프로젝트 구성하기 (feat. pnpm) 모노레포를 위한 pnpm 설치 해당 모노레포의 패키지는 pnpm을 이용한다. pnpm : https://pnpm.io/ko/installation pnpm은 npm과 비슷한 패키지 매니저이다. 하드 링크와 심볼릭 링크를 사용하여 중복된 패키지를 여러 프로젝트에서 재사용한다. ( 디스크 공간 절약 ) 즉, npm은 패키지를 중복해서 설치하지만 pnpm은 패키지를 공유한다. pnpm은 패키지를 병렬로 설치하기 때문에 npm보다 빠르다. # homebrew로 설치 $ brew install pnpm # Powershell $ iwr https://get.pnpm.io/install.ps1 -useb | iex # npm으로 설치 ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 11. 9.
• textsms

Next 13 공식문서 읽기 (3)

라우팅 기본 모든 애플리케이션의 뼈대는 라우팅이다. 라우팅의 기본 개념과 Next.js에서 라우팅 처리하는 방법에 대해서 소개한다. 용어 트리 (Tree) : 계층 구조를 시각화하기 위한 규칙. 부모 및 자식 구성 요소가 있는 구성 요소 트리 폴더 구조 하위 트리 : 트리의 일부, 새 루트(first)에서 시작하여 Leaves(last)에서 끝난다. 루트 : 트리 또는 하위트리 (예: 루트 레이아웃)의 첫 번째 노드 Leaf : URL 경로의 마지막 세그먼트와 같이 하위 트리에 자식이 없는 노드 URL 세그먼트 : 슬래시로 구분된 URL 경로의 일부 URL 경로 : 도메인 다음에 오는 URL의 일부 ( 세그먼트로 구성된다.) App Router Next.js v13은 React Server Compone..

• format_list_bulleted FrontEnd/NEXT
• · 2023. 11. 7.
• textsms

Next 13 공식문서 읽기 (2)

Next.js 프로젝트 구조 최상위 파일 및 폴더, 구성파일 및 라우팅 규칙에 대한 내용을 설명한다. 최상위 폴더 app : 앱라우터 pages : 페이지 라우터 public : 서비스의 정적 자산(데이터) src : 애플리케이션 원본 폴더 (선택사항 ) 최상위 파일 next.config.js : Next.js에 대한 구성 파일 package.json : 프로젝트 종속성 및 스크립트 instrumentation.ts : OpenTelementry / instrumentation file (이 부분에 대한 개념은 아직... 애플리케이션의 모니터링을 위한 것 같다.) middleware.ts : Next.js 요청 미들웨어 .env : 환경변수 .env.local : 로컬 환경변수 .env.productio..

• format_list_bulleted FrontEnd/NEXT
• · 2023. 11. 5.
• textsms

Next 13 공식문서 읽기 (1)

NextJS 공식문서 읽기 https://nextjs.org/docs Next.js란? 풀스택 웹 애플리케이션을 구축하기 위한 리액트 프레임워크이다. React 컴포넌트를 사용하여 UI를 구축하고 Next.js를 사용하여 추가적인 기능과 최적화 작업을 수행한다. Next.js에서 번들링, 컴파일 등 React에 필요한 툴링을 추상화하여 자동으로 구성한다. 이를 통해 설정에 시간을 할애하는 대신 애플리케이션 구축을 하는데에 집중할 수 있다. Next.js의 주요 특징 1. 라우팅 레이아웃, 중첩라우팅, 로딩, 에러 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터 2. 렌더링 클라이언트 및 서버 컴포넌트를 사용한 클라이언트 및 서버 측 렌더링 Next.js를 사용하는 서버에서 정적 및..

• format_list_bulleted FrontEnd/NEXT
• · 2023. 11. 3.
• textsms

231010 - NextJS 클라이언트에서 S3 업로드

오늘 내가 배운 것 1. 문제 발생 2. 원인 및 목적 1. 문제 발생 HTTP 413 Error 발생 2. 원인 및 목적 Next.js를 이용하고 있는 프로젝트는 클라이언트 측에서 빠르게 업로드를 하기 위해서 S3에 업로드를 하고 URL을 반환받아서 DB에 저장하는 방식을 선택했다. 하지만 요청할 때 보내는 데이터의 크기가 크기 때문에 413 Error가 발생하였다. 요청 크기에 제한이 있어서 발생할 수 있는 문제이다. 내가 시도한 방법과 해결한 방법을 적어놨는데, 이 방법이 효율적인지는 알 수 없지만 방법 중에 하나이기 때문에 언젠가 쓸 수 있는 방법이라고 생각한다. 2-1. NextJS pages/api 라우터 이용 ( multer, config ) ( 실패 ) 클라이언트는 NextJS를 이용하기 ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 10. 11.
• textsms