전체 글

웹 성능 최적화 - 기초, 분석 툴

인프런 '실전 웹 성능 최적화' 강의를 듣고 정리해 봤다. 해야하는 이유 사용자가 떠나지 않도록 FE 개발자로서 경쟁력 웹 성능 결정 요소 로딩 성능 (리소스 불러오기) 렌더링 성능 (리소스 화면에 그리기) 흐름 분석 -> 최적화 -> 결과 확인 분석 툴 성능 측정시에는 local이 아닌 production빌드 기준으로 검사한 것을 기준으로 해야한다. 크롬 Network 탭 어떤 리소스를 다운로드 요청했는지, 걸린 시간, 응답등을 확인할 수 있다. 크롬 Performance 탭 페이지가 로드되면서 실행되는 작업들을 타임라인과 차트 형태로 보여줌 history 보기 : 상단 드롭다운을 활용해 이전 검사 내역도 볼 수 있다. system 관련한 작업 안 보기 : 내 코드와 관련 없는 시스템 관..

리액트 프로젝트 폴더 구조

https://www.youtube.com/watch?v=UUga4-z7b6s&list=LL&index=2 Junior vs Senior React Folder Structure - How To Organize React Projects - Web Dev Simplified 강의를 듣고 정리해봤다. 구조 assets : 공통으로 사용하는 .css , 이미지 등 components : 공통으로 사용하는 컴포넌트 ui, form 디렉토리를 따로 둬서 관심사 별로 분리 context : 공통으로 사용하는 컨텍스트 data : 공통으로 사용하는 데이터 ex) 리덕스, 리코일 등의 상태 저장소, json 파일, 상수 등 features : 특정 주제(ex) auth, user, stats)에 관한 componen..

조건부 타입과 맵드 타입, 유틸리티 타입

조건부 타입 조건부타입이란 입력된 제네릭 타입에 따라 타입을 결정하는 타입이다. type Condition = T extends A ? B : C 위 타입은 T가 A에 할당 가능하면 타입은 B가 되고 그렇지 않으면 C가 된다. 조건부 타입을 활용해서 아래와 같이 타입 판별을 하는 타입을 구현할 수 있다. type IsString = T extends string ? true : false 분산 조건부 타입 T extends A 에서 T(제네릭이)가 유니온 타입인 경우 조금 다르게 작동한다. 해당 타입이 A에 할당가능한지를 검사하지 않고 유니온의 각 요소가 A에 할당가능 한지를 검사한다 type Exclude = T extends U ? T : never /// 예시: type A = Exclude 아래 ..

useIntersectionObserverRef 커스텀 훅 만들기

IntersectionObserver는 무한 스크롤 or 이미지 lazy loading 등 다양한 곳에서 활용할 수 있다. react, typescript 환경에서 쉽게 IntersectionObserver를 활용할 수 있는 커스텀 훅을 제작했다. Typing interface UseIntersectionObserverRefProps { readonly callback: IntersectionObserverCallback readonly options?: IntersectionObserverInit readonly type?: 'callback' | 'ref' } export const useIntersectionObserverRef = ({ callback, options = { root: null, ..

나만의 react boilerplate 만들기 - (3) TypeScript로 전환

기존 JS -> TS로 환경설정을 변경했다. 패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app 명령어: npx fe-jhw-create-react-app [project name] TS 설치 typescript 4.4.2버전을 설치했다. 최신버전인 4.9.4는 내 개발환경과 제대로 호환이 되지 않아 쓸 수 없었다. 그래서 현재 CRA가 사용하고 있는 4.4.2버전을 선택했다. webpack config 설정 fork-ts-checker-webpack-plugin 을 추가했다. 번들시에 타입검사를 별도의 프로세스에서 실행하여 빌드 성능을 향상시키는 플러그인이다. 기본적으로 tsconfig의 설정을 참조한다. tsconfig 설정 { "compil..

통계자동화 솔루션 개발 회고

개요: 팀 ITO에서 사용하는 통계 조회, 엑셀 파일 제작 자동화를 수행하는 솔루션 개발 기한: 2023-01.01~ 2023-01.26 (1달) 맡은 역할: 프론트엔드 전체 개발 (프론트엔드 총 1명) 사용 기술: TypeScript, React, HTML, CSS 개발 개발 환경 설정 CRA를 사용해서 기본 개발 환경을 설정했다. 환경변수를 활용해서 .env.development , .env.production으로 분리하여 개발, 배포시 서버 URL 등을 선언하고 사용했다. 디자인 시스템 디자인 시스템으로 Ant-design 5.1.6을 선택해서 최신 버전 Chrome에서 개발을 진행했다. 어느정도 개발이 진행되고 사내망(크롬 버전이 70~80으로 매우 낮음)에서 번들된 파일을 배포해서 테스트했을 때..

타입 가드

타입 가드 타입 가드는 특정 스코프 내의 타입을 보장하도록 런타임 체크를 수행하는 표현식이다. - 타입스크립트 공식문서 타입가드를 if에 조건으로 걸어서 런타임에서 코드가 실행될때 해당 if절에서 타입을 좁혀서 실행할 수 있다. 사용자 정의 타입 가드 type Ori = { kwak: () => void } type Dog = { wall: () => void } type Animal = Ori & Dog const chundungOri: Animal = {kwak: () => console.log("꽥")} const sabsalGae: Animal = {wall: () => console.log("삽살")} const isDog = (animal: Animal): animal is Dog => { r..

함수형 프로그래밍과 에러처리

패캠의 "TypeScript를 활용한 함수형 프로그래밍 온보딩"의 함수형 프로그래밍 4,5,6강을 듣고 정리해봤다. 함수형 프로그래밍에서는 부수효과를 찾아내고, 분리해서 공통적인 방법으로 추상화한다. 1) map을 활용해서 공통적인 부수효과를 격리해서 다룬다. map(f): Array => Array효과와 계산을 분리 // 명령형 프로그래밍 function list() { let html = ''; // 값 변경하는 부수효과 for(let i = 0; i item(c))} ` }map은 제네릭으로 구현해서 다양한 functor에 적용할 수 있다. (ex: Array, Option, Try 등) type map = (functor, A=>B) => functor2) Option을 활용해 예외..