Tag: typescript

2020
frontendDevEnv

webpack 이미지 설정

시작하기이전 포스트 웹팩설정에 이어서 프로젝트에서 이미지를 불러오려면 webpack에서 몇가지 설정을 해주도록 하겠습니다. 설치하기1npm install --save-dev file-loader file loader 패키지를 설치해줍니다. 설정하기webpack.config.js파일 모듈의 룰 부분에 file loader를 추가 해주도록 합니다. webpa

frontendDevEnv

webpack typescript 적용하기

시작하기이전 포스트를 통해 Babel과 webpack 기본 설정을 했습니다.이번 포스트에서는 기본설정에서 typescript를 적용하겠습니다. 설치하기1npm install --save-dev @types/react @types/react-dom typescript ts-loader 타입스크립트 관련 패키지를 설치해줍니다. 1npx typescript -

2019
frontendreact

Nextjs 에서 typescript 적용하기

시작하기서버사이드렌더링(server side rendering, SSR)를 손쉽게 구현할수 있는 프레임워크입니다.Typescript를 적용해서 사용해보도록 하겠습니다. 초기설정두가지 방법으로 설정을 할 수 있습니다. basic12345mkdir hello-nextcd hello-nextnpm init -ynpm install --save react reac

frontendreact

Redux에 typesafe-actions 적용하기

들어가면서기존에 redux actions룰 사용해왔었는데, 이번에 타입스크립트를 도입하게되면서사용할수록 타입정의에 번거로움을 느꼇습니다.그래서 타입정의를 용이하게 해주는 typesafe-actions으로 변경하였습니다. 기본 리덕스 초기 셋팅이 되어있는 상태에서 진행하도록 하겠습니다.counter 예제를 만들어 보도록 하겠습니다. 시작하기npm i type

frontendreact

Redux에 초기설정

들어가면서리액트의 데이터를 전역적으로 관리하기 위해 사용합니다.함수를 props의 props의 props등.. 계속 내리고 올리는 방법으로 사용하게되면 디버깅을 할때 복잡해질 뿐만아니라에러를 발생시킬수 있는 요인이 됩니다. 그러하기 때문에 리덕스를 사용하려고 합니다.리덕스를 간단하게 만화로 이해하기 시작하기파일 구조src/store 리덕스 폴더입니다.src