분류 전체보기

recoil 설치하기npm install recoil위의 명령어를 써서 최신 recoil을 설치해준다.RecoilRoot 적용하기recoil를 next.js 프로젝트에 적용하려면 root에 RecoilRoot를 적용해야 한다. root가 있는 곳은 layout.js를 말한다. RecoilRoot는 Recoil로 관리되는 상태의 공급자(provider) 역할을 하며, 때문에 Recoil로 관리되는 상태를 사용하는 컴포넌트는 RecoilRoot의 하위에 존재해야 한다.위의 코드에 {children}으로 되어 있는 태그를 RecoilRoot로 감싸야 한다. 그러나, 이를 감쌀 경우 아래와 같이 오류가 난다.‘use client’를 최상위에 작성하라는 오류이다. 그러나 이렇게 해도 오류가 난다. Layout.j..

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는 초기 렌더링 시 서버에서 필요한 데이터..

하나의 스크립트로 두 개의 프로세스를 돌릴 수 있는 방법은 여러가지 있는데, 그 중 두 가지를 소개하고자 한다.1. concurrently 사용하기npm install concurrently --save위의 명령어를 쳐서 concurrently가 package.json에 설치되었는지 확인해준다. 그리고 나서 package.json에 아래와 같이 수정해준다."start": "concurrently \\"supervisor app.js\\" \\"supervisor mqtt/mqttClient.js\\""여기서 스크립트에 지정한 이름과 겹친다면 수정해주고, 위에 넣은 내용은 내 기준으로 넣은 것이기에 수정해준다. 본인이 돌리고 싶은 파일로 수정해준다.npm run start위의 명령어를 돌렸을 때 잘 돌아가..

👩🏻‍💻 문제 발생위와 같이 Building for production... 이 계속 떠 있으면서 계속 실행이 안되었다.✔️ 문제 해결내 경우에 여러 글을 봐도 해결이 안 되었다. 위의 문제점은 용량이 부족해서 생기는 문제였다.💡 AWS EC2 프리티어를 쓰는 경우 t2.micro를 사용하는데 이건 RAM이 1GB밖에 안 된다. 그래서 빌드 규모가 조금만 커져도 멈춰버린다. 해결책 1)sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048sudo mkswap /mnt/swapfilesudo swapon /mnt/swapfile메모리대신 스왑 메모리를 생성하여 디스크의 일부를 대신 사용하도록 설정한다. 위와 같이 명령어를 입력하면 스왑메모리가 생성된다. 1..

👩🏻‍💻 문제 발생사이트를 열었을 때 파비콘을 설정하고 싶은데 계속적으로 설정이 안되었다.✔️ 문제 해결맨 처음에 next.js가 13버전으로 업데이트하고 나서, metadata 파일을 따로 만들지 않아도 되었었다. layout.js파일에 들어가면 있는 metadata를 설정하면 됐다.export function generateMetadata(): Metadata { return { title: "포트폴리오", description: "포트폴리오 사이트 입니다.", icons: { icon: "/images/favicon.ico", }, };}위의 파일은 layout.js에서 metadata가 작성되어 있는 파일인데 여기서 icons옵션을 추가한다. 파비콘 파일을 ..

👩🏻‍💻 문제 발생vercel에 build할려고 보니 위와 같은 문제가 발생하였다.✔️ 문제 해결참고사이트를 찾아 위와 같이 eslint와 관련된 문제였기에, eslintrc.json파일에서 설정해주면 된다."rules": { "react/no-unescaped-entities": "off" }🔗 참고https://github.com/vercel/next.js/discussions/53972👩🏻‍💻 문제 발생vercel에 build할려고 보니 위와 같은 문제가 발생하였다.✔️ 문제 해결위와 같은 문제는 쉬운 문제였는데 gpt 컴포넌트에 대해 나는 문제였다. 위의 컴포넌트의 맨 앞의 문자를 대문자로 고치면 해결되는 문제였다.🔗 참고https://www.inflearn.com/community..

next로 만들어놨던 사이트가 Next.js가 업데이트를 하다보니, 성에 안 차서 이번 기회에 공부도 할 겸 업데이트를 하게 되었다. 업데이트하면서 얻은 지식을 공유하고자 글을 쓴다.1. Notion api 만들기notion api를 가지고 홈페이지를 생성했다. 이를 활용해서 페이지를 만들려면 아래와 같이 따라하면 된다.1) 데이터베이스 만들기노션을 만든 후에 빈 페이지를 만든다. 그리고나서 데이터베이스를 만든다. 여기서 말하는 데이터베이스는 표를 의미한다. 자신이 원하는 데이터를 데이터베이스에 작성하여 준다.2)notion api 사용하기💡 https://developers.notion.com/ 위의 사이트에 들어가면 오른쪽 상단에 View my integration이라는 버튼이 있다. 버튼을 클릭해..

계속적으로 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..