본문 바로가기
반응형

분류 전체보기
96

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.
[티스토리 스킨 만들기] 게시판 리스트에 기본썸네일 지정 티스토리 포스트에 사진을 첨부하지 않으면 이렇게 공백만 남는데(기본 bd-item이 thum이 있고 이 thum에 width와 height css속성이 있어서 그럼)이부분이 거슬려서 기본 썸네일을 지정해보려고 한다.다른 방법으로는 그냥 이 공간을 지워버리고썸네일이 있다면 썸네일을,없다면 그냥 텍스트로만 채우는것도 생각해봤다.(이부분은 그냥 span.thum으로 감싸진 부분을 지우면 될듯)먼저 기본썸네일부터 만들어보고자한다.img 태그 만들기먼저 bd-list와 bd-item의 구조를 살펴보면 이렇다. .. 2024. 6. 13.
[Swiper] 스와이퍼 버벅대는 현상(js 중복) 메인페이지에서loop를 설정해서 슬라이드가 duplicate되어무한으로 쭉쭉 돌아가는 스와이퍼를 설정했다. 로컬에서 문제 없이 잘 돌아갔는데서버에서는 버벅이는 현상이 발견됐다. 슬라이드가 갑자기 뒤로 가고 앞으로가다가 다시 뒤로가기를 반복했다.문제가 될만한 swiper가 있었나, 하고 쓸데없는 옵션을 주석처리 하기도 했고duplicate 문제인가 싶어서 loopedSlides: 1을 추가해봐도버벅이는 현상은 달라지지 않았다. 같은 스와이퍼를 메인에도 쓰고 서브페이지에서도 썼다.메인페이지에서 js파일 목록을 보니 main.js와 sub.js가 동시에 있는것을 발견하였다. (;;;)스와이퍼 생성 부분이 중복되어 영향을 받은듯하다. 서브페이지에서는 main.js를 불러오지 않길래main.js에서 해당 swip.. 2024. 5. 7.
[git] git push --force 강제 push로 유실된 커밋 되돌리기 git reflog로 X되기 이전의 커밋 hash 찾기 git checkout {commitHash} git branch {your-branch} 인데 나는 마스터므로, git branch master 안되면 git branch master -f git checkout master master 브랜치로 이동 git push origin master 프로젝트에 유실된 디렉토리와 커밋들이 다시 보이는것을 확인할 수있었다... 2024. 2. 20.
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.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바