Frontend Hierarchy

Frontend Hierarchy ⛏

전반적인 구조는 다음과 같이 이루어져있습니다.

frontend
├── babel.config.js
├── package.json
├── vue.config.js
├── yarn.lock
├── src
│   ├── assets
│   ├── i18n
│   ├── pages
│   ├── plugins
│   ├── store
│   ├── styles
│   └── utils
└── static
    └── css

babel.config.js

babel은 JavaScript Compiler로, ECMAScript 2015+로 작성된 코드를 구버전과 호환 가능하도록 변환해줍니다.

vue.config.js

우리 프로젝트는 Vue CLI로 동작합니다. yarn build , yarn serve 에 쓰이는 각종 설정이 저장되어 있습니다. 유의할 점은 다음 부분입니다.

configureWebpack: {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.join(__dirname, 'src'),
      '@oj': path.join(__dirname, 'src/pages/oj'),
      '@admin': path.join(__dirname, 'src/pages/admin')
    }
  }
}

javascript나 vue 파일에서 다음과 같이 parsing이 이뤄집니다.

• @ : frontend/src
• @oj : frontend/src/pages/oj
• @admin : frontend/src/pages/admin

package.json

package.json이 낯선 분들은 다음 글을 참고해주세요.
https://velog.io/@joabyjoa/package.json-파헤치기

package.json 에서는 yarn(또는 npm)으로 실행할 수 있는 명령어를 정의합니다.

• yarn serve : Vue CLI로 개발용 서버를 실행합니다. 일부 기능만 동작하므로 참고용으로만 사용해야 합니다.
• yarn build : Vue CLI로 프로젝트의 파일들을 배포용 파일로 dist 폴더에 bundle합니다.
• yarn lint : eslint로 코드 스타일을 검사합니다.

yarn.lock

yarn에서 패키지 의존성 관리를 위해 자동 생성하는 파일입니다. 여러 사람들이 하나의 프로젝트를 진행할 때 서로 다른 버전의 패키지를 쓰는 일을 방지하기 위함입니다.

src

각종 frontend 코드들이 담겨 있습니다. 폴더 내용은 다음과 같습니다.

• assets : 각종 이미지, 글꼴 등
• i18n : 다국어 지원 (deprecated)
• pages : 각종 페이지
• plugins : third party 플러그인 (highlight.js, KaTeX)
• store : component간 공유 저장소 (vuex 기반)
• styles : UI 스타일 (scss, less)
• utils : 구현 시 필요한 함수, 상수 등의 유틸리티

---

pages 폴더 구조

실제 웹페이지의 구현 내용은 모두 pages 폴더에 있습니다.

admin과 oj로 분할되어 있으며, 각 폴더 내용은 다음과 같습니다.

pages
├── admin
│   ├── App.vue
│   ├── api.js
│   ├── components
│   ├── index.html
│   ├── index.js
│   ├── router.js
│   ├── style.less
│   └── views
└── oj
    ├── App.vue
    ├── api.js
    ├── components
    ├── index.html
    ├── index.js
    ├── router
    └── views

App.vue , index.js , index.html

가장 상위에 존재하는 파일로, 모든 페이지에 공통적으로 적용되는 레이아웃이나 사용될 패키지 등을 정의합니다.

api.js

페이지에서 사용될 API를 함수로 정의해둔 파일입니다. 각 페이지에서 axios를 이용하여 API를 쉽게 호출할 수 있도록 합니다.

router

URL을 정의한 파일입니다. 입력된 URL에 대해 연결할 Vue 페이지를 정의합니다.

components

Vue 페이지에 공통적으로 사용될 component들입니다.

views

실제로 웹 상에서 렌더링될 Vue 페이지들입니다.