FE/리뷰

크로스 사이트 스크립팅(XSS)웹 애플리케이션에서 가장 많이 보이는 취약점 중 하나웹사이트 개발자가 아닌 제3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점이 취약점은 일반적으로 게시판과 같이 사용자가 입력을 할 수 있고, 이 입력을 다른 사용자에게 보여줄 수 있는 경우에 발생함악성 스크립트가 실행 되면, 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있으며 쿠키를 획득해 사용자의 로그인 세션 등을 탈취하거나 사용자의 데이터를 변경하는 등 각종 위험성이 있음 리액트에서의 XSS 이슈dangerouslySetInnerHTML props특정 브라우저 DOM의 innerHTML을 특정한 내용으로 교체할 수 있는 방법일반적으로 게시판과 같이 사용자나 관리자가 입력한 내용을 브라우저에 표시하는 ..

애플리케이션에서 확인하기create-react-app을 통해 만들어지는 reportWebVitals파일web-vitals라이브러리로 누적 레이아웃 이동, 최초 입력 지연, 최초 콘텐츠풀 페인트, 최대 콘텐츠풀 페인트, 첫 바이트까지의 시간 측정 가능create-next-app을 통해 만들어지는 앱의 성능 측정 메서드 NextWebVitalsMetric핵시 지표 외에도 Next.js에 특화된 사용자 지표 제공Next.js-hydration : 페이지가 서버 사이드에서 렌더링되어 하이드레이션하는 데 걸리는 시간Next.js-route-change-to-render : 페이지가 경로를 변경한 후 페이지를 렌더링을 시작하는 데 걸리는 시간Next.js-render : 경로 변경이 완료된 후 페이지를 렌더링하는 ..

사용자가 웹사이트에 접속했을 때 공통적으로 기대하는 사항웹사이트를 방문한 목적을 손쉽게 달성할 수 있어야 함첫 번째 목적을 달성하는 데 걸리는 시간이 짧아야 함웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저해야 함  웹사이트의 성능1초 내로 로딩되는 사이트는 5초 내로 로딩되는 사이트보다 전자상거래 전환율이 2.5배 더 높음0 ~ 5초의 범위에서, 1초 로딩이 늦어질수록 전환율은 4.42%씩 떨어짐페이지 로드 시간이 0~2초 사이인 페이지에서 가장 높은 전환율을 달성할 수 있음소비자의 70%는 페이지 속도가 온라인 커머스 사이트를 방문하는 데 영향을 미침 핵심 웹 지표(Core Web Vital)구글에서 만든 지표로, 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어..

Next.js 13app 디렉터리 등장/pages로 정의하던 라우팅 방식이 /app 디렉터리로 이동함파일명으로 라우팅하는 것이 불가능해짐 => 폴더명까지만 주소로 변환됨layout.js페이지의 기본적인 레이아웃 구성하는 요소해당 폴더에 layout이 존재하면 그 하위 폴더 및 주소에 모두 영향을 미침주소별 공통 UI 포함할 수 있음_app과 _document를 대신해 웹페이지를 시작하는 데 필요한 공통 코드를 삽입할 수 있음단, layout예약어를 필수적으로 사용해야 함children을 props로 받아서 렌더링 해야함page.jslayout을 기반으로 위와 같은 리액트 컴포넌트를 노출함error.js해당 라우팅 영역에서 사용되는 공통 에러 컴포넌트특정 라우팅별 서로 다른 에러 UI를 렌더링할 수 있음에..

리액트 17점진적인 업그레이드를 지원하기 위한 리액트의 일부 컴포넌트를 다른 버전으로 변경 가능이벤트 위임 방식의 변경기존 16에서는 이벤트 위임이 모두 document에서 수행 => 이미 모든 이벤트가 document에 있으므로 e.stopPropatation() 실행이 무색함17부터는 리액트 컴포넌트 최상단 트리인 루트 요소로 바뀜import 구문 없이도 JSX 변환 가능import React가 필요 없고, 불필요한 import문을 삭제해 번들링 크기를 약간 줄일 수 있음이벤트 풀링 제거이벤트 풀링 : SyntheticEvent 풀을 만들어서 이벤트가 발생할 때마다 가져오는 것이벤트 핸들러 내부에서 이벤트 객체에 접근할 때 비동기든 동기든 상관없이 일관적으로 코딩할 수 있음useEffect 클린업 함..

CI코드의 변화를 모으고 관리하는 코드 중앙 저장소에서 여러 기여자가 기여한 코드를 지속적으로 빌드하고 테스트해 코드의 정합성을 확인하는 과정전체 소프트웨어의 정합성을 확인하기 위한 작업(테스트, 빌드, 정적 분석, 보안 취약점 분석)을 자동으로 실행해야 함  깃허브 액션깃허브 저장소를 기반으로 CI를 구축하고자 할 때 매우 유용하게 사용할 수 있음러너파일로 작성된 깃허브 액션이 실행되는 서버특별히 지정하지 않으면 공용 깃허브 액션 서버를 이용별도의 러너를 구축할 수 있음액션러너에서 실행되는 하나의 작업 단위yaml 파일로 작성된 내용을 하나의 액션으로 볼 수 있음이벤트깃허브 액션의 실행을 일으키는 이벤트pull requestissuespushschedule : 저장소에서 발생하는 이벤트와 별개로 특정 ..

정적 코드 분석코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사정에 수정하는 것자바스크립트 생태계에서 가장 많이 사용되는 정적 코드 분석 도구는 ESLint  ESLint의 코드 분석 방법자바스크립트 코드를 문자열로 읽음자바스크립트 코드를 분석할 수 있는 파서(espree)로 코드를 구조화함2번에서 구조화한 트리를 AST라 하며, 이 구조화된 트리를 기준으로 각종 규칙과 대조함규칙과 대조했을 때 이를 위반한 코드를 알리거나 수정함 ESLint 패키지eslint-plugin : 특정 프레임워크나 도메인과 관련된 규칙을 모아놓은 패키지 eslint-plugin-import : import와 관련된 규칙 제공 eslint-p..

브라우저 개발자 도구일반적인 브라우저 환경에서 발생할 수 있는 문제를 디버깅할 수 있는 도구웹사이트를 불러올 때 발생하는 거의 대부분의 작업을 기록하고, 또 이와 관련된 많은 기능을 제공함  크롬 개발자 도구요소 탭현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있음요소 화면현재 웹페이지를 구성하는 HTML을 나타냄이중 원하는 태그를 클릭하면 브라우저 페이지의 해당 요소가 강조되고, 해당 태그와 관련된 정보 확인 가능웹페이지의 DOM을 직접적으로 수정하면 프로덕션으로 개발된 페이지에서 수정된 내용을 바로 확인 가능DOM 요소를 선택해 디버깅 위치를 설정할 수도 있음요소 정보스타일 : 요소와 관련된 스타일 정보계산됨 : 해당 요소의 크기, 패딩, 보더 마진과 각종 CSS 적용 결과값..