lyuna's story

12장 발표자료

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

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

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

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

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