Home

2019
Js / Tslib

날짜 라이브러리 moment.js 사용법

시작하기날짜를 손쉽게 다룰수 있는 moment.js의 사용법을 알아보겠습니다. 설치하기라이브러리를 moment.min.js파일로 다운로드를 하거나npm i moment --save로 설치를 할 수 있습니다. 사용하기많이 사용하는 기능위주로 설명하겠습니다. 123import moment from 'moment';moment() // 현재날짜값을 가져옵니다.

etcetc

Postman 포스트맨 사용하기

시작하기포스트맨은 api 를 테스트하기위해 사용하는 편리한 도구입니다.프론트엔드 백엔드 상관없이 모두 사용합니다. 설치포스트맨 다운로드 링크: https://www.getpostman.com/downloads/ 홈페이지로 들어가서 OS에 맞는 postman을 다운 받습니다. 로그인구글계정이 있는 관계로 구글 로그인으로 접속했습니다.기존값으로 화이트모드로 되

frontendreact

React-i18next/i18n 다국어 적용하기

시작하기웹사이트를 제작할때 다국어를 지원해야하는 경우가 있습니다.이때 사용하는 라이브러리로 i18n이 있습니다.의미로는 internationalization (“I18N”) / 국제화 라고합니다.i와 n사이에 18글자가 있어서 i18n 이라는 명칭입니다. 리액트 i18next를 연동해보도록 하겠습니다. 패키지 설치패키지를 설치합니다.npm install

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 서브모듈을 이용해서 설치