Archive: 2019

2019
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

style

리액트에 부트스트랩(bootstrap) 사용하기

#시작하기부트스트랩은 ui프레임워크로 손쉽데 ui디자인을 구현할수 있습니다다React프로젝트에서 부트스트립을 사용해보도록하겠습니다.프로젝트 설치하기npm install react-bootstrap bootstrap로 패키지를 설치 합니다. Stylesheets중요 - 최상단의 루트파일인 src/index.js 또는 App.js 파일에 다음 스타일을 추가해

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

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