차이점 onKeyUp, onKeyDown 키를 누르고 떼는 동작 자체에 반응한다. 인식 가능 : 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter 인식 불가능 : 한/영, 한자, Print Screen onKeyUp, onKeyDwon는 keycode를 사용하여 특수키를 제외한 모든 키를 인식한다. onKeyPress 실제로 문자가 입력되었을 때 반응한다. 인식 가능 : 문자, 숫자 인식 불가능 : Ctrl, Shift, Tab, Alt, F1~F12, Scroll Lock, Pause, Enter, 한/영, Print Screen onKeyPress는 ASCII 값으로 사용되서 shift, ctrl 같은 키는 인식하지 못한다. keyCode //..
프로젝트를 진행하면서 크롬 개발자 도구에서 console.log()를 확인할 경우 console 창에 2번 출력되는 경우가 있다. 왜 2번씩 출력되는 것인가? 그 이유를 구글에서 확인할 수 있었다. Strict Mode console.log가 2번 출력되는 이유는 프로젝트의 src/index.js 파일에서 태그 때문이다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다. 즉, 잠재적인 문제가 있는지 확인하기 위해서! 또한, Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다. ★ StrictMode는 아래와 같은 부분에서 도움이 된다..
구글폰트를 적용하는 방법은 2가지가 있다. import로 불러와 적용하는 방법 다운로드 받은 후 프로젝트 안에 폰트를 넣는 방법 1번의 방법은 매번 import 해오기 때문에 랜더링시 좀 더 느리다고 한다. 때문에 직접 다운로드하여 사용하는 방법을 적용 해보기로 했다. 1. 구글 폰트 사이트에서 원하는 폰트를 선택하여 다운받는다. 구글 폰트 사이트 : https://fonts.google.com/ 2. 폰트를 모아놓을 폴더를 만들어 저장한다. 폴더 위치는 자유롭게 가능하다. ex) src/fonts/폰트.ttf 3. App.css 파일 안에 사용할 폰트들을 불러온다. 저장한 font를 어디에서나 사용할 수 있게 최상단 파일인 App에 정의했다. @font-face { font-family: [사용할 폰트..
리엑트 components를 생성하고 Route를 사용하여 링크를 연결하려고 했는데 오류가 발생했다. import './App.css'; import Home from "./components/Home"; import Parking from "./components/Parking"; import Search from "./components/Search"; import {BrowserRouter, Switch, Route} from "react-router-dom"; function App() { return ( ); } export default App; 처음에는 구글링을 하여 Switch로 route를 구현했는데 react-router-dom에는 없는 기능이라는 오류가 발생했다. 다시 검색을 해보니 ..
