14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈14.1 리액트에서 발생하는 크로스 사이트 스크립팅 (XSS)XSS : Cross-Site Scripting웹사이트 개발자가 아닌 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점사용자가 입력할 수 있고 이 입력을 다른 사용자에게 보여줄 수 있는 경우 발생사용자가 프론트엔드 개발자처럼 script도 실행될 수 있으면 쿠키를 획득해 사용자 정보(토큰)를 탈취할 수 있음❓리액트에서의 XSS 이슈는 어떻게 발생하나?14.1.1 dangerouslySetInnerHTML propdangerouslySetInnerHTML브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법사용자가 입력한 내용을 브라우저에 표시하는 용도로 사용_ ..

12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표12.1 웹사이트와 성능사용자가 웹사이트 방문 시 기대하는 사항웹사이트를 방문한 목적을 쉽게 달성해야 함위 목적을 달성하는 시간이 짧아야 함개인정보 누출 등의 사고 X ,보안 철저이러한 목적만 잘 달성된다면 웹사이트의 기술은 사용자에게 중요하지 않음.최신 기술을 활용하더라도 결국엔 사용자가 느끼는 성능이 가장 중요한 것웹사이트의 성능과 사용자 경험 사이의 상관관계로딩 속도가 빠를수록 구매율 증가로딩이 늦어질수록 전환률 감소페이지 로드 시간 0 ~ 2초 사이가 가장 높은 전환율 달성사용자가 민감한 성능소비자 70%가 커머스 사이트 방문에 영향빠르게 로딩할 수 있으면 애니메이션, 동영상 X구글 웹 사이트 성능에 관한 통계전체 웹페이지를 표시하는데 필요한..

10장 리액트 17과 18의 변경 사항 살펴보기10.1 리액트 17 버전 살펴보기호환성이 깨지는 변경 사항을 최소화한 것이 가장 큰 특징리액트 16 버전에서 17버전으로 업그레이드할 수 있도록 함10.1.1 리액트의 점진적인 업그레이드주 버전 업데이트 : 더 이상 호환되지 않는 API나 이전 버전과 작동 방식이 다른 경우버전이 바뀌는 경우 전체 웹 서비스가 새로운 버전으로 완전히 업그레이드 되거나 현재 버전에 머물러 있어야 함리액트 17버전부터는 기존 버전과 새로운 버전을 혼용해서 사용할 수 있도록. 즉 점진적으로 적용할 수 있도록 함 (한 번에 버전 업그레이드하기에 부담스러운 경우)10.1.2 이벤트 위임 방식의 변경onClicknoop 이라는 핸들러 추가noop (no operation) : 아무 일..

9장 리액트 개발 도구로 개발 및 배포 환경 구축하기9.1 Next.js로 리액트 개발 환경 구축하기create-react-app과 create-next-app은 각각 리액트, 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI(Command Line Interface) 도구애플리케이션 구축에 필요한 대부분의 작업을 대신해 주기 때문에 프로젝트 구조를 공부하기는 어려움9.1.1 create-next-app 없이 하나씩 구축하기1️⃣ package.json 생성2️⃣ Next.js 실행에 필요한 라이브러리 설치3️⃣ devDependencies에 필요한 패키지 설치npm init npm i react react-dom nextnpm i @types/node @types/react @types/react-dom..

8장 좋은 리액트 코드 작성을 위한 환경 구축하기좋은 코드를 작성할 수 있는 환경을 구축해 보자8.1 ESLint를 활용한 정적 코드 분석정적 코드 분석코드의 실행과는 별개로 버그를 야기할 수 있는 코드를 찾아내서 사전에 수정하는 것JS에서 가장 많이 사용되는 것이 ESLint8.1.1 ESLint 살펴보기📍ESLint는 어떻게 코드를 분석할까 ??JS 코드를 문자열로 읽는다.JS 코드를 분석할 수 있는 parser로 코드를 구조화한다. ✨구조화한 트리를 AST(Abstract Syntax Tree)라 하며, 이 AST를 기준으로 각종 규칙과 대조한다.규칙과 대조했을 때 위한반 코드를 알리거나(report) 수정한다(fix)espreeJS 분석하는 파서JS 코드를 JSON으로 생성된 트리로 변환소스코드..

7장브라우저 개발자 도구 : 브라우저 환경에서 발생할 수 있는 문제 디버깅할 수 있는 도구7.1 크롬 개발자 도구란 ?보기 → 개발자 도구각종 확장 프로그램으로 인해 시크릿, 프라이빗 모드인 개인정보 보호 모드에서 실행 권장순수 웹피이지 관련 정보만 확인 가능7.2 요소 탭(Element)HTML, CSS 정보7.2.1 요소 화면직접 코드 수정도 가능하여 바로바로 스타일을 수정해 볼 수 있음중단 위치 : 중단 관련 작업 일어날 때마다 해당 요소 변경 일으킨 소스코드 조회 가능7.2.2 요소 정보스타일 : 클래스, 아이디 , 스타일 파일계산됨: 요소 크기, 패딩, 보더, 마진 등레이아웃 : CSS 그리드나 레이아웃DOM 중단점 : 중단점 여부📍 중단점자바스크립트의 실행이 중단되는 코드 내 지점실행이 중지..

6장 리액트 개발 도구로 디버깅하기리액트 개발 도구 react-dev-tools6.1 리액트 개발 도구란 ?리액트로 만들어진 애플리케이션 디버깅6.2 리액트 개발 도구 설치브라우저 확장 프로그램 사용개발 모드에서 리액트 로고가 빨간색인 경우 리액트 개발 도구가 접근할 수 있다는 의미배포 환경에서는 파란색6.3 리액트 개발 도구 활용하기components, profiler6.3.1 컴포넌트components 탭현재 리액트 애플리케이션의 컴포넌트 트리 확인props와 내부 hooks📍컴포넌트 트리전체 트리 구조기명 함수로 선언돼 있으면 해당 컴포넌트명, 익명 함수로 선언돼 있다면 Anonymous기명 함수 : 함수 선언식, 함수 표현식memo를 통해 익명 함수 컴포넌트를 감싼 경우 함수명을 명확히 추론하지..

5장 리액트와 상태 관리 라이브러리5.1 상태 관리는 왜 필요한가 ?💡상태어떤한 의미를 지닌 값지속적으로 변경될 수 있는 값URL, UI, form, 서버에서 가져온 데이터💡리액트에서의 Tearing 현상UI상에서 tearing이란 동일한 상태값에서 다른 값들이 표현되는 것react적으론, 애플리케이션의 상태가 비동기적으로 업데이트될 때 UI의 다른 부분이 일관성 없는 상태를 보이는 현상상태가 변경되고 있지만 이 변화가 모든 UI 컴포넌트에 반영되지 않는 문제5.1.1 리액트 상태 관리의 역사✅ Flux 패턴의 등장기존 리액트에서의 MVC 패턴뷰(HTML)가 모델(JS)를 변경, 모델(JS)이 뷰(HTML)를 변경양방향 데이터 바인딩으로 인한 사이드 이펙트가 발생, 예측 불가능 등의 문제단방향으로 데..