Web 기술 스택 및 설정

Back-end 🔥

기술스택

• Back-end: Node.js, Express.js, MySQL2, Oauth
• database: MySQL 5.7.31
• infra: Naver Cloud Platform
• linter: Eslint, prettier
• collaboration tool: Github, Slack

폴더 구조

• api : API 로직 처리
  • 폴더명/이름.router.js : 요청이 들어온 uri에 매칭되는 컨트롤러로 전달
  • 폴더명/이름.controller.js : json 결과 return , 관련 서비스 로직은 서비스에 전달
  • 폴더명/이름.service.js : 실제 Datebase와 연결 & query 수행 후 결과 리턴
  • utils : query문, success/fail format 등 공통적으로 사용되는 부분 모아둔 디렉토리

Front-end 🔥

• Front-end: Babel, Webpack, React, styled-component

• css : SCSS

• webpack & babel 설정

VS Code Extension Setting 🔥

• Prettier

  • prettier code formatter 설치

  • prettier code formatter 설정

    "prettier.singleQuote": true,
    

• ESLint

  • eslint 설치

  • eslint 설정

  • eslint-config-prettier: eslint랑 prettier가 충돌할 때, eslint 규칙을 끄는 역할 담당
  • eslint-plugin-prettier: prettier에서 제공해주는 것으로, eslint와 prettier를 한 방에 돌려주는 역할
  
  

  파일 명: .eslintrc.js

  module.exports = {
    plugins: ["prettier"],
    extends: ["airbnb-base", "plugin:prettier/recommended"],
    parserOptions: {
      ecmaVersion: 7,
    },
    env: {
      es6: true,
      browser: true,
      node: true,
    },
    rules: {
      "prettier/prettier": "error",
      "no-var"            :"warn",
      "no-unused-vars"    :"off"
    },
  };

• Code Spell Checker

  • Code Spell Checker 설치
  • 오타를 방지하는 플러그인