전체 글

해당 블로그는 Udemy Max 강사의 NextJS 강의 중 일부를 요약한 내용입니다. - https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=KEEPLEARNING 사용자가 "/some-route" 경로로 요청을 보냈다고 가정해보자. 순수 React에서 동작 방식 Response로 비어있는 HTML 파일과 JavaScript 코드를 전달하고, JavaScript 코드가 클라이언트에서 실행된다. JS 코드가 실행되면서 서버에서 데이터를 가져와 화면상에 무언가를 나타나게 된다. 랜더링이 클라이언트에서 시작되며, DOM 구조 이외에 필요한 모든 데이터는 클라이언트에서 다시 서버로 요청을 보내어 Load되기 때문에 시간이 걸릴 수 ..

1. 아래의 명령어를 입력하여, SQLite 패키지를 설치한다. npm install better-sqlite3 2. Root 경로에 파일을 생성하고 아래의 코드를 입력한다. 파일 이름은 "initdb.js"이라고 지었다. const sql = require('better-sqlite3'); const db = sql('meals.db'); const dummyMeals = [ { title: 'Juicy Cheese Burger', slug: 'juicy-cheese-burger', image: '/images/burger.jpg', summary: 'A mouth-watering burger with a juicy beef patty and melted cheese, served in a soft b..

바닐라 React 바닐라 React를 사용한다면 Client Component를 사용하는 것이다. React는 순수 Client 사이드 라이브러리이기 때문이다. NextJS NextJS는 풀스택 프레임워크이다. 프론트엔드뿐 아니라 백엔드를 가지고 있으며, 코드 또한 백엔드에서 실행된다. NextJS에서 모든 pages, layouts, components는 Server에서 랜더링된다. 이것이 React Server Components라고 불리는 이유이다. 서버 컴포넌트는 NextJS에서 기본 값으로 적용된다. 즉, NextJS에서 Component를 만들면 브라우저에서 실행되지 않고, 서버에서 실행된다는 것이다. 따라서 서버 컴포넌트에 console.log를 작성해보면 브라우저에서 실행되는 것이 아니기..

NextJS에서는 최적화된 이미지 컴포넌트를 별도로 제공한다. https://nextjs.org/docs/pages/api-reference/components/image Components: | Next.js Optimize Images in your Next.js Application using the built-in `next/image` Component. nextjs.org 상기 링크로 들어가보면 굉장히 많은 옵션이 존재하는데 해당 블로그에서는 필수 사용법만 정리하겠다. 기본 사용법 상기는 일반적인 img 태그 적용예시이다. 상기는 Next 이미지 컴포넌트를 적용한 예시이다. import에 'next/image'가 추가된 것을 확인할 수 있고, 'src' 구분이 삭제 되었다. 일반적으로 별도의 ..

빅오에 대한 공식 소개 Big O Definition We say that an algorithm is O(f(n)) if the number of simple operations the computer has to do is eventually less than a constant times f(n), as n increases.²²² Big O Notation is a way to formalize fuzzy counting. It Allows us to talk formally about how the runtime of an algorithm grows as the inputs grow. 빅오는 대략적으로 숫자를 세는 것에 붙인 공식적인 표현이다. 입력된 내용이 늘어날 수록 알고리즘의 실행 시간이..