프론트엔드/React

리액트 기본 게시판 개발 : 1. 아키텍처 정의

lemonnc 2024. 6. 29. 00:00

일단 시작하기에 앞서, 이 토이 프로젝트를 왜 시작하게 되었느냐 하면...

리액트에 대해서 공부는 해보고 싶은데, 기존에 리액트 홈페이지에 나와있는 예시만 구현한다고 해서 리액트를 이해한다고 할 수 없고,

실제 찾아가며 적용을 해볼 수 있는 개발을 진행해보고자 실행하게 되었다.

또한, 조금씩 구현해가면서 한 챕터씩 리액트 자습서를 습득해가고자 이 토이 프로젝트를 시작하고자 한다.

 

일단, 구현 시작에 앞서, 아키텍처의 정의는 아래와 같이 진행하기로 하였다.

진행하고자 하는 토이 프로젝트 아키텍처

구현 도중에 아키텍처가 변경이 된다면 이 글도 함께 수정하겠다.

일단 이번에는 React 배우기에 중점적인 프로젝트임으로, 

백은 기존에 쓰던 익숙한 Java, Spring Boot, MyBatis, Postgresql을 사용하기로 했다.

여기서 새로 배우는 것이 있다면 Gradle 정도?

근데 Gradle은 환경설정을 위한 간단한 도구 정도임으로, '배운다'는 표현을 쓸 만큼 어렵지 않다.

그냥 적용만 하면 되는 것이기 때문에 큰 어려움 없이 진행할 수 있을 것으로 예상 중이다.

다만, 기존에는 Rest API만을 위한 서버가 아닌,

View까지 모두 Spring boot 내장서버에서 관리하였다면,

이번에는 순전하게 Rest API만을 관리하기 위한 서버로 구축할 예정이다.

 

Bootstrap는 UI/UX 작업을 최소화하고 싶어 선택하게 되었다.

내가 제대로 Bootstrap을 적용해본 프로젝트도 없어서 해보고 싶은 것도 있다.

잘만 활용할 수 있으면 편한 라이브러리이고, 아직도 CSS 라이브러리 중에서 그 쓰임새가 높은 편이니

익혀둬서 나쁠 것 없다고 보인다.

다음에 시간이 난다면 tailwind CSS도 만져보고 싶다.

Bootstrap은 아래의 두 UI 소스를 이용하기로 했다.

https://getbootstrap.com/docs/5.3/examples/sign-in/

 

Signin Template · Bootstrap v5.3

 

getbootstrap.com

https://startbootstrap.com/template/simple-sidebar

 

Start Bootstrap

 

startbootstrap.com

 

Rest API 서버 구축을 위해서는 아래의 세 페이지의 내용을 응용해 만들어보고자 한다.

원리를 하나부터 열까지 알면 너무 좋지만 

일단 지금은 백엔드 보다는 프론트엔드에 치중하고 싶어서 구현을 목적으로만 진행하기로 결정했다.

https://velog.io/@alstn_dev/Spring-Boot%EB%A1%9C-REST-API-%EC%84%9C%EB%B2%84-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

Spring Boot로 REST API 서버 만들기

Spring Boot로 REST API 서버 만들기!구조부터 잡아봅시다!

velog.io

https://it-techtree.tistory.com/entry/develop-springboot-restapi-server

 

Springboot RestfulAPI 서버 만들기

오픈소스 프레임워크를 배울 땐, 항상 공식 레퍼런스 문서를 참조하며 이해하는 습관을 가지면, 앞으로 새로운 프레임워크를 학습할 때도 스스로 학습할 수 있는 능력을 갖출 수 있습니다. Spring

it-techtree.tistory.com

https://velog.io/@tjdals9638/Spring-boot%EB%A1%9C-Rest-API-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

Spring boot로 Rest API 만들기

2022.05.26 백엔드 업무를 시작하기 앞서 가장 기초적인 Rest API를 만들어 보고자 합니다. 비전공자도 쉽게 따라할 수 있도록 내용을 구성하였으니 참고 부탁드립니다.

velog.io

 

다음 포스팅은 이제 본격적으로 부트스트랩을 리액트에 입히는 작업을 진행해볼 예정이다.

그러면서 자습서도 하나씩 도장깨기 해보겠다.