프로젝트의 기능 개발에서 가장 중요한 결정 중 하나는 사용할 '개발 방식'을 선택하는 것입니다. 개발 접근 방식의 선택은 프로젝트의 성공에 매우 중요한 역할을 하는데, 그 이유는 아래와 같습니다.
효율적인 자원 관리:
프로젝트를 개발하는데 필요한 자원은 무한하지 않습니다. 일관된 개발 방식은 한정된 자원을 효율적으로 사용하기 위한 첫 번째 단계입니다.
프로젝트의 확장성 및 유지보수성:
효율적인 개발 방식은 프로젝트의 유지보수를 용이하게 하며, 개발 이후 발생하는 기능 변경 혹은 확장시에도 큰 어려움 없이 추가 개발을 가능하게 해줍니다.
품질 보장:
효율적이고 일관된 개발 방식을 기능 개발에 동일하게 적용하게 되면, 전체적인 코드의 품질을 유지하며 프로그램의 성능을 개선하는데 많은 도움을 받을 수 있습니다. 이는 곧 프로젝트의 성공을 보장하기도 합니다.
1. 프론트엔드 구조
하지만 이번 프로젝트는 저의 '프론트엔드 개발 실력 증진 및 백엔드 분야 학습'을 목표로 기획된 것입니다. 따라서 일관된 개발 방식이라는 원칙에 어긋나는 것이지만, 조금 더 다양한 개발의 방식을 공부하려는 차원에서 프론트엔드의 개발 구조를 이원화하였습니다.
회원 기능 개발 구조
컴포넌트 -> 커스텀 훅 -> 서비스 레이어 -> 백엔드 // fetch API 사용:
회원 관련 기능들은 React 컴포넌트와 커스텀 훅을 이용하여 구현하였습니다.
커스텀 훅은 비즈니스 로직과 상태 관리를 캡슐화하고, 컴포넌트의 재사용성을 높이며 가독성을 개선하려는 목적에서 사용하였습니다.
백엔드와 통신을 주고받는 부분은 관심사의 분리 및 유지보수성을 위해 별도의 서비스 레이어로 분리하였습니다.
API를 불러오는 방식에는 JavaScript에 내장되어있는 Web API, fetch API을 적용하였습니다. 복잡한 네트워크 요청 처리에 있어서 Axios보다 성능이 제한적일 수 있지만, 사용이 간편하고 직관적이라는 장점이 존재하기 때문입니다.
- 로그인 기능에 한하여 커스텀 훅과 리덕스를 동시에 사용하였습니다.
다만 사용자의 로그인 상태는 여러 컴포넌트에서 동시에 사용되기 때문에 일괄적으로 관리해야합니다. 따라서 회원 기능에서도 로그인 관련 기능들은 Redux를 사용하여 구현하였습니다.
쇼핑몰 기능 개발 구조
컴포넌트 -> 리덕스 -> 백엔드 // Axios 라이브러리 사용:
쇼핑몰 기능은 Redux를 이용한 여러 데이터의 상태 관리가 기능 구현의 핵심 요소입니다. 복잡한 상태 로직과 다수의 상태가 관여하는 시나리오(예: 장바구니 관리, 제품 목록 필터링)에 적합하기 때문에 Redux를 적극적으로 사용하였습니다.
다만 회원 기능과 마찬가지로 백엔드를 호출하는 부분은 Thunk.ts 파일을 만들어 서비스 레이어를 분리해두었습니다.
API를 불러오는 방식으로는 fetch API보다 더 고급 기능을 제공하는 HTTP 클라이언트 라이브러리, Axios을 채택하였습니다. Axios는 인터셉터, 타임아웃 설정, 자동 JSON 변환 등과 같은 기능을 통해 API 요청 관리를 용이하게 하며, 복잡한 에러 처리나 요청/응답의 사전/사후 처리에 유용하기 때문입니다.
프로젝트 내 다양한 개발 접근 방식 채택의 이유
이러한 두 가지 접근 방식은 프로젝트의 다양한 부분에 대해 적절한 기술과 방법론을 적용함으로써, 개발의 유연성을 보장하고, 각 기능의 특성에 맞는 최적의 솔루션을 제공하려는 차원에서 시도되었습니다. 해당 기능에 특정한 방식을 사용하는 것이 반드시 옳다는 것은 절대로 아니며 프로젝트의 제1목표를 달성하는 차원에서 부득이하게 개발 구조가 나누어지게 된 것입니다.
EssenceAura 프로젝트에서 회원 기능과 쇼핑몰 기능에 대해 다른 개발 접근 방식을 채택한 이유는 다음과 같습니다:
기능별 최적화된 솔루션 제공:
회원 기능: 회원 관리 기능은 상대적으로 단순한 상태 관리와 API 상호작용을 필요로 합니다. 이러한 기능은 React의 컴포넌트와 커스텀 훅을 통해 효율적으로 관리할 수 있으며, fetch API로 충분히 처리 가능합니다.
쇼핑몰 기능: 반면, 쇼핑몰 기능은 상품의 조회, 장바구니 관리, 주문 처리 등 복잡한 상태 관리와 다양한 데이터 소스와의 상호작용을 요구합니다. Redux와 같은 전역 상태 관리 라이브러리와 Axios를 사용함으로써, 이러한 복잡성을 보다 효과적으로 관리할 수 있습니다.
학습과 경험의 극대화:
프로젝트를 통해 다양한 기술과 패턴을 실습함으로써, 실제 작업 환경에서 마주칠 수 있는 다양한 시나리오에 대비할 수 있습니다.
이는 또한 여러분의 기술적 능력을 향상시키고, 개발자로서의 유연성을 강화하는 데 도움이 됩니다.
프로젝트의 유연성 및 확장성:
서로 다른 접근 방식을 채택함으로써, 프로젝트의 유연성과 확장성이 향상됩니다. 특정 기능에 대한 변경이나 확장이 필요할 때, 적합한 기술을 적용하여 쉽게 조정할 수 있습니다.
성능 및 효율성:
각 기능에 적합한 도구와 방법을 사용함으로써, 프로젝트의 전반적인 성능과 효율성을 개선할 수 있습니다. 예를 들어, 복잡한 상태 관리가 필요한 쇼핑몰 기능에서 Redux의 사용은 성능 최적화에 크게 기여할 수 있습니다.
코드의 일관성 및 가독성 유지:
서로 다른 접근 방식을 사용하면서도 프로젝트 전체에서 일관된 코드 스타일과 구조를 유지함으로써, 가독성과 유지보수성을 높일 수 있습니다.
2. 백엔드 구조
백엔드 구조는 Node.js 및 Express.js를 기반으로 하며, 데이터베이스 설정, 라우트 핸들러 로직, 미들웨어, 데이터 모델 및 유틸리티 함수를 포함한 모듈화된 디자인을 따릅니다. 각 모듈은 특정 기능을 수행하고, 애플리케이션의 다른 부분과 명확하게 구분됩니다.
백엔드 구조는 서버 측 애플리케이션의 핵심을 이루며, 데이터 처리, API 서비스 제공, 보안, 인증 및 서버 관리 등을 담당합니다. EssenceAura 프로젝트의 백엔드 구조는 효율적인 서비스 운영과 유지보수를 위해 명확하게 정의된 여러 구성 요소로 나뉘어 있습니다.
주요 구성 요소
config/ 폴더 (설정 관리):
이 폴더는 데이터베이스 연결, 환경 변수 설정과 같은 애플리케이션 설정을 관리합니다.
controllers/ 폴더 (컨트롤러 로직):
여기에는 라우트에 연결된 비즈니스 로직을 처리하는 컨트롤러가 포함됩니다.
예를 들면, userController.js는 사용자 관련 요청을 처리하고, productController.js는 제품 관련 요청을 처리합니다.
middleware/ 폴더 (미들웨어):
미들웨어는 요청-응답 사이클에서 중간에 위치하여 요청의 유효성을 검사하거나, 로깅, 인증 등을 수행합니다.
routes/ 폴더 (라우트 정의):
애플리케이션의 URL 경로와 해당 경로에 연결될 컨트롤러를 정의합니다.
userRoutes.js, productRoutes.js 등은 각각 사용자와 제품 관련 라우트를 정의합니다.
utils/ 폴더 (유틸리티 함수):
공통적으로 사용되는 함수나 유틸리티 코드를 포함합니다.
app.js 파일 (애플리케이션 설정):
Express 애플리케이션의 주요 설정을 담당합니다.
미들웨어와 라우트 설정, 기본적인 서버 설정이 포함됩니다.
server.js 파일 (서버 시작):
Express 서버를 시작하고, 서버가 특정 포트에서 수신하도록 설정합니다.
app.js에서 정의된 애플리케이션 설정을 바탕으로 서버를 구동합니다.
아키텍처 설계 원칙
백엔드 아키텍처는 아래 원칙을 따릅니다:
모듈화: 기능별로 코드를 분리하여 각 모듈의 독립성을 유지하고, 유지보수 및 확장성을 높입니다.
책임의 분리: 각 컴포넌트(컨트롤러, 서비스, 모델 등)는 명확하게 정의된 역할과 책임을 가집니다.
재사용성과 유지보수성: 공통 기능은 유틸리티 모듈로 분리하여 재사용성을 높이고, 코드베이스의 일관성을 유지합니다.
확장 가능한 설계: 새로운 기능 추가나 기존 기능의 수정이 용이하도록 설계합니다.
3. 데이터베이스 구조
데이터베이스는 RDBMS의 대표자격 개념 중 하나인 MySQL을 사용하여 구성하였습니다. 사용자, 관리자, 제품, 주문 등과 같은 핵심 엔터티를 중심으로 확장성 및 성능 최적화를 고려하여 설계하기 위해 노력하였습니다.
데이터베이스는 다음과 같은 주요 테이블로 구성됩니다:
사용자(User) 테이블: 사용자 식별, 인증 및 연락처 정보 제공.
관리자(Admin) 테이블: 관리자 식별 및 인증 관리.
비밀번호 재설정 요청(Password Reset Request) 테이블: 보안 강화된 비밀번호 재설정 기능 지원.
제품(Product) 테이블: 제품 정보 및 관리.
주문(Order) 테이블: 주문 정보 및 관리.
결제(Payment) 테이블: 결제 정보 및 관리.
리프레시 토큰(Refresh Token) 테이블: 보안 강화된 인증 토큰 관리.
