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

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 : 구현 시 필요한 함수, 상수 등의 유틸리티