사전렌더링이 무엇인지에 앞서 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되면서 ..
🚩 이 글은 [웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인] 강의를 들으며 정리한 내용입니다. 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 =..
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 ..
Svelte에 대해서는 이런 프레임워크도 있구나 정도로 이름만 들어본 프레임워크인데 이번에 일하게 된 회사에서 Svelte를 사용한다고 해서 인프런 무료 강의를 통해 한번 입문해보기로 했다. Svelte 란? Rich Harris가 제작한 새로운 접근 방식의 프론트엔드 프레임워크이다. 첫번째 버전은 2016년에 릴리즈되었고, 2.0 버전은 2018년에 릴리즈되었는데 이 때까지는 React, Vue 등과 별로 다를게 없어서 큰 관심을 못 받았다고 한다. 2019년 릴리즈된 3.0 버전부터 많은 부분에 변화가 있었고 사람들의 관심을 끌게 되었다고 한다. 아래 URL을 들어가보면 설문조사를 통해 자바스크립트 기술들의 사용동향에 대한 설문조사 결과를 보면 현재도 꽤 인기있는 프레임워크라는 것을 알 수 있다. h..
웹 페이지를 개발할 때, 또한, defer 속성은 스크립트를 비동기적으로 로드하지만, DOMContentLoaded 이벤트가 발생할 때까지 스크립트의 실행을 지연시킨다. async 속성은 스크립트가 다운로드되는 즉시 실행되며, HTML 파싱을 차단하지 않는다.그러나 여러 스크립트가 있을 경우, 실행 순서는 보장되지 않는다는 것을 유의해야 한다. 2️⃣ 태그 내부 가장 하단에 작성하기 일반적으로 태그 의 끝부분에 스크립트를 끝 부분에 위치시키는 것과 끝 부분의 인라인 스크립트는 외부 스크립트를 끝에 배치하는 것과 비슷하게 페이지 내용이 로드된 후 스크립트가 실행되도록 보장한다. 정리하자면, 페이지의 성능 향상을 위해 큰 스크립트의 경우, 의 끝부분에 배치하거..
