도리쓰에러쓰

1. CORS란? CORS는 SOP(Same-Origin Policy; 동일 출처 정책)를 위한 에러이다. 💡 SOP(Same-Origin Policy; 동일 출처 정책) - 출처가 동일한 프로토콜, 포트번호, 도메인에서만 자원을 사용 가능하도록 하는 보안정책 아래 사진처럼 CORS 에러는 요청 브라우저에서 다른 도메인(프로토콜, 포트번호)을 가진 서버로 요청할 때 브라우저에서 발생하는 보안정책이다. 즉, 요청한 출처와 API의 서버 출처가 다르기 때문에 브라우저에서 CORS 에러가 생기는 것이다. ❓ 출처가 다른 경우는 어떤 경우일까 1️⃣ 프로토콜이 다른 경우 (http ▶ https는 가능하지만 반대의 경우엔 에러 발생) 2️⃣ 도메인이 다른 경우 (www.google.com ▶ www.naver...

구글 개발자 도구 ▶ Lighthouse 에서 페이지 속도 측정을 하여 최적화 점수를 알아낼 수 있다. 페이지 로드되는 속도를 빠르게 하기 위해선 개발자가 할 수 있는 일은 무엇이 있을까? 1. Webpack 사용 1️⃣ 파일 용량 압축 2️⃣ 모듈 번들링을 통한 파일 개수 감소 2. Image Lazy Loading : 화면에 실제로 이미지가 보여져야할 때 이미지를 다운로드하여 CSS, JS보다도 먼저 다운로드하게 함. 3. Lazy Component import { lazy } from 'react'; const AvatarComponent = lazy(() => import('./AvatarComponent')); const DetailsComponent = () => ( ) - 첫화면에 보이지 않..

1. 커스텀 Hook이란? 개발자가 스스로 커스텀 한 Hook을 말한다. ❓왜 커스텀 Hook을 제작하여 사용할까 1️⃣ 코드의 중복을 줄여 코드 가독성이 높아진다. 2️⃣ 재사용성을 높인다. 3️⃣ 변경사항이 있을 때 커스텀 Hook만 수정하면 되기 때문에 효율적으로 관리할 수 있다. 2. 코드 예시 커스텀 Hook을 사용할 때는 항상 use로 시작해야 한다. 아래 코드를 확인하여 useFetch()라는 이름의 커스텀 Hook을 확인해보자. import { axios } from ‘axios’; import { useState, useEffect } from ‘react’; const useFetch = (initialUrl: string) => { const [url, setUrl] = useStat..

1. useReducer() 상태를 업데이트할 때 useState()를 주로 사용했는데 useReducer()로도 상태 업데이트가 가능하다. useReducer()를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 우선 reducer는 현재 상태와 액션 객체를 파라미터로 받아와 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer에서 반환되는 상태는 컴포넌트가 지닐 새로운 상태이다. 여기서 action은 업데이트를 위한 정보를 가지고 있다. action의 예시는 아래 코드를 참고하면 좋을 것 같다. // 카운터에..

밑줄 친 단어는 Dictionary를 확인하세요 ! 💡 Dictionary 1. DNS(Domain Name System) - 웹사이트의 IP 주소와 URL을 연결해주는 시스템 - 사용자가 외우기 힘든 IP 주소 대신 URL로 쉽게 사이트 주소를 찾을 수 있도록 도와준다. - 인터넷 전화번호부와 같다. 2. DNS(Domain Name Server) 서버 - 할당된 도메인 영역에 대한 정보를 가지고 있는 서버 - 주로 도메인을 IP 주소로 변환한다. 3. DNS 리커서(DNS Recursor) - 인터넷의 다른 DNS 서버에 답변을 요청하여 의도된 도메인 이름의 적절한 IP 주소를 찾는 일을 한다. 4. DNS 룩업(Lookup) - DNS 서버에서 인터넷 도메인 이름을 사용해 IP주소를 알아내는 과정 ..

리액트 성능 최적화하는 방법을 알아보기 전에 컴포넌트가 리렌더링 되는 조건을 알고 지나가야 할 것 같다. 📍 컴포넌트 리렌더링 조건 1️⃣ 부모에서 전달받은 props가 변경될 때 2️⃣ 부모 컴포넌트가 재렌더링될 때 3️⃣ 자신의 state가 변경될 때 리액트의 성능 최적화를 위해선 불필요한 렌더링을 막을 필요가 있다. 지금부터 리액트의 성능 최적화 7가지에 대해 정리하겠다. 1. useMemo() useMemo()는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 React Hooks 중 하나다. useMemo()는 메모이제이션(Memoization)된 값을 반환한다. 💡 메모이제이션(Memoization) :: 연산의 결과값을 메모리에 저장해두고 동일한 입력이 들어오면 재사용하는 기법 만약 컴포넌트 ..

1. 브라우저란? 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램 브라우저는 유저가 선택한 자원을 서버로부터 받아와 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들은 렌더링 과정을 통해 유저에게 보여준다. 2. 브라우저 렌더링 과정 1️⃣ Parsing단계 :: HTML 파일과 CSS 파일을 파싱하여 각각 Tree를 만든다. - HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성 - 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행 2️⃣ Style단계 :: 두 Tree를 결합하여 Ren..

1. 라이프사이클(Lifecycle) 이란? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그래서 각각의 컴포넌트에는 라이프사이클(=수명 주기)가 존재한다. 컴포넌트는 생성(mounting) ▶ 업데이트(updating) ▶ 제거(unmounting)의 생명주기를 갖는다. 위 이미지는 라이프사이클(Lifecycle)을 나타낸 것이다. 라이프사이클(Lifecycle)이 업데이트될 때 아래 링크를 참고하여 확인해보는 것이 좋을 것 같다. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 2. 라이프사이클(Lifecycle)의 분..