카테고리: react

React.js에서 Esc 키로 Tab 닫기

Esc 키로 Tab 닫기 이벤트 핸들러로 key down을 체크합니다. 키가 눌렸을 때 esc키가 맞는지 체크합니다. 123456const keyDownHandler = (event) => { if (event.keyCode === 27) { event.preventDefault(); window.close(); &#

Apply Absolute For Create React App

Create React App의 절대경로 설정경로를 src폴더 기준으로 상대경로(../../../component/user)에서 절대경로(component/user)로 변경하는 방법에 대해 알아보려고합니다. 절대경로 설정CRA프로젝트 루트에 jsconfig.json파일을 생성 후 다음과 같이 작성합니다. 123456{ "compilerO

styled-components에서 css 변수 사용

styled-components에서 css 사용하기styled-components를 사용하면서 공통된 css가 있을 수 있습니다. 자주 사용하는 css를 변수로 선언하고 styled-components에서 재사용 할 수 있습니다. 사용방법1234567import { css } from 'styled-components';export con

React Router (Link)

React Router DomReact Router Dom을 이용하여 링크를 변경하는 방법에 대해 포스팅하겠습니다. 사용방법1npm i react-router-dom react-router-dom패키지를 설치합니다. 1npm i react-router-dom @types/react-router-dom typescript의 경우 위 두 개의 패키지를

React에서 Font Awesome 사용하기

Font Awesome 이란?Font Awesome은 웹페이지에서 소개된 바와 같이 인기있는 아이콘 세트 및 툴킷이라고 합니다. svg로 된 아이콘을 무료로 제공하여 사용 할 수 있습니다. react-fontawesome패키지를 이용하겠습니다. 설정방법1npm i --save @fortawesome/fontawesome-svg-core @fortawes

create-react-app에서 Typescript로 개발하기

create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해주는 모듈입니다.이 패키지 모듈을 이용하면 Webpack이나 Babel을 설치하고 셋팅하는 복잡한 과정을 생략 할 수 있습니다.Typescript를 이용한 create-react-app 설정방법에 대해 설명드리도록 하겠습니다. Typescript란?설정 방법 이전에

create-react-app

create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해주는 모듈입니다. 이 패키지 모듈을 이용하면 Webpack이나 Babel을 설치하고 셋팅하는 복잡한 과정을 생략 할 수 있습니다. 설치방법1npm install -g create-react-app 위 코드를 터미널에서 실행하여 create-react-app모듈을 전역에