React & SpringBoot를 이용한 To-do List 만들기(1) - 전체 프로젝트 구성 및 환경 설정

들어가며

---

 현재 백엔드 엔지니어로 활동중이지만 개발은 혼자하는 것이 아니기에 협업을 위해서는 백엔드만 익히는 것이 아닌 프론트엔드에 관한 지식도 있어야 능률이 올라가기 때문에 이 기회를 통해 React에 관하여 익혀보고자 한다. 더불어 기존에 만들었던 개인프로젝트에서도 Frontend 단에는 따로 프레임워크를 사용하지 않고 구현하기도 했어서 이번 기회를 통해 React를 익힐 수 있는 계기가 되고자 해당 프로젝트를 시작하였다.

 

프로젝트 구성

---

프로젝트를 구성하는 방법에는 두가지 방법이 존재한다.

1. 백엔드영역과 프론트엔드영역을 하나의 프로젝트로 구성

2. 백엔드영역과 프론트엔드영역을 나눠 각각의 프로젝트로 구성

 

1번 같은 경우는 하나의 프로젝트로 관리하기 때문에 한명의 관리자가 풀스택으로 웹개발을 할때 유리하고 2번 같은 경우는 프로젝트 규모가 커져 개발자의 역할(프론트엔드와 백엔드가 나눠짐)이 명확하다면 나눠서 개발하는 것이 유리하다.

 

해당 프로젝트는 혼자서 개발하는 프로젝트이지만 이 프로젝트를 하는 이유인 협업 능률 향상에도 초점이 있기 때문에 2번 방식으로 따로 프로젝트를 구성하여 진행할 것이다.

 

 

전체 프로젝트 구성도 및 개발 환경

---

전체적인 프로젝트의 구성도는 다음과 같다.

 

개발 환경은 다음과 같다

 

Front-end

React / Node.JS / jQuery 

Back-end

SpringBoot / JAVA 11

ETC

mac(OS) / IntelliJ / H2 Database

 

마치며

---

전체 프로젝트 구성과 환경 설정에 대해 정리하였고 다음 글에서는 Front-end단을 구현해보도록 한다.