Home

2019
etchexo

Hexo seo 검색엔진 최적화하기

시작하기hexo 블로그를 만든이후 구글 네이버 다음에서 검색이 되어야 사용자의 유입이 상승합니다.hexo의 경우 플러그인이 잘 되어있기 때문에 쉽게 할 수 있습니다.검색엔진 최적화(seo)하기 위해 몇가지 설정을 하겠습니다. 플러그인리스트 hexo-autonofollow hexo-auto-canonical hexo-generator-seo-friendly

etcetc

가상데이터 JSONPlaceholder 사용법

시작하기backend server가 없을때 임시로 가상 데이터를 만들어 api 테스트를 해볼수 있습니다. JSONPlaceholderJSONPlaceholder url을 통해 리소스를 불러올수 있습니다.JSONPlaceholder 홈페이지 APIJSONPlaceholder는 6가지의 기본 리소스를 가지고 있습니다. 123456/posts 100 posts/

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