박주니 개발 정리

작업을 하다보면 react만 실서버에 올려서 테스트하고 싶을 때가 있습니다. 그런데 nginx 셋팅을 하면 많이 번거롭고 생각처럼 잘안될때가 있는데 이때 추천하는 방식입니다. 저는 mobaxterm에서 진행했습니다.https://junhee6773.tistory.com/entry/mobaxterm-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95 mobaxterm 사용 방법1. user sessions에서 프로젝트 폴더 생성 후 우클릭▶session settings 클릭합니다. 2. ssh 클릭 후 remote host, user private key를 넣고 specify username을 체크해서 ubuntu를 입력합니다. 3. Bookmark settings에서 Session nam..

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..