React-study/dil27 [모던 리액트 Deep Dive] 4장 서버 사이드 렌더링 4.1 서버 사이드 렌더링이란?4.1.1 싱글 페이지 애플리케이션의 세상 싱글 페이지 애플리케이션이란?렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다.최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브라우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리하므로 싱글 페이지 애플리케이션이라고한다. 실제로 소스 보기로 HTML 코드를 봤을 때는 내부에 아무런 내용이 없다. 이는 사이트 렌더링에 필요한 내부의 내용을 모두 자바스크립트 코드로 삽입한 이후에 렌더링하기 .. 2025. 1. 10. [모던 리액트 Deep Dive] 마지막 15장 15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자중요한 대규모 업데이트가 있었전 리액트 16.8버전에 맞춰 라이브러리 등 원활한 지원을 위해 16.8.6이상으로 맞추는 것이 좋다.또 앞으로 새로운 기능 출시 및 호환성이 깨지는 변경 사항을 최소화하기 위해 17버전으로 가는 것 또한 좋다.하지만 굳이 클래스 컴포넌트에서 함수 컴포넌트로 변경할 필요는 없다. 15.1.2 인터넷 익스플로러 11 지원을 목표한다면 각별히 더 주의를 기한다.다음은 인터넷 익스플로러 11 을 지원하지 않는 대표적인 라이브러리다.리액트: 리액트는 18버전부터 인터넷 익스플로러 11 을 지원하지 않기로 했다.Next.js: Nex.. 2024. 12. 26. [모던 리액트 Deep Dive] 14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈 14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS) 웹사이트 개발자가 아닌 제3 자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점을 의미한다.script 가 실행될 수 있다면 웹사이트 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있으며, 쿠키를 획득해 사용자의 로그인 세션 등을 탈취하거나 사용자의 데이터를 변경하는 등 각종 위험성이 있다. 14.1.1 dangerouslySetlnnerHTMLprop특정 브라우저 DOM 의 innerHTML을 특정한 내용으로 교체할 수 있는 방법이다.dangerouslySetlnnerHTML은 오직 __ html 을 키를 가지고 있는 객체만 인수로 받을 수 있으며, 이 인수로 넘겨받은 문자열을 DOM에 그대로 표시하는 역할을 한다. 그러나 이 .. 2024. 12. 24. [모던 리액트 Deep Dive] 13장 웹페이지 성능을 측정하는 다양한 방법 13.1 애플리케이션에서 확인하기13.1.1 create-react-appreportWebVitals .ts 파일의 reportWebVitals 함수는 웹에서 성능을 측정하기 위한 함수다. 각각 누적 레이아웃 이동( CLS) , 최초 입력 지연(FID) , 최초 콘텐츠풀 페인트(FCP) , 최대 콘텐츠 페인팅 (LCP) , 첫 바이트까지의 시간(TTFB)을 측정하는 용도로 사용된다. 이러한 지표의 측정을 가능케 하는 것은 web-vitals 라이브러리 덕분이다. PerformanceObserver 라는 API 를 사용하는데 브라우저에서 웹페이지의 성능을 측정하기 위해 사용된다. ReportHandler는 단순히 성능 객체인 Metric 를 인수로 받는 함수 타입으로， Metric 을 원하는 대로 다룰.. 2024. 12. 21. [모던리액트 Deep Dive] 12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 12.1 웹사이트와 성능웹사이트의 성능은 어떻게 측정할 수 있을까?구글은 핵심 웹 지표(Core Web Vital)라고 하는， 웹사이트의 우수한 사용자 경험을 제공하는 데 필요한 몇 가지 핵심적인 요소를 꼽고 이에 대한 지표를 제시하고 있다. 12.2 핵심 웹 지표료란?구글에서 만든 지표로, 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어다. 최대 콘텐츠풀 페인트(LCP: Largest Contentful Paint)최초 입력 지연(FID: First Input Delay)누적 레이아웃 이됨 CLS: Cumulative Layout Shift)아래 두 가지는 핵심은 아니지만 특정 문제를 진단하는데 사용한다.최초 바이트까지의 시간 (TTFB : Time To First Byte).. 2024. 12. 20. [모던리액트 Deep Dive] 11장 Next.js 13과 리액트 18 11.1 app 디렉터리의 등장Next.js 12버전까지는 페이지 공통 레이아웃을 유지하려면 _app을 사용하는 것이 유일했다. 이 방식은 제한적이고 각 페이지별로 다른 레이아웃을 유지하는 방법이 부족했다. 이를 극복하기 위해 나온 것이 app 레이아웃이다./** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, experimental: { appDir: true, //이 옵션을 experimental 아래에서 활성화해야 한다. },}module.exports = nextConfig Next.js 13.4.0 버전 이하라면 next.config.js에 위와 같이 옵션을 활성화해야 app기반 라우팅을 사용할 수 .. 2024. 12. 10. [모던 리액트 Deep Dive] 10장 리액트 17과 18의 변경 사항 살펴보기 10.1 리액트 17 버전 살펴보기리액트 17버전은 16버전에서 더 추가된 기능은 없고 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화했다는 점이 가장 큰 특징이다. 10.1.1 리액트의 점진적인 업그레이드16에서 더 이상 호환되지 않는 API가 있거나 새로운 리액트 17을 사용하는 데 있어 이전과 작동 방식이 달라질 수 있기 때문에 단행된 주 버전 업데이트다.전체 애플리케이션 트리는 리액트17이지만 일부 트리와 컴포넌트에 대해서는 리액트18을 선택하는 점진적인 버전 업이 가능해진다. 한 애플리케이션 내에 여러 버전의 리액트가 존재하는 경우 예제 659p리액트 17 애플리케이션은 내부에서 리액트 16을 게으르게(lazy) 불러온다.불러오는 과정에서 리액트 16을 위한 별도의 루트 요소를 만.. 2024. 12. 9. [모던 리액트 Deep Dive] 9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 보호되어 있는 글 입니다. 2024. 12. 5. [모던리액트 Deep Dive] 7장 크롬 개발자 도구를 활용한 애플리케이션 분석 7.1 크롬 개발자 도구란? 크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다.시크릿 모드 또는 프라이빗 모드에서 개발자 도구를 여는 것이 좋다. 브라우저에 설치돼 있는 각종 확장 프로그램이 실행되지 않기 때문이다.7.2 요소 탭현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.7.2.1 요소 화면왼쪽 화면은 웹페이지를 구성하는 HTML을 나타낸다.원하는 태그를 클릭하면 브라우저 페이지의 해당 요소가 강조되고, 해당 태그와 관련된 정보를 확인할 수 있다.직접 코드를 수정하여 웹페이지에서 어떻게 보이는지 바로 확인할 수 있다.우클릭으로 중단 위치를 설정해 두면 중단과 관련된 작업이 일어날때 마다 브라우저가 렌더링을 중단하고 해당 요소 변경.. 2024. 11. 20. [모던 리액트 Deep Dive] 6장 리액트 개발 도구로 디버깅하기 6.1 리액트 개발 도구란?리액트 애플리케이션의 개발 도구인 react-dev-tools가 있다. 브라우저에 리액트 개발도구를 브라우저 확장 도구로 설치하여 사용할 수 있다. 설치하면 우측 상단에 리액트 로고가 표시돼있는데 회색이면 사용할 수 없고, 빨간색이면 정상 작동, 파란색이면 배포된 웹사이트도 사용할 수 있다는 뜻이다.6.2 리액트 개발 도구 설치https://ko.react.dev/learn/react-developer-tools React Developer Tools – ReactThe library for web and native user interfacesko.react.dev 6.3 리액트 개발 도구 활용하기6.3.1 컴포넌트 Components현재 리액트 애플리케이션의 컴포넌트 트리를.. 2024. 11. 18. [모던리액트 Deep Dive] 5장 리액트와 상태 관리 라이브러리 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장 양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함Action -> Dispatcher -> Model -> View 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미한다. 액션 타입과 데이터를 각 정의해 dispatcher로 전달한다.디스패처(dispatcher) : 콜백 함수 형태로 액션이 정의한 타입과 데이터를 모두 store로 보내는 역할을 한다.스토어(store) : 실제 상태의 값과 상태를 변경할 수 있는 메서드를 가지고 있다.뷰(view) : 리.. 2024. 11. 14. [모던 리액트 Deep Dive] 3장 리액트 훅 깊게 살펴보기 3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import { useState } from "react";const [state, setState] = useState(initialState); initialState에는 state의 초깃값을 넘겨준다. 아무런 값이 없으면 undefined다.useState 훅의 반환 값은 배열이며, 배열의 첫번째 원소로 state 값 자체를 사용할 수 있고, 두번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있다.useState의 클로저는 useState 내부에 선언된 함수(setState)가 함수의 실행이 종료된 이후에도(useState가 호출된 .. 2024. 11. 10. 이전 1 2 3 다음
