Archive: 2019

2019
frontendreact

React에서 Fontawesome 사용하기

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

frontendreact

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

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

frontendreact

Axios get progress (react + redux + axios)

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

frontendreact

Redux에 typesafe-actions 적용하기

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

frontendreact

Redux에 초기설정

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

etcgoogle

구글 애널리틱스 on Hexo

구글 애널리틱스 시작하기웹사이트의 트래픽관리등을 위해 hexo에 구글 애널리틱스를 적용하였습니다. 로그인https://analytics.google.com/구글 애널리틱스 사이트로 접속해서 로그인을 합니다. 이후 무료로 계정만들기를 선택합니다.구글 애널리틱스 사용을 위해 필요한 약관에 동의를 합니다. 파일 수정약관동의 이후 첫화면에 추적 ID ex)영어-

etchexo

hexo 테마 설치

Hexo 테마 설치하기hexo을 설치할시 기본적으로 landscape 테마가 설치 되어있습니다.hueman 테마를 설치할 예정입니다.Demo site : https://blog.zhangruipeng.me/hexo-theme-huemanGithub : https://github.com/ppoffice/hexo-theme-hueman 서브모듈을 이용해서 설치

etchexo

hexo 초기 설정

Hexo 블로그 시작하기hexohexo를 통해 간편하게 블로그를 만들 수 있습니다. 커멘드라인으로 간단하게 포스트를 생성할수 있습니다. 마크다운을 지원합니다. SEO 갬색이 용이하며, 다양한 테마를 지원합니다. npm를 사용합니다. 깃헙페이지로 호스팅가능합니다. 설치방법커맨드에서 다음을 입력합니다.$ npm install -g hero-cli 기본설정블

frontendreact

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

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