모던 리액트 Deep Dive 스터디 23

12장 발표자료

12.1 웹사이트와 성능 리액트가 훌륭한 프레임워크라고 해도, 웹사이트 성능이 떨어지면 서비스 이용자들에게 좋은 평가를 받기 어렵다.모든 서비스와 마찬가지로 웹사이트의 성능은 사용자의 경험과 직결되며, 이는 개발자가 신경 써야 할 중요한 요소이다. 구글은 요즘의 웹사이트의 성능에 대해 다음과 같은 내용의 글을 남기기도 했다.전 세계 사용자의 대부분이 모바일을 3G가 아닌 4G로 사용하고 있음에도 불구하고, 대부분의 모바일 사이트는 여전히 느리고 너무 많은 요소 때문에 비대해졌다.  결국 웹사이트 성능은 조직의 목표 달성과도 연결되므로, 개발자는 이를 최우선 과제로 삼아야 한다. 12.2 핵심 웹 지표란? 핵심 웹 지표 (외국에서는 Core Web Vital로 알려져 있다) 란 구글에서 만든 지표로,웹사이..

12장 - 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

12.1 웹사이트와 성능 리액트가 아무리 좋은 프레임워크라고 해도,그 중요성을 제아무리 설파하더라도 웹사이트의 성능이 뒤떨어지면 개발자를 제외한 실제 서비스 이용자들의 호응을 얻기 어렵다. 모든 서비스가 그렇듯 웹 서비스도 마찬가지로 사용자가 느끼는 성능이 제일 중요하다. 구글은 요즘의 웹사이트의 성능에 대해 다음과 같은 내용의 글을 남기기도 했다.전 세계 사용자의 대부분이 모바일을 3G가 아닌 4G로 사용하고 있음에도 불구하고, 대부분의 모바일 사이트는 여전히 느리고 너무 많은 요소 때문에 비대해졌다.  웹사이트 개발자라면 웹사이트의 성능에도 주의를 기울여야 한다.웹사이트 성능 또한 개발자의 책임이며, 웹사이트의 성능은 조직이 이루고자 하는 목표와 직결된다고 봐도 무방하다.   12.2 핵심 웹 지표란..

11장 - Next.js 13과 리액트 18

11.1 app 디렉터리의 등장 Next.js의 아쉬운 점으로 평가받던 것 중 하나가 바로 레이아웃의 존재다.13버전 이전까지 모든 페이지는 각각의 물리적으로 구별된 파일로 독립돼 있었다. 페이지 공동으로 무언가를 집어 넣을 수 있는 곳은  _document 와 _app이 유일하다.그나마도 이 파일들은 서로 다른 목적을 지니고 있다. 이전의 Next.js 12 버전까지는 무언가 페이지 공통 레이아웃을 유지할 수 있는 방법은 _app이 유일했다. 그러나 이 방식은 _app에서밖에 할 수 없어 제한적이고, 각 페이지별로 서로 다른 레이아웃을 유지할 수 있는 여지도 부족하다. 이러한 레이아웃의 한계를 극복하기 위해 나온 것이 Next.js의 app 레이아웃이다. 11.1.1 라우팅 기존 /pages로 정의하던..

10장 - 리액트 17과 18의 변경 사항 살펴보기

10.1 리액트 17버전 살펴보기10.1.1 리액트의 점진적인 업그레이드 리액트 16에서 17로의 업데이트는 기존 16버전에서 더 이상 호환되지 않는 API가 있거나 새로운 리액트 17을 사용하는 데 있어 이전과 작동 방식이 달라질 수 있기 때문에 단행된 주 버전 업데이트다. 새로운 주 버전이 릴리스되면 이전 버전에서의 API제공을 완전히 중단해버리고, 전체 애플리케이션을 새롭게 업그레이드 하기를 요구한다. 그러나 이제 리액트 17 버전부터는 점진적인 업그레이드가 가능해진다.리액트 18로 업데이트 되어도 일부 기능에 대해서는 리액트 17을 사용하는 것이 가능해진다. 이러한 점진적인 업그레이드를 지원하기 위한 리액트의 일부 컴포넌트 변경이 리액트 17 업데이트의 주요 변경 사항 중 하나다.  10.1.2 ..

9장 발표자료

9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기 npm init으로 package.json 만들기react, react-dom, next 설치하기devDependencies에 필요한 패키지 설치하기typescript, @types/react, @types/react-dom, @types/nodeeslint, eslint-config-next 9.1.2 tsconfig.json 작성하기 tsconfig.json에 타입스크립트 설정을 해준다. 작성하기 전에  이렇게 JSON 최상단에 값을 넣으면 해당 JSON파일이 무엇을 의미하는지,어떤 키와 어떤 값이 들어갈 수 있는지 알려준다. 올바른 값이 선언돼 있다면 VS Code나 웹스톰 같은 IDE에서..

9장 - 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기

9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기 npm init으로 package.json 만들기react, react-dom, next 설치하기devDependencies에 필요한 패키지 설치하기typescript, @types/react, @types/react-dom, @types/nodeeslint, eslint-config-next 9.1.2 tsconfig.json 작성하기 tsconfig.json에 타입스크립트 설정을 해준다. 작성하기 전에  이렇게 JSON 최상단에 값을 넣으면 해당 JSON파일이 무엇을 의미하는지,어떤 키와 어떤 값이 들어갈 수 있는지 알려준다. 올바른 값이 선언돼 있다면 VS Code나 웹스톰 같은 IDE에서..

4장 - 서버 사이드 렌더링 발표자료

4.1.1 싱글 페이지 애프리케이션의 세상 싱글 페이지 애플리케이션이란? 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식. 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. 페이지 전환 시 새로운 HTML페이지를 요청하는 게 X자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 HTTP요청으로 가져온 다음,그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로 페이지가 전환된다.전통적인 방식의 애플리케이션과 싱글 페이지 애플리케이션의 작동 비교 과거에는 페이지 전환이 발생할 때마다 새롭게 페이지를 요청, HTML 페이지를 다운로드해 파싱 하는 작업을 거쳤다.>> 페이지를 처음부터 새로 그려야 ..

4장 - 서버 사이드 렌더링(2)

4.2.6 서버 사이드 렌더링 예제 프로젝트 index.tsx create-react-app의 index.jsx와 유사한 역할을 하는 애플리케이션의 시작점으로, hydrate가 포함돼 있다. 이 파일의 목적은 서버로부터 받은 HTML을 hydrate를 통해 완성된 앱 애플리케이션으로 만드는 것이다. hydrate는 서버에서 완성한 HTML과 하이드레이션 대상이 되는 HTML의 결과물이 동일한지 비교하는 작업을 거치기 때문에,이 비교 작업을 무사히 수행하기 위해 한 번 더 데이터를 조회한다. App.tsx 일반적으로 사용자가 만드는 리액트 애플리케이션의 시작점.todos를 props로 받는데, 이 props는 서버에서 요청하는 todos를 받는다.이 props.todo를 기반으로 렌더링하는 평범한 컴포넌트..

4장 - 서버사이드 렌더링

4.1.1 싱글 페이지 애프리케이션의 세상 싱글 페이지 애플리케이션이란? 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식. 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다.  페이지 전환 시 새로운 HTML페이지를 요청하는 게 X자바스크립트에서 다음 페이지의 렌더링에 필요한 정보만 HTTP요청으로 가져온 다음,그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로 페이지가 전환된다. 전통적인 방식의 애플리케이션과 싱글 페이지 애플리케이션의 작동 비교 과거에는 페이지 전환이 발생할 때마다 새롭게 페이지를 요청, HTML 페이지를 다운로드해 파싱하는 작업을 거쳤다.>> 페이지를 처음부터 새로 그려야 ..

크롬 개발자 도구를 활용한 애플리케이션 분석

7.1 크롬 개발자 도구란?크롬 브라우저에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 작업을 분석하고 디버깅할 수 있는 강력한 기능을 제공합니다. HTML, CSS, JavaScript를 포함한 다양한 요소를 실시간으로 확인, 수정하며 디버깅 과정을 간소화할 수 있어 웹 개발자들에게 필수적인 도구로 자리 잡고 있습니다.  7.2 요소 탭 (Elements)요소 탭은 현재 웹페이지를 구성하는 HTML과 CSS의 구조 및 스타일 정보를 제공하며, 이를 실시간으로 확인하거나 수정할 수 있는 공간입니다.  주요 기능 HTML 확인 및 수정: HTML 코드를 실시간으로 수정하여 변경사항을 바로 확인 가능.스타일 검사 및 수정: 특정 요소에 적용된 CSS 스타일 확인 및 수정.디버깅 지원: 중단점..