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로 할 것..
-
ReactJS에서 Redux 설정WEB/Redux 2022. 4. 25. 22:02
npm install react-redux로 redux를 추가해 준다. 일단 폴더의 대략적인 구조는 아래 이미지와 같다. states 폴더에는 state들이 들어있는 폴더이다. reducers에는 state를 사용할 reducer들이 들어있는 폴더이다. state 파일에는 export const tokenState = { token : "" } 위와 같이 state를 정의한다. reducers 폴더에 들어갈 reducer에는 import {tokenState} from "../states/tokenState"; enum actionEnum { changeToken = "changeToken" } const tokenReducer = (state = tokenState, action : { type : a..
-
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..
-
window Object 확장하기(React - TypeScript)WEB/TypeScript 2022. 4. 17. 02:06
TypeScript를 적용한 이후 window를 확장하여 사용하고 싶은 경우 window.Sample() 위와 같이 작성을 하게 되면 타입 오류가 발생한다. 해당 오류를 처리하기 위해서는 react-app-env.d.ts 파일에 interface Window { Sample() : any; } 코드를 작성하면 사용이 가능하다. window 외에도 String 등 다른 곳에서 사용하고 싶을 때 사용할 수 있다.