Tag: frontend

React에서 Fontawesome 사용하기

시작하기고해상도의 아이콘을 손쉽게 사용할수 있는 라이브러리입니다.리액트에서 fontawesome을 사용하겠습니다. 패키지 설치React-fontawesome 패키지를 설치합니다.react-fontawesome npm npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-ic

create-react-app에서 env/환경변수 사용하기

시작하기환경변수를 사용해야하는 경우가 있습니다.Redux devtool을 예로 들수있습니다. 개발자의 경우에는 디버깅시에 필요하지만 사용자는 보면 안되는 데이터가 있을수 있습니다.production 과 development에 따라 구분해서 보여줄 필요가 있습니다. create react app은 환경변수를 사용하기 위해서 dotenv(https://www

Axios get progress (react + redux + axios)

시작하기React에서 백엔드와 통신하기 위해서 fetch, axios등을 이용합니다.axios에서 데이터파일 post혹은 get을 지원하지만,request와 response 진행상황에 대한 progress는 지원하지 않습니다.그러기에 axios, react, redux를 이용하여 api의 진행상황을 나타내는 컴포넌트를 만들어 보겠습니다. axiosProgr

Redux에 typesafe-actions 적용하기

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

create-react-app 타입스크립트 사용하기

설치하기리액트 프로젝트를 시작하기 위해서는 바벨, 웹팩등을 설정해야합니다.초기 설정에 많은 시간이 걸립니다.create-react-app을 통해 초기 설정 시간을 단축 할 수 있습니다.리액트의 사용법은 리액트 공식문서를 통해 배울수 있습니다. 123npx create-react-app my-app --typescriptcd my-appnpm run star