프로젝트: 오픈소스 기반의 웹 파이프라인 구축(9)

응용 구조의 설계

전체 응용의 구성

Frontend

• React 응용으로 만들어져 UI 에 해당하는 부분을 서비스
• Backend 로 향하는 API 호출은 브라우저의 js 실행에 의해서 이루어짐 🡨 이 코드를 FE 가 제공

Backend

• Express 응용으로 만들어져 데이터베이스를 이용한 데이터 모델을 서비스
• JWT (JSON Web Token) 를 이용한 사용자 인증을 통해 데이터 접근을 보호
• CORS (Cross-Origin Resource Sharing) 정책을 통해 악의적인 접근을 방지

Database

• 'prgms_notes' 라는 이름의 데이터베이스에 두 개의 테이블을 포함

개발 환경의 구성

코드를 변경할 때마다 로컬 테스트 환경에 배포하는 것은 부담스러운 일

• 시간 소요: 개발 작업의 효율성이 떨어짐
• 환경 설정 및 디버깅에 드는 수고: 코드가 어느 정도 구조를 갖추기 전에 구성을 확정하기 어려움

개발 단계에서의 가벼운 테스트를 위한 환경 설정 필요

• 단위 테스트 작성 및 활용 🡨 이것은 이후 CI/CD 를 위해서도 매우 중요한 일
• 간단한 사용자 테스트: npm 을 이용해서 FE/BE 각각을 서로 다른 포트에서 서비스하도록 하고 테스트
• (주의) 이 단계에서 적용되는 코드와 프로덕션 빌드에 적용되는 코드는 같지 않음
• 배포 모델을 염두에 두고 유연한 설정을 적용할 수 있는 코드를 개발하는 것이 중요

개발환경과 배포환경

개발 환경의 운용

개발 단계에서 빠르게 코드의 동작을 확인할 수 있는 것은 중요

• 코드의 변경이 빈번함
• 특정 부분의 코드를 구현하기에 앞서 다른 특정 부분의 코드 동작을 확인하는 것이 유리할 때가 꽤 있음

TDD 를 적용함으로써 효율을 상당히 높일 수 있음

• 그러나 코드의 구조 또는 인터페이스의 변경이 예측 (또는 예상) 될 때에는 테스트 코드의 정비도 만만하지 않음
• 요구사항을 명확히 반영하여 테스트 코드를 먼저 작성하는 일은 쉽지 않은 경우가 꽤 있음
• 특히, 사용자 인터페이스를 다루는 코드는 단위 테스트에 한계와 어려움이 있음

따라서, 코드의 동작을 눈으로 확인할 수 있는 환경을 구축하는 것이 필요

데이터베이스 준비

가능한 한 데이터베이스에 의존성을 갖지 않는 상태에서 코드를 개발하는 것이 수월
그러나 어느 시점에 이르면 코드의 검증을 위해 데이터베이스의 상태가 필요

• 예 1: 사용자 인증에 따른 동작이 올바른지를 검증하기 위해 (어디까지 피할 수 있을까?)
• 예 2: BE 의 CRUD 동작이 올바른지를 검증하기 위해 (어디까지 피할 수 있을까?)

스키마가 확정되어 있다면 데이터베이스를 조기에 마련하는 것도 좋은 방법

• 우리의 프로젝트에서는 적용할만한 접근법
• 데이터베이스의 구조가 매우 간단하고 변경될 가능성이 없어 보이며
• 프로덕션 환경에는 이미 데이터베이스가 (빈 상태로) 제공된다고 하던데
• (그러나) 프로덕션 데이터베이스를 테스트에 활용하는 것은 절대 있어서는 안 되는 일

로컬 환경에서 테스트에 이용할 수 있는 데이터베이스를 마련하자