본문 바로가기

분류 전체보기

모던 리액트 딥 다이브 7. 크롬 개발자 도구를 활용한 애플리케이션 분석 크롬 개발자 도구란?크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 강력한 개발 도구 크롬 개발자 도구에서 웹사이트를 제대로 디버깅하고 싶다면 시크릿 모드 또는 프라이빗 모드라 불리는 개인정보 보호 모드에서 페이지와 개발자 도구를 여는 것을 권장한다.브라우저에 설치돼 있는 각종 확장 프로그램 때문이다. 브라우저 확장 프로그램은 웹페이지 방문 시 확장 프로그램의 실행을 위해 전역 변수나 HTML 요소에 실제 웹 애플리케이션이 제공하지 않은 다른 정보를 추가할 수 있다. 그리고 이러한 정보는 개발자가 추가한 정보가 아닐뿐더러 다른 사용자에게서는 볼 수 없는 정보로서 디버깅하는 데 방해가 된다.테스트 해보니 개발자 도구를 키면 전역 객체에 2개의 정보가 담겨 있다.리액.. 더보기
모던 리액트 딥 다이브 4.3 Next.js 톺아보기 리액트 서버 사이드 렌더링 프레임워크로 가장 많은 인기를 얻고 있는 Next.js를 살펴보자.설명은 pages router를 기준으로 한다.pages/_app.tsxdefault export로 내보낸 함수는 애플리케이션의 전체 페이지의 시작점이다.웹 애플리케이션에서 공통으로 설정해야 하는 것들을 여기에서 실행할 수 있다. _app.tsx에서 할 수 있는 내용은 다음과 같다.에러 바운더리를 사용해 애플리케이션 전역에서 발생하는 에러 처리reset.css 같은 전역 CSS 선언모든 페이지에 공통으로 사용 또는 제공해야 하는 데이터 제공 등여기서 서버 사이드 프레임워크의 특징을 확인할 수 있다. _app.tsx의 render() 내부에 console.log()를 추가해서 아무 메시지나 기록해 보자. 그리고 페.. 더보기
모던 리액트 딥 다이브 4.2 서버 사이드 렌더링을 위한 리액트 API 살펴보기 리액트는 애플리케이션을 브라우저의 window 환경이 아닌 Node.js와 같은 서버 환경에서만 실행할 수 있는 API도 제공한다. API를 확인해 보려면 리액트 저장소의 react-dom/server.js를 확인하면 된다. 여기에 있는 함수들이 무엇인지, 또 어떤 역할을 하는지 하나씩 살펴보자.renderToString인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자열로 반환하는 함수다. SSR을 구현하는 데 가장 기초적인 API로, SSR에서 최초의 페이지를 HTML로 먼저 렌더링한다고 했는데 바로 그 역할을 하는 함수가 renderToString이다.위 result는 다음과 같은 문자열을 반환한다.renderToString을 사용해 실제 브라우저가 그려야 할 HTML 결과로 만들어 낸 모습이.. 더보기
모던 리액트 딥 다이브 4.1 서버 사이드 렌더링이란? 먼저 서버 사이드 렌더링 애플리케이션과 반대되는 개념인 싱글 페이지 애플리케이션에 대해 먼저 살펴보자. 싱글 페이지 애플리케이션(Single Page Application)이란?싱글 페이지 애플리케이션이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. 최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브라우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글 페이지 애플리케이션이라고 한다.  SPA의 HTML 코드를 크롬의 소스 보기로 캡처한 모습분명히 .. 더보기
모던 리액트 딥 다이브 3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까? 리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 두 가지 방법이 있다. 바로 사용자 정의 훅(custom hook)과 고차 컴포넌트(higher order component)다. 사용자 정의 훅과 고차 컴포넌트를 알아보자.사용자 정의 훅(Custom Hook)리액트의 훅(useState, useEffect 등)을 기반으로 개발자가 필요한 훅을 만드는 기법이다.서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용된다. 이는 리액트에서만 사용할 수 있는 방식이다.혹의 규칙 중 하나는 기존 리액트 훅들처럼 이름이 반드시 use로 시작하는 함수를 만들어야 한다는 것이다.import { useEffect, useState } from "react";// HTTP 요청을 하는 사용자 정의 훅f.. 더보기
모던 리액트 딥 다이브 3.1 리액트의 모든 훅 파헤치기: 훅의 규칙 리액트에서 제공하는 혹은 사용하는 데 몇 가지 규칙이 존재한다. 이러한 규칙을 rules-of-hooks라고 하며 이와 관련된 ESLint 규칙인 react-hooks/rules-of-hooks도 존재한다.리액트 공식 문서에는 훅을 사용할 때의 규칙에 대해 정리해 뒀다.최상위에서만 훅을 호출해야 한다. 이 규칙을 따라야만 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 훅이 호출되는 것을 보장할 수 있다.훅을 호출할 수 있는 것은 리액트 함수형 컴포넌트, 커스텀 훅 두가지 경우뿐이다. 일반 자바스크립트 함수에서는 훅을 사용할 수 없다.이 규칙이 어떤 의미를 가지고 있는지 자세히 살펴보자. 앞서 useState의 구현에서 보여줬던 것처럼 훅에 대한 정보 저장은 리액트 어딘가에 있는 index와 같은 키를 기.. 더보기
모던 리액트 딥 다이브 3.1 리액트의 모든 훅 파헤치기 useContext, useReducer, uselmperativeHandle, useLayoutEffect useContext많이들 알고있는 props drilling을 극복하기 위해 Context가 등장했다.useContext는 상위 컴포넌트에서 만들어진 Context를 함수형 컴포넌트에서 사용할 수 있도록 만들어진 훅이다. 상위 컴포넌트에서 선언된 에서 제공한 값을 사용할 수 있게 된다.여러 개의 Provider가 있다면 가장 가까운 Provider의 값을 가져오게 된다.  다수의 Provider와 useContext를 사용할 때, 특히 타입스크립트를 사용하고 있다면 위와 같이 별도 함수로 감싸서 사용하는 것이 좋다.타입 추론에도 유용하고, 상위에 Provider가 없는 경우에도 사전에 쉽게 에러를 찾을 수 있다.useContext를 사용할 때 주의할 점useContext가 선언돼 있으면 Provider에.. 더보기
모던 리액트 딥 다이브 3.1 리액트의 모든 훅 파헤치기 useState, useEffect, useMemo, useCallback, useRef useStateuseState 혹의 기본적인 사용법을 살펴보자.인수로는 사용할 state의 초깃값을 넘겨준다. 아무런 값을 넘겨주지 않으면 초깃값은 undefined다.반환 값은 배열이며, 첫 번째 원소로 state 값 자체를 사용할 수 있고, 두 번째 원소인 setstate 함수를 사용해해당 state의 값을 변경할 수 있다.변경된 state 값이 반영되지 않는 예제위 코드에서 triggerRender을 통해 state를 업데이트해도 왜 렌더링이 되지 않을까?리액트의 렌더링은 함수형 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행된다고 했었다.즉, 매 렌더링마다 함수는 다시 새롭게 실행되고, state는 매번 hello로 초기화되므로 아무리 state를 변경해도 다시 hello로 초기화되는.. 더보기

티스토리툴바