본문 바로가기

분류 전체보기62

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.