반응형 Frontend/Next.js10 yarn berry와 nextjs 프로젝트 생성시 에러 해결모음... yarn으로 nextjs프로젝트를 생성하는데 node_modules폴더가 안생기고 에러가 났다.내가 쓰는 yarn 버전이 강의버전(yarn 1)과 달라서 에러가 나는것을 알게됐다.토스팀의 아티클을 읽고 yarn berry를 사용해보기로 했다..에러 봉착x999의 시작let's go0. yarn berry?Plug'n'Play (PnP):node_modules 폴더 대신 .pnp.cjs 또는 .pnp.js 파일을 사용합니다.패키지의 의존성 트리를 PnP 설정 파일에 저장하여 빠른 패키지 해석과 의존성 관리를 가능하게 합니다.Zero-Install:.yarn/cache 폴더에 패키지를 캐시하여, 프로젝트를 클론하고 yarn install을 실행하지 않아도 모든 의존성이 사용 가능합니다..yarn/cache와.. 2024. 6. 27. The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead 외부도메인을 사용해서 이미지 경로를 설정할때 애플리케이션을 보호하기 위해 특정 도메인에 해당하는 이미지만 사용할 수 있도록 설정을 하는것이다. The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead 당연한 말이지만 images.domains는 지원되지 않으니 images.remotePatterns를 쓰라는 얘기다. next.config.js파일을 수정한다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: [ 'res.cloudinary.com' ].. 2024. 2. 14. could not open directory "pg_notify": No such file or directory 오류 해결하기 docker-compose up으로 도커실행을 하는데 이런 에러가 떴다. git pull 받아서 작업하는데 실행이 안되는것이다. PostgreSQL Database directory appears to contain a database; Skipping initialization 2024-02-04 05:19:06.216 UTC \[1\] FATAL: could not open directory "pg\_notify": No such file or directory 스택오버플로우에는 pg_notify폴더를 그냥 만들라는데.. 뭔말인지 몰라서 그냥 테스트 앱을 만들면서 실행해봤다. 도커테스트앱을 만들고 docker-compose up을 하니 data폴더가 생성이 되면서 pg_notify폴더도 생성되더라… .. 2024. 2. 4. Error: Cannot find module '@npmcli/config' 해결하기.. nvm 버전이 1.1.7이었고 node 버전은 20.11.0 이었다. 저번 포스팅에서 nextjs 앱을 npm run dev 하니까 18버전 이상 쓰라고 해서 재설치했었다. 그런데도 에러가 난다. 어느 경로에서 어느 명령프롬프트를 쓰더라도 npm 명령어를 사용하면 이런 에러가 났다. Cannot find module '@npmcli/config' npm cache clean --force로 npm cache를 삭제하려고 했는데, 에러가 나서 그냥 수동 삭제해주었다. 프로그램/제거에서 확인해보니ㅎ, node는 최신버전이 맞는데 npm이 예전버전(3년전 설치.. ?) 이라서 생긴 에러인것같다. 싹 깔끔하게 재설치했다. 프로그램/제거 창 열어서 nodejs, npm, nvm 삭제 C:\Users.. 2024. 2. 4. Nextjs 프로젝트 git pull/clone 받고 실행 오류 'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. git pull/clone 받고 npm install 후 npm run dev 했을때 이런 오류가 뜬다면. 패키지 재설치 npm cache clean --force rm -rf node_modules(node_modules 폴더삭제) package-lock.json 삭제 npm install Next.js CLI 설치 npm install --global next next -v 버전확인 노드 버전 확인 & 재설치 노드버전 확인 후 필요한 버전과 비교 node -v 직접 설치 https://nodejs.org/en/download/ nvm 설치 npm install --global nvm nvm install .. 2024. 2. 2. [Next.js] 중고마켓 앱2 Next Auth 설정하기 Auth 라이브러리 설치 npm install next-auth @prisma/client @next-auth/prisma-adapter npm install prisma --save-dev 기본 설정 코드 생성 PrismaClient 인스턴스 생성을 하여 데이터에 접근한다. prividers로 어떻게 로그인할건지 정한다. (CredentialsProvider... ) src/pages/api/auth/[...nextauth].js : /api/auth로의 API요청을 Next-Auth가 처리 adapter: 데이터를 저장하는데 사용할 데이터베이스 또는 백엔드 시스템에 애플리케이션을 연결 privider : 어떠한 로그인을 사용할 것인지, 기본 로그인 혹은 소셜 로그인 사용(구.. 2024. 2. 1. [Next.js] 중고마켓 앱1 인증 및 인가 기능 구현하기 리액트 앱 생성하기 next-market-app으로 폴더를 생성했다. 터미널에서 CNA (맞겠지?) npx create-next-app@latest ./ Navbar 컴포넌트 생성하기 src하위에 components 폴더생성 컴포넌트를 생성하여 layout에서 import import Navbar from '@/components/Navbar'; import할때 @가 붙는것은 alias가 자동으로 붙어서 깔끔하게 경로작성가능하다. NavBar.tsx useState를 사용하려면 클라이언트 컴포넌트라고 use client로 명시를 해야한다. 'use client' import Link from "next/link"; import { useState .. 2024. 2. 1. [Next.js] pocketbase로 Create, Read..하는 튜토리얼2 (13버전 이후) NextJS 13 버전 포켓베이스를 이용하여 간단한 게시판 리스트와 뷰페이지, 글쓰기 기능을 갖춘 웹페이지를 만들것이다. Nextjs 13버전 설치 npx create-next-app --next=13.1.1 ./ --ts // 이렇게 설치했는데 14버전이 설치됨... 포켓베이스 설치와 설정(백엔드) https://pocketbase.io/docs/ 다운로드해서 압축풀고 pocketbase.exe 파일을 프로젝트안의 최상위 경로에 넣는다. 실행방법은 간단하다.. . ./pocketbase serve Admin UI주소로 들어가보면 계정생성하여 로그인한다. posts라는 이름의 데이터테이블을 만드는데 여기서는 collection이다. new field로 컬럼추가 가능 그리고 세팅 > API Rules > .. 2024. 1. 17. [Next.js] 튜토리얼 블로그 메인 페이지 UI 만들기(마크다운 파일 생성) 튜토리얼 블로그 폴더 생성 후 npx create-next-app ./ --typescript 넥스트+타입스크립트 템플릿으로 설치 기본 화면 메인페이지 UI만들기 layout.tsx에서 favicon이나 head안의 데이터를 수정할 수 있다. page.tsx에서는 메인페이지의 UI를 만들 수 있다. md파일안에 포스트 생성하기 블로그 튜토리얼 공식문서 서버가 없기때문에 여기의 블로그 데이터를 md(mark down)파일로 만들어서 사용할것이다. posts 폴더 생성 각 포스트별로 md파일을 만든다. 마크다운 파일을 데이터로 추출하기 markdown 형식의 데이터를 일반 글로 전환하는 함수가 필요. post에 사용할 함수 생성 여러 모듈을 사용하면서 파일 읽고.. 2024. 1. 17. [Next.js] Next.js 기본 Nextjs 기본 NextJS 란? (리액트는 라이브러리, Next.js는 프레임워크이다. ) React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다. 리액트로 개발할때 SPA을 이용하며 CSR(Client Side Rendering)을 하기때문에 좋은점도 있지만 단점도 있다. 검색엔진최적화(SEO)에 취약하다는 것이다. CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기때문에 포털검색에 거의 논출될 일이 없다.(크롤링 안됨) 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링하며 완성된 HTML을 가져오기 때문에 사용자와 검색엔진 크롤러에게 바로 렌더링된 페이지를 전달 할 수 있게.. 2024. 1. 17. 이전 1 다음 반응형 최근댓글 최근글 인기글 © Copyright 2023 jngmnj
최근댓글