프로그램/REACT

안녕하세요! 프뚜입니다. 새로운 프로젝트를 개발하게 되면서 프론트를 react로 선택하게 되었습니다. 신버전으로 재구성 할 겸 포스팅합니다. OS: Windows 10 Node: 20.9.0 LTS # nodejs 다운받기 20.9.0 LTS 버전으로 설치합니다. # nodejs 설치하기 Next를 합니다. ...License Agreement를 체크하고 Next합니다. 원하는 경로를 선택 후 Next합니다. Next... Next... Install 합니다. 설치가 완료되었습니다. 설치가 잘 되었는지 확인합니다. 위 내용이 나오지 않을 시, 환경변수에 설치 파일 경로를 추가하면 됩니다. # 프로젝트 생성하기 npm uninstall -g create-react-app npm install -g crea..

안녕하세요! 프뚜입니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # Axios 설치하기 yarn add axios # axios.js 생성하기 import axios from 'axios'; import {useEffect, useState} from 'react'; // 2023.02.03[프뚜]: 공통 header const commonHeader = (headers) => { return headers; }; // 2023.02.03[프뚜]: 공통 params(body) const commonParams = (params) => { return params; }; // 2023.02.03[프뚜]: get(Hooks) export const useAxios..

안녕하세요! 프뚜입니다. Atoms과 Seelctor를 통해 상태 관리 및 사용할 수 있는 Recoil에 대해 포스팅합니다. [Atomes] - 전역으로 읽고 쓸 수 있습니다. - 상태의 단위이며 업데이트와 구독이 가능합니다. - 상태가 업데이트되면 구독된 컴포넌트는 새로운 값을 가지고 재렌더링됩니다. [Seelctor] - 전역으로 읽고 쓸 수 있습니다. - Selector는 Atoms에서 파생된 상태의 일부이며, 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물입니다. - Atoms 또는 Selectors가 업데이트 된다면 하위 selector 함수도 재실행(재랜더링)됩니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # Recoil 설치하기 # 202..

안녕하세요! 프뚜입니다. 리액트에서 SPA(Single Page Application)으로 개발을 진행하고 있습니다. SPA의 장점은 빠른 화면 이동 처리입니다. 하지만 빠른 화면이동 처리를 하기 위해선 첫 로딩 때 모든 페이지를 가져와야하는 부담이 있습니다. (페이지가 많아질수록 속도 이슈가 있음) 이 부분을 보안하기 위해 lazy를 도입하게 되었습니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # router.js로 이동하기 import React, {lazy} from 'react'; import {createBrowserRouter} from 'react-router-dom'; // 2023.02.03[프뚜]: template은 import 사용 impo..

안녕하세요! 프뚜입니다. 리액트에서 화면 이동 또는 전환을 하기 위해선 react-router-dom을 설치해야합니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # react-router-dom npm install react-router-dom # router.js 파일 생성하기 import { createBrowserRouter } from "react-router-dom"; import React from "react"; export default createBrowserRouter([ { path: "/", element: Root, } ]); ./src/router/router.js 파일을 생성합니다. 모든 path는 여기서 관리하도록 하겠습니다. # ..

안녕하세요! 프뚜입니다. IE11이 종료 되었지만, 폐쇄망인 공간은 사용하고 있습니다.. (빨리 바꿔줘...ㅠㅠ) 리액트에서 IE11를 사용할 수 있게 react-app-polyfill 설치 및 세팅에 대해 포스팅합니다. [개발 환경] - OS: Windows 10 64Bit - React: 18.2.0 # react-app-polyfill 설치하기 # 2023.01.31[프뚜]: npm npm install react-app-polyfill # 2023.01.31[프뚜]: yarn yarn add react-app-polyfill # package.json 설정 추가하기 { ... "browserslist": { ... "development": [ "ie 11", ... ], ... }, ... } ..