THE DEVLOG
scribbly.
프론트엔드 개발을 공부하며 작성하는 블로그입니다. 주로 Next.js와 관련된 게시글을 올립니다.
최신글
20. Cache Components와 use cache
Next.js 16 버전에서 추가된 'cacheComponents'와 'use cache'를 패턴으로 정리하였다.
19. Drizzle과 next-auth
Drizzle ORM Drizzle은 SQL-like 문법을 지원하는 ORM이다. SQL을 지원한다는 이점 말고도, 관계형 ORM이라는 관점에서 봤을 때 Prisma보다 훨씬 SQ...
블로그9. Semantic Search와 RAG
블로그에 Text Full Search를 구현하였으나, Supabase는 한국어 형태소 분석을 지원하지 않아서 검색결과가 부정확했다. 또 챗봇에 게시글 검색 노드 역시 같은 API...
18. pgvector를 이용한 근접탐색
Postgres를 위한 오픈소스 라이브러리인 pgvector는 벡터를 이용한 각종 거리계산 함수를 이용한다. 이...
지식의 여정
유사한 게시글을 인공지능으로 분류한 지도입니다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
