전체 글57 [Next.js14.0.2] Yarn berry v4 적용 후 체감 성능 비교(feat. Yarn berry v3, yarn, 배포: vercel) ※ 비교한 내용만 있을 뿐 적용 방법은 포함되어 있지 않습니다. ※ Next.js 14.0.2 버전이며, Vercel이 아닌 다른 곳에 배포 시 결과가 다를 수 있습니다. 비교 대상: yarn berry v3, yarn 테스트 배포 사이트: Vercel 테스트 항목: dependency 최초 설치 속도 git에 대한 부하 Vercel에 배포 시 CI 속도 dependency가 추가 됐을 때 dependency 변경 없을 때 Yarn dependency 최초 설치 속도 Yarn berry v3보다 빠름 ( Yarn berry v3는 처음 dependency를 설치 할 때 캐시를 같이 추가하기 때문으로 보임) git에 대한 부하 node_modules에 패키지들이 있으며, gitIgnore에 있으므로 git.. 2023. 11. 28. [Error] Next.js14.0.3에서 three/drei 라이브러리 에러 💣Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator') 에러 환경: Window IDE: Vscode 프레임워크 버전: Next.js14.0.3 오류 난 라이브러리 이름/버전: @react-three/drei: 9.75.0 최근 업데이트한 Next.js 14.0.3에서 three/drei를 import하여 사용만 해도 위와 같은 에러 메세지가 나옴. dev모드인 경우 log에 계속 에러가 나오고 있는 상황이며, createSDFGenerator를 사용하지 않는 컴포넌트는 동작함. vercel에 테스트 배포를 실험해 본 결과, 아래 사진과 같이 error를.. 2023. 11. 27. git에서 잘못 올린 파일의 이전 내역을 전부 제거하는 방법 😊 이 글을 쓰게 된 계기 처음부터 잘 설정하여 env파일 같은 중요파일을 .gitignore에 잘 설정하여 올리면 아무 문제 없지만 나중에서야 그런 부분을 캐치하게 되면 마음이 아픕니다. 나중에 알게 됐기 때문에 그 이전에 올린 git 이력들에 포함 된 history가 많으면 많을 수록 더욱 심란해지죠... 그러한 일이 없길 바라지만 있다면 있다면 손가락만 빨 순 없으니 최근 이런 심란한 일을 겪은 김에 해결방법을 공유 합니다. 👩💻 해결 방법 가. 파일 삭제 1) 전체 branch에서 파일을 삭제하는 경우 맨 마지막에 보이는 cat 단어 뒤에 붙는 -- --all 을 붙이는 경우 모든 branch에 있는 파일을 삭제하게 됩니다. git filter-branch --force --index-filte.. 2023. 10. 12. Next.js13 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드 분석 Next.js - next-start code #!/usr/bin/env node import arg from 'next/dist/compiled/arg/index.js' import { startServer } from '../server/lib/start-server' import { getPort, printAndExit } from '../server/lib/utils' import isError from '../lib/is-error' import { getProjectDir } from '../lib/get-project-dir' import { CliCommand } from '../lib/commands' import { resolve } from 'path' import { PHASE_P.. 2023. 6. 28. CSR(Client-side Rendering)이란? (+SSR 비교) 🤔 CSR(Client-side Rendering)이란? Client-side Rendering(CSR)은 웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식이다. 서버에서 HTML, CSS, JavaScript 파일을 클라이언트로 보내고, 클라이언트에서 JavaScript를 실행하여 동적인 웹 페이지를 생성하게 된다. 이로 인해 서버의 부하가 감소하고, 많은 인터랙티브한 기능을 제공할 수 있게 된다. 자주 사용되는 웹 프레임워크로는 React, Angular, Vue.js 등이 있다. 😎 장점 ✅ 인터랙션 향상 CSR은 사용자 경험(UX) 측면에서 이점을 가지고 있다. 페이지의 동작에 따라 실시간으로 콘텐츠가 변경되어 사용자가 웹사이트를 더 쉽게 이용할 수 있다. 예를 들면, 기존 웹에서 페.. 2023. 6. 28. Next.js 13 에서 NextResponse 사용 방법 해당 글은 App Router 방식을 따르고 있습니다. cookies response의 Set-Cookie 헤더를 읽거나 변경한다. set(name, value) name과 value에 값을 넣어 쿠키를 설정한다. // /home 들어오는 요청이 주어지면 let response = NextResponse.next(); // 배너를 숨기도록 쿠키 설정 response.cookies.set('show-banner', 'false; HttpOnly; Secure;'); // 옵션은 값 옆에 ; 을 붙이면 된다 // 위 코드는 Response에 `Set-Cookie:show-banner=false; HttpOnly; Secure; path=/home` 헤더가 있다와 같은 말이다. return response; .. 2023. 5. 17. [ERROR] Prisma 마이그레이션 후 타입스크립트 에러(feat.MongoDB)-해결 카카오톡 결제 api를 추가하면서 MonogoDB 스키마에 새로운 변수와 값을 추가해줘야 하는 일이 생겼다. 그래서 Prisma의 공식 문서를 참고하여 추가한 것까진 좋았으나, create에 새로 추가한 변수를 넣자마자 타입에러를 뿜어냈다. 당황해서 에러에 관련된 건 캡처를 못했지만, 해결한 방법을 올린다. 접근한 생각은 한번 데이터를 인식을 시켜줘야 할거 같단 생각이 들었다. 그렇게 찾은 방법이 prisma studio다. npx prisma studio 위 명령어를 치면, localhost 주소를 준다. 해당 주소로 들어가면, 이런 화면이 나온다. 사진의 맨 상단 위에 보이는 + 버튼을 누른다. 그러면 위와 같이 등록한 모델들이 나온다. 필자 같은 경우엔 Reservation이 문제였으므로 Reser.. 2023. 5. 17. [ERROR] 구글 Oauth 카카오톡 인앱 에러(※해결법 없음 주의) 베포후 테스트를 하던 도중 다른 로그인은 다 잘되는데 카카오톡에서 링크로 들어간 홈페이지에서는 로그인시 에세스 차단됨이 뜬다. 전부 다 안된다면 미천한 내가 무릎꿇고 빌어야 됐지만 이번만큼은 억울 했다. 그래서 찾아 본 결과, 카카오데브톡에 해당 이슈에 대한 내용이 있었다. 결론 제한이 있을 수밖에 없다... 실질적으로 Oauth를 이용했을 때 액세스 차단에 대해 해결 할 순 없었지만, 안되는 이유를 알아보았다. 2023. 5. 15. 이전 1 2 3 4 ··· 8 다음
