next.js

https://velog.io/@supremgy/ChatGPT가-Next.js에서-Remix로-갈아탔데  ChatGPT가 Next.js에서 Remix로 갈아탔대!최근 OpenAI는 자사의 프레임워크를 Next.js에서 Remix로 전환했습니다. 이 변화는 개발 커뮤니티에서 큰 화제가 되었고, 많은 사람들이 그 이유에 대해 궁금해하고 있습니다. 아직 OpenAI의 공식적인velog.io   최근 OpenAI는 자사의 프레임워크를 Next.js에서 Remix로 전환했다는 윗 글을 접하고 충격먹었다. 왜냐하면 chatgpt를 이용했을 때 이전보다 몇배로 빨라짐을 몸소 느꼈기 때문이다. 그래서 remix가 궁금해져 이렇게 몸소 접해보고 이렇게 글을 쓰고자 한다.Remix는 초기 렌더링 시 서버에서 필요한 데이터..

계속적으로 react만 쓰다보니 오랜만에 Next.js 쓰다가 바뀐 점이 보여 이에 대해서 서술하고자 한다.1. 구성 요소 계층 변화경로에서layout.jstemplate.jserror.js :(React 오류 경계)loading.js : (리액트 서스펜스 경계)not-found.js : (React 오류 경계)page.js중첩된 경로에서 세그먼트의 구성 요소는 부모 세그먼트의 구성 요소 안에 중첩된다 .2. 공동 배치Next.js 12에서는 pages 디렉토리를 최상위 디렉토리로 가지고 있었다. 그 안에 파일들의 이름으로 url이 자동으로 라우팅되었다.지금은 Next.js에서 app 디렉토리를 최상위 디렉토리로 지정한다. 모든 파일들이 자동으로 라우팅되는 것이 아니라, 폴더 안에 page.js와 rou..

1. Link 사용하기1) 선언하기import Link from 'next/link'next.js에서 Link는 아래와 같이 선언하여 사용한다.2) 사용하기 #{cat}({categoryCounts[cat]}) 그리고 Link는 a 태그를 포함하여 사용해준다. Link 태그 안에는 legacyBehavior를 써서 같이 사용해준다.3) 활용하기import Link from 'next/link'//생략 About us //생략export default Homehref : 실제 URL 주소이다.query : query string으로 보내고 싶은 데이터와 함께 보낼 ..

useOptimistic 이걸 활용하려고 하다가 생각보다 이해가 잘 안되서 글까지 쓰게 되었다. 이전의 쇼핑몰 프로젝트를 하면서 하트의 좋아요 버튼을 구현한 적이 있다. 그런데 바로바로 업데이트되지 않고 서버에는 데이터가 갔지만 사이트에서는 그게 보이기까지 걸리던가, 아니면 새로고침을 해서 서버에 전달됨을 알려야 했다.그러다가 이 글을 보게 되어 유익하다고 느꼈다.1. Optimistic이란?: "낙관적"이라는 뜻으로, 클라이언트가 서버에서 응답을 받지 않고도 낙관적으로 요청이 성공적으로 끝났다고 가정하는 것을 말합니다. 즉, 사이트에서 서버의 요청을 받은 것처럼 행동하는 것을 의미한다.예를 들어) 멀티플레이어 게임 서버를 생각해 봅시다. 만약 게임 클라이언트가 optimistic하게 동작하지 않는다면 ..

코드 리뷰를 계속 해야지 이랬는데, 시기를 놓쳐서 지금 하게 되었다.강의를 들으면서 짠 코드인데 이를 어떻게 더 발전시킬까 하다가, 우연히 chatgpt 글을 보게 되어서 ai한테 코드리뷰를 시켰다. 아래는 해당되는 코드리뷰이다.1. project-items의 코드 설명아래의 코드를 조금 설명하자면, notion api를 사용해서 가져온 데이터이다. 이는 fetch를 사용해서 가져온 데이터이다.→ 코드를 실행시키면 위의 이미지를 가져오면서 아래의 해당 프로젝트에 대한 내용이 보여진다.2. 코드 리뷰1) data.properties의 반복1-1) 수정전 코드 const icon = data.icon.emoji; const title = data.properties.Name.title[0].plain_te..

next/image1) 기본 사용 example img next.js에서는 image를 로드할 수 있도록 모듈을 제공해준다. img을 사용하려면 src에 public에 있는 파일을 쓰거나 로컬 사이트의 주소를 가져와서 사용이 가능하다.페이지에 이미지가 보이지 않았는데, 이미지를 로드하는 경우가 있다. 이 경우에는 미리 이미지 파일을 로드하면 네트워크 낭비가 된다. 그래서코드를 사용하면 네트워크를 절약할 수 있다.loading="lazy"2) 장점img태그를 사용한 것과 next/image태그를 가져와 이미지를 불러온 것을 비교해보자. Network탭에 들어가서 비교해봤을 때 확실히 차이가 난다.img next/imagetypejpegwebpsize68b5kb→표로 비교를..

다크 모드를 next-themes를 이용해 구현한 것을 글로 작성하고자 한다.1. next-themes 설치하기npm install next-themes해당 모듈을 설치해주고, 이가 제대로 설치되었는지 확인해준다. package.json으로 들어가 설치되었는지 확인한다.해당 모듈은 Html 태그의 className을 "light"와 "dark"로 바꿔준다.2. 전역에 설정해주기1) pages/_app.js 수정 전function MyApp({ Component, pageProps }) { return }export default MyApp2) pages/_app.js 수정 후import { ThemeProvider } from 'next-themes'function MyApp({ Component, p..

이번에 tailwindcss를 써봤는데, 왜 사람들이 많이 이용하는지 이번 경험으로 느끼게 되었다. 그래서 내가 느낀점을 서술해볼려고 한다.내 경우에는 next.js에서 Tailwind Css를 사용하기 위해서 설치하였다. 그래서 next.js에서 Tailwind Css를 사용하는 방법을 서술할 것이다.1. 프로젝트 만들기npx create-next-app@latest0 {my-project}→ next프로젝트를 최신버전으로 만든다.cd my-projectcode .2. Tailwind Css 설치1) 설치npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -pnpm을 통해 종속성을 설치한다.tailwind.config.js : Tai..