시작179 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으로 설치 .. 2023. 11. 9. 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를 이용하기 .. 2023. 10. 11. 230925 - React 컴포넌트의 유연성과 최적화 ( 조건부 렌더링, 다이나믹 컴포넌트, 고차컴포넌트(HOC)) 오늘 내가 배운 것 1. 조건부 렌더링 2. 다이나믹 컴포넌트 3. 고차 컴포넌트(HOC) React Component의 유연성과 최적화 React를 이용하면서 컴포넌트를 다룰 때, 렌더링 최적화하는 여러 방법이 있다. 여러 방법 중 3가지를 최근에 접하게 되었고, 이에 대해서 살펴보려고 한다. 각 방식의 렌더링 최적화 측면과 적용 상황을 정리하였다. 1. 조건부 렌더링 1-1. 렌더링 최적화 조건부 렌더링은 필요한 부분만 렌더링을 수행하기 때문에 렌더링 성능에 도움을 줄 수 있다. 불필요한 컴포넌트의 렌더링을 방지하기 때문에 페이지의 성능을 향상할 수 있다. 1-2. 적용 상황 간단한 조건에 따른 뷰 변경이 필요할 때 사용한다. 자주 변경되는 UI 부분에 유용하다. 주의 : 복잡한 조건이나 중첩된 조건.. 2023. 9. 25. 230920 - Next param 오늘 내가 배운 것 1. URL의 param 얻기 URL의 param 얻기 CRUD를 할 때 특정 글을 보거나 수정하거나 삭제하기 위해서 동적 매개 변수인 url의 param를 이용해서 해당 글을 찾아서 그 내용을 보여주거나, 수정하고, 삭제할 수 있는 기능을 구현할 수 있다. 커뮤니티 게시글에 대한 url이 아래와 같을 때 https://a.com/user/:id 여기서 id값이 특정 게시물마다 바뀌며 이 id 값을 param이라고 한다. 1-1. Client Component 클라이언트 컴포넌트에서 params 얻기 위해서 useParams라는 client component hook을 이용해서 얻을 수 있다. const params = useParams() 이 hook은 클라이언트 컴포넌트에서만 사용.. 2023. 9. 21. 230919 - Next Component, Cache 오늘 내가 배운 것 1. Component 2. 사용 예시 3. Cache 출처 : 생활코딩 Next 13 강의 1. Component Client Component react를 사용하면서 여태까지 구현해왔던 방식이다. 주로 브라우저에서 실행된다. useState, useEffect, onClick, onChange, useRouter, useParams... 과 같이 클라이언트 단에서 조작할 수 있는 것을 의미한다. 사용자와 상호 작용을 할 수 있는 컴포넌트이다. Server Component 서버단에서 조작을 위해서 사용하는 방식이다. secure data나 cookie, header에 접근할 수 있다. Server Component 에서는 Client Component를 이용하게 되면 에러를 발생할.. 2023. 9. 19. 230918 - Next Routing (라우팅) 오늘 내가 배운 것 1. Routing 2. Dynamic routing 3. Next.js Routing 4. SPA 1. Routing https://example.com/dashboard/analytics example.com : Domain : example.com은 도메인이라고 부른다. dashboard/analytics : 도메인 뒤를 path라고 부른다. dashboard, analytics : path의 구성요소로 segment라고 부른다. 라우팅이라는 것은 경로에 따라서 어떤 컨텐츠를 어떤 방식으로 보여줄 것인가를 결정하는 것이라고 한다. 2. Dynamic routing 다이나믹 라우팅은 동적라우팅, 적응형 라우팅이라고도 한다. https://example.com/read/1 https.. 2023. 9. 18. 이전 1 2 3 4 5 6 7 ··· 30 다음 728x90
