Web Study/React 관련16 웹 페이지 최적화의 종류 최적화의 종류 로딩 성능 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때 성능 다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 것에 중점, 코드를 분할하여 차등을 두어 다운로드하는 방법 등을 사용 렌더링 성능 리소스를 가지고 화면을 그릴 때의 성능 자바스크립트 코드에 크게 영향이 있고 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터렉션의 자연스러움이 달라진다. 브라우저의 기본 동작 원리나 사용하는 프레임워크 라이프사이클 등의 이해가 필요 최적화 툴 Squoosh 웹에서 서비스 되는 이미지 압축 도구 간편하게 이미지 포맷이나 사이즈를 변경 가능 (Resize, Compress) compress의 압축 포맷과 Quality 를 70~80 정도로 변.. 2023. 7. 25. Custom Hooks 리액트 컴포넌트 설계에 대해 정리하다가 커스텀 훅에 대해 접하게 되었고, 로직과 UI를 분리하면 좋을 것 같아서 정리해본다. 비슷한 로직이 여러 컴포넌트에서 사용될 때 주로 사용 중복되는 로직을 유틸 함수와 같은 느낌으로 커스텀 훅을 만들어서 최소화시킬 수 있다. 커스텀 훅 만드는 법 중복되는 로직을 넣기 파일 이름을 useXXX 로 만든다(약속) // 예 useInput라는 input태그를 위한 state와 onChange 함수를 묶어줌 import { useState, useCallback } from "react"; export default (initialValue = null) => { // state 정의 const [data, setData] = useState(initialValue ); .. 2023. 7. 21. React 컴포넌트 설계에 대해.. 컴포넌트의 개념 시스템을 구성하는 요소 중 하나의 단위로써, 공통되는 부분을 모듈화하여 재사용할 수 있는 단위, 데이터를 보여주기 위한 UI 요소이다. 설계를 위한 원칙 확장성 재사용성 관심사에 따른 코드 분리 단일 책임 원칙 의존성을 컴포넌트가 직접 참조하지 않고 외부로부터 주입 역할은 드러내고 구현은 감추기 - 순수함수 선언형 프로그래밍 무엇을 할 것인가에 초점을 두고 결과만 기술하여 어떻게 해야하는지는 기술하지 않는 프로그래밍 기법 의도에 집중한 프로그래밍 방법 / 단방향 데이터 바인딩 처리 명령형 프로그래밍 무엇을 어떻게 할 것인가 리액트의 공식문서 상 선언형 프로그래밍 된다고 기재됨 설계를 잘하면 리액트는 데이터가 변경될 때 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다. ex. React.l.. 2023. 7. 18. Vite 공식 문서 - 기본 설정하기 https://ko.vitejs.dev/guide/features.html Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 한글화 해주신 분이 누군지 모르겠지만 공식 문서가 정말 깔끔하게 잘 되어있다. 감사합니다...! CRA 만 사용하다가 Vite 를 쓰니 아직은 차이가 클 정도로 큰 프로젝트를 한 적은 없어서 체감은 안되지만, 빠르다고 명성이 자자한 Vite, 공식 문서를 차근히 읽어나가며 공부해보기로 한다. 기존의 CRA 와 Vite 를 비교한 것은 바로 전의 글로 정리했다. Vite 가 지원하는 기능 HMR 기본적으로 ESM 을 통하여 HMR API 를 제공한다. HMR, Hot Module Replacement 로 페이지를 다시 로드하거나 애플리케이션 상태를 날려버리지 않.. 2023. 6. 20. 이전 1 2 3 4 다음
