본문 바로가기
반응형

Frontend
61

yarn pnp에서 node-modules로 변경후 supabse CLI 사용하기... pnp -> node_modules사용 전환패기롭게 pnp먼저 써보겠다는 다짐(?)을 번복하고 pnp 모드를 포기하다.MODULE_NOT_FOUND가 계속됐다.처음 혼자 pnp모드로 세팅하는데 에러잡는게 너무 오래걸려서node_modules 모드로 전환해서 프로젝트 진행후 나중에 migration하는걸로 해야겠다...pnp모드인데 자꾸 node_modules에서 supabase를 찾아서 나는 오류인듯.. PATH를 추가해야될것같은데 방법을 모르겠음1. .yarnrc.yml 파일 수정nodeLinker: node-modules2. pnp관련 파일 삭제하기sh 명령어rm -rf .pnp.cjs .pnp.loader.mjs .yarn/unpluggedcmd 명령어del .pnp.cjsdel .pnp.loade.. 2024. 7. 1.
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.
[Swiper] 스와이퍼 버벅대는 현상(js 중복) 메인페이지에서loop를 설정해서 슬라이드가 duplicate되어무한으로 쭉쭉 돌아가는 스와이퍼를 설정했다. 로컬에서 문제 없이 잘 돌아갔는데서버에서는 버벅이는 현상이 발견됐다. 슬라이드가 갑자기 뒤로 가고 앞으로가다가 다시 뒤로가기를 반복했다.문제가 될만한 swiper가 있었나, 하고 쓸데없는 옵션을 주석처리 하기도 했고duplicate 문제인가 싶어서 loopedSlides: 1을 추가해봐도버벅이는 현상은 달라지지 않았다. 같은 스와이퍼를 메인에도 쓰고 서브페이지에서도 썼다.메인페이지에서 js파일 목록을 보니 main.js와 sub.js가 동시에 있는것을 발견하였다. (;;;)스와이퍼 생성 부분이 중복되어 영향을 받은듯하다. 서브페이지에서는 main.js를 불러오지 않길래main.js에서 해당 swip.. 2024. 5. 7.
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.
[Typescript] 단언 연산자 느낌표 !(타입단언) Non-null assertion operator(null 아님 보증 연산자) ! TypeScript에서 ! 연산자는 변수 오른쪽에 붙어 Non-null 단언 연산자로 사용된다. 변수의 타입을 null이나 undefined가 아님을 명시적으로 지정하여 컴파일러에게 알려주는 역할을 한다. 예시로, 카카오맵 컴포넌트가 글 작성 페이지일 때는 setCustomValue라는 함수가 있고, 상세페이지(detailPage)일때는 없다. "Cannot invode an object which is possibly 'undefined'" 이 컴포넌트에서 setCustomValue가 넘어 올지 않을지 모르는데, undefined일수도 있는데! setCustomValue!('latitude',.. 2024. 2. 8.
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.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바