기존 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 = `..

CRA 분석 CRA는 리액트 개발환경을 명령어 한 줄로 만들어주는 편안한 도구이다. 그러나 config 설정을 변경하기 어렵고, 다양한 개발환경을 커버하기 위해서 좀 무거운 감이 있다. webpack.config.js target: ['browserlist'] target으로 webpack이 어떤 환경을 대상으로 할지 정할 수 있다. node 이면 node 환경, electron이면 electron 환경, browserlist는 browserlist-config에 설정된 환경 정보를 가져와서 타게팅한다. browserlist-config는 package.json의 browserslist 속성에 있다. "browserslist": { "production": [ ">0.2%", "not de..

기존에는 개발환경을 구성하기 위해서 react-boilerplate 리포지토리를 클론하고 .git파일을 삭제해야 했다. 너무 번거로운 작업이라 CRA처럼 npx fe-jhw-create-react-app 명령어 1줄 입력으로 개발환경 구성이 가능하게 만들었다. 패키지 주소: https://www.npmjs.com/package/fe-jhw-create-react-app 명령어: npx fe-jhw-create-react-app [project name] 참고한 글: https://velog.io/@jjunyjjuny/React-TS-boilerplate-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-npx 왜 npx? npx를 사용하면 최신버전 패키..

React Boilerplate FE 개발환경에 대해서 공부해보고, CRA에서 불필요한 부분은 덜어내고, 필요한 부분(ex: webpack-bundle-analyzer, MSW)을 추가하여 리액트 개발환경을 설정해봤다. https://github.com/fe-jhw/react-boilerplate 특징 zero-install: 클론 후 패키지 설치 없이 바로 사용할 수 있다. mocking: MSW가 포함되어 api들을 mocking해 사용할 수 있다. behavior-driven-test: react-testing-library를 활용한 유저 행동 기반 UI 테스팅 환경이 구성되어 있다. bundle-analyze: webpack-bundle-analyzer를 활용해 빌드시 번들 분석 정보를 확인할 수..