박주니 개발 정리

1. Context 폴더를 생성하고 LoginContext.js를 생성합니다. createContext를 적용해서 초깃값을 셋팅 후 provider, context 부분을 export 합니다. import React, { createContext, useState } from "react"; // LoginContext 생성 const LoginContext = createContext(); // LoginProvider 컴포넌트 const LoginProvider = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [username, setUsername] = useState(""); const value = ..

설명 전) react 환경에서 npm start로만 진행할경우 충분히 packasge.json에서 "proxy" 추가해서 서버 경로를 연결하면 됩니다. 하지만 실서버 적용시 build 진행하는 경우에는 프론트에서 적용한 것보다는 서버에서 설정을 해야하기 때문에 서버측에 cors proxy를 별도 설정해주셔야 합니다. 프론트에만 수정한다고해서 build환경에는 cors 에러를 해결하실 수 없습니다. 먼저 spring boot 환경이 설정되었다는 조건하에 설명 진행하겠습니다. 1. WebConfig.java 파일을 생성하고 CorsRegistry를 mapping 진행합니다. 추가 설명) 저는 서버 개발을 laravel, nodejs로 진행했기 때문에 spring boot는 proxy 이슈 해결을 위한 용도로..

설명 전) react component는 page별로 또는 header 및 bottom, sidemenu 구분해서 필요 요소를 블록형식으로 return 안에 html안에 구분해서 재사용을 했습니다. 그런데 기능으로 따로 구분을 해서 재사용을 할려면 return안에 사용하는 것이 아닌 function 안에 따로 불러와야하기때문에 한페이지 안에서 진행하는거면 상관이 없는데 따로 component를 만들어서 import에서 사용할 때에는 여러 변수가 생길 수 있다는 것을 알아두셔야합니다. 먼저 간단하게 어떻게 기능 component를 만들어야하는 지 설명하겠습니다. 더 좋은 방법이 있으면 추천해주시길 바랍니다. 1. src>TestAction.js를 생성하고 해당 코드를 복사해서 붙여놓습니다. import T..

힌트를 얻게 해준 유튜브 영상 https://www.youtube.com/watch?v=V27XkmVPqYQ 설명전) 노마드코더 20억명 감당한는 법 보면서 api 호출해서 캐싱을 하게되면 먼저 캐싱에 데이터가 있는지 확인하고 있으면 캐싱에서 가져오고 없으면 api 호출하는 방법을 알게되었습니다. 저는 주로 redux에서 해당 유저 정보 데이터 및 관련 데이터만 관리하고 cookie에서는 로그인 상태 확인하는 정도로만 했는데 고민이였던 부분이 중복 api 호출할 경우 서버 부하로도 이어질 수 있기 때문에 어떻게 하면 프론트에서 효율적으로 api 호출 제어할 수 있을 지 찾아보게 되었습니다. 찾아보는 과정에서 react-query가 지금 과정과 동일한 방법으로 진행한다는 것을 알게되었습니다. 1. reac..