🌱 𝐣𝐣𝐢𝐧𝐠𝐥𝐞 𝐝𝐞𝐕𝐥𝐨𝐠

client component에서 기존의 API와 소통하던 방식 useEffect useState -> metadata 사용 불가 로딩 state 구현 'use client'; import { useEffect, useState } from 'react'; /* useState의 사용으로 인해, 사용 불가능 export const metadata = { title: 'Home', }; */ export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); //useState -> interactive component를 사용하겠다. -> "use c..

서버 컴포넌트 vs 클라이언트 컴포넌트 처음 백엔드 서버에서 클라이언트 컴포넌트와 서버 컴포넌트가 모두 렌더링 클라인트 컴포넌트만 프론트엔드에서 다시 렌더링, 다시 hydrated(activate) 클라이언트 컴포넌트의 자바스크립트는 사용자가 다운로드하여 실행하고, 서버 컴포넌트의 자바스크립트는 사용자가 다운로드 X 서버 컴포넌트는 딱 한번만 서버에 의해 실행 -> 유저는 HTML 얻음 그 다음, 클라이언트 컴포넌트 hydrate -> 상호작용 가능 모든 이벤트 리스너 추가, useState, API, 지리 정보..etc 원하는 경우 클라이언트 컴포넌트를 서버 컴포넌트 내에 포함 가능 (반대의 경우 X) "use client"를 쓰지 않으면, 기본적으로 모두 서버 컴포넌트이다.

Library (ex. React) 코드 내에서 유저의 필요에 의해 이용, 활용하는 것 ex. 객체 지향 프로그래밍..etc => 구조에 관한 모든 결정은 유저가 내린다. React : UI 인터페이스를 build 하는데 사용하는 라이브러리 Framework (ex. Next.js) 프레임워크가 나의 코드를 활용한다 => 유저의 주도권 X 여러 결정을 유저 대신해주고, 자동화 시킨다 유저가 프레임워크의 규칙을 지켜야한다.

* Rendering : js code를 브라우저가 이해할 수 있는 html로 바꾸는 것 - React render : CSR (client side rendering) create-react-app 을 사용해 react만으로 application을 생성하면 , client side rendering client side rendering => 사용자 브라우저인 client단에서 rendering 작업을 한다. 단점 페이지의 실제 소스코드는 비어있다. ex. = UI가 없다 브라우저가 모든 JS 파일을 다운로드하고, 실행한 후에야 화면에 보여지는 것 새로고침 시, JS엔진이 위의 사항을 처리하는 시간 동안 빈 화면이 보여짐 SEO, 검색 엔진 최적화 Search Engine Optimization Goo..

1. 프로젝트 폴더 만들기 $ mkdir prj_folder 2. 프로젝트 폴더로 이동 $ cd prj_folder 3. 해당 폴더를 VSCode에서 열어보기 $ code . 4. package.json 폴더 생성 $ npm init -y 5. 필요한 라이브러리 설치 - react : UI와 다른 모든 것을 구성 - react-dom : 위의 것을 브라우저의 Document Object Model(DOM)에 렌더하는 역할 $ npm install react@latest next@latest react-dom@latest 6. jackage.json 스크립트 수정 "scripts" : { "dev" : "next dev" }, 7. 프로젝트 실행 확인 $ npm run dev - local server 실..