Rock Bottom Dev Bus

[프로젝트] 리액트 + 스프링부트로 프로젝트 만드는법~ 2.백엔드 프로젝트 생성하기 1. 스프링부트 프로젝트 생성 방법 (프론트엔드와 별도의 폴더에 백엔드 프로젝트생성)  - 아래 링크 참고 https://rockbottomdevbus.blogspot.com/2024/04/springboot-1-325-intellij-idea-20241.html 2. 스프링 시큐리티 설정 CORS 설정(frontEnd 와 통신을위해) CustomSecurityConfig.java  package com.project.back.config; import lombok. RequiredArgsConstructor ; import lombok.extern.log4j. Log4j2 ; import org.springframework.context.annotation. Bean ; import org.springframework.context.annotation. Configuration ; import org.springframework.security.config.annotation.method.configuration. EnableMethodSecurity ; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.web.SecurityFilterChain; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.CorsConfigurationSource; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import java.util.Arrays; @Configuration @Log4j2 @EnableMethodSecurity @Req...

[프로젝트] 리액트 + 스프링부트로 프로젝트 만드는법~1.프론트엔드 프로젝트 생성하기 0. 프로젝트 구조  frontEnd와 backEnd로 구분하여 각각의 폴더에 프로젝트로 만들어야함. 처음에는 잘 몰라서 backEnd프로젝트 내부 리소스쪽에 설치 했는데  실행 될 때마다 fronted가 로드? 되는 문제가 있어서 분리해야했다. 프론트와 백엔드가 서로의 포트번호로 통신하게끔 설정해야한다.  그러려면 백엔드에 스프링 시큐리티의 CORS 설절을 해주면 된다.  IDE : 백엔드는 인텔리제이, 프론트엔드는 VS CODE로 각각 사용하는 걸 추천  1. node.js 설치  https://nodejs.org/en/download/prebuilt-installer 2. npm create react-app react-basic(프로젝트 폴더명) 3. cmd or git bash로 프로젝트 경로로 이동  react-basic로 이동 4. npm start  5. 라이브러리 각각 설치 (타입스크립트, Next.js 사용안했음) * npm  –  npm install 프로젝트 내려받은 후 실행 필요 (리액트 경로 : front 경로) – npm install axios 비동기 통신 axios – npm install swiper 롤링 배너 * yarn –npm install -g yarn 얀 설치 (글로벌) – yarn add react-icons 아이콘사용 – yarn add styled-components 스타일드 컴포넌트 사용  – yarn add react-router-dom 리액트 라우터 *기본 form 깃허브 https://github.com/LeeYoungGeun/front_react 6. Router 설정 : App.js  import './App.css'; import React from 'react'; import { Route, Routes...