frontend37 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. [React] useCallback 사용법 정리 👩💻 이 글을 쓰게 된 계기... React는 Virtual DOM을 사용하여 컴포넌트의 렌더링 성능을 최적화한다. 그러나 불필요한 렌더링이 발생할 수 있는 상황이 있다. 이러한 상황에서는 React의 useCallback 훅을 사용하여 함수를 재사용하면 성능을 향상시킬 수 있다고 하는데 정확히 어떤 상황에서 써야 이게 잘 썼는지 소문이 날까? 란 생각에 정리해 보았다. 👁🗨 useCallback을 사용해야 하는 경우 일단 이론적으로 React에서 useCallback을 사용해야 하는 경우는 다음과 같다. ✅ 이벤트 핸들러 함수가 자주 재생성되는 경우 useCallback을 사용하지 않으면 이벤트 핸들러 함수는 매번 새로운 인스턴스가 생성된다. 그러나 useCallback을 사용하면 함수가 처음 생성.. 2023. 4. 28. Prisma 사용/공부 요약 👩💻 Prisma를 공부하게 된 계기 이번에 Next.js 13버전으로 Airbnb 클론 프로젝트를 시작하게 되었다. 개인적으로 에어비앤비는 전세계적으로 많은 사람들이 많이 사용하는 웹서비스라 한번쯤 그 기능들을 내 나름대로 구현해 보고 싶었다. 하지만 에어비앤비를 프론트엔드로만 적용하기엔 백엔드 부재가 심하다 생각해서 망상만 하다가 이번에 Next.js로 만들기로 결정한 김에 풀스택을 찍먹해보기로 했다. 결정 한 후에 ORM을 찾던 중 스키마를 통해 데이터베이스를 간단히 조작할 수 있다는 Prisma를 알게 되었고 이번 프로젝트에 적용해보기로 결정했다. 📝 Prisma의 개념과 특징 소개 공식 문서를 확인하면 Prisma는 Node.js, TypeScript, Rust, Go 등 다양한 언어와 프레임.. 2023. 4. 27. 이전 1 2 3 4 ··· 10 다음
