사용 기술 스택

📂 frontend

• Frontend Base Setting

  .
  ├── .babelrc
  ├── .eslintrc.js
  ├── .prettierrc.js
  ├── package.json
  ├── public
  │   └── index.html
  ├── src
  │   ├── app.jsx
  │   └── index.js
  └── webpack.config.js

• Package 설치

  1. webpack(브라우저 호환성)
  • webpack : 웹팩 사용필수 라이브러리
  • webpack-cli : 웹팩 커맨드라인 인터페이스 라이브러리
  • webpack-dev-server : 웹팩 개발서버 라이브러리
  • clean-webpack-plugin : 이전 빌드파일들을 비워주는 라이브러리
  • html-webpack-plugin : 번들링 된 cs파일과 js파일을 각각 html에 자동연결 해주는 라이브러리
  • 각종 loader : babel-loader, css-loader
  2. 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를 사용하기 위한 라이브러리(추가예정)
  3. eslint & prettier(코드를 일관된 형태로 바꿔주기 위해서 사용)

  • Airbnb style guide

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

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


• 라이브러리 혹은 기술

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

서버

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

형상관리

• github
• git

문서 관리

• wiki
• 구글 docs
• powerpoint