개발의변화

주로 정리할 내용은 다음과 같다 클라이언트와 서버에서의 라우팅 시스템 작동 방식 페이지 간 이동 최적화 Next.js가 정적 자원을 제공하는 방법 자동 이미지 최적화와 새로운 Image 컴포넌트를 사용한 이미지 제공 최적화 기법 컴포넌트에서 HTML 메타데이터 처리 _app.js와 document.js 파일 내용 및 커스터마이징 방법 라우팅 시스템 React의 React Router라이브러리와의 차이는 React 라우팅 시스템은 클라이언트에서의 라우팅만 구현할 수 있다. 모든 페이지가 클라이언트에서만 만들어지고 렌더링 되기에 SSR렌더링은 개입하지 않는다. Next.js는 파일시스템 기반 페이지와 라우팅을 사용 Next.js는 기본적으로 pages/ 디렉터리를 가지고 있다. 이 디렉터리 안의 모든 파일은..

SSR 하이드레이션(hydration) 서버 측에서 생성한 HTML페이지에 클라이언트 측에서 실행하는 자바스크립트 코드를 추가해서 애플리케이션을 관리하고 렌더링하는 기법 즉, 서버 측에서 생성한 HTML 페이지를 구성하는 각각의 DOM 객체에 필요한 자바스크립트를 추가해서 클라이언트단에서 동적으로 렌더링 장점: 웹 사이트 호환성, SEO(웹 크롤러 같은 검색 엔진 웹 문서 수집기가 페이지를 렌더링할 필요가 없음) 단점: 클라이언트가 요청할 떄마다 페이지를 다시 렌더링할 수 있는 서버가 필요 -> SSR 애플리케이션이 더 많은 자원을 소모하고 더 많은 부하를 보이며 유지보수 비용도 증가, 페이지에 대한 요청을 처리하는 시간이 길어짐 항상 주의해야 하는 점은 Next.js가 빌드 시점에 정적으로 페이지를 만..

자바스크립트는 싱글스레드에서 동작한다. -> 자바스크립트는 한 번에 하나의 작업만 동기 방식으로만 처리할 수 있다. 싱글 스레드의 동기방식을 활용하게 되면 결국 많은 이벤트를 순차적으로 동작하기에 시간의 효율성이 떨어진다. -> 그렇기에 비동기 작업형태를 활용하여 싱글 스레드의 자바스크립트 구조를 보완을 하고 있다. 리액트는 또 어떠한가 -> 렌더링 스택을 비우는 방식으로 구현했던 동기식의 렌더링이 16버전에 접어들어 비동기식으로 작동하는 방법이 소개됨 프로세스는 무엇인가 -> 프로그램을 구동해 프로그램의 상태가 메모리상에서 실행되는 작업단위 스레드는 무엇인가 -> 하나의 프로세스에서는 여러 개의 스레드를 만들 수 있고, 스레드끼리는 메모리를 공유할 수 있어 여러가지 작업을 동시 수행 그렇다면 멀티스레드..

자바스크립트 동등비교 리액트로 코드를 짜다보면 렌더링의 문제가 골치 아픈데 특히 props의 변화를 체크하는 일이 쉽지 않았다. props의 동등비교는 객체의 얕은 비교(Shallow Copy)를 기반으로 이뤄지는데, 이 얕은 비교를 리액트가 어떻게 이해하는 지를 알아야 렌더링 문제를 잡을 수 있다. 1.1 자바스크립트 데이터 타입 자바스크립트는 총 7개의 원시타입과 1개의 객체타입을 가지고 있다. underfined : 변수를 선언한 후 값을 할당하지 않은 변수에 자동으로 할당되는 값 let foo; typeof foo === undefined; // true function bar(hello) { return hello; } typeof bar() === 'undefined' // tr..