사용 기술 스택

📂 frontend

• Frontend Base Setting

  .
  ├── .babelrc
  ├── .eslintrc.js
  ├── .prettierrc.js
  ├── package.json
  ├── public
  │   └── index.html
  ├── src
  │   ├── app.jsx
  │   ├── index.js
  │   ├── @types 
  │   ├── components
  │          ├── intex.ts
  │          └──  style.ts
  │   ├── contexts
  │   ├── utils
  │   └── views  
  ├── webpack.config.js
  └── tsconfig.json

• Package 설치

  webpack(브라우저 호환성)

  • webpack : 웹팩 사용필수 라이브러리
  • webpack-cli : 웹팩 커맨드라인 인터페이스 라이브러리
  • webpack-dev-server : 웹팩 개발서버 라이브러리
  • clean-webpack-plugin : 이전 빌드파일들을 비워주는 라이브러리
  • html-webpack-plugin : 번들링 된 cs파일과 js파일을 각각 html에 자동연결 해주는 라이브러리
  • 각종 loader : babel-loader, css-loader

  babel(es6->es5 문법, react 문법 적용)

  • @babel/core : 바벨 사용필수 라이브러리
  • @babel/plugin-proposal-class-properties : class 를 사용 가능처리(추가예정)
  • @babel/preset-env : es5 트랜스파일러
  • @babel/preset-react : 리액트 jsx를 위한 라이브러리
  • babel-plugin-styled-components : styled component를 사용하기 위한 라이브러리(추가예정)

  eslint & prettier(코드를 일관된 형태로 바꿔주기 위해서 사용)

  • Airbnb style guide

    ⇒ npx install -peerdeps -dev eslint-config-airbnb

  • plugins: ['react', 'prettier']


• 라이브러리 혹은 기술

  • 👍 React
    • 프론트엔드 라이브러리, 바닐라로 짤 경우에는 DOM마다 이벤트를 주게되어 메모리 측면에서 굉장히 비효율적이지만 가상 돔 형태로 지원되는 리액트를 사용할 경우, 객체로 구성되어 있기 때문에 메모리 측면에서 상당히 절감을 불러올 수 있다고 판단하여 사용
    • react : React 사용필수 라이브러리
    • react-dom : React DOM 렌더링에 필요한 라이브러리
    • react-mathquill : React에서 LaTeX 문법을 MathML로 바꿔서 보여주는 라이브러리 ex) \sum_{}^{}{} -> 시그마로 변환
    • react-jest : React에서 test 코드를 작성하기 위해서 사용하는 라이브러리
  • 🦖 TypeScript
    • 리액트 내의 자바스크립트 코드를 짤 때, 디버깅하기가 수월하고 에러 발생 유무를 쉽게 판단할 수 있게 되서 사용
    • typescript : TypeScript 사용필수 라이브러리
  • 📦 Canvas
    • 그림판의 UI를 만들기 위해서 사용

🖥️ 서버

• ncp(네이버 클라우드 플랫폼 - 프론트 서버를 다른 사람들이 접근하기 위해서 사용)
• webpack-dev-server(실시간 적용 결과 반영)
• nginx(프론트 서버를 네이버 클라우드 플랫폼에서 적용할 수 있도록 하기 위해서 설정)

🐱 형상관리

• GitHub
• git

🗂️ 문서 관리

• wiki
• 구글 docs
• powerpoint