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

Jekyll 2008 release Ruby로 작성된 정적 사이트 생성기(SSG, Static Site Generator) JavaScript가 실행되면 빈 HTML 페이지 안에 마크업을 추가해주는 SPA(Single Page Application)와 다르게, 개발 후 Build 과정에서 마크업 생성 -> 검색 엔진 최적화(SEO) Github Pages에서 기본적으로 지원하기 때문에, 리포지토리에 올리면 자동으로 웹 페이지 호스팅 템플릿 엔진과 내부 데이터 쿼리는 Liquid 언어 사용 Gatsby 2015 release JAM Stack(JavaScript, API, Markup) 웹 구성 방법 JAM Stack 동작 원리 기존 : 서버의 데이터베이스 또는 CMS(Content Management S..

기존 코드 비동기적으로 getMovie 함수가 실행되고 완료 후, getVideo 함수 실행 => 데이터 양이 많을 경우 비효율적 async function getMovie(id: string) { const response = await fetch(`${API_URL}/${id}`); return response.json(); } async function getVideos(id: string) { const response = await fetch(`${API_URL}/${id}/videos`); return response.json(); } //dynamic route export default async function MovieDetail({ params: { id } }: { params: {..

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 실..

Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 설치 확인 node -v Vite : 개발환경 구성 Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev npm create vite@latest - Projet name - framework : React - variat : TypeScript + SWC ( SWC: Rust typescript 컴파일러) 기본설정 주입 npm i - react, react dom, typescript, vite...etc (package.json) 정상 작동 확인 npm run dev git 연결 git ..