분류 전체보기

리액트 프로젝트 폴더 구조

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을 활용해 예외..

함수형 프로그래밍과 부수효과

패캠의 "TypeScript를 활용한 함수형 프로그래밍 온보딩"의 함수형 프로그래밍 부분을 듣고 정리해봤다. 함수형 프로그래밍과 부수효과 함수형 프로그래밍: 작은 순수함수로 프로그램을 분해하고 이를 합성해 프로그래밍 함수 합성해 복잡한 프로그램 쉽게 만들기 부수효과를 공통적 방법으로 추상화 부수효과 값 반환 이외에 부수적으로 일으키는 효과 변수나 상태 바꾸거나 수정 화면이나 파일에 데이터 쓰는 IO 작업 다른 부수효과가 있는 함수나 상태값에 의존 let c function dododo() {...} function doSomething(a, b) { c = 2 // 변수의 상태 바꾸거나 수정 dododo(c) // 다른 부수효과 있는 함수나 상태값에 의존 document.body.innerHTML = `..