■ 착수
리액트 기술의 개요 및 필요성에 대해 추후 업로드 하겠습니다.
■ 분석
요구사항정의서, 업무 프로세스 정의서 추후 업로드 하겠습니다.
■ 설계
- 프로젝트 아키텍처
서버 사이드 기술의 부재로, 화면과 서비스의 로직이 뒤섞이는 것을 예방하고자, MVC 패턴을 기반으로 프로젝트 아키텍처를 구성했습니다. (아키텍처 구성도는 추후 업로드하겠습니다.)
화면정의서, ERD, (프로그램 목록) 추후 업로드 하겠습니다.
■ 개발
- Node.js 설치 [바로가기]
React는 JavaScript를 기반으로 동작하기 때문에, JavaScript를 실행시킬 런타임 환경이 필요합니다. Node.js를 통해 JavaScript Runtime Enviroment를 구축해보는 과정입니다. 이번 토이 프로젝트에서는 Node.js의 npm 기능을 이용해 리액트 프로젝트(이하, '리액트 앱' 또는 '앱')를 생성하고 실행시거나 필요한 패키지를 설치하기 위해 사용할 예정입니다.
- Visual Studio Code 설치 [바로가기]
React는 프론트엔드 개발을 위한 라이브러리로, 코드를 작성할 수 있는 환경을 따로 만들어야 합니다. 이번 토이 프로젝트에서는 프론트엔드 IDE로 유명한 VS Code를 이용해 React 개발을 진행할 예정입니다.
- 리액트 프로젝트 생성하기 [바로가기]
리액트는 라이브러리에 불과하기 때문에 개발에 있어 여러 툴과 다른 라이브러리를 이용해서 개발하게 됩니다. 이러한 것들을 고민해가며 앱 구조를 직접 만드는 건 매우 힘든 일입니다. 그래서 npm init, CRA를 이용해 리액트 앱을 쉽게 만드는 과정에 대해 정리했습니다. 본 프로젝트에서는 CRA의 --template 옵션을 사용하여 typescript 기반의 리액트 앱을 만들었습니다.
- Tailwind 패키지, AntD 패키지 이용하기
개발 기간을 효율적으로 관리하기 위해 CSS 라이브러리와 컴포넌트 라이브러리를 이용했습니다.
- 리액트 프로젝트에 Tailwind CSS 라이브러리 추가하기 [바로가기]
- 리액트 프로젝트에 AntD 설치 및 사용법 [바로가기]
- React-Router-Dom 라이브러리 이용
리액트를 SPA로 구현하기 위해 페이지 라우터 라이브러리를 이용했습니다.
- JSP로 DB 연동 구현
개발 기간 상의 문제로, Express.js 프레임워크 보다 경험이 있는 JSP가 낫다고 판단했습니다. 리액트에서 fetch()를 통해 JSP로 HTTP 요청을 비동기로 보내면, JSP에서 DB Connect, Query execute, JSON response의 절차로 응답을 보내는 아키텍처를 갖습니다.
개발환경 세팅 방법 및 진행 사항에 대해 추후 업로드 하겠습니다.
■ 테스트
미진행
■ 배포
미진행
'토이프로젝트 > WEB게시판(React)' 카테고리의 다른 글
| [토이프로젝트/React] 리액트 프로젝트 생성(npm init, CRA) (2) | 2024.04.18 |
|---|