THE DEVLOG
scribbly.
프론트엔드 개발을 공부하며 작성하는 블로그입니다. 주로 Next.js와 관련된 게시글을 올립니다.
시리즈
LangChain JS 치트시트
자주쓰는 라이브러리
Next.js 블로그 프로젝트
Next JS 치트 시트
etc
NEXT JS 13 투두앱
React.js 치트 시트
자바스크립트 치트 시트
자바스크립트 기본 알고리즘
CS공부: 데이터 스트럭처
Next.js+형태소분석 CS퀴즈앱 만들기
Next.js+Firebase 영화앱 만들기
CS공부: 디자인 패턴
최신글
Chroma DB를 이용한 RAG
ChromaDB란? ChromaDB는 AI 시스템에서 사용할 수 있는 벡터 데이터베이스이다. 이를 이용해 벡터를 저장하고, 저장된 벡터를 이용하는 RAG 에이전트를 만든다.
LangChain JS과 ReActAgent
LangChain.js를 이용하여 LLM이 펑션 콜링을 할 수 있도록 구현해본다.
Ollama JS + Next.js 챗봇
LLM을 실행하는 라이브러리인 Ollama-js 라이브러리를 설명합니다. Next.js의 Routes Handler로 간단한 챗봇을 만듭니다.
LLM - Ollama로 로컬 서버 띄우기
LLM에 대한 간단한 배경지식과 함께 Ollama로 오픈소스 인공지능 모델을 실행하도록 합니다.
지식의 여정
유사한 게시글을 인공지능으로 분류한 지도입니다Next.js 앱 개발
Next.js를 활용한 다양한 웹 애플리케이션 개발 과정을 다루며, 상태 관리, 라우팅, 스타일링, 타입스크립트 적용, 서버사이드 렌더링, API 통합 등의 주제를 포함합니다.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
