Next.js 14 버전의 패치노트를 보면 Partial Prerendeing(PPR)이라는 것을 Preivew 단계로 소개하고 있습니다. 간단한 설명으로는 정적 리소스의 빠른 응답과 동적인 컨텐츠의 스트리밍이라고 표현하고 있는데 오묘한 느낌이라 제대로 이해하기 위해 해당 방식을 찾아보았습니다. 앞으로는 Partial Prerendering은 PPR이라고 표현하겠습니다. PPR이란? PPR은 하나의 페이지에서 static한 부분은 사용자에게 바로 보여주고, dynamic한 부분은 fallback을 보여주다가 컴포넌트의 준비가 끝나면 해당 컴포넌트를 보여주게 됩니다. 하나의 페이지에서 static, dynamic한 렌더링을 새로운 API를 학습할 필요 없이 더욱 빠르게 제공할 수 있게 해줍니다. PPR은 ..
2장 간단한 프로토콜 HTTP 2.1 HTTP는 클라이언트와 서버 간에 통신을 한다 리소스를 요청하는 쪽이 클라이언트, 리소스를 제공하는 쪽이 서버가 된다. HTTP는 클라이언트와 서버의 역활을 명확히 구분하고 있다. 2.2 리퀘스트와 리스폰스를 교환하여 성립 HTTP는 반드시 클라이언트로부터 통신이 시작되고 그 결과가 서버로부터 돌아온다. 서버측은 리퀘스트를 수신하지 않으면 리스폰스가 발생하는 경우는 없다. 2.3 HTTP는 상태를 유지하지 않는 프로토콜이다 HTTP는 상태를 유지하지 않는 stateless 프로토콜이다. 이전에 보냈던 리퀘스트나 리스폰스에 대해서는 전혀 기억하지 못한다. 로그인 상태를 유지하는 등 상태를 유지하기 위해 쿠키라는 기술이 도입되었다. 2.4 리퀘스트 URI로 리소스를 식별..
1장 웹과 네트워크의 기본에 대해 알아보자 1.1 웹은 HTTP로 나타낸다 웹 브라우저에 www.naver.com을 입력하면 우리는 네이버라는 웹 페이지를 볼 수 있다. 입력란에 지정된 URL을 통해 네이버 서버로부터 index.html이라는 리소스를 받게 되기 때문이다. 요청을 하는 웹 브라우저등을 클라이언트라고 하고 요청을 받아서 응답하는 쪽을 서버라고 한다. 클라이언트와 서버간의 통신은 HTTP라는 프로토콜을 기반으로 이루어진다. 1.2 HTTP는 이렇게 태어났고 성장했다. 1.2.1 웹은 지식 공유를 위해 고안되었다 1989년 3월에 HTTP는 탄생했다. CERN(유럽 입자 물리학 연구소)의 팀 버너스 리는 멀리 떨어져 있는 동료 연구자와 지식을 공용하게 할 수 있는 시스템을 고안하였는데 이것이 ..
2회차 6장 기본적인 리팩터링 함수 추출하기 function printOwing(invoice) { printBanner(); let outstanding = calculateOutstanding(); console.log('...'); console.log('...'); } function printOwing(invoice) { printBanner(); let outstanding = calculateOutstanding(); printDetails(outstanding); } function printDetails(outstating) { console.log(`채무액: ${outstanding}`); } 목적과 구현을 분리한다. 하나의 일, 하나의 책임만 갖도록 만들자. console.log를 어..
첫 번째 예시 공연료 청구서를 출력하는 코드 예시 import plays from "./plays.json"; import invoices from "./invoices.json"; function getInvoiceCustomer(customer) { return `청구내역 (고객명: ${customer})\\n`; } function statement(invoice, plays) { let totalAmount = 0; let volumeCredits = 0; let result = `청구내역 (고객명: ${invoice.customer})\\n`; // let result = getInvoiceCustomer(invoice.customer); const format = new Intl.NumberF..
2주차에서 나눈 얘기를 간단하게 정리해보았습니다. 내게 맞는 무대를 찾기 위한 이직 계획 세워보기 1. 이직을 계획한다면 어떤 회사를 가고 싶은지 - 원팀인 회사, 비즈니스 임팩트에 집중하는 회사, 인재 밀도가 높은 회사 2. 내가 원하는 환경은 어떤 포인트가 있는것 같은지 - 훌륭한 동료들이 있는 곳, 도전 과제들이 많은 곳, 노력에 대한 보상이 따르는 곳 지금의 회사, 다음 회사에서 이루고 싶은 나의 욕구 리스트 적어보기 - 회사 내의 동료들과 함께 스터디를 하고 제품에 바로 적용하는 싸이클 만들기 - 기획을 검증하기 위한 PoC를 빠르게 진행하여 회사의 비즈니스를 돕고 이모지 많이 받기 - 어려움이 있는 동료에게 먼저 다가가서 얘기를 나누고 내가 도울 수 있는 부분을 생각하고 실천하기 - 주변..
프론트엔드 개발을 하면서 우리는 다양한 비즈니스 로직을 다루고 있어요. 자바스크립트가 존재하지 않던 예전의 웹은 정말 UI만 다루고 있었다고 얘기할 수 있겠지만, 자바스크립트가 탄생하고 AJAX 프로그래밍을 통해 웹에서 서버와 통신을 하게 되면서 웹의 역할이 늘어나게 되었어요. 이제는 프론트엔드와 백엔드의 영역이 분리되었고 프론트엔드에서의 책임이 많이 증가하게 되었는데요. 그 책임중의 하나가 비즈니스 로직이라고 얘기할 수 있을 것 같아요. 우선 비즈니스 로직의 정의는 어떻게 내리면 좋을까요? 비즈니스 로직이란 현실 세상의 문제를 해결하는, 소프트웨어 기능의 핵심적인 처리를 담당하는 코드라고 얘기할 수 있을 것 같아요. 예를 들면 쇼핑몰에서의 주문하기, 블로그에서의 게시글 작성하기와 같은 기능들은 모두 비..
React에서 함수 컴포넌트가 도입된 이후 v16.8부터 다양한 hook들이 소개되고 있습니다. 그 중에서 상태를 관리하는 useState, useReducer와 같은 상태를 다루기 위해서 꼭 사용해야 하는 훅도 있지만 useCallback, useMemo, memo와 같이 겉보기 동작에는 전혀 영향을 주지 않는 훅들도 있습니다. 메모이제이션은 무엇일까? 사용하는 것과 사용하지 않는 것에 동작의 차이가 없다면 이 훅은 어떤 목적에서 사용되는 걸까요? 이미 알고 계시겠지만 React에서는 메모이제이션(Memoization)을 위해 사용하고 있습니다. 메모이제이션의 대한 위키를 찾아보면 '컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제..
