정리공간

1. 라우터 설치 npm i react-router-dom@5.2.1 2. BrowserRouter 적용. BrowserRouter: 웹 브라우저의 주소를 각 컴포넌트에 넘겨주어 현재 어느 주소를 보고있는지 알 수 있다. // index.js import { BrowserRouter } from "react-router-dom"; ReactDOM.render( , document.getElementById('root') ); // public/index.html의 id=rootfmf 가진 태그에 렌더링(연결)하겠다는 의미 3. Route로 페이지 컴포넌트 연결 Route: 주소창과 맞는 컴포넌트를 연결시킨다. exact: 기존의 포함하면 다 보여주는 것이 아닌, 주소와 완전 똑같은것만 보여준다. 1) r..

DOM이란 무엇일까? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 구글에 검색하면 위와 같은 설명을 볼 수 있다. 근데 잘 이해가 가지 않으니 하나하나 뜯어서 살펴보려고 한다. 1. 문서(Document) 말이 어렵게 느껴질 수 있지만 우리가 흔히 말하는 "문서"를 생각하면된다. 웹 페이지는 일종의 문서다. 세부적으로도 나눠지지만 쉽게 생각해서 웹 페이지 하나하나를 웹 문서라고 생각해보자. 이 문서는 웹 브라우저를 통해 해석되어 화면에 나타난다. 마치 프랑스어로 쓰여진 문서를 번역기를 통해 보여지는 거라고 생각하면 쉽다. 프랑스어로..

에서 파일 업로드 버튼을 만들었는데 너무 밋밋하고 버튼 이름을 커스텀할 수 없다. 업로드 버튼을 커스텀 하려면 기존의 태그를 숨긴 뒤, 새로만든 버튼에 연결해야 한다. 1. 기존에 만든 에 ref 추가 //ref를 사용하기 위해 useRef()라는 Hook함수를 사용한다. const fileRef= useRef(); *ref 란? 리액트에서 DOM에 이름을 붙이는 것. ref로 지정해둔 fileRef를 통해서 해당 함수를 실행할 수 있다. 2. CSS파일에서 해당 input태그 숨기기 .image_input { display: none; } 3. 새로 커스텀 버튼 만들기 그냥 일단 만들어봐! 4. 버튼에 연결된 함수 만들기 이 함수는 ref로 과 연결되있어서 input태그를 대신 누르게 된다. const..

이미지와 파일 업로드는 input태그를 사용한다. function Home() { const [imgUrl, setImageUrl] = useState(); const onImgChange = (e) => { setImageUrl(e.target.files[0]); } return( + ) } type='file'로 설정하고 accept='image/*'로 하면 jpg, png 등 이미지 형태의 확장자를 가진 파일만 불러올 수 있다. 원하는 확장자의 파일만 불러오고 싶으면 accept='.pdf' 형태로 원하는 확장자만 적으면 된다. 또한 여러 개를 가져오고싶으면 multiple="multiple"을 적용!

1. curl 설치 sudo apt install curl ​ ​ 2. PPA(개인아카이브) 등록하기 curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash - ​ ​ ​ 3. 노드 설치하기, 버전 확인 sudo apt-get install -y nodejs node -v ​ ​ ​ 4. npm 설치 curl -sL https://npmjs.org/install.sh | sh sudo npm update -g npm ​ ​ 5. create-react-app 설치 npm install -g create-react-app create-react-app 앱이름짓기 cd 앱이름 npm start ​