THE DEVLOG
scribbly.
프론트엔드 개발을 공부하며 작성하는 블로그입니다. 주로 Next.js와 관련된 게시글을 올립니다.
시리즈
Next.js 블로그 프로젝트
Next JS 치트 시트
노드 JS 디자인 패턴 바이블
etc
NEXT JS 13 투두앱
React.js 치트 시트
자바스크립트 치트 시트
자바스크립트 기본 알고리즘
CS공부: 데이터 스트럭처
Next.js+형태소분석 CS퀴즈앱 만들기
Next.js+Firebase 영화앱 만들기
CS공부: 디자인 패턴
최신글
블로그7. 사이드바와 segment-based 렌더링
11일차부터 개발한 사이드바와 관련하여 정리한 게시글 Segement-based 렌더링 에서 사이드바를 구현하고, 에서 게시글 렌더링 한다. 이때 폴더 구조를 위와 같이 렌더링하...
블로그6. 검색 기능과 Full Text Search
24일차부터 구현했던 검색 기능과 관련하여 정리한 게시글. 블로그 프로젝트를 시작하게 됐던 이유 1. 많은 분량의 게시글을 관리하기 힘들어서 -이는 chatGPT와 text-emb...
블로그5. 유사도 클러스터링과 지식 지도 시각화
16, 17일차부터 구현한 유사 게시글 군집화(DBSCAN)에 관해 정리한 내용. 군집화 알고리즘 1. K-Means K-Means Clustering | The Easier Wa...
블로그4. 코사인 유사도와 텍스트 임베딩
16, 17일차에 구현했던 텍스트 임베딩과 코사인 유사도에 관한 내용을 정리한 글. 텍스트 임베딩이란? 텍스트 임베딩이란 문장이나 단어를 고차원 벡터 공간의 좌표로 변환하는 것.\...
지식의 여정
유사한 게시글을 인공지능으로 분류한 지도입니다Next.js 앱 개발
Next.js를 활용한 다양한 웹 애플리케이션 개발 과정과 관련 기술 설정을 다룹니다.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는 서버사이드를 위해 별도의 설정이
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
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
