프론트엔드와 백엔드 분리 개발 패턴

전통적인 혼합 개발 방식은 커뮤니케이션 비용이 높고 역할 분담이 명확하지 않아 관리가 어려우며 유지보수도 복잡하다. 인터페이스 문서를 기반으로 프론트엔드와 백엔드를 병렬로 개발하고 테스트한 후 통합 테스트를 진행하는 것이 효율적이다.

인터페이스 문서 및 API 관리

API 인터페이스 문서화와 Mock 서비스 제공을 통해 개발 효율성을 높일 수 있다.

2. 프론트엔드 공학화: 프론트엔드 개발에 필요한 도구, 기술, 경험 등을 표준화하고 규격화하는 것

2.1 환경 설정

Vue-cli는 Vue 공식에서 제공하는 프로젝트 생성 도구로, 빠르게 Vue 프로젝트 템플릿을 생성할 수 있다. 주요 기능으로는 일관된 디렉토리 구조 제공, 로컬 디버깅, 실시간 리로딩, 단위 테스트, 배포용 번들링 등이 있으며 NodeJS 환경이 필요하다.

// NodeJS 환경 설치
npm config set prefix "C:\dev\nodejs"
npm config get prefix
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli
vue --version

2.2 Vue 프로젝트 구조

vue ui        // GUI 인터페이스
vue create myapp    // Vue 프로젝트 생성

npm run serve   // 프로젝트 실행

node_modules 폴더에는 전체 프로젝트의 의존성 패키지가 저장되며, public 폴더는 정적 파일을 보관한다. src 소스 코드 영역에는 assets(정적 자원), components(재사용 가능한 컴포넌트), router(라우팅 설정), views(뷰 컴포넌트), App.vue(메인 페이지 진입점), main.js(메인 JS 파일)가 포함된다. package.json은 모듈 기본 정보와 프로젝트 개발에 필요한 모듈, 버전 정보를 담고 있으며 vue.config.js는 프록시 포트 등의 설정 정보를 저장한다.

2.3 Vue 컴포넌트 개발 절차

  • .vue 확장자로 된 컴포넌트 파일은 세 가지 파트로 구성된다
    • template: HTML 코드 생성
    • script: 템플릿 데이터 소스와 동작 제어
    • style: CSS 스타일 코드

3. Element UI 컴포넌트 라이브러리

Element는 엘리바바 그룹이 개발한 Vue 2.0 기반의 데스크톱 UI 컴포넌트 라이브러리이다.

3.1 빠른 시작

npm install element-ui --save    // 현재 프로젝트에 설치
// UI 컴포넌트 라이브러리 임포트
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element);
// 3. 공식 홈페이지에서 컴포넌트 코드를 복사하여 조정

3.2 주요 컴포넌트

  • Table: 유사한 구조의 다수 데이터 표시, 정렬, 필터링, 비교 가능
  • Pagination: 많은 양의 데이터를 페이지별로 나누어 표시
    • layout 속성으로 sizes, prev, pager, next, jumper, ->, total, slot 순서 설정
    • pagesize 변경 시 size-change 이벤트 발생, current-page 이벤트 처리
  • Dialog: 현재 페이지 상태 유지하면서 대화상자 표시
  • Form: 입력 필드, 선택기 등으로 구성된 폼
// 3. 비동기 요청을 통해 데이터 로드
npm install axios;            // 프로젝트에 axios 설치 후 재시작
import http from 'axios';
  • 프론트엔드 라우팅: URL의 해시(# 기호)와 컴포넌트 간 매핑 관계
    • Vue Router 공식 라우팅 라이브러리
    • VueRouter: 라우팅 요청에 따라 라우터 뷰에서 해당 컴포넌트 동적 렌더링
    • <router-link>: 링크 요청 컴포넌트, 브라우저에서 a 태그로 변환
    • <router-view>: 동적 뷰 컴포넌트, 라우팅 경로에 해당하는 컴포넌트 렌더링
    • npm install vue-router@3.5.1 // 설치
  • router/index.js에서 라우팅 정의
  • 빌드: build 명령 실행, dist 디렉토리에 결과물 생성
    • Nginx 서버에 배포, 공식 사이트의 stable version 다운로드
    • conf: 설정 파일 디렉토리, html: 정적 자원 디렉토리, logs: 로그 파일, temp: 임시 파일, 빌드 결과물을 html 폴더에 모두 복사
    • nginx.exe 더블 클릭으로 시작, 서버는 기본적으로 80 포트 사용

80 포트 사용 중인 프로세스 확인: netstat -ano | findStr 80, 작업 관리자에서 PID 확인, conf/nginx.conf에서 포트 번호 변경 가능

코드 포맷팅: Ctrl+Shift+F

태그: vue frontend backend separation Element-UI

8월 25일 15:24에 게시됨

인기 태그

©2026 괴물 클럽