Category: frontend

2019
frontendreact

React-helmet을 이용한 검색 최적화

시작하기검색 최적화를 위한 방법으로 ssr, nextjs, helmet등이 있습니다.이번 포스트에서는 helmet에 대한 내용을 다루도록하겠습니다.헬멧은 일반 HTML 태그를 사용하여 일반 HTML 태그를 출력합니다.매우 간단하고, React 초보자에게 친숙합니다.리액트 헬멧 Github 설치npm install --save react-helmet @typ

frontendreact

React Element 복제하기

시작하기j쿼리의 경우 clone을 사용하여 간단하게 카피를 할 수 있습니다.리액트에서는 어떻게 해야하는지 알아보도록 하겠습니다. Element를 복제해보도록 하겠습니다. 사전준비복제를 하기위해 복제 대상인 element를 만들어 줍니다. App.tsx123456789101112import React from 'react';const App: React.FC

frontendreact

React-router-dom 적용하기

시작하기리액트 싱글페이지 SPA(Single page application)에서 다른페이지로 이동하고 싶을때 사용하는 라이브러리입니다.create-react-app에서 라우터를 사용해 보겠습니다. 설치npm install react-router-dom @types/react-router-dom 라우터 설정index.tsx12345678910111213imp

frontendreact

React 프로젝트 GitHub Pages로 배포하기

시작하기리액트 프로젝트를 github pages를 이용해서 배포해보도록 하겠습니다.프로젝트 생성방법은 이전포스트(create-react-app 타입스크립트 사용하기)를 참고하면 됩니다. 깃헙에서 저장소를 하나 만듭니다.저는 react-deploy-pages라는 이름의 저장소를 만들었습니다. create-react-app react-deploy-pages -

frontendreact

React+Express+Socketio를 이용한 채팅구현

시작하기socket은 실시간으로 사용자와 상호작용을 하는 경우 사용합니다.가장 대표적인 예시로 채팅을 들수있습니다. Socket.io하나의 서버에서 정보를 내보내고 해당 정보를 다수의 클라이언트에서 받습니다. 초기 설정백엔드 서버를 먼저 설정하고 리액트 프로젝트를 설정하겠습니다. Node.js + Express터미널1234567mkdir socket-bac

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