[Project] 프로젝트 만드는법 리액트 + 스프링부트+ 스프링시큐리티~1.프론트엔드 프로젝트 생성하기~()_react springboot_--신촌 더조은 학원 2차 프로젝트 +How to create a project with Spring Boot and React+

[프로젝트] 리액트 + 스프링부트로 프로젝트 만드는법~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 깃허브

6. Router 설정 : App.js 

import './App.css';

import React from 'react';

import { Route, Routes } from 'react-router-dom';

import { MainContainer } from './main/Main';

import Header from './main/header/Header';

import Body from './main/body/Body';

import Footer from './main/footer/Footer';

import Login from './member/Login';

import SignUp from './member/SignUp';


function App() {

  return (

    <MainContainer color='black'>

      <Header/>

      <Routes>

        <Route path='/' element={<Body />} /> 

        <Route path='/login' element={<Login />} />

        <Route path='/signup' element={<SignUp />} />

      </Routes>

      <Footer/>

    </MainContainer>

  );

}


export default App;


댓글

댓글 쓰기

T O P