리액트

React 라우터 사용

1. npm react-router react-router-dom 설치 적용하고자 하는 프로젝트로 이동 후 "npm install react-router react-router-dom" 입력 후 설치 npm install react-router react-router-dom 2. index.js에서 App을 BrowserRouter로 감싸기 import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 3. Routes 설정 import React, {useEffect} from "react"; import {Route, Route..

리액트 구글 홈페이지 - 1

리액트 처음 시작하는데 어떤 거 부터하지? 라는 고민 끝에 시작하게 된 구글 홈페이지 따라 만들기 인터넷 검색을 통해 CRA (Create React App)을 알게되었고, 아래와 같은 예시 화면을 얻을 수 있었다. 예시를 통해 코드를 분석을 했는데 생각보다 Vue.js와 비슷한 부분이 많아서 개념자체는 이해하기 쉬웠다. 그렇지만, Vue.js를 많이 사용하지 않아서 문법을 찾는데 생각보다 시간을 많이 사용했다. function SearchBar() { const [textArea, setTextArea] = useState(false); const textAreaEnter = () => { setTextArea(true); }; const textAreaOut = () => { setTextArea(f..

css input type에서 왼쪽, 위와 오른쪽, 아래 색이 다른 경우

위 사진과 같이 왼쪽 위와 오른 쪽 아래가 다른 경우가 있다. 이 경우에는 style에서 solid를 지정하지 않아서 생기는 현상이다. 따라서 아래의 코드를 추가하면 해결이 된다. .My-border { border-style: solid; }

리액트 절대 경로 사용하기

CRA (Create React App) 기준으로 작성 1. 패키지에서 cross-env 설치 yarn add --dev cross-env 2. pakage.json에서 아래와 같이 수정 "scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "cross-env NODE_PATH=src react-scripts test", "eject": "cross-env NODE_PATH=src react-scripts eject" }, 3. jsconfig.json 생성 후 아래 코드로 절대경로 설정 { "compilerOptions"..