WEB/React
-
React - Router 화면 이동WEB/React 2022. 4. 30. 02:23
화면을 이동하기 위해서는 npm i react-router-dom npm i @types/react-router-dom 위 두 개를 설치해 준다. index.tsx 파일에 를 추가해 준다. ReactDOM.createRoot(document.getElementById('root')!).render( ) 그 후 원하는 App.tsx에 라우터를 추가해 준다. const routes = [ {path: "/Test",component : }, {path: "/sample",component : }, ] return( {routes.map((route : {component : JSX.Element, path : string}, index : number) => ( ))} ) 위와 같이 작성한다면 routes에..
-
Axios 모듈화WEB/React 2022. 4. 30. 01:07
Axios를 모듈화 하여 사용하기 위해서는 axios.create를 사용하여 공통적으로 사용되는 부분을 만들어준다. const customAxios : AxiosInstance = axios.create({ baseURL : `http://localhost:3000`, headers: { 'Content-Type': 'application/json', }, }) 위와 같이 만들게 되면 customAxios로 호출할 때는 localhost:3000으로 호출을 하고 헤더에 content-Type을 application/json으로 보낸다는 말이다. customAxios를 이용하여 post 또는 get 요청을 하기 위해서는 export const requestPostAxios = (url : string, a..
-
Vite를 이용한 React 프로젝트 생성WEB/React 2022. 4. 28. 21:05
필요한 것 - Node https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크에 접속하여 Node를 설치한다. 설치가 된다면 npm도 자동으로 설치되기 때문에 npm은 설치할 필요가 없다. 이제 터미널을 열어서 원하는 위치에 아래 명령어를 입력한다. npm create vite@latest blog 위 명령어에서 blog는 프로젝트명이다. 때문에 원하는 이름으로 설정하면 된다. 위 명령어를 입력하였다면. 위와 같은 이미지가 나타난다. 여기서 원하는 프레임워크로 설정한다. 다만 지금은 react로 설정할 것이다. 설정하면 일반 ReactJS로 할 것..
-
Firebase-React 연동WEB/React 2022. 4. 23. 21:51
웹을 Firebase와 연동하기 위해서는 프로젝트 설정에서 내 앱에 WEB을 추가해야 한다. 추가를 성공했다면 위 이미지 처럼 웹 앱의 항목이 추가된 것을 볼 수 있다. react에 npm install firebase를 입력하여 추가해 준다. 이제 react 소스에서 index.html이 있는 폴더 안에 firebase-messaging-sw.js 파일을 생성해준다. 파일 이름은 무조건 위의 이름으로 해야만 인식을 한다. 해당 파일에 아래 코드를 작성한다. importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js'); importScripts('https://www.gstatic.com/firebasejs/9.0.0/f..