사전렌더링이 무엇인지에 앞서 Client Side Rendering (CSR) 되짚어보자면,말그대로 클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식으로 React 앱의 기본적인 렌더링 방식이다. 이 방식은 초기 요청 시 서버로부터 받은 JS Bunble 안에 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재한다.그래서 페이지 이동이 있더라도 서버에게 새로운 페이지를 요청하지 않고 브라우저가 자체적으로 React 앱을 실행해서해당하는 컴포넌트로 갈아끼우기 때문에 초기 접속 이후의 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다. 하지만 초기 요청 시 서버로부터 모든 코드가 들어있는 JS Bunble을 받고 JS를 실행하고 컨텐츠를 렌더링하기까지 오랜 시간이 소요가 되므로 초기 접속 속도가 느리다..
🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. 영화소개 상세페이지를 만든다고 했을 때,movies/[id]/page.tsx에서 상세정보를 가져오기 위해 API를 2번 요청해야한다고 해보자. 아래와 각각의 정보를 fetch하는 함수를 만들고 실행해준다면 getMovie()와 getVideos()가 순차적으로 실행된다.getMovie() 함수의 실행이 완료되어야만 getVideos()가 실행된다는 것이다.아래 코드와 같은 경우 최소 getMovie()에서 5초, 그 다음으로 getVideos()에서 5초가 지연되어 최소 10초의 시간이 소요된다.// movies/[id]/page.tsxasync function getMovie(id: string) { consol..
🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. 외부 라이브러리나 패키지 없이 React 컴포넌트에서 데이터를 fetch하는 방법은 보통 아래와 같다."use client";import { useEffect, useState } from "react";export default function Home() { const [isLoding, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const response = await fetch("https://nomad-movies.nomadcoders.w..
🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. 기본적으로 root layout에 작성되는 metadataexport const metadata = { title: "title", description: "description",};export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} );} 다른 page나 layout에도 작성할 수 있다. 예를 들어, 모든 페이지에 description은 공통으로 넣고 싶다면 roo..
🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. app/layout.tsx는 application 전체의 공통으로 들어가는 컴포넌트들을 작성할 때 사용한다. import Navigation from "../components/navigation";export const metadata = { title: "Next.js", description: "Generated by Next.js",};export default function RootLayout({ children }: { children: React.ReactNode }) { return ( ..
🚩 이 글은 노마드코더의 Next.js 시작하기 강의를 보고 정리한 글입니다. 사용자가 '/about'이라는 페이지로 접근한다고 할 때,next.js가 그 요청을 받으면 /app/about/page.tsx 컴포넌트를 html로 변환하여 응답으로 보내 사용자에게 보여준다. 이 때의 사용자에게 보여지는 html은 아무 인터렉션이 일어나지 않는 정적인 html 페이지이다.동시에 next.js는 load를 시작해 react application을 초기화하여 정적인 html을 인터렉티브하게 만든다. 한마디로, 사용자가 /about에 접근했을 순간에는 javascript도, 프레임워크도 로드되지 않은 상태인단순한 html파일이 보여지는 상태이다. 그 후 아주 빠르게 react가 initialize되면서 ..
내일배움카드 유효기간이 얼마 남지 않았는데 아직 잔액이 남아있어서국비로 들을 수 있는 인강이 있나 찾아보던 중에 패스트캠퍼스에서 재미있어보이는 강의를 발견했다. 🔗 인터랙티브 웹 완전 정복 : 나만의 웹사이트 제작으로 포트폴리오 완성 내일배움아카데미 : K-Digital 웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인패스트캠퍼스 온라인 강의를 국비지원으로 0원에 수강하세요!fastcampus.co.kr 단순한 반응형 웹사이트부터 스크롤 애니메이션, 패럴럭스 스크롤링 등 인터랙티브 웹을 만드는다양한 기술들을 배울 수 있는 강의였고, 커리큘럼을 보니 canvas와 three.js를여러 실습을 통해 다뤄볼 수 있는 점이 마음에 들어서 이 강의를 수강하기로 결정했다. HRD-Net 과..
🚩 이 글은 [웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인] 강의를 들으며 정리한 내용입니다. Parallax Scrolling 이란?: 레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법이다. 예시 사이트https://www.firewatchgame.com/ parallax scrolling 기법을 구현하는 방법은 2가지가 있다. 1) 자바스크립트를 이용하는 방법 const div1 = document.getElementById("div-1");const div2 = document.getElementById("div-2");window.addEventListener("scroll", (e) => { div1.style.transform =..
🚩 이 글은 한빛미디어 유튜브의 [컴퓨터 공학 기초 강의] 혼자 공부하는 컴퓨터 구조+운영체제 강의를 보고 정리한 글입니다. 컴퓨터 구조 - 컴퓨터가 이해하는 정보 -- 데이터 -- 명령어 - 컴퓨터의 네 가지 핵심 부품 -- CPU -- 메모리 (주기억장치) -- 보조기억장치 -- 입출력장치 1️⃣ 컴퓨터가 이해하는 두 가지 정보 컴퓨터는 결국 명령어를 처리하는 기계이다. 데이터는 명령어를 위한 일종의 재료이다. 1) 데이터 : 숫자, 문자, 이미지, 동영상과 같은 정적인 정보 - 컴퓨터와 주고받는 정보, 컴퓨터 내부에 저장된 정보를 데이터라 통칭하기도 한다. - 0과 1로 숫자를 표현하는 방법 - 0과 1로 문자를 표현하는 방법 2) 명령어 : 컴퓨터를 실질적으로 움직이는 정보 2️⃣ 컴퓨터의 네 가..
1️⃣ MQTT 란? MQTT는 IoT, 산업용 IoT(IIoT) 및 M2M(machine to machine) 애플리케이션에 광범위하게 사용되는 ISO 표준 발행-구독 기반 메세징 프로토콜(protocol)이다. 공식 문서에서 MQTT에 대한 요약은 아래와 같다.MQTT is a Client Server publish/subscribe messaging transport protocol. It is lightweight, open, simple, and designed so as to be easy to implement. These characteristics make it ideal for use in many situations, including constrained environments ..