React.js에서 Esc 키로 Tab 닫기
Esc 키로 Tab 닫기 이벤트 핸들러로 key down을 체크합니다. 키가 눌렸을 때 esc키가 맞는지 체크합니다. 123456const keyDownHandler = (event) => { if (event.keyCode === 27) { event.preventDefault(); window.close(); &#
카테고리: frontend
Apply Absolute For Create React App
Create React App의 절대경로 설정경로를 src폴더 기준으로 상대경로(../../../component/user)에서 절대경로(component/user)로 변경하는 방법에 대해 알아보려고합니다. 절대경로 설정CRA프로젝트 루트에 jsconfig.json파일을 생성 후 다음과 같이 작성합니다. 123456{ "compilerO
React Native Android APK
Android 앱 설치를 위한 apk 파일 생성 방법1. key storeAndroid용 apk를 만드려면 keystore 파일이 필요합니다. 따라서 keystore파일을 만들겠습니다. 1keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize
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 Native Navigation Header Hide
React Native Navigation Header HideReact Native에서 Navigation의 Header를 숨기는 방법에 대해 설명드리겠습니다. 설정 방법우선 React Native의 Navigation의 기본 설정은 여기를 참고하시기 바랍니다. tsx1234567891011121314151617import * as React from '
React Native Android setting
React Native Android 설정React Native의 React Native CLI Quickstart설정에 대한 정리입니다. 설치방법Java Development Kithomebrew를 이용하여 JDK를 설치합니다. 만약 JDK를 이미 설치 한 경우 JDK의 버전이 8이상인지 확인하시기 바랍니다. 12brew tap AdoptOpenJDK&#
React Native iOS setting
React Native iOS 설정React Native의 React Native CLI Quickstart설정에 대한 정리입니다. 설치방법XcodeXcode는 macAppStore에서 설치 할 수 있습니다.Xcode가 설치완료되면 Xcode를 실행 후 command + ,를 이용하여 환경설정을 열어줍니다.Locations탭에서 Command Line To
React Native initial setting
React Native 초기 설정React Native의 React Native CLI Quickstart설정에 대한 정리입니다. 설치방법Node & Watchmanbrew를 이용하여 node와 Watchman을 설치하겠습니다. 이미 node가 설치되어 있다면 Watchman만 설치하시면 됩니다. 하지만 node의 버전이 8.3이상인지 확인 바랍니다
React에서 Font Awesome 사용하기
Font Awesome 이란?Font Awesome은 웹페이지에서 소개된 바와 같이 인기있는 아이콘 세트 및 툴킷이라고 합니다. svg로 된 아이콘을 무료로 제공하여 사용 할 수 있습니다. react-fontawesome패키지를 이용하겠습니다. 설정방법1npm i --save @fortawesome/fontawesome-svg-core @fortawes