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

타입 가드 타입 가드는 특정 스코프 내의 타입을 보장하도록 런타임 체크를 수행하는 표현식이다. - 타입스크립트 공식문서 타입가드를 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를 활용해 빌드시 번들 분석 정보를 확인할 수..

인프런 프론트엔드 개발환경의 이해와 실습 강의(린트)를 듣고 정리해봤다. 린트 코드의 오류, 스타일을 점검하고 일부 수정한다. 포맷팅 ex) 들여쓰기, 코드 라인 최대 너비 코드 품질 ex) 전역변수 자제, 사용하지 않는 변수 쓰지 않기 환경 설정 .eslintrc.js 파일로 환경설정을 할 수 있다. // .eslintrc.js module.exports = { rules: { "no-unexpected-multiline": "error", }, } rules에 규칙들을 적용한다. 값은 "off", "warn", "error" 3가지이다. 규칙목록 규칙들 중 자동 수정이 가능한 것들이 있다. extends 바벨의 프리셋처럼 잘 설정해놓은 config들을 가져다 쓸 수 있다. // .eslintrc.js..