준 강의 - 프론트엔드 기본 꿀팁

⚙️ 1. 네이밍 컨벤션 및 포매팅

자바스크립트는 유연한 성격을 가지고 있어서 팀마다, 개인마다 컨벤션이나 스타일이 많이 다를 수 있다.

프론트엔드 진영에서 프론트엔드 팀이 유명한 NHN Ent의 Toast UI에서 정리해준 코딩컨벤션을 참고해보자!

🎨 2. 코드를 자신있게, 아름답게! eslint, prettier

1) eslint

린트(lint)는 소스 코드에 문제가 있는지 탐색하는 작업을 의미하며, 린터(linter)는 이 작업을 도와주는 소프트웨어를 말한다. 자바스크립트와 같이 컴파일 과정이 없는 인터프리터 언어의 경우, 런타임 에러가 발생할 확률이 높기 때문에, 이 린트 작업을 통해 사전에 에러를 최대한 잡아줄 수 있다.

그 중 eslint는 자바스크립트진영의 오픈소스로 확장되고 있는 정적 분석 도구중 하나이다.

⚙️eslint 설정하기

$ cd <project-folder>
$ npm init -y
$ npm install eslint

초기화

$ node_modules/.bin/eslint --init

각자 상황에 맞게 설정

 

그러면 프로젝트의 루트 경로에 .eslintrc.js라는 파일이 생성된 것을 볼 수 있다.

module.exports = {
  env: {
    es6: true,
    node: true
  },
  extends: "eslint:recommended",
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module"
  },
  rules: {}
};

extends : 다른 ESLint 설정을 확장해서 사용할 때 사용

rules : 본인의 프로젝트에서 정한 규칙으로 기존의 rule들을 덮어쓰고자 할 때 사용

IntelliJ에 Eslint를 설정하여 보다 편하기 확인하는 방법

Preferences... > Languages & Frameworks > Javascript > Code Quality Tools > ESLint에서 아래와 같이 설정을 해줍니다.

설정을 완료하고 나면 코드 작성시 eslint에서 잡아주는 메세지를 확인할 수 있습니다! 여러분은 이제 에러를 발생시킬 수 있는 요인들을 코드 작성히 알 수 있게되었습니다!!

2) prettier

Prettier는 일종의 Code Formatter 이다. (Code Formatter란 개발자가 작성한 코드가 정해진 코딩 스타일을 따르도록 변환해주는 도구)

Eslint와 함께 사용하기

실제 프로젝트에서는 Prettier는 단독 CLI 도구가 아닌 일반적으로 ESLint와 같은 린터(Linter)와 함께 사용합니다.

먼저 Prttier를 설치합니다.

$ npm i -D prettier

그리고 Eslint와의 통합을 위해서 2개의 패키지를 추가로 설치합니다.

$ npm i -D eslint-config-prettier eslint-plugin-prettier

마지막으로 해당 프로젝트의 .eslintrc.js의 extends에 설정을 추가해줍니다.

{
  "extends": ["plugin:prettier/recommended"]
}

기존에 extends 옵션에 다른 값들이 있는 경우, 기존 설정보다 우선하려면 배열의 맨 뒤에 위치시키야 합니다.

📦 3. 자바스크립트의 변수

최근 자바스크립트의 트렌드에서는 var의 사용은 지양하고, const와 let을 주로 사용한다.
var 형식의 변수 선언 방식은 지나친 유연함으로 인해 우리의 정신 세계도 유연하게 안드로메다로 보낼 수 있기 때문이다.

 

예시

var name = 'eastjun'
console.log(name) // eastjun

var name = 'junjal'
console.log(name) // junjal

//위와 같이 할당이 가능하다

그래서 최신 자바스크립트 문법에서는 let과 const를 사용한다.

let name = 'eastjun'
console.log(name) // eastjun

let name = 'junjal'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

 

let은 변수의 재할당이 가능하지만, const는 재할당이 불가능합니다.

const name = 'eastjun'
console.log(name) // bathingape

const name = 'junjal'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

✌️4. 자바스크립트에서의 값 비교 ✊

엄격한 비교(===) vs 형변환 비교(==)

console.log(1 == 1);
// expected output: true

console.log('1' == 1);
// expected output: true

console.log(1 === 1);
// expected output: true

console.log('1' === 1);
// expected output: false