THE DEVLOG
scribbly.
프론트엔드 개발을 공부하며 작성하는 블로그입니다. 주로 Next.js와 관련된 게시글을 올립니다.
최신글
16. Supabase 셀프 호스팅 가이드
Self-Hosting with Docker Supabase 공식문서만으로는 셀프 호스팅이 부족하여 몇가지 정보를 더 찾아 정리하였다.
17. Standalone 모드와 Dockerization
Next.js를 Docker 이미지로 만드는 과정을 구체적으로 정리하였습니다. Dockerfile 작성, Docker Compose 작성, GitHub Actions에서 VPS로 직접 환경변수를 전달하는 과정이 담겨 있습니다.
3. 번들링 성능 최적화
스마트 창고 시뮬레이션 앱에서 번들링 최적화를 수행한 부분을 정리한 글. 스마트 창고 시뮬레이션 앱은 유독 번들링 크기가 컸다. SVG 모듈 이미지 파일을 Public 폴더에 저장...
2. 렌더링 최적화와 스마트창고 시뮬레이션
리액트의 렌더링 조건 리액트의 컴포넌트는 다음 3가지 조건 중 하나를 충족하면 리렌더링된다. 1. 부모 컴포넌트가 리렌더링될 때 2. 부모 컴포넌트로부터 받는 props가 변경될 ...
지식의 여정
유사한 게시글을 인공지능으로 분류한 지도입니다Next.js 앱 개발
Next.js를 기반으로 다양한 앱(영화, 메모, Todo 등)을 개발하는 과정에서 초기 설정, 상태 관리, 스타일링, 서버사이드 렌더링, 데이터 페칭 및 라우팅 구현 방법을 다룹니다.Todo앱 만들기(중단)
React.FC타입은 리액트 컴포넌트 타입을 의미한다.Next.js는 AppProps이라는 별도의 타입을 지원한다. 프롭스는 :AppProps로 타입을 지정하고, 위와 같이 헤더를 넣는다.Next js 구동 방식과 getInitailProps를 참조하여 나머지 파일들에
3. Next JS App Router로 TODO
https://nextjs.org/docs/pages/api-reference/create-next-appnpx create-next-app@latest 혹은 yarn create next-app을 통해 설치를 진행할 수 있다.prompts가 나오는데 아래와
CRN 없이 NEXT.js 구성하기
npx create-next-app@latest 혹은 yarn create next-app 를 통해 설치가 가능하다.
Redux-toolkit: 카운터 만들기
Redux는 상태관리 툴이다.리액트는 props-drilling이 많이 일어난다. 특히 하나의 상태를 관리하기 위해 가장 최상위의 Root컴포넌트에 상태와 함수들을 모아두면 Root컴포넌트는 점점 비대해지고, Drilling되는 Props는 점점 많아지고, 함수의 가독
nextjs메모앱1
yarn create next-app .를 통해 설치한다. https://nextjs.org/docs/pages/api-reference/components/font"next/font/google" 모듈에 인기 폰트들이 담겨있다. https://tailw
영화앱2: 개발 환경
next.js 깃허브를 참조하여 with-styled-components-babel 예시로 시작한다. CNA로 설치하여도 매우 라이트하게 잘 구성되어 있는 것을 볼 수 있다.yarn create next-app --example with-styled-components
CS퀴즈앱 1. 개발환경 세팅
styled components 설치yarn create next-app --example with-styled-components-babel으로 styled-compoents가 적용된 예시를 설치한다.styled-components는 서버사이드를 위해 별도의 설정이
블로그1. 프로젝트 세팅
Create Next App으로 블로그를 만들기 위한 기초적인 프로젝트 세팅이다. Next js 시작 cli가 실행되면 아래와 같이 선택한다. 스니펫 설정 를 선택하여 스니펫을 설...
Next.js와 react-query로 todo앱 만들기 (useMutation)
useMutation는 훅이기 때문에 useQuery와 같은 방식으로 추상화가 불가능하다.useMutation이 컴포넌트 내부에서 mutate를 반환하도록 커스텀 훅을 만들고,반환된 mutate를 컴포넌트 내부에서 실행해야만 작동이 된다. (컴포넌트 외부에서 바로 mu
Next.js와 react-query로 todo앱 만들기 (useQuery)
리액트 쿼리는 비동기 작업을 요청하고, 캐싱하고, 업데이트하는 상태관리 라이브러리이다.대부분의 상태를 서버로부터 받아온다는 점을 감안하여, 각 API와 비동기 작업, 그리고 그로 인해 발생되는 데이터를 하나의 식별자로 묶어 상태관리를 하는 개념이다.Redux에서의 비동
Redux-toolkit: Todo앱 만들기
Todo앱 만들기(중단)에서 중단했던 Todo앱을 Redux-toolkit으로 다시 만들고자 한다. 기본 셋팅은 영화앱2: 개발 환경을 따른다.conponents/Header.tsx를 만든다\_app.tsx에 추가해준다componets/TodoList.tsx를 만든다i
3. Next js 시작하기 (CNA, Routing)
Next JS를 설치하는 방법과 next js의 routing에 대해 다룹니다.
Next.js와 recoil-persist로 Todo앱 만들기
Recoil은 매우 간결한 상태관리 툴이다.'하나의 원천'을 강조하는 Redux와는 달리여러 Atom으로 상태를 관리한다.이러한 Atom은 React에서 사용하는 'useState'에서의 상태와 일맥상통하며,결과적으로 React의 함수형 컴포넌트에 잘 녹아드는 문법으로
4. Next JS API Router와 Vercel Postgres로 TODO
Next JS App Router로 TODO와 같은 방식으로 next-js-postgres-todo 폴더에서 아래와 같이 입력한다.$ yarn create next-app .success Installed "create-next-app@14.0.4" with binar
