아빠개발자의 노트

📢NODE JS -ESlint

📋ESlint 설치법

▼ESLint

ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미합니다.ESLint가 뜬 이유는 바로 확장성 때문입니다. 다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고, 손쉽게 다른 회사나 사람의 설정을 도입할 수 있습니다.

npm install eslint

eslint --init
// 또는
node node_modules\eslint\bin\eslint.js --init

////////////아래 질의문 선택////////////////////
? How would you like to use ESLint? 
To check syntax, find problems, and enforce code style

? What type of modules does your project use? 
JavaScript modules (import/export)

? Which framework does your project use? 
None of these

? Where does your code run? (Press  to select,  to toggle all,  to invert selection)
Browser

? How would you like to define a style for your project? 
Use a popular style guide

? Which style guide do you want to follow? 
Airbnb (https://github.com/airbnb/javascript)

? What format do you want your config file to be in? 
JavaScript

? Would you like to install them now with npm? 
Yes

  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.16.0",
    "nodemon": "^1.18.10"
  },

//이렇게 추가가 되어있을것이다

npm uninstall eslint

npm install eslint-plugin-prettier
npm install eslint-config-prettier

package.json 에서  dependencies 에 
"eslint-plugin-prettier" : "^3.0.0", 이런게 잇을텐데
이걸 devDependencies객체로 넣자 그후 npm install prettier -D
이렇게 명령어를 쳐서 설치하면 된다.

.eslintrc.js
module.exports = {
  extends: ["airbnb-base", "plugin:prettier/recommended"],
  rules: {
    "no-console": "off"
 }
};
//이렇게 에러의 이름이있는데 rules 에 에러이름을넣고 off를 넣어주면된다.

📢NODE JS - pug(mixin) 사용법

📋MIXIN

▼mixin 은 pug의 함수의 일종이다. 반복적으로 사용되는 html 구조를 mixin의 정의하고 그값을 인자함수로 정의해줌으로써 반복되는 html 안에 변수를 설정해줄수있다. 아래 소스의 +는 mixin을 포함하여 실행한다는 뜻이다.

💻videoBlock.pug

mixin videoBlock(video ={})
    .videoBlock
        video.videoBlock__thumbnail(src=video.videoFile, controls=true)
        h4.videoBlock__title=video.title
        h6.videoBlock__views=video.views

💻home.pug

include mixins/videoBlock

each object in videos //for .. in 같은 pug 전용 반복문이다.
    +videoBlock({
        title: object.title,
        description:object.description
    })

💻videoController.js (단지 pug의 videos의 객체를 전달해주기 위함)

const videos = {title : '제목' , description : '내용'};
const home = (req,res) => {
    res.render('home',{videos});
};