VS Code로 React + SpringBoot 개발환경 세팅 (2/2)

2020/06/02 - [프로그래밍/기타] - VS Code로 React + SpringBoot 개발환경 세팅 (1/2)

VS Code로 React + SpringBoot 개발환경 세팅 (1/2)

 

지난 글에서 리액트 프로젝트를 생성해보았다.

이번에는 직접 코드를 적어볼 것인데...

 

https://lemontia.tistory.com/912

[react, springboot] react 와 spring boot 로 구성하기, 묶어 build 하기

이 글을 참조하여 작성해보도록 하겠다!

이제 저분걸로 봐도 된다.

 

[ 필요 모듈 설치 ]

 

 

우선 필요한 모듈을 설치하기 위해 현재 구동중인 서버를 중지시킨다.

터미널에서 Ctrl + C 를 누르고, Y를 입력해 서버를 종료시키거나 다른방법으로든 서버를 중지시킨다.

 

그리고 이제 필요한 모듈을 설치한다.

 

npm install bootstrap react-bootstrap

npm install react-router-dom

npm install axios

 

명령어를 사용하여 모듈을 설치하도록 한다.

(원출처에 적혀있는 --save 옵션은 이제 default로 들어가있으므로, 안줘도 된다.

그래서 --save가 뭐하는 애인데 기본값이고 무슨 일을 하는가...

 

http://ohyecloudy.com/ddiary/2016/09/04/til-npm-install-save-or-save-dev/

#TIL #npm install –save는 뭐고 –save-dev는 뭔가?

그것은 여기에 설명이 되어있다...)

 

[ 코드 작성 ]

 

코드는 참고한 글을 직접 들어가서 보도록 하자.

 

https://lemontia.tistory.com/912

[react, springboot] react 와 spring boot 로 구성하기, 묶어 build 하기

우리는 똑똑한 IDE를 쓰는 것이 아니므로, import 문을 유심히 살펴보고 오타나 잘못된 건 없는지 잘 보면서

작성하도록 하자.

 

참고한 글을 따라서 오면, 이렇게 구성되고 Main, Dashboard 누르면 잘 동작한다.

 

 

나는 조금 차이가 있다면, 자바단 api 쪽이나 config 파일을 별도 폴더를 만들어서 위치시켰고

 

 

별 차이는 없지만 리액트도 마찬가지로 다 폴더를 쪼개서 넣어두었다.

 

그리고 api도 원 글처럼 MainComponent 안에 넣지않고,

따로 컴포넌트로 빼두었다.

 

코드는 똑같고 render 함수 내용만 다르다.

 

만일 나처럼 할거면

 

<Navbar.Brand href="/api">

    API

</Navbar.Brand>

 

와

 

<Route path="/api" component={ApiComponent} />

 

를 추가해주자.

 

 

그래서 난 이런 모양으로 되어있다.

 

API 탭을 누르면

 

 

짜잔

 

끝

 

https://github.com/1nno-vator/vs-reactboot

1nno-vator/vs-reactboot