Front End
-
[React] A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.Front End/React 2021. 11. 25. 17:36
ㅋㅋㅋㅋㅋㅋㅋㅋ 에러문구가 시키는대로 로 감싸주었는데도 해결 못하셔서 찾아오신분들 환영합니다. 'react-router-dom' 라이브러리가 버전 업데이트가 됬어요...! 의 매개변수 이름이 변경되었습니다..! # 해결방법 (2021. 11. 25 기준) 1. 최신버전에 맞게 작성한다. (공식 doc 이나, 설치된 라이브러리 코드를 뜯어본다.) //home1 은 작동안하고 //home2 는 작동한다.. // :D......... 2. 이전 버전을 설치하여 사용한다. # React-router-dom V6 React Router | Overview Declarative routing for React apps at any scale reactrouter.com
-
[React] npx create-react-app 에러 (404 에러 해결방법)Front End/React 2021. 11. 25. 17:24
오랜만에 리액트를 쓰려고 하다가 404 에러를 직면했다. (404 에러는 요청한 페이지가 없다는 http response 이다.) 즉, 해당 레파지토리 주소를 찾을 수 없어서 생기는 현상인데 그새 주소 이전이 발생한 것 같다. # 해결방법 1. npm config set registry [변경된주소] // 변경된 주소를 정확히 안다면 해당커멘드로 해결가능하다. 2. npm cache clean--force 후, npm rebuild // 이 후, npx create-react-app 이 정상적으로 작동한다. # 추가 지식 1. npm install -g 로 cra 를 설치해놓으면 저런 현상을 마주할리 없다. // 해당시기 최신버전을 다운받아 라이브러리를 전역으로 이용 2. 대신 npm 은 버전 업데이트 ..
-
[React] Can't resolve 'react-router-dom' 해결 방법Front End/React 2021. 11. 25. 17:05
직역하면 [ 'react-router-dom'을 찾을 수 없습니다 ] 정도 인데, 라이브러리 파일을 찾을 수 없어 나타나는 현상이다. react-router-dom 은 리액트(create-react-app) 패키지에 포함되어 있지 않다. 리액트와는 다른영역을 다루는 라이브러리기에 추가 설치를 해주어야 한다. 설치만 하면 해당 현상은 해결된다. # 설치법 npm i -s react-router-dom # react-router-dom 변경사항 (2021. 11. 25 기준) 1. Route 컴포넌트를 이제는 Routes 컴포넌트로 필히 감싸주어야 한다. 2. Route 컴포넌트의 매개변수 compent 가 element 로 바뀌었다. (이건 선넘었지...) //home1 은 작동안하고 //home2 는 작..
-
[React] withRouter & JS로 SPA 방식 라우팅Front End/React 2021. 10. 12. 16:02
# withRouter Higher-order Component 로 라우터에 의해서 호출된 컴포넌트가 아니어도 match, location, history 객체에 접근 가능하게 해준다. 하위 컴포넌트에서 상위 계층간의 거리가 멀어도 match, location, history를 안전하게 받을 수 있다. (props 로 열심히 전달하지 않아도 된다.) # JS로 SPA 방식으로 라우팅하기 + withRouter 사용 예시 로 넘겨 줘도 되나, 계층간의 거리가 멀어지면 해당방식은 오류의 근원이 됨. // src/pages/Login.jsx import LoginButton from '../components/LoginButton'; export default function Login() { return (..
-
[React] 라우팅 (Route, Link, NavLink, Switch) + QueryParameterFront End/React 2021. 10. 12. 14:18
# • path : 해당 path 에 접근 시, 설정된 component나 render 함수를 실행 * :변수명 을 사용하여 변수를 URL에 삽입가능 • keyword exact : 정확히 path에 일치할때만 component 를 render • component : 해당 path 에 접근 시, component render • render : 인자로 함수를 받으며, 해당 path에 접근 시, render 함수 실행 (따라서, 논리연산이 필요한 작업은 render를 사용) * component 와 render를 같이 사용 시, component가 우선권을 가져 render는 실행되지 않음 # • html의 a 태그(anchor)를 조작하여, 해당 URL로 진입시 서버에서 리소스를 리로딩하지 않고 SPA..
-
[React] 리액트의 라우팅과 SPA(Single Page Application)Front End/React 2021. 10. 12. 13:47
# SPA(Single Page Application) SPA 가 아닌 Application 은 Client인 Browser 에서 서버에 지속적으로 요청하여 새로운 리소스들을 불러옴 SPA 는 필요한 리소스들을 초기에 한번에 불러오고 난 후, 라우팅등이 발생하면 Client(Browser) 단에서 동적으로 페이지를 작성하여 서버의 부하를 줄여주며, 서버로 부터 리소스를 받는 작업들을 줄이기 때문에 페이지의 반응도 빨라짐. SPA 에서는 Form 태그를 지양 # 라우팅 (Routing) • react-router-dom 을 이용하여 라우팅을 한다. (create-react-app 에 내장된 패키지가 아님, 따라서 설치 필요) • Facebook 공식 패키지는 아니나, 가장 대표적인 리액트 라우팅 패키지. ..
-
[React] 유용한 리액트 관련 익스텐션 및 플러그인 모음Front End/React 2021. 10. 12. 13:18
1. React Developer Tools (Chrom Extension) - 크롬 개발자 도구 수준에서 react-component 제어 가능 React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 20ca9b565 on 10/8/2021. chrome.google.com 2. ESLint - create-react-app 에 설치된 내장기능 - 사용자가 정의한 규칙대로 js파일이 작성되었는지 확인해줌 - VScode 또는 node.js 로 따로 설치가능 ESLint - Pluggable JavaScript linter Customize Preprocess code, use ..