예담직업전문학교(IT)

Vue.js Options API VS Composition API

Fri, 20 Dec 2024 05:21:02 GMT

Options API

Composition API

Windows 단축키

Tue, 10 Dec 2024 07:59:48 GMT

키보드 특수문자 이름

기호	영문이름	한글이름
`	Grave Accent, backtick, Backquote	백틱
~	Tilde(틸드)	물결표시
!	Exclamation point	포인트 / 느낌표
@	At sign / Commercial at	골뱅이
#	Crosshatch / Sharp	샵,해쉬
$	Dollar Sign	딸라
%	Percent Sign	퍼센트
^	Circumflex/caret	꺽쇠,웃는 표시
&	Ampersand	앤드(AND)
*	Astrrisk	별
_	Underscore / Underline	밑줄
-	Minus sign / hyphen / Dash	빼기
+	Plus sign	더하기
=	Equal sign	같다
/	Slash / Virgule	슬래쉬 / 나누기
\	Back Slash	백 슬래쉬
\|	Vertical Bar	수직작대기, 파이프
:	Colon / Double Dott	콜론/땡땡
;	Semicolon	세미콜론
,	Comma	쉼표
.	Period / Fuall Stop	점/마침표
"	double quotes	큰(쌍) 따옴표
'	single quotes / Apostrophe	작은(홀) 따옴표
?	Question Mark	물음표
( )	Parenthesis	소괄호
{ }	Brace	중괄호
[ ]	Bracket	대괄호
< >	Angle Bracket	화살표
>	Greater Than Sign	크다
<	Less Than sign	작다
	Space / Blank	빈칸 / 공백

윈도우참조키

reference

| 단축키 | 설명 | | :- | :- | :- | |이모지/특수문자| 윈도우로고키 + 마침표(.) 또는 세미콜론(;) | 이모지패널 열기(✔✨👍) | || 한글자음 + 한자 + Tab | 해당 자음의 특수문자 전체 | || 윈도우로고키 + Shift + S | 스크린샷 | |윈도우 창| 윈도우로로키 + M | 모든 창 최소화 | || 윈도우로고키 + D | 바탕화면 보기 | || 윈도우로고키 + 방향키 | 화면분할. 다른 옆에 무슨 창을 최대화할 건지 선택하는 화면이 나옴 | || 윈도우로로키 + Shift + M | 모든 창 복원 | || Ctrl + Shift + T | Edge 브라우저에서 닫힌 탭을 복원 | || 윈도우로고키 + E | 파일 탐색기 실행 | |복사/붙여넣기| Ctrl + A | 전체선택 | || Ctrl + C | 복사 | || Ctrl + X | 자르기 | || Ctrl + V | 붙여넣기 | || Ctrl + Z | 작업 취소 | || Ctrl + Y | 작업 재실행 | |가상데스크톱| 윈도우로고키 + Tab | 작업보기 열기 | || 윈도우로고키 + Ctrl + 방향키 | 윈도우 작업화면 이동 | || 윈도우로고키 + Ctrl + D | 가상 데스크톱 추가 | || 윈도우로고키 + Ctrl + F4 | 사용 중인 가상 데스크톱 닫기 |

AWS 실습

Mon, 09 Dec 2024 23:46:00 GMT

실습1: S3 이용하여 폴더 백업하기

a. ACL 작성

{    "Version": "2012-10-17",
    "Id": "Polic  y1700440993280",
    "Statement": [
        {
            "Sid": "Stmt1700440977436",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::cyan-bucket/*"
        }
    ]
}

aws s3 ls
aws s3  sync  . s3://cyan-bucket2/web

실습2: Amazon DynamoDB NoSQL 테이블 생성 및 조회

reference

NoSQL 테이블 생성 a. DynamoDB 콘솔에서 테이블생성 버튼 b. 테이블 세부정보 입력 테이블이름 : Music 파티션키 : Artist 정렬키 : songTitle c. 테이블생성

** 파티션 키는 확장성을 위해 파티션 간에 데이터를 분산하는 데 사용됩니다. 값 범위가 넓고 액세스 패턴이 고르게 분산될 가능성이 있는 속성을 선택하는 것이 중요합니다.

NoSQL 테이블 데이터 입력 a. 항목탐색 b. 좌축 메뉴에서 Music 선택 c. 항목생성 버튼 d. 값입력 e. 항목생성
NoSQL 테이블 조회
데이터 삭제
NoSQL 테이블 삭제

실습3: AWS CLI 설정

reference

(aws cli 설정)[https://aws.amazon.com/ko/getting-started/guides/setup-environment/module-three/]

a. AWS CLI 설치 다운로드 : https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html 파일명 : AWSCLIV2.msi

b. 설치 확인

C:\Users\user>aws --version aws-cli/2.22.12 Python/3.12.6 Windows/11 exe/AMD64

c. sso 설정

C:\Users\user>aws configure sso
SSO session name (Recommended): Test1
SSO start URL [None]: https://d-9b67788a7b.awsapps.com/start
SSO region [None]: ap-northeast-2
SSO registration scopes [sso:account:access]:
Attempting to automatically open the SSO authorization page in your default browser.

aws s3 ls --profile admin-1
aws ec2 describe-vpcs --profile admin-1
aws dynamodb list-tables --profile

실습4 Lambda 및 DynamoDB를 사용한 CRUD HTTP API 생성

reference

http-api-dynamo-db
programming-with-python

IAM(Identity and Access Management) : 리소스 접근 권한

롤 생성
Lambda 검색하고 함수생성 클릭
함수이름 입력하고 런타임은 python 선택하고 함수생성
```
import boto3
```

dynamodb = boto3.resource('dynamodb')

table = dynamodb.Table('Music')

def lambda_handler(event, context): try:
response=table.put_item(Item=event)
return table.scan() except: raise



### 실습5: API Gateway에서 Lambda 사용
reference
https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/services-apigateway-tutorial.html

aws lambda invoke ^ --function-name LambdaFunctionOverHttps ^ --payload file://input.txt outputfile.txt ^ --cli-binary-format raw-in-base64-out --profile admin-1

curl https://5bwffjeoq6.execute-api.ap-northeast-2.amazonaws.com/test/DynamoDBManager ^ -d '{"operation": "create", "payload": {"Item": {"id": "5678EFGH", "number": 15}}}'

curl https://5bwffjeoq6.execute-api.ap-northeast-2.amazonaws.com/test/DynamoDBManager -d ^ "{"operation": "read", "payload": {"Key": {"id": "5678EFGH"}}}"


### 실습6: ELB 구성
VPC 구성요소  

1. VPC
2. 서브넷(Subnet)
3. 라우팅테이블
4. 보안그룹
5. 인터넷게이트웨이

mariadb

Mon, 09 Dec 2024 05:04:59 GMT

reference

node에서 maridb 연결 permitSetMultiParamEntries 을 true로 설정해야 insert into table명 set ? 이 가능함

const mariadb = require('mariadb');
const pool = mariadb.createPool({
     host: '127.0.0.1', 
     user:'user01', 
     password: '0000',
     database: 'shop',
     permitSetMultiParamEntries : true,
     connectionLimit: 5
});
async function asyncFunction() {
  let conn;
  try {
    conn = await pool.getConnection();   
    const data = { username: 'scott', password: '0000' };
    const res = await pool.query("insert into emp set ? ",data) ;
    console.log(res);  // { affectedRows: 1, insertId: 1, warningStatus: 0 }

    const rows = await conn.query("SELECT * from emp");
    console.log(rows); 

  } catch (err) {
    throw err;
  } finally {
    if (conn) conn.end();
  }
}
asyncFunction().then(() => {
  pool.end();
});

mkdir shop
cd shop
npm init
npm install mariadb

sql 튜닝

Mon, 02 Dec 2024 23:26:11 GMT

실행계획(execution plan)

sql 파싱 -> sql 최적화 -> sql 실행

sql 파싱

SQL 구문 오류 검사
대상객체가 존재 여부와 제약조건 권한 등을 체크
sql 실행 비용(cost) 계산
어떤 방식으로 실행할지 판단하여 실행계획을 결정

스캔방식의 구조

Full Table Scan 순차적으로 블록을 액세스하고 멀티블록 I/O와 병렬 액세스 가능
Index Scan 인덱스 블록을 액세스 후 해당 rowid로 데이터 블록 액세스하고 싱글 블록 I/O 가능
DW 업무 전용서버에서는 Multi Block Read Count를 크게 지정하고 OLTP 업무 위주의 서버라면 작게 지정.
데이터가 저장되어 있는 블록의 수로 판단하여 풀 테이블 스캔을 할지 인덱스 스캔을 할지 결정해야 함.
Index range scan이 table full scan 보다 느려지는 조회 건수 지점을 인덱스 손익분기점 이라 하는데, 테이블 전체 데이터양의 10 ~ 15% 이상을 출력하게 되면 오히려 table full scan이 효율적일 수 있다.
테이블의 데이터가 저장되어 있는 전체 블록 수가 Multi Block Read Count보다 작다면 한번의 I/O만으로 해당 데이터를 추출할 수 있으므로 인덱스를 생성할 필요가 없음

인덱스 활용시 주의사항

조건절에 기술되는 컬럼의 인덱스를 생성한 후 사용자의 실수나 의도적인 사용 제한으로 인해 인덱스 사용이 제한되는 경우입니다.

인덱스 컬럼을 가공을 하면 안됨.

-- full table scan (좌변을 연산하게 되면 풀테이블 스캔 방식 적용)
where substr(product_code, 1, 3) = 'PRD'    

-- index scan ( 와일드카드(%) 는 끝에 작성하게 되면 인덱스 스캔 방식을 적용 )
where product_code like 'PRD%'

-- full table scan
where trunc(regdate) = to_date('20240101', 'yyyymmdd') 

-- index range scan
where regdate between to_date('20240101' || '000000', 'yyyymmddhhmiss')         
                  and to_date('20240101' || '235959', 'yyyymmddhhmiss')

인덱스와 상수로 제공되는 값의 데이터 형식 차이로 인해 발생하는 문제(묵시적 형변환이 발생)
```
-- 타입이 맞지 않아 인덱스 컬럼에 형변환이 발생
where cnt = '10'    ==>   where to_char(cnt) = '10'    
```

not 연산자는 인덱스를 사용하지 않으므로 not exists, minus 등을 이용하여 인덱스 사용을 유도해야 함.

where empno <> '1234'
    ==>  where not exists (select '1' from employees where employee_id = '1234')
    ==>  select * from employees
         minus
         select * from employees where where employee_id = '1234'

is not null은 인덱스 사용에 제한을 받음 좁은 분포도의 경우에는 인덱스를 이용하고 넓은 분포도의 경우에는 인덱스를 변형하여 full table scan을 수행하도록 하는 경우에 데이터의 분포도 균형이 깨지고 저장 공강의 낭비만 발생한다면 null 값을 사용하는게 효율적임
```
where status = 'A'
where status = 'E'  --> 분포도가 80%를 넘어간다면 null을 사용 -->  status = to_char(null)
```

OR 대신 Union을 사용

WHERE department = 'Marketing' OR department = 'IT';         -- full table scan
  ==> SELECT * FROM employees                                -- index scan
       WHERE department = 'Marketing'
       union all
      SELECT * FROM employees
       WHERE department = 'IT'

sql 쿼리 속도를 올리려면

필요한 Row, Column만 가져와라.

SELECT e.name, e.department, e.sales
FROM employees e
JOIN (
SELECT department, MAX(sales) AS max_sales
FROM employees
GROUP BY department
) d ON e.department = d.department AND e.sales = d.max_sales;

분석 함수를 최대한 활용
- 전통적인 집계 함수와 달리 사전에 데이터를 그룹화할 필요가 없어요. 이는 불필요한 자원 소모를 줄이고 쿼리 성능을 높임
- 복잡한 데이터 분석 과정에서 발생할 수 있는 중간 결과물의 저장과 재처리를 최소화할 수 있어요. 이는 쿼리 실행 시간을 크게 단축
- 순위 결정 함수: ROW_NUMBER(), RANK(), DENSE_RANK()
- 데이터 변화를 추적하는 분석 함수: LEAD(), LAG() 등의 함수
```
-- 급여가 높은 상위 3명의 직원 정보만 추출
WITH ranked_employees AS (
SELECT  name,
       department,
       salary,
       ROW_NUMBER() OVER (PARTITION BY department ORDER BY salary DESC) AS rank
 FROM employees
)
SELECT *
 FROM ranked_employees
WHERE rank <= 3;
```
계산값을 미리 저장해두고, 나중에 사용하라.
- 쿼리가 실행될 때마다 방대한 양의 주문 및 고객 데이터를 모두 읽어서 복잡한 계산을 수행해야하고 특히 재구매율 계산을 위해 서브쿼리까지 사용되고 있어 쿼리 속도는 더욱 느려짐
- 계산 결과를 별도의 테이블에 저장하여 사용하며 주기적으로 계산 결과 업데이트
hint 사용
- 힌트란 SQL 튜닝의 핵심 부분으로 일종의 지시 구문이다.
- 오라클 옵티마이저(Optimizer)에게 SQL문 실행을 위한 데이터를 스캐닝하는 경로, 조인하는 방법 등을 알려주기 위해 SQL사용자가 SQL 구문에 작성하는 것을 뜻한다.
- 오라클이 항상 최적의 실행 경로를 만들어 내기는 불가능하기 때문에 직접 최적의 실행 경로를 작성해 주는 것
- 힌트, 인덱스, 조인의 개념을 정확히 알고 사용하지 않은 무분별한 힌트의 사용은 성능의 저하를 초래하기 때문에 잘 알고 최적의 실행 경로를 알고 있을 경우 적절하게 사용하여야 한다.
```
select /*+ index_asc(board ipx_board_regdate) */ * from board ;
select /*+ full(board) */ * from board ;
```

인덱스 설정 시 유의사항

인덱스를 생성해야 하는 경우 인덱스를 많이 생성한다고 반드시 좋은 것(쿼리속도 향상)은 아니다. DML 작업이 커밋되면 변경사항을 인덱스에도 반영해야하는데, 테이블과 연관된 인덱스가 많을 수록 관련 인덱스를 모두 갱신해야 함으로 서버의 부담이 증가한다. 따라서 다음과 같은 경우에만 인덱스를 생성해야한다.

열(Column)에 많은 NULL 값이 포함된 경우
NULL 값을 제외하고 검색해야하는 경우 인덱스를 사용하면 검색 속도를 향상시킬 수 있다.
열(Column)에 광범위한 값이 포함된 경우
인덱스 컬럼에 다양한 값이 있는 경우 인덱스를 사용하면 검색 속도를 향상시킬 수 있다.
WHERE절 혹은 JOIN 조건에 자주 사용되는 경우
테이블이 크고 대부분의 쿼리가 테이블에서 2~4% 미만의 행을 검색할 것으로 예상되는경우
ORDER BY 절에 자주 사용되는 경우
인덱스는 기본적으로 정렬되어있어서 order by를 수행할 필요가 없다.

인덱스 생성을 안해야 하는 경우

데이터 변경이 자주 발생
검색할 데이터가 전체 데이터의 20% 이상인 경우(데이터 중복도가 높은 경우)

요약정리

데이터를 변형하는 연산은 가급적 피하고, 원본 데이터를 직접 비교하는 조건을 사용하세요. 이는 인덱스 활용도를 높여 쿼리 속도를 향상시킵니다.
OR 연산자 대신 UNION을 활용하면 각 조건을 독립적으로 최적화하고 인덱스를 효과적으로 사용할 수 있습니다.
불필요한 Row와 Column을 제외하고 꼭 필요한 데이터만 조회하세요. 이는 데이터 처리량을 최소화하여 쿼리 성능을 높입니다.
ROW_NUMBER(), RANK(), LEAD(), LAG() 등의 분석 함수를 적극 활용하면 복잡한 데이터 분석을 유연하고 효율적으로 수행할 수 있습니다.
LIKE 연산자와 와일드카드(%)를 사용할 때는 문자열 끝에 와일드카드를 두는 것이 인덱스 활용에 유리합니다.

복잡한 계산은 실시간으로 처리하기보다는 미리 계산해서 저장해두고 주기적으로 업데이트하는 것이 효율적입니다.

CREATE TABLE BOARD
( BNO NUMBER(10,0) primary key,
TITLE VARCHAR2(1000),
CONTENTS VARCHAR2(4000),
WRITER VARCHAR2(1000),
REGDATE DATE,
UPDATEDATE DATE DEFAULT sysdate,
IMAGE VARCHAR2(2000)
) ;

create sequence SEQ_BOARD start with 107;
INSERT INTO BOARD( BNO,TITLE,CONTENTS,WRITER,REGDATE,UPDATEDATE,IMAGE)
SELECT SEQ_BOARD.NEXTVAL, TITLE,CONTENTS,WRITER,REGDATE+1,UPDATEDATE+1, IMAGE from board;

select count(*) from board;

select * from dba_data_files;
ALTER DATABASE DATAFILE 'C:\ORACLEXE\APP\ORACLE\ORADATA\XE\UNDOTBS1.DBF' RESIZE 1000M;

자바스크립트 코딩 가이드

Wed, 27 Nov 2024 09:04:26 GMT

코딩 표준을 준수하면 가독성이 좋아지고 유지보수가 수월해짐. 개발자간의 코드를 협업하고 이해하기 쉬워짐. 버그와 에러의 발생을 최소화할 수 있음.

코딩 가이드

Naming Convention

snake_case : 테이블 컬럼명
camelCase : 메서드(함수)명
PascalCase : 클래스명
UPPER_CASE : 상수
kebab-case : html 태그/속성, 스프링 yml, url주소

Comments and Documentation

다른 개발자가 코드를 보고 맥락을 이해하도록 주석을 작성
주석은 간결하게 작성하고 일반적인 것들은 주석에서 제외

indent(들여쓰기)와 공백

가로 들여쓰기 : 2칸 공백 사용
세로 들여쓰기 : 논리 블록 사이에 빈줄을 넣어 코드 분리
예약어 뒤에는 공백 추가(if, for..)
함수 선언 괄호 앞에 공백 추가
연산자, 콤마, 콜론 뒤에 공백 추가

var x = 2
var obj = { 'key': 'value' } 
var list = [1, 2, 3, 4]
function greet (name, options) { 
  if (name === 'John') {
    // ...
  } else {
    // ...
  }
}

함수 배치

함수 호이스팅
함수가 선언되기 전에 호출할 수 있는 개념으로서 코드를 먼저 작성하고 함수 선언는 그 다음에 작성
함수 선언에만 사용되고 함수 표현식에는 적용안됨
코드 가독성
관련기능을 그룹화하고 서로 가까이 배치
#region folding for VS Code 확장팩을 이용하여 코드 영역을 나누고 코드 폴딩
```
 // #resion 이름  ~~~ // #endregion 로 
```
변수선언, 함수 선언, 이벤트 핸들러 등 기능별로 영역을 나누어서 코딩
종속성 다른 함수에서 참조되는 함수를 먼저 선언 함수가 다른 함수에 의존하는 경우 의존하는 함수 뒤에 위치
범위 및 액세스 함수내에 선언된 함수는 부모 함수의 변수와 함수에 접근이 가능함
너무 깊은 중첩 레벨은 사용하지 말 것

Linter

Linter라는 도구를 사용하면 내가 작성한 코드가 스타일 가이드를 준수하고 있는지를 자동으로 확인할 수 있고, 스타일 개선과 관련된 제안도 받을 수 있습니다.

JSLint
ESLint

/*! 
    파일명 : DateUtil.js
      작성일 : 2020-10-01   
      작성자 : 개발팀 홍길동   

      수정일        수정자         수정내용
      ------       ------     -------------------
      2020.10.01    홍길동        신규작업 
    2020.11.10    김기자        today()함수 추가
*/

/**
 * @type {Object.}  상품별 주문수량
 */
let product;

/**
 * a와 b를 더한 결과를 반환
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 * @returns {number} a와 b를 더한 결과
 */
function plus(a, b) {
  return a + b;
}

구글 JavaScript 스타일 가이드

2. 소스파일

파일명은 밑줄(_) 또는 대시(-)를 포함할 수 있으며 확장자는 .js 여야 합니다.
UTF-8 인코딩
공백문자는 탭을 사용하지 말고 스페이스바를 사용
Non-ASCII characters

3. 소스파일 구조

각 섹션 사이에 1~2줄의 빈줄로 구분 ```

License or copyright information, if present
@fileoverview JSDoc, if present
goog.module statement, if a goog.module file
ES import statements, if an ES module
goog.require and goog.requireType statements
The file’s implementation

4. 포맷팅

4.1 중괄호

모든 제어문에 중괄호는 필요하며 본문에 문장이 하나만 있어도 필요함.
줄바꿈을 생략할 수 있는 유일한 경우는 줄바꿈 없이 한 줄에 전부 들어갈 수 있는 간단한 if 문만 가능함.

여는 중괄호뒤에 줄바꿈이 있고, 닫는 중괄호뒤에 줄바꿈이 있는데 닫는 중괄호 뒤에 else, catch 등이 오는 경우는 예외임

class InnerClass {
constructor() {}

/** @param {number} foo */
method(foo) {
  if (condition(foo)) {
    try {
      // Note: this might fail.
      something();
    } catch (err) {
      recover();
    }
  }
}
}

빈 블록이나 블록과 유사한 구조는 열자마자 바로 닫을 수 있으며, 그 사이에 문자, 공백, 줄 바꿈이 없어야 합니다.
```
function doNothing() {}
```

4.2 들여쓰기

새로운 블록 들여쓰기는 2칸 사용

배열, 객체 상수는 블록처럼 들여쓰기를 지정할 수도 있고 옆으로 나열할 수도 있음

const a = [
0,
1,
2,
];
const b = [0, 1, 2];
const c = {
a: 0,
b: 1,
};
const d = {a: 0, b: 1};
someMethod(foo, [
0, 1, 2,
], bar);

Class 선언에서 클래스 선언 뒤나 메서드 끝에 세미콜론을 적지 말고 상속인 경우 @extends JSDoc 주석을 작성
익명함수 선언할 때 함수 본문은 이전 들여쓰기보다 두칸 더 들여쓰기함

Switch 문장에서 case 라벨 뒤에는 줄바꿈을 하고 2칸 들여쓰기

switch (animal) {
case Animal.BANDERSNATCH:
  handleBandersnatch();
  break;

case Animal.JABBERWOCK:
  handleJabberwock();
  break;

default:
  throw new Error('Unknown animal');
}

4.3 문장

한 줄에 하나의 구문만 작성
모든 문장은 세미콜론으로 끝나야 함.

4.4 열제한 80

컬럼 길이는 80자를 넘지않도록 하고 코드를 여러 줄로 나누어서 작성.
예외사항
- import, export
- long URL
- shell 명령어
- 긴 문자열 상수(ex: 긴 파일경로명)

4.5 Line-wrapping(줄바꿈)

열 제한을 준수하기 위해서 하나의 문장을 여러 줄로 나누어서 작성.
지역변수나 메서드를 작성하면 줄바꿈을 하지 않고도 해결할 수 있음.
return value 절에서 return과 리턴값 사이에는 줄바꿈을 하지 않음.
하나의 문장에서 줄바꿈이 필요하다면 기호(, 연산자) 뒤에서 줄바꿈이 발생함.
원래 줄에서 +4만큼 들여쓰기

4.6 공백

수직 여백
- 필드의 논리적인 그룹을 만들 때 빈줄 삽입
- 함수 본문의 시작 또는 끝에 있는 빈 줄은 허용되지 않음
- 여러 줄의 빈줄은 허용하지만 권장되지는 않음
수평 여백

4.7 공백

Airbnb JavaScript 스타일 가이드

Types
References
Objects
Arrays
Destructuring
Strings
Functions
Arrow Functions
Classes & Constructors
Modules
Iterators and Generators
Properties
Variables
Hoisting
Comparison Operators & Equality
Blocks
Control Statements
Comments
Whitespace
Commas
Semicolons
Type Casting & Coercion
Naming Conventions
Accessors
Events
jQuery
ECMAScript 5 Compatibility
ECMAScript 6+ (ES 2015+) Styles
Standard Library
Testing
Performance
Resources
In the Wild
Translation
The JavaScript Style Guide Guide
Chat With Us About JavaScript
Contributors
License
Amendments

데이터형

1.1 Primitives: 기본형은 값을 직접 조작합니다.
- string
- number
- boolean
- null
- undefined




```javascript
const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
```

1.2 Complex: 복합형은 참조를 통해서 값을 조작합니다.

object
array
function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

⬆ 목차

References

2.1 모든 참조는 var 대신에 const 를 사용합니다. eslint: prefer-const, no-const-assign

Why? 참조를 재할당 할 수 없으므로, 버그로 이어지고 이해하기 어려운 코드가 되는것을 방지합니다.
```
// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;
```
2.2 참조를 재할당해야한다면 var 대신 let 을 사용합니다. eslint: no-var

Why? function-scoped 인 var 보다는 block-scoped 인 let 을 사용
```
// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}
```
2.3 Note that both let and const are block-scoped, whereas var is function-scoped.
```
// const and let only exist in the blocks they are defined in.
{
  let a = 1;
  const b = 1;
  var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1
```
In the above code, you can see that referencing a and b will produce a ReferenceError, while c contains the number. This is because a and b are block scoped, while c is scoped to the containing function.

⬆ 목차

Objects

3.1 Use the literal syntax for object creation. eslint: no-new-object
```
// bad
const item = new Object();

// good
const item = {};
```

3.2 Use computed property names when creating objects with dynamic property names.

Why? They allow you to define all the properties of an object in one place.


function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

3.3 Use object method shorthand. eslint: object-shorthand

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

3.4 Use property value shorthand. eslint: object-shorthand

Why? It is shorter and descriptive.

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

3.5 Group your shorthand properties at the beginning of your object declaration.

Why? It’s easier to tell which properties are using the shorthand.

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

3.6 Only quote properties that are invalid identifiers. eslint: quote-props

Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines.
```
// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};
```

3.7 Do not call Object.prototype methods directly, such as hasOwnProperty, propertyIsEnumerable, and isPrototypeOf. eslint: no-prototype-builtins

Why? These methods may be shadowed by properties on the object in question - consider { hasOwnProperty: false } - or, the object may be a null object (Object.create(null)). In modern browsers that support ES2022, or with a polyfill such as https://npmjs.com/object.hasown, Object.hasOwn can also be used as an alternative to Object.prototype.hasOwnProperty.call.

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// better
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
console.log(has.call(object, key));

// best
console.log(Object.hasOwn(object, key)); // only supported in browsers that support ES2022

/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));
/* or */
console.log(Object.hasOwn(object, key)); // https://www.npmjs.com/package/object.hasown

3.8 Prefer the object spread syntax over Object.assign to shallow-copy objects. Use the object rest parameter syntax to get a new object with certain properties omitted. eslint: prefer-object-spread

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

⬆ 목차

Arrays

4.1 Use the literal syntax for array creation. eslint: no-array-constructor
```
// bad
const items = new Array();

// good
const items = [];
```

4.2 Use Array#push instead of direct assignment to add items to an array.

const someStack = [];

// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

4.3 Use array spreads ... to copy arrays.

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

4.4 To convert an iterable object to an array, use spreads ... instead of Array.from

const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

4.5 Use Array.from for converting an array-like object to an array.

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

4.6 Use Array.from instead of spread ... for mapping over iterables, because it avoids creating an intermediate array.
```
// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);
```

4.7 Use return statements in array method callbacks. It’s ok to omit the return if the function body consists of a single statement returning an expression without side effects, following 8.2. eslint: array-callback-return

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => x + 1);

// bad - no returned value means `acc` becomes undefined after the first iteration
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
});

// good
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  return flatten;
});

// bad
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

4.8 Use line breaks after opening array brackets and before closing array brackets, if an array has multiple lines

// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];

⬆ 목차

Destructuring

5.1 Use object destructuring when accessing and using multiple properties of an object. eslint: prefer-destructuring

Why? Destructuring saves you from creating temporary references for those properties, and from repetitive access of the object. Repeating object access creates more repetitive code, requires more reading, and creates more opportunities for mistakes. Destructuring objects also provides a single site of definition of the object structure that is used in the block, rather than requiring reading the entire block to determine what is used.
```
// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
```

5.2 Use array destructuring. eslint: prefer-destructuring

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

5.3 Use object destructuring for multiple return values, not array destructuring.

Why? You can add new properties over time or change the order of things without breaking call sites.

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// the caller selects only the data they need
const { left, top } = processInput(input);

⬆ 목차

Strings

6.1 Use single quotes '' for strings. eslint: quotes

// bad
const name = "Capt. Janeway";

// bad - template literals should contain interpolation or newlines
const name = `Capt. Janeway`;

// good
const name = 'Capt. Janeway';

6.2 Strings that cause the line to go over 100 characters should not be written across multiple lines using string concatenation.

Why? Broken strings are painful to work with and make code less searchable.

// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// bad
const errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

// good
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

6.3 When programmatically building up strings, use template strings instead of concatenation. eslint: prefer-template template-curly-spacing

Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features.

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

6.4 Never use eval() on a string; it opens too many vulnerabilities. eslint: no-eval
6.5 Do not unnecessarily escape characters in strings. eslint: no-useless-escape

Why? Backslashes harm readability, thus they should only be present when necessary.
```
// bad
const foo = '\'this\' \i\s \"quoted\"';

// good
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;
```

⬆ 목차

Functions

7.1 Use named function expressions instead of function declarations. eslint: func-style, func-names

Why? Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module! Don’t forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error’s call stack. (Discussion)
```
// bad
function foo() {
  // ...
}

// bad
const foo = function () {
  // ...
};

// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};
```
7.2 Wrap immediately invoked function expressions in parentheses. eslint: wrap-iife

Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE.
```
// immediately-invoked function expression (IIFE)
(function () {
  console.log('Welcome to the Internet. Please follow me.');
}());
```
7.3 Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint: no-loop-func

7.4 Note: ECMA-262 defines a block as a list of statements. A function declaration is not a statement.

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

7.5 Never name a parameter arguments. This will take precedence over the arguments object that is given to every function scope.
```
// bad
function foo(name, options, arguments) {
  // ...
}

// good
function foo(name, options, args) {
  // ...
}
```
7.6 Never use arguments, opt to use rest syntax ... instead. eslint: prefer-rest-params

Why? ... is explicit about which arguments you want pulled. Plus, rest arguments are a real Array, and not merely Array-like like arguments.
```
// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}
```

7.7 Use default parameter syntax rather than mutating function arguments.

// really bad
function handleThings(opts) {
  // No! We shouldn’t mutate function arguments.
  // Double bad: if opts is falsy it'll be set to an object which may
  // be what you want but it can introduce subtle bugs.
  opts = opts || {};
  // ...
}

// still bad
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// good
function handleThings(opts = {}) {
  // ...
}

7.8 Avoid side effects with default parameters.

Why? They are confusing to reason about.

let b = 1;
// bad
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

7.9 Always put default parameters last. eslint: default-param-last

// bad
function handleThings(opts = {}, name) {
  // ...
}

// good
function handleThings(name, opts = {}) {
  // ...
}

7.10 Never use the Function constructor to create a new function. eslint: no-new-func

Why? Creating a function in this way evaluates a string similarly to eval(), which opens vulnerabilities.
```
// bad
const add = new Function('a', 'b', 'return a + b');

// still bad
const subtract = Function('a', 'b', 'return a - b');
```
7.11 Spacing in a function signature. eslint: space-before-function-paren space-before-blocks

Why? Consistency is good, and you shouldn’t have to add or remove a space when adding or removing a name.
```
// bad
const f = function(){};
const g = function (){};
const h = function() {};

// good
const x = function () {};
const y = function a() {};
```
7.12 Never mutate parameters. eslint: no-param-reassign

Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.
```
// bad
function f1(obj) {
  obj.key = 1;
}

// good
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}
```
7.13 Never reassign parameters. eslint: no-param-reassign

Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the arguments object. It can also cause optimization issues, especially in V8.
```
// bad
function f1(a) {
  a = 1;
  // ...
}

function f2(a) {
  if (!a) { a = 1; }
  // ...
}

// good
function f3(a) {
  const b = a || 1;
  // ...
}

function f4(a = 1) {
  // ...
}
```

7.14 Prefer the use of the spread syntax ... to call variadic functions. eslint: prefer-spread

Why? It’s cleaner, you don’t need to supply a context, and you can not easily compose new with apply.

// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);

// good
const x = [1, 2, 3, 4, 5];
console.log(...x);

// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

// good
new Date(...[2016, 8, 5]);

7.15 Functions with multiline signatures, or invocations, should be indented just like every other multiline list in this guide: with each item on a line by itself, with a trailing comma on the last item. eslint: function-paren-newline
```
// bad
function foo(bar,
             baz,
             quux) {
  // ...
}

// good
function foo(
  bar,
  baz,
  quux,
) {
  // ...
}

// bad
console.log(foo,
  bar,
  baz);

// good
console.log(
  foo,
  bar,
  baz,
);
```

⬆ 목차

Arrow Functions

8.1 When you must use an anonymous function (as when passing an inline callback), use arrow function notation. eslint: prefer-arrow-callback, arrow-spacing

Why? It creates a version of the function that executes in the context of this, which is usually what you want, and is a more concise syntax.

Why not? If you have a fairly complicated function, you might move that logic out into its own named function expression.
```
// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});
```

8.2 If the function body consists of a single statement returning an expression without side effects, omit the braces and use the implicit return. Otherwise, keep the braces and use a return statement. eslint: arrow-parens, arrow-body-style

Why? Syntactic sugar. It reads well when multiple functions are chained together.

// bad
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map((number) => `A string containing the ${number + 1}.`);

// good
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// good
[1, 2, 3].map((number, index) => ({
  [index]: number,
}));

// No implicit return with side effects
function foo(callback) {
  const val = callback();
  if (val === true) {
    // Do something if callback returns true
  }
}

let bool = false;

// bad
foo(() => bool = true);

// good
foo(() => {
  bool = true;
});

8.3 In case the expression spans over multiple lines, wrap it in parentheses for better readability.

Why? It shows clearly where the function starts and ends.

// bad
['get', 'post', 'put'].map((httpMethod) => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )
);

// good
['get', 'post', 'put'].map((httpMethod) => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )
));

8.4 Always include parentheses around arguments for clarity and consistency. eslint: arrow-parens

Why? Minimizes diff churn when adding or removing arguments.

// bad
[1, 2, 3].map(x => x * x);

// good
[1, 2, 3].map((x) => x * x);

// bad
[1, 2, 3].map(number => (
  `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));

// good
[1, 2, 3].map((number) => (
  `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));

// bad
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

8.5 Avoid confusing arrow function syntax (=>) with comparison operators (<=, >=). eslint: no-confusing-arrow

// bad
const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height <= 256 ? largeSize : smallSize;
};

8.6 Enforce the location of arrow function bodies with implicit returns. eslint: implicit-arrow-linebreak
```
// bad
(foo) =>
  bar;

(foo) =>
  (bar);

// good
(foo) => bar;
(foo) => (bar);
(foo) => (
   bar
)
```

⬆ 목차

Classes & Constructors

9.1 Always use class. Avoid manipulating prototype directly.

Why? class syntax is more concise and easier to reason about.

// bad
function Queue(contents = []) {
  this.queue = [...contents];
}
Queue.prototype.pop = function () {
  const value = this.queue[0];
  this.queue.splice(0, 1);
  return value;
};

// good
class Queue {
  constructor(contents = []) {
    this.queue = [...contents];
  }
  pop() {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  }
}

9.2 Use extends for inheritance.

Why? It is a built-in way to inherit prototype functionality without breaking instanceof.

// bad
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function () {
  return this.queue[0];
};

// good
class PeekableQueue extends Queue {
  peek() {
    return this.queue[0];
  }
}

9.3 Methods can return this to help with method chaining.

// bad
Jedi.prototype.jump = function () {
  this.jumping = true;
  return true;
};

Jedi.prototype.setHeight = function (height) {
  this.height = height;
};

const luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20); // => undefined

// good
class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }

  setHeight(height) {
    this.height = height;
    return this;
  }
}

const luke = new Jedi();

luke.jump()
  .setHeight(20);

9.4 It’s okay to write a custom toString() method, just make sure it works successfully and causes no side effects.

class Jedi {
  constructor(options = {}) {
    this.name = options.name || 'no name';
  }

  getName() {
    return this.name;
  }

  toString() {
    return `Jedi - ${this.getName()}`;
  }
}

9.5 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary. eslint: no-useless-constructor

// bad
class Jedi {
  constructor() {}

  getName() {
    return this.name;
  }
}

// bad
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
  }
}

// good
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}

9.6 Avoid duplicate class members. eslint: no-dupe-class-members

Why? Duplicate class member declarations will silently prefer the last one - having duplicates is almost certainly a bug.
```
// bad
class Foo {
  bar() { return 1; }
  bar() { return 2; }
}

// good
class Foo {
  bar() { return 1; }
}

// good
class Foo {
  bar() { return 2; }
}
```

9.7 Class methods should use this or be made into a static method unless an external library or framework requires using specific non-static methods. Being an instance method should indicate that it behaves differently based on properties of the receiver. eslint: class-methods-use-this

// bad
class Foo {
  bar() {
    console.log('bar');
  }
}

// good - this is used
class Foo {
  bar() {
    console.log(this.bar);
  }
}

// good - constructor is exempt
class Foo {
  constructor() {
    // ...
  }
}

// good - static methods aren't expected to use this
class Foo {
  static bar() {
    console.log('bar');
  }
}

⬆ 목차

Modules

10.1 Always use modules (import/export) over a non-standard module system. You can always transpile to your preferred module system.

Why? Modules are the future, let’s start using the future now.

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

10.2 Do not use wildcard imports.

Why? This makes sure you have a single default export.

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

10.3 And do not export directly from an import.

Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent.
```
// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;
```

10.4 Only import from a path in one place. eslint: no-duplicate-imports

Why? Having multiple lines that import from the same path can make code harder to maintain.

// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';

// good
import foo, { named1, named2 } from 'foo';

// good
import foo, {
  named1,
  named2,
} from 'foo';

10.5 Do not export mutable bindings. eslint: import/no-mutable-exports

Why? Mutation should be avoided in general, but in particular when exporting mutable bindings. While this technique may be needed for some special cases, in general, only constant references should be exported.
```
// bad
let foo = 3;
export { foo };

// good
const foo = 3;
export { foo };
```
10.6 In modules with a single export, prefer default export over named export. eslint: import/prefer-default-export

Why? To encourage more files that only ever export one thing, which is better for readability and maintainability.
```
// bad
export function foo() {}

// good
export default function foo() {}
```
10.7 Put all imports above non-import statements. eslint: import/first

Why? Since imports are hoisted, keeping them all at the top prevents surprising behavior.
```
// bad
import foo from 'foo';
foo.init();

import bar from 'bar';

// good
import foo from 'foo';
import bar from 'bar';

foo.init();
```
10.8 Multiline imports should be indented just like multiline array and object literals. eslint: object-curly-newline

Why? The curly braces follow the same indentation rules as every other curly brace block in the style guide, as do the trailing commas.
```
// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';
```
10.9 Disallow Webpack loader syntax in module import statements. eslint: import/no-webpack-loader-syntax

Why? Since using Webpack syntax in the imports couples the code to a module bundler. Prefer using the loader syntax in webpack.config.js.
```
// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';

// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';
```
10.10 Do not include JavaScript filename extensions eslint: import/extensions

Why? Including extensions inhibits refactoring, and inappropriately hardcodes implementation details of the module you're importing in every consumer.
```
// bad
import foo from './foo.js';
import bar from './bar.jsx';
import baz from './baz/index.jsx';

// good
import foo from './foo';
import bar from './bar';
import baz from './baz';
```

⬆ 목차

Iterators and Generators

11.1 Don’t use iterators. Prefer JavaScript’s higher-order functions instead of loops like for-in or for-of. eslint: no-iterator no-restricted-syntax

Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side effects.

Use map() / every() / filter() / find() / findIndex() / reduce() / some() / ... to iterate over arrays, and Object.keys() / Object.values() / Object.entries() to produce arrays so you can iterate over objects.

const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// good
const increasedByOne = [];
numbers.forEach((num) => {
  increasedByOne.push(num + 1);
});

// best (keeping it functional)
const increasedByOne = numbers.map((num) => num + 1);

11.2 Don’t use generators for now.

Why? They don’t transpile well to ES5.

11.3 If you must use generators, or if you disregard our advice, make sure their function signature is spaced properly. eslint: generator-star-spacing

Why? function and * are part of the same conceptual keyword - * is not a modifier for function, function* is a unique construct, different from function.

// bad
function * foo() {
  // ...
}

// bad
const bar = function * () {
  // ...
};

// bad
const baz = function *() {
  // ...
};

// bad
const quux = function*() {
  // ...
};

// bad
function*foo() {
  // ...
}

// bad
function *foo() {
  // ...
}

// very bad
function
*
foo() {
  // ...
}

// very bad
const wat = function
*
() {
  // ...
};

// good
function* foo() {
  // ...
}

// good
const foo = function* () {
  // ...
};

⬆ 목차

Properties

12.1 Use dot notation when accessing properties. eslint: dot-notation

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

12.2 Use bracket notation [] when accessing properties with a variable.

const luke = {
  jedi: true,
  age: 28,
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');

12.3 Use exponentiation operator ** when calculating exponentiations. eslint: prefer-exponentiation-operator.
```
// bad
const binary = Math.pow(2, 10);

// good
const binary = 2 ** 10;
```

⬆ 목차

Variables

13.1 Always use const or let to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. eslint: no-undef prefer-const
```
// bad
superPower = new SuperPower();

// good
const superPower = new SuperPower();
```
13.2 Use one const or let declaration per variable or assignment. eslint: one-var

Why? It’s easier to add new variable declarations this way, and you never have to worry about swapping out a ; for a , or introducing punctuation-only diffs. You can also step through each declaration with the debugger, instead of jumping through all of them at once.
```
// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';
```

13.3 Group all your consts and then group all your lets.

Why? This is helpful when later on you might need to assign a variable depending on one of the previously assigned variables.

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;

13.4 Assign variables where you need them, but place them in a reasonable place.

Why? let and const are block scoped and not function scoped.

// bad - unnecessary function call
function checkName(hasName) {
  const name = getName();

  if (hasName === 'test') {
    return false;
  }

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

// good
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }

  const name = getName();

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

13.5 Don’t chain variable assignments. eslint: no-multi-assign

Why? Chaining variable assignments creates implicit global variables.

// bad
(function example() {
  // JavaScript interprets this as
  // let a = ( b = ( c = 1 ) );
  // The let keyword only applies to variable a; variables b and c become
  // global variables.
  let a = b = c = 1;
}());

console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1

// good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError

// the same applies for `const`

13.6 Avoid using unary increments and decrements (++, --). eslint no-plusplus

Why? Per the eslint documentation, unary increment and decrement statements are subject to automatic semicolon insertion and can cause silent errors with incrementing or decrementing values within an application. It is also more expressive to mutate your values with statements like num += 1 instead of num++ or num ++. Disallowing unary increment and decrement statements also prevents you from pre-incrementing/pre-decrementing values unintentionally which can also cause unexpected behavior in your programs.
```
// bad

const array = [1, 2, 3];
let num = 1;
num++;
--num;

let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array.length; i++) {
  let value = array[i];
  sum += value;
  if (value) {
    truthyCount++;
  }
}

// good

const array = [1, 2, 3];
let num = 1;
num += 1;
num -= 1;

const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;
```

13.7 Avoid linebreaks before or after = in an assignment. If your assignment violates max-len, surround the value in parens. eslint operator-linebreak.

Why? Linebreaks surrounding = can obfuscate the value of an assignment.

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// good
const foo = 'superLongLongLongLongLongLongLongLongString';

13.8 Disallow unused variables. eslint: no-unused-vars

Why? Variables that are declared and not used anywhere in the code are most likely an error due to incomplete refactoring. Such variables take up space in the code and can lead to confusion by readers.

// bad

const some_unused_var = 42;

// Write-only variables are not considered as used.
let y = 10;
y = 5;

// A read for a modification of itself is not considered as used.
let z = 0;
z = z + 1;

// Unused function arguments.
function getX(x, y) {
    return x;
}

// good

function getXPlusY(x, y) {
  return x + y;
}

const x = 1;
const y = a + 2;

alert(getXPlusY(x, y));

// 'type' is ignored even if unused because it has a rest property sibling.
// This is a form of extracting an object that omits the specified keys.
const { type, ...coords } = data;
// 'coords' is now the 'data' object without its 'type' property.

⬆ 목차

Hoisting

14.1 var declarations get hoisted to the top of their closest enclosing function scope, their assignment does not. const and let declarations are blessed with a new concept called Temporal Dead Zones (TDZ). It’s important to know why typeof is no longer safe.

// we know this wouldn’t work (assuming there
// is no notDefined global variable)
function example() {
  console.log(notDefined); // => throws a ReferenceError
}

// creating a variable declaration after you
// reference the variable will work due to
// variable hoisting. Note: the assignment
// value of `true` is not hoisted.
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// the interpreter is hoisting the variable
// declaration to the top of the scope,
// which means our example could be rewritten as:
function example() {
  let declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

// using const and let
function example() {
  console.log(declaredButNotAssigned); // => throws a ReferenceError
  console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
  const declaredButNotAssigned = true;
}

14.2 Anonymous function expressions hoist their variable name, but not the function assignment.

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function () {
    console.log('anonymous function expression');
  };
}

14.3 Named function expressions hoist the variable name, not the function name or the function body.

function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log('Flying');
  };
}

// the same is true when the function name
// is the same as the variable name.
function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log('named');
  };
}

14.4 Function declarations hoist their name and the function body.

function example() {
  superPower(); // => Flying

  function superPower() {
    console.log('Flying');
  }
}

14.5 Variables, classes, and functions should be defined before they can be used. eslint: no-use-before-define

Why? When variables, classes, or functions are declared after being used, it can harm readability since a reader won't know what a thing that's referenced is. It's much clearer for a reader to first encounter the source of a thing (whether imported from another module, or defined in the file) before encountering a use of the thing.

// bad

// Variable a is being used before it is being defined.
console.log(a); // this will be undefined, since while the declaration is hoisted, the initialization is not
var a = 10;

// Function fun is being called before being defined.
fun();
function fun() {}

// Class A is being used before being defined.
new A(); // ReferenceError: Cannot access 'A' before initialization
class A {
}

// `let` and `const` are hoisted, but they don't have a default initialization.
// The variables 'a' and 'b' are in a Temporal Dead Zone where JavaScript
// knows they exist (declaration is hoisted) but they are not accessible
// (as they are not yet initialized).

console.log(a); // ReferenceError: Cannot access 'a' before initialization
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let a = 10;
const b = 5;

// good

var a = 10;
console.log(a); // 10

function fun() {}
fun();

class A {
}
new A();

let a = 10;
const b = 5;
console.log(a); // 10
console.log(b); // 5
```

For more information refer to JavaScript Scoping & Hoisting by Ben Cherry.

⬆ 목차

Comparison Operators & Equality

15.1 Use === and !== over == and !=. eslint: eqeqeq
15.2 Conditional statements such as the if statement evaluate their expression using coercion with the ToBoolean abstract method and always follow these simple rules:
- Objects evaluate to true
- Undefined evaluates to false
- Null evaluates to false
- Booleans evaluate to the value of the boolean
- Numbers evaluate to false if +0, -0, or NaN, otherwise true
- Strings evaluate to false if an empty string '', otherwise true
```
if ([0] && []) {
  // true
  // an array (even an empty one) is an object, objects will evaluate to true
}
```

15.3 Use shortcuts for booleans, but explicit comparisons for strings and numbers.

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}

15.4 For more information see Truth, Equality, and JavaScript by Angus Croll.

15.5 Use braces to create blocks in case and default clauses that contain lexical declarations (e.g. let, const, function, and class). eslint: no-case-declarations

Why? Lexical declarations are visible in the entire switch block but only get initialized when assigned, which only happens when its case is reached. This causes problems when multiple case clauses attempt to define the same thing.

// bad
switch (foo) {
  case 1:
    let x = 1;
    break;
  case 2:
    const y = 2;
    break;
  case 3:
    function f() {
      // ...
    }
    break;
  default:
    class C {}
}

// good
switch (foo) {
  case 1: {
    let x = 1;
    break;
  }
  case 2: {
    const y = 2;
    break;
  }
  case 3: {
    function f() {
      // ...
    }
    break;
  }
  case 4:
    bar();
    break;
  default: {
    class C {}
  }
}

15.6 Ternaries should not be nested and generally be single line expressions. eslint: no-nested-ternary

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;

// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? 'baz' : null;

// better
const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;

// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

15.7 Avoid unneeded ternary statements. eslint: no-unneeded-ternary

// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
const quux = a != null ? a : b;

// good
const foo = a || b;
const bar = !!c;
const baz = !c;
const quux = a ?? b;

15.8 When mixing operators, enclose them in parentheses. The only exception is the standard arithmetic operators: +, -, and ** since their precedence is broadly understood. We recommend enclosing / and * in parentheses because their precedence can be ambiguous when they are mixed. eslint: no-mixed-operators

Why? This improves readability and clarifies the developer’s intention.

// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;

// bad
const bar = a ** b - 5 % d;

// bad
// one may be confused into thinking (a || b) && c
if (a || b && c) {
  return d;
}

// bad
const bar = a + b / c * d;

// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// good
const bar = a ** b - (5 % d);

// good
if (a || (b && c)) {
  return d;
}

// good
const bar = a + (b / c) * d;

15.9 The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined. Otherwise, it returns the left-hand side operand.

Why? It provides precision by distinguishing null/undefined from other falsy values, enhancing code clarity and predictability.
```
// bad
const value = 0 ?? 'default';
// returns 0, not 'default'

// bad
const value = '' ?? 'default';
// returns '', not 'default'

// good
const value = null ?? 'default';
// returns 'default'

// good
const user = {
  name: 'John',
  age: null
};
const age = user.age ?? 18;
// returns 18
```

⬆ 목차

Blocks

16.1 Use braces with all multiline blocks. eslint: nonblock-statement-body-position

// bad
if (test)
  return false;

// good
if (test) return false;

// good
if (test) {
  return false;
}

// bad
function foo() { return false; }

// good
function bar() {
  return false;
}

16.2 If you’re using multiline blocks with if and else, put else on the same line as your if block’s closing brace. eslint: brace-style

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}

// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

16.3 If an if block always executes a return statement, the subsequent else block is unnecessary. A return in an else if block following an if block that contains a return can be separated into multiple if blocks. eslint: no-else-return

// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}

// bad
function cats() {
  if (x) {
    return x;
  } else if (y) {
    return y;
  }
}

// bad
function dogs() {
  if (x) {
    return x;
  } else {
    if (y) {
      return y;
    }
  }
}

// good
function foo() {
  if (x) {
    return x;
  }

  return y;
}

// good
function cats() {
  if (x) {
    return x;
  }

  if (y) {
    return y;
  }
}

// good
function dogs(x) {
  if (x) {
    if (z) {
      return y;
    }
  } else {
    return z;
  }
}

⬆ 목차

Control Statements

17.1 In case your control statement (if, while etc.) gets too long or exceeds the maximum line length, each (grouped) condition could be put into a new line. The logical operator should begin the line.

Why? Requiring operators at the beginning of the line keeps the operators aligned and follows a pattern similar to method chaining. This also improves readability by making it easier to visually follow complex logic.

// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
  thing1();
}

// bad
if (foo === 123 &&
  bar === 'abc') {
  thing1();
}

// bad
if (foo === 123
  && bar === 'abc') {
  thing1();
}

// bad
if (
  foo === 123 &&
  bar === 'abc'
) {
  thing1();
}

// good
if (
  foo === 123
  && bar === 'abc'
) {
  thing1();
}

// good
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

// good
if (foo === 123 && bar === 'abc') {
  thing1();
}

17.2 Don't use selection operators in place of control statements.

// bad
!isRunning && startRunning();

// good
if (!isRunning) {
  startRunning();
}

⬆ 목차

Comments

18.1 Use /** ... */ for multiline comments.

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

18.2 Use // for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment unless it’s on the first line of a block.

// bad
const active = true;  // is current tab

// good
// is current tab
const active = true;

// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

// also good
function getType() {
  // set the default type to 'no type'
  const type = this.type || 'no type';

  return type;
}

18.3 Start all comments with a space to make it easier to read. eslint: spaced-comment

// bad
//is current tab
const active = true;

// good
// is current tab
const active = true;

// bad
/**
 *make() returns a new element
 *based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {

  // ...

  return element;
}

18.4 Prefixing your comments with FIXME or TODO helps other developers quickly understand if you’re pointing out a problem that needs to be revisited, or if you’re suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are FIXME: -- need to figure this out or TODO: -- need to implement.

18.5 Use // FIXME: to annotate problems.

class Calculator extends Abacus {
  constructor() {
    super();

    // FIXME: shouldn’t use a global here
    total = 0;
  }
}

18.6 Use // TODO: to annotate solutions to problems.

class Calculator extends Abacus {
  constructor() {
    super();

    // TODO: total should be configurable by an options param
    this.total = 0;
  }
}

⬆ 목차

Whitespace

19.1 Use soft tabs (space character) set to 2 spaces. eslint: indent

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

19.2 Place 1 space before the leading brace. eslint: space-before-blocks

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

19.3 Place 1 space before the opening parenthesis in control statements (if, while etc.). Place no space between the argument list and the function name in function calls and declarations. eslint: keyword-spacing
```
// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}
```
19.4 Set off operators with spaces. eslint: space-infix-ops
```
// bad
const x=y+5;

// good
const x = y + 5;
```

19.5 End files with a single newline character. eslint: eol-last

// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;

// bad
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵
↵

// good
import { es6 } from './AirbnbStyleGuide';
  // ...
export default es6;↵

19.6 Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which emphasizes that the line is a method call, not a new statement. eslint: newline-per-chained-call no-whitespace-before-property

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', `translate(${radius + margin}, ${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', `translate(${radius + margin}, ${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);
const svg = leds.enter().append('svg:svg');
svg.classed('led', true).attr('width', (radius + margin) * 2);
const g = svg.append('svg:g');
g.attr('transform', `translate(${radius + margin}, ${radius + margin})`).call(tron.led);

19.7 Leave a blank line after blocks and before the next statement.

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
const obj = {
  foo() {
  },
  bar() {
  },
};
return obj;

// good
const obj = {
  foo() {
  },

  bar() {
  },
};

return obj;

// bad
const arr = [
  function foo() {
  },
  function bar() {
  },
];
return arr;

// good
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;

19.8 Do not pad your blocks with blank lines. eslint: padded-blocks

// bad
function bar() {

  console.log(foo);

}

// bad
if (baz) {

  console.log(quux);
} else {
  console.log(foo);

}

// bad
class Foo {

  constructor(bar) {
    this.bar = bar;
  }
}

// good
function bar() {
  console.log(foo);
}

// good
if (baz) {
  console.log(quux);
} else {
  console.log(foo);
}

19.9 Do not use multiple blank lines to pad your code. eslint: no-multiple-empty-lines

// bad
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;

    this.email = email;


    this.setAge(birthday);
  }


  setAge(birthday) {
    const today = new Date();


    const age = this.getAge(today, birthday);


    this.age = age;
  }


  getAge(today, birthday) {
    // ..
  }
}

// good
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
    this.email = email;
    this.setAge(birthday);
  }

  setAge(birthday) {
    const today = new Date();
    const age = getAge(today, birthday);
    this.age = age;
  }

  getAge(today, birthday) {
    // ..
  }
}
```

19.10 Do not add spaces inside parentheses. eslint: space-in-parens

// bad
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

// bad
if ( foo ) {
  console.log(foo);
}

// good
if (foo) {
  console.log(foo);
}

19.11 Do not add spaces inside brackets. eslint: array-bracket-spacing

// bad
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// good
const foo = [1, 2, 3];
console.log(foo[0]);

19.12 Add spaces inside curly braces. eslint: object-curly-spacing

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };

19.13 Avoid having lines of code that are longer than 100 characters (including whitespace). Note: per above, long strings are exempt from this rule, and should not be broken up. eslint: max-len

Why? This ensures readability and maintainability.

// bad
const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// bad
$.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

// good
const foo = jsonData
  && jsonData.foo
  && jsonData.foo.bar
  && jsonData.foo.bar.baz
  && jsonData.foo.bar.baz.quux
  && jsonData.foo.bar.baz.quux.xyzzy;

// better
const foo = jsonData
  ?.foo
  ?.bar
  ?.baz
  ?.quux
  ?.xyzzy;

// good
$.ajax({
  method: 'POST',
  url: 'https://airbnb.com/',
  data: { name: 'John' },
})
  .done(() => console.log('Congratulations!'))
  .fail(() => console.log('You have failed this city.'));

19.14 Require consistent spacing inside an open block token and the next token on the same line. This rule also enforces consistent spacing inside a close block token and previous token on the same line. eslint: block-spacing
```
// bad
function foo() {return true;}
if (foo) { bar = 0;}

// good
function foo() { return true; }
if (foo) { bar = 0; }
```

19.15 Avoid spaces before commas and require a space after commas. eslint: comma-spacing

// bad
const foo = 1,bar = 2;
const arr = [1 , 2];

// good
const foo = 1, bar = 2;
const arr = [1, 2];

19.16 Enforce spacing inside of computed property brackets. eslint: computed-property-spacing

// bad
obj[foo ]
obj[ 'foo']
const x = {[ b ]: a}
obj[foo[ bar ]]

// good
obj[foo]
obj['foo']
const x = { [b]: a }
obj[foo[bar]]

19.17 Avoid spaces between functions and their invocations. eslint: func-call-spacing
```
// bad
func ();

func
();

// good
func();
```
19.18 Enforce spacing between keys and values in object literal properties. eslint: key-spacing
```
// bad
const obj = { foo : 42 };
const obj2 = { foo:42 };

// good
const obj = { foo: 42 };
```
19.19 Avoid trailing spaces at the end of lines. eslint: no-trailing-spaces
19.20 Avoid multiple empty lines, only allow one newline at the end of files, and avoid a newline at the beginning of files. eslint: no-multiple-empty-lines
```
// bad - multiple empty lines
const x = 1;
```

const y = 2;

// bad - 2+ newlines at end of file
const x = 1;
const y = 2;


// bad - 1+ newline(s) at beginning of file

const x = 1;
const y = 2;

// good
const x = 1;
const y = 2;

```

⬆ 목차

Commas

20.1 Leading commas: Nope. eslint: comma-style

// bad
const story = [
    once
  , upon
  , aTime
];

// good
const story = [
  once,
  upon,
  aTime,
];

// bad
const hero = {
    firstName: 'Ada'
  , lastName: 'Lovelace'
  , birthYear: 1815
  , superPower: 'computers'
};

// good
const hero = {
  firstName: 'Ada',
  lastName: 'Lovelace',
  birthYear: 1815,
  superPower: 'computers',
};

20.2 Additional trailing comma: Yup. eslint: comma-dangle

Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the trailing comma problem in legacy browsers.

// bad - git diff without trailing comma
const hero = {
     firstName: 'Florence',
-    lastName: 'Nightingale'
+    lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing']
};

// good - git diff with trailing comma
const hero = {
     firstName: 'Florence',
     lastName: 'Nightingale',
+    inventorOf: ['coxcomb chart', 'modern nursing'],
};

// bad
const hero = {
  firstName: 'Dana',
  lastName: 'Scully'
};

const heroes = [
  'Batman',
  'Superman'
];

// good
const hero = {
  firstName: 'Dana',
  lastName: 'Scully',
};

const heroes = [
  'Batman',
  'Superman',
];

// bad
function createHero(
  firstName,
  lastName,
  inventorOf
) {
  // does nothing
}

// good
function createHero(
  firstName,
  lastName,
  inventorOf,
) {
  // does nothing
}

// good (note that a comma must not appear after a "rest" element)
function createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
) {
  // does nothing
}

// bad
createHero(
  firstName,
  lastName,
  inventorOf
);

// good
createHero(
  firstName,
  lastName,
  inventorOf,
);

// good (note that a comma must not appear after a "rest" element)
createHero(
  firstName,
  lastName,
  inventorOf,
  ...heroArgs
);

⬆ 목차

Semicolons

21.1 Yup. eslint: semi

Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues.

// bad - raises exception
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => jedi.father = 'vader')

// bad - raises exception
const reaction = "No! That’s impossible!"
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())

// bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI!
function foo() {
  return
    'search your feelings, you know it to be foo'
}

// good
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

// good
const reaction = 'No! That’s impossible!';
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}());

// good
function foo() {
  return 'search your feelings, you know it to be foo';
}

Type Casting & Coercion

22.1 Perform type coercion at the beginning of the statement.

22.2 Strings: eslint: no-new-wrappers

// => this.reviewScore = 9;

// bad
const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"

// bad
const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf()

// bad
const totalScore = this.reviewScore.toString(); // isn’t guaranteed to return a string

// good
const totalScore = String(this.reviewScore);

22.3 Numbers: Use Number for type casting and parseInt always with a radix for parsing strings. eslint: radix no-new-wrappers

Why? The parseInt function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading whitespace in string is ignored. If radix is undefined or 0, it is assumed to be 10 except when the number begins with the character pairs 0x or 0X, in which case a radix of 16 is assumed. This differs from ECMAScript 3, which merely discouraged (but allowed) octal interpretation. Many implementations have not adopted this behavior as of 2013. And, because older browsers must be supported, always specify a radix.
```
const inputValue = '4';

// bad
const val = new Number(inputValue);

// bad
const val = +inputValue;

// bad
const val = inputValue >> 0;

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);
```
22.4 If for whatever reason you are doing something wild and parseInt is your bottleneck and need to use Bitshift for performance reasons, leave a comment explaining why and what you’re doing.
```
// good
/**
 * parseInt was the reason my code was slow.
 * Bitshifting the String to coerce it to a
 * Number made it a lot faster.
 */
const val = inputValue >> 0;
```
22.5 Note: Be careful when using bitshift operations. Numbers are represented as 64-bit values, but bitshift operations always return a 32-bit integer (source). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. Discussion. Largest signed 32-bit Int is 2,147,483,647:
```
2147483647 >> 0; // => 2147483647
2147483648 >> 0; // => -2147483648
2147483649 >> 0; // => -2147483647
```

22.6 Booleans: eslint: no-new-wrappers

const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;

⬆ 목차

Naming Conventions

23.1 Avoid single letter names. Be descriptive with your naming. eslint: id-length
```
// bad
function q() {
  // ...
}

// good
function query() {
  // ...
}
```

23.2 Use camelCase when naming objects, functions, and instances. eslint: camelcase

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

23.3 Use PascalCase only when naming constructors or classes. eslint: new-cap

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope',
});

// good
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

23.4 Do not use trailing or leading underscores. eslint: no-underscore-dangle

Why? JavaScript does not have the concept of privacy in terms of properties or methods. Although a leading underscore is a common convention to mean “private”, in fact, these properties are fully public, and as such, are part of your public API contract. This convention might lead developers to wrongly think that a change won’t count as breaking, or that tests aren’t needed. tl;dr: if you want something to be “private”, it must not be observably present.
```
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

// good, in environments where WeakMaps are available
// see https://compat-table.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');
```

23.5 Don’t save references to this. Use arrow functions or Function#bind.

// bad
function foo() {
  const self = this;
  return function () {
    console.log(self);
  };
}

// bad
function foo() {
  const that = this;
  return function () {
    console.log(that);
  };
}

// good
function foo() {
  return () => {
    console.log(this);
  };
}

23.6 A base filename should exactly match the name of its default export.

// file 1 contents
class CheckBox {
  // ...
}
export default CheckBox;

// file 2 contents
export default function fortyTwo() { return 42; }

// file 3 contents
export default function insideDirectory() {}

// in some other file
// bad
import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad
import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
import forty_two from './forty_two'; // snake_case import/filename, camelCase export
import inside_directory from './inside_directory'; // snake_case import, camelCase export
import index from './inside_directory/index'; // requiring the index file explicitly
import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good
import CheckBox from './CheckBox'; // PascalCase export/import/filename
import fortyTwo from './fortyTwo'; // camelCase export/import/filename
import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
// ^ supports both insideDirectory.js and insideDirectory/index.js

23.7 Use camelCase when you export-default a function. Your filename should be identical to your function’s name.
```
function makeStyleGuide() {
  // ...
}

export default makeStyleGuide;
```
23.8 Use PascalCase when you export a constructor / class / singleton / function library / bare object.
```
const AirbnbStyleGuide = {
  es6: {
  },
};

export default AirbnbStyleGuide;
```

23.9 Acronyms and initialisms should always be all uppercased, or all lowercased.

Why? Names are for readability, not to appease a computer algorithm.

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// also good
const httpRequests = [
  // ...
];

// best
import TextMessageContainer from './containers/TextMessageContainer';

// best
const requests = [
  // ...
];

23.10 You may optionally uppercase a constant only if it (1) is exported, (2) is a const (it can not be reassigned), and (3) the programmer can trust it (and its nested properties) to never change.

Why? This is an additional tool to assist in situations where the programmer would be unsure if a variable might ever change. UPPERCASE_VARIABLES are letting the programmer know that they can trust the variable (and its properties) not to change.
- What about all const variables? - This is unnecessary, so uppercasing should not be used for constants within a file. It should be used for exported constants however.
- What about exported objects? - Uppercase at the top level of export (e.g. EXPORTED_OBJECT.key) and maintain that all nested properties do not change.
```
// bad
const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad
export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad
export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value
export const apiKey = 'SOMEKEY';

// better in most cases
export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value
export const MAPPING = {
  KEY: 'value'
};

// good
export const MAPPING = {
  key: 'value',
};
```

⬆ 목차

Accessors

24.1 Accessor functions for properties are not required.
24.2 Do not use JavaScript getters/setters as they cause unexpected side effects and are harder to test, maintain, and reason about. Instead, if you do make accessor functions, use getVal() and setVal('hello').
```
// bad
class Dragon {
  get age() {
    // ...
  }

  set age(value) {
    // ...
  }
}

// good
class Dragon {
  getAge() {
    // ...
  }

  setAge(value) {
    // ...
  }
}
```

24.3 If the property/method is a boolean, use isVal() or hasVal().

// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}

24.4 It’s okay to create get() and set() functions, but be consistent.

class Jedi {
  constructor(options = {}) {
    const lightsaber = options.lightsaber || 'blue';
    this.set('lightsaber', lightsaber);
  }

  set(key, val) {
    this[key] = val;
  }

  get(key) {
    return this[key];
  }
}

⬆ 목차

Events

25.1 When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass an object literal (also known as a "hash") instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of:
```
// bad
$(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {
  // do something with listingID
});
```
prefer:
```
// good
$(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {
  // do something with data.listingID
});
```
*⬆ 목차**

jQuery

26.1 Prefix jQuery object variables with a $.

// bad
const sidebar = $('.sidebar');

// good
const $sidebar = $('.sidebar');

// good
const $sidebarBtn = $('.sidebar-btn');

26.2 Cache jQuery lookups.

// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...

  $('.sidebar').css({
    'background-color': 'pink',
  });
}

// good
function setSidebar() {
  const $sidebar = $('.sidebar');
  $sidebar.hide();

  // ...

  $sidebar.css({
    'background-color': 'pink',
  });
}

26.3 For DOM queries use Cascading $('.sidebar ul') or parent > child $('.sidebar > ul'). jsPerf

26.4 Use find with scoped jQuery object queries.

// bad
$('ul', '.sidebar').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good
$sidebar.find('ul').hide();

⬆ 목차

ECMAScript 5 Compatibility

27.1 Refer to Kangax’s ES5 compatibility table.

⬆ 목차

ECMAScript 6+ (ES 2015+) Styles

28.1 This is a collection of links to the various ES6+ features.

Arrow Functions
Classes
Object Shorthand
Object Concise
Object Computed Properties
Template Strings
Destructuring
Default Parameters
Rest
Array Spreads
Let and Const
Exponentiation Operator
Iterators and Generators
Modules
- 28.2 Do not use TC39 proposals that have not reached stage 3.
  
  Why? They are not finalized, and they are subject to change or to be withdrawn entirely. We want to use JavaScript, and proposals are not JavaScript yet.

⬆ 목차

Standard Library

The Standard Library contains utilities that are functionally broken but remain for legacy reasons.

29.1 Use Number.isNaN instead of global isNaN. eslint: no-restricted-globals

Why? The global isNaN coerces non-numbers to numbers, returning true for anything that coerces to NaN. If this behavior is desired, make it explicit.
```
// bad
isNaN('1.2'); // false
isNaN('1.2.3'); // true

// good
Number.isNaN('1.2.3'); // false
Number.isNaN(Number('1.2.3')); // true
```
29.2 Use Number.isFinite instead of global isFinite. eslint: no-restricted-globals

Why? The global isFinite coerces non-numbers to numbers, returning true for anything that coerces to a finite number. If this behavior is desired, make it explicit.
```
// bad
isFinite('2e3'); // true

// good
Number.isFinite('2e3'); // false
Number.isFinite(parseInt('2e3', 10)); // true
```

⬆ 목차

Testing

30.1 Yup.
```
function foo() {
  return true;
}
```
30.2 No, but seriously:
- Whichever testing framework you use, you should be writing tests!
- Strive to write many small pure functions, and minimize where mutations occur.
- Be cautious about stubs and mocks - they can make your tests more brittle.
- We primarily use mocha and jest at Airbnb. tape is also used occasionally for small, separate modules.
- 100% test coverage is a good goal to strive for, even if it’s not always practical to reach it.
- Whenever you fix a bug, write a regression test. A bug fixed without a regression test is almost certainly going to break again in the future.

⬆ 목차

Performance

⬆ 목차

Resources

Learning ES6+

Read This

Standard ECMA-262

Tools

Code Style Linters
- ESlint - Airbnb Style .eslintrc
- JSHint - Airbnb Style .jshintrc
Neutrino Preset - @neutrinojs/airbnb

Other Style Guides

Other Styles

Naming this in nested functions - Christian Johansen
Conditional Callbacks - Ross Allen
Popular JavaScript Coding Conventions on GitHub - JeongHoon Byun
Multiple var statements in JavaScript, not superfluous - Ben Alman

Further Reading

Understanding JavaScript Closures - Angus Croll
Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
You Might Not Need jQuery - Zack Bloom & Adam Schwartz
ES6 Features - Luke Hoban
Frontend Guidelines - Benjamin De Cock

Books

JavaScript: The Good Parts - Douglas Crockford
JavaScript Patterns - Stoyan Stefanov
Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
High Performance Web Sites: Essential Knowledge for Front-End Engineers - Steve Souders
Maintainable JavaScript - Nicholas C. Zakas
JavaScript Web Applications - Alex MacCaw
Pro JavaScript Techniques - John Resig
Smashing Node.js: JavaScript Everywhere - Guillermo Rauch
Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
Human JavaScript - Henrik Joreteg
Superhero.js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
JSBooks - Julien Bouquillon
Third Party JavaScript - Ben Vinegar and Anton Kovalyov
Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript - David Herman
Eloquent JavaScript - Marijn Haverbeke
You Don’t Know JS: ES6 & Beyond - Kyle Simpson

Blogs

Podcasts

⬆ 목차

In the Wild

This is a list of organizations that are using this style guide. Send us a pull request and we'll add you to the list.

123erfasst: 123erfasst/javascript
4Catalyzer: 4Catalyzer/javascript
Aan Zee: AanZee/javascript
Airbnb: airbnb/javascript
AloPeyk: AloPeyk
AltSchool: AltSchool/javascript
Apartmint: apartmint/javascript
Ascribe: ascribe/javascript
Avant: avantcredit/javascript
Axept: axept/javascript
Billabong: billabong/javascript
Bisk: bisk
Brainshark: brainshark/javascript
CaseNine: CaseNine/javascript
Cerner: Cerner
Chartboost: ChartBoost/javascript-style-guide
Coeur d'Alene Tribe: www.cdatribe-nsn.gov
ComparaOnline: comparaonline/javascript
Compass Learning: compasslearning/javascript-style-guide
DailyMotion: dailymotion/javascript
DoSomething: DoSomething/eslint-config
Digitpaint digitpaint/javascript
Drupal: www.drupal.org
Ecosia: ecosia/javascript
Evolution Gaming: evolution-gaming/javascript
EvozonJs: evozonjs/javascript
ExactTarget: ExactTarget/javascript
Flexberry: Flexberry/javascript-style-guide
Gawker Media: gawkermedia
General Electric: GeneralElectric/javascript
Generation Tux: GenerationTux/javascript
GoodData: gooddata/gdc-js-style
GreenChef: greenchef/javascript
Grooveshark: grooveshark/javascript
Grupo-Abraxas: Grupo-Abraxas/javascript
Happeo: happeo/javascript
How About We: howaboutwe/javascript
HubSpot: HubSpot/javascript
Hyper: hyperoslo/javascript-playbook
ILIAS: ILIAS
InterCity Group: intercitygroup/javascript-style-guide
Jam3: Jam3/Javascript-Code-Conventions
JSSolutions: JSSolutions/javascript
Kaplan Komputing: kaplankomputing/javascript
KickorStick: kickorstick
Kinetica Solutions: kinetica/javascript
LEINWAND: LEINWAND/javascript
Lonely Planet: lonelyplanet/javascript
M2GEN: M2GEN/javascript
Mighty Spring: mightyspring/javascript
MinnPost: MinnPost/javascript
MitocGroup: MitocGroup/javascript
Muber: muber
National Geographic Society: natgeosociety
NullDev: NullDevCo/JavaScript-Styleguide
Nulogy: nulogy/javascript
Orange Hill Development: orangehill/javascript
Orion Health: orionhealth/javascript
Peerby: Peerby/javascript
Pier 1: Pier1/javascript
Qotto: Qotto/javascript-style-guide
React: reactjs.org/docs/how-to-contribute.html#style-guide
Ripple: ripple/javascript-style-guide
Sainsbury’s Supermarkets: jsainsburyplc
Shutterfly: shutterfly/javascript
Sourcetoad: sourcetoad/javascript
Springload: springload
StratoDem Analytics: stratodem/javascript
SteelKiwi Development: steelkiwi/javascript
StudentSphere: studentsphere/javascript
SwoopApp: swoopapp/javascript
SysGarage: sysgarage/javascript-style-guide
Syzygy Warsaw: syzygypl/javascript
Target: target/javascript
Terra: terra
TheLadders: TheLadders/javascript
The Nerdery: thenerdery/javascript-standards
Tomify: tomprats
Traitify: traitify/eslint-config-traitify
T4R Technology: T4R-Technology/javascript
UrbanSim: urbansim
VoxFeed: VoxFeed/javascript-style-guide
WeBox Studio: weboxstudio/javascript
Weggo: Weggo/javascript
Zillow: zillow/javascript
Zit Software: zit-software/javascript
ZocDoc: ZocDoc/javascript

⬆ 목차

Translation

This style guide is also available in other languages:

Brazilian Portuguese: armoucar/javascript-style-guide
Bulgarian: borislavvv/javascript
Catalan: fpmweb/javascript-style-guide
Chinese (Simplified): lin-123/javascript
Chinese (Traditional): jigsawye/javascript
French: nmussy/javascript-style-guide
German: timofurrer/javascript-style-guide
Italian: sinkswim/javascript-style-guide
Japanese: mitsuruog/javascript-style-guide
Korean: ParkSB/javascript-style-guide
Russian: leonidlebedev/javascript-airbnb
Spanish: paolocarrasco/javascript-style-guide
Thai: lvarayut/javascript-style-guide
Turkish: eraycetinay/javascript
Ukrainian: ivanzusko/javascript
Vietnam: dangkyokhoang/javascript-style-guide

The JavaScript Style Guide Guide

Reference

Chat With Us About JavaScript

Find us on gitter.

Contributors

View Contributors

License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

⬆ 목차

Amendments

We encourage you to fork this guide and change the rules to fit your team’s style guide. Below, you may list some amendments to the style guide. This allows you to periodically update your style guide without having to deal with merge conflicts.

코딩가이드 참고 사이트

AJAX

Mon, 18 Nov 2024 23:37:54 GMT

AJAX 란

XMLHttpRequest 기술을 사용하여 동적인 웹페이지 구성하는 프로그래밍 방식
전체 페이지를 다시 로드하지 않고 페이지 일부 DOM만 업데이트
페이지 일부가 로드되는 동안에도 코드가 계속 실행되어 비동기식으로 작업 가능
(mdn)[https://developer.mozilla.org/ko/docs/Glossary/AJAX]

JSON 라이브러리

JavaScript : JSON
Java : Jackson, google-gson

JSON

let obj = { name:'scott', age:20 }

// Object -> String
let str = JSON.stringfy(obj);

//String -> Object
let emp = JSON.parse(str);

Jackson

ObjectMapper

ObjectMapper objectMapper = new ObjectMapper();

// Object -> String
String empAsString objectMapper.writeValueAsString(empVO);

//String -> Object
EmpVO vo = objectMapper.readValue(str, EmpVO.class);

Jackson annotation

@RequestBody, @ResponseBody

public @ResponseBody List findEmp( @RequestBody EmpVO empVO) {}

@JsonProperty, @JsonFormat, @JsonIgnore, @JsonIgnoreProperties, @JsonPropertyOrder

import java.util.Date;
import com.fasterxml.jackson.annotation.*;
import lombok.*;

@Data @Builder @AllArgsConstructor @NoArgsConstructor @JsonPropertyOrder({ "lastName", "firstName", "salary" }) @JsonIgnoreProperties({"salary","dept"}) public class EmpVO { private String firstName;

@JsonProperty("lname")
private String lastName;

private String dept;
private int salary;

 @JsonFormat(
  shape = JsonFormat.Shape.STRING,
  pattern = "dd-MM-yyyy hh:mm:ss")
private Date hireDate;

@JsonIgnore 
private int commission;

}

// public class JacksonTest {

@Test
public void test() throws JsonProcessingException {
    EmpVO vo = EmpVO.builder().firstName("scott")
                   .lastName("king")
                   .dept("개발")
                   .salary(2000)
                   .hireDate(new Date())
                   .commission(100)
                   .build();
    String str = new ObjectMapper().writeValueAsString(vo);
    System.out.println(str);
}

}

{"lname":"king","firstName":"scott","hireDate":"18-11-2024 11:13:46"}


## AJAX 라이브러리
- XMLHttpRequest 객체
- Javascript(web api) fetch() 함수
- jQuery $.ajax() 함수
- axios() 함수

### fetch()  VS  $.ajax() 

1. get 방식
```javascript
 fetch(url + "?var=value").then();

 $.ajax(url + "?var=value").done();
 $.ajax(url, {data: "var=value"}).done();
 $.ajax(url, {data: {var:"value"}).done();

post(queryString)

//fetch
fetch(url, {method:'post', body: "fv=val&sv=val" }).then()

//jQuery ajax함수 $.ajax(url, {method:'post', data: "fv=val&sv=val" }).done() $.ajax(url, {method:'post', data: {"fv":"val", "sv":"val" } }).done()

3. post(jsonString)
```javascript
 let data = {"fv":"val", "sv":"val" }

 //fetch 함수
 fetch(url, {method: 'post', 
             headers: { "Content-Type": "application/json", },
             body: JSON.stringify(data)
       }).then()    

//jQuery ajax함수
 $.ajax(url, {method: 'post', 
              contentType : "application/json",
              data: JSON.stringify(data)
        }).done()

ajax 와 spring 연동

queryStr = "firstName=scott&lastName=king"
queryStr = "emps[0].firstName=scott&emps[0].lastName=king&emps[1].firstName=scott&emps[1].lastName=king"

jsonStr = {firstName: 'scott', lastName: 'king'}
jsonArr = [{firstName:"scott", lastName:"king"},{firstName:"james", lastName:"park"}]

public String handler(EmpVO vo) {}                    // query string (Object)
public String handler(ListEmpVO list) {}              // query string (Array) 
public String handler(@RequestBody EmpVO vo) {}       // JSON String (Object)
public String handler(@RequestBody List vo) {} // JSON String (Array)

class ListEmpVO {
  List emps;
}

타자게임

Tue, 12 Nov 2024 07:46:35 GMT

IT용어로 구성된 타자게임 페이지로 이동하려면 [ 타자게임 ]클릭하세요

jar 배포

Mon, 11 Nov 2024 19:59:02 GMT

프로퍼티 파일 지정

application.properties

server.port=8080
server.servlet.context-path=/test

application-dev.properties
```
server.port=80
server.servlet.context-path=/
```
로컬에서 빌드하기
- 이클립스에서 실행하는 경우
  1. 프로젝트 컨텍스트메뉴 => run as => maven install
  2. target폴더에 jar파일 생성됨 (war)
- cmd 창에서 실행
```
c:\dev\프로젝트경로> mvn install
                   mvn clean package
                   mvn install -DskipTests   
```
  서버에 jdk 설치(EC2)

자바 설치 가능 리스트 검색
```
$ sudo yum list java*
```

jdk(Amazon Corretto OpenJDK) 설치

$ sudo yum install -y java-17-amazon-corretto.x86_64
$ java -version
$ echo $JAVA_HOME

자바 설치 경로 확인 (선택)

$ whhich java
$ readlink -f /usr/bin/java

환경변수 설정 (선택)
```
$ sudo vi /etc/profile  
```
Shift+g(마지막줄로 이동) => o(입력모드) => 아래의 export정보 입력 => esc => :wq

export JAVA_HOME=/usr/lib/jvm/java-17-amazon-corretto.x86_64
export PATH=$PATH:$JAVA_HOME/bin
export CLASSPATH=$JAVA_HOME/jre/lib:$JAVA_HOME/lib/tools.jar   <== 확인

  $ sudo source /etc/profile

실행

default 프로퍼티 실행

$ java -jar project.jar

http://ip주소:8080/test/custList

dev 프로퍼티 실행

$ sudo java -jar project.jar --spring.profiles.active=dev
                <== 80포트는 관리자 권한으로 실행해야 함.

http://ip주소/custList

백그라운드 실행

java -jar project.jar --spring.profiles.active=dev  &


-- 프로세스 확인하고 중지
```bash
$ ps -ef | grep java
$ sudo kill -9 pid

로그파일 지정

java -jar project.jar --spring.profiles.active=dev >> /home/ec2-user/logs/tomcat.log 2>&1 &


- 실시간 로그 보기
```bash
$ tail -f tomcat.log

무중단 실행(로그아웃하고 세션이 끊어져도 계속 실행)

$ nohup  java -jar project.jar --spring.profiles.active=dev >> /home/ec2-user/logs/tomcat.log 2>&1 &

로깅 라이브러리(Logging Library)

Mon, 11 Nov 2024 18:00:40 GMT

로깅 라이브러리

로깅(logging)이란 시스템 동작시 시스템의 상태와 작동 정보를 시간의 경과에 따라 기록하는 것
System.out.println()을 사용하지 말고 log.XXX() 이용할 것
1. 로그 출력위치(클래스, 메서드, 라인번호)를 알수 있고
2. 출력 형식을 지정할 수 있으며
3. 성능면에서 훨씬 뛰어남.

등장 순서

java.util.logging  ==>  Log4j  ==>  Logback   ==>  Log4j2
                       spring      springboot       최신

Logback

로그 설정 위치

Spring이나 일반 java 프로그램의 경우 logback.xml 파일을 resources 디렉터리에 만들어서 참조하지만 Spring Boot의 경우에는 아래 3가지 중 한 가지 방법을 선택합니다.

application.properties에 설정

logging.pattern=[%thread] %highlight(%-5level) %cyan(%logger{15}) -%kvp -%msg %n
logging.level.com.yedam.app=debug
logging.level.root=info

resources/logback-spring.xml에 설정
resources/logback.xml에 설정

  
    true
    
      [%thread] %highlight(%-5level) %cyan(%logger{15}) -%kvp -%msg %n

log에 대한 세부적인 설정을 하려면 logback.xml 파일을 통한 설정이 필요하고, 간단하게 콘솔 로그만 확인하기 위해서는 application.properties (또는 .yml) 파일에 로그 레벨을 설정하는 것만으로 로그를 확인할 수 있습니다.

로그레벨

     TRACE   >   DEBUG   >   INFO   >   WARN   >   ERROR   >   FATAL   >   OFF

trace : 아주 자세한 로그 출력
debug : DEV 환경에서 디버깅 하기 위해 사용
warn : PROD 환경에서 사용. 향후에 에러가 될 수 있는 경고성 로그 표시
error : 요청을 처리하는 중 오류 발생한 경우 표시
fatal : 심각한 오류 로그 출력
off : 로그 출력 안함

Logback 로그 패턴

%d: 날짜와 시간(yyyy-MM-dd HH:mm:ss.SSS.) %p: 로그 레벨 %-5level: 로그 레벨, -5는 출력의 고정폭 값(5글자) %logger{36}: 로그네임(className)를 나타냅니다.(36글자) %c: 로그를 출력하는 클래스의 이름을 나타냅니다. %C: 로그를 출력하는 클래스의 간결한 이름(패키지명 없이)을 나타냅니다. %M: 로그를 출력하는 메서드의 이름을 나타냅니다. %L: 로그를 출력하는 코드 라인 번호를 나타냅니다. %m: 로그 메시지 자체를 나타냅니다. %n: 개행 문자를 나타냅니다.

로깅

💡 Spring Boot Logging

spring-boot-start-web 안에 spring-boot-starter-logging에 구현체가 있습니다.
Spring Boot에는 내장으로 ‘jul(java.util.logging)’ 로깅 프레임워크가 내장되어 있어서 이를 즉시 사용할 수 있습니다.

💡 Lombok

Lombok 내에 Slf4j가 포함되어 있어서 기존의 Logger를 선언해서 사용하는 방식외에 @Slf4J Annotaion을 이용하여서 간편하게 사용이 가능합니다.

@Slf4J         //Logger static log 필드가 추가됨
public class XXXX { }

Logback을 Log4j2로 변경

spring boot에서 log4j2를 사용하기 위해서는 dependency에서 logback을 제거해주는 작업이 필요합니다. 스프링 부트는 기본 설정으로 logback을 사용하기 때문에 log4j2 의존성을 추가하더라도 기본 설정으로 잡힌 logback이 동작하게 됩니다.

스프링 로깅 동작과정

spring framework(Log4j)

Log4j 구현체 사용 JCL(Jakarta Common Logging 인터페이스) ==> Log4j(JCL 구현체)
log4j2 구현체 사용 JCL(Jakarta Common Logging 인터페이스) ==> jcl-over-slf4j(어댑터) ==> SLF4J(인터페이스) ==> slf4j-log4j(브릿지) ==> log4j2 (slf4j 구현체)

spring boot (Logback)

-> log4j-to-slf4j(어댑터) -> SLF4J(인터페이스) -> Logback(slf4j 구현체)

spring-boot starter-logging logback-classic log4j-to-slf4j jul-to-slf4j(브릿지)

slf4j (Simple Logging Facade For Java)

slf4j는 자바 로깅 시스템을 쉽게 사용할 수 있도록 해주는 라이브러리이며, 다양한 자바 로깅 시스템을 사용할 수 있도록 파사드 패턴(facade pattern) 및 추상화를 통해 로깅 기능을 제공합니다. slf4j를 사용함으로서 얻을 수 있는 이점은 기존에 사용하는 로깅 시스템을 교체하고 싶을 때, 소스 코드를 수정하지 않고도 maven이나 gradle의 의존성 설정만 바꾸면 손쉽게 적용할 수 있습니다.

파사드(Facade pattern)

복잡한 서브 시스템을 단순한 인터페이스를 제공하여 제어하는 방식. 클라이언트는 복잡한 서브 시스템에 대해 알 필요가 없으며, Facade를 통해 일괄적으로 제어가능하다. 단순한고 일관된 통합 인터페이스르 제공

자바스크립트 키워드

Mon, 11 Nov 2024 15:41:21 GMT

arguments
await
break
case
catch
const
debugger
default
delete
do
else
enum
eval
export
false
finally
for
function
if
import
in
Infinity
instanceof
let
NaN
null
return
switch
this
throw
true
typeof
undefined
var
void
while
yield
class
extends
implements
interface
package
public
private
protected
static
super

자바스크립트 event

Mon, 11 Nov 2024 15:26:33 GMT

이벤트 핸들러 등록

참고사이트 : MDN Web Docs 이벤트 입문

1. HTML 태그에 인라인 이벤트 핸들러 등록

html과 javascript 코드 분리해야함. 이 방식은 사용을 자제해야 함
function(){ doProcess(); } 와 같은 구조임. 함수호출이므로 ( )가 필요함
react, vue에서는 인라인 이벤트 핸들러 사용해야 함.

2. 자바스크립트에서 이벤트 핸들러 프로퍼티 지정

이벤트 핸들러를 하나만 지정할 수 있음

3. 이벤트 리스너 방식 처리

이벤트 전파(propagation) / 중지

event.stopPropagation();

기본 이벤트 전파 중지

event.preventDefault();

이벤트 개요

event 종류
event 객체
- 이벤트 발생시킨 대상이 누구인지, 또는 이벤트의 발생 위치가 어떻게 되는지 정보를 구하기 위해서는 이벤트 객체를 먼저 구해야한다.
- KeyboardEvent(keyCode), MouseEvent(clientX, clientY)

function doClickOnBtn1(e) {
   var e = window.event || e;
   var target = e.target;       //이벤트타캣
   log("이벤트 대상: " + target.nodeName);
   log("대상의 ID: " + target.id);

   log("이벤트 타입: " + e.event.type);
}

event 타겟
리스너(핸들러)
그룹이벤트(이벤트위임)
이벤트핸들러에서 this
- apply, call, bind : 함수를 직접 호출하지 않고 apply(), call() 함수를 사용해서 호출하면 첫 번째 인자가 함수 내에서 this 객체로 매핑

데이터베이스 모델링

Mon, 11 Nov 2024 07:15:48 GMT

논리명 추출

Tools 메뉴 -> Data Brower 메뉴
File 메뉴 -> New Report 메뉴
- Name : report (레포트이름 입력)
- Category : Logical 선택하고 드랍다운 메뉴에서 Attribute 선택
- Options 탭 : Name 체크
```
        Table -> Name 체크
```
- OK 버튼
생성된 레포트를 더블클릭하여 execute 하면 하위 실행 레포트가 생성
실행된 레포트에 마우스오른쪽 버튼 클릭하고 Export Result set 메뉴 선택
Export 형식은 CSV 선택하고 Export... 버튼 클릭
저장위치 지정

속성분리

물리명 지정

용어사전 만들기

물리명 적용

springboot 프로젝트

Sun, 10 Nov 2024 16:48:31 GMT

로컬, 개발, 운영 환경에 맞게 프로파일 분리

개발환경

local(로컬 개발환경) : 각 개발자 PC에서 개발 및 테스트 환경 설정
dev(서버 개발환경) : 개발자들이 만든 코드를 통합하여 테스트 할 수 있는 서버 환경
production(운영 환경) : 실제 서비스를 운영하는 환경

개발환경에 맞게 프로퍼티 파일 준비 application.properties application-dev.properties application-prod.properties
적용할 프로퍼티 지정

application.properties 파일에 활성 프로파일을 dev로 지정
```
spring.profiles.active=dev
```

실행할 때 active 프로퍼티 지정

java -jar  XXX.jar                              // application.properties 적용됨
java -jar -Dspring.profiles.active=dev XXX.jar  // application-dev.properties 적용됨

.gitignore에 *.properties 추가

외부 경로의 리소스(업로드폴더) 접근

import java.util.concurrent.TimeUnit;
import org.springframework.http.CacheControl;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class ResourceConfiguration implements WebMvcConfigurer {

    @Value("${file.uploadpath}")
    String uploadpath;

    @Override
    public void addResourceHandlers(final ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/img/**")
        .addResourceLocations("file://" + uploadpath + "/")      

        // 접근 파일 캐싱 시간 
    .setCacheControl(CacheControl.maxAge(1, TimeUnit.MINUTES));
    }
}

log4jdbc 설정

log4jdbc 의존성 추가

 

     org.bgee.log4jdbc-log4j2
     log4jdbc-log4j2-jdbc4.1
     1.16

데이터소스 driver-class-name과 url 수정 application.properties 파일 수정

변경전

spring.datasource.driver-class-name=oracle.jdbc.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe

변경후

spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
spring.datasource.url=jdbc:log4jdbc:oracle:thin:@localhost:1521:xe

log4jdbc.log4j2.properties 파일 생성
- src/main/resources 폴더에 파일 생성하고 아래의 내용 작성
```
log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
```

log레벨 설정 application.properties 파일 수정

logging.level.jdbc.sqlonly=OFF
logging.level.jdbc.sqltiming=DEBUG
logging.level.jdbc.audit=OFF
logging.level.jdbc.resultset=OFF
logging.level.jdbc.resultsettable=DEBUG
logging.level.jdbc.connection=OFF


5. 테스트 매퍼 
```java
import java.util.Map;
import org.apache.ibatis.annotations.Select;

public interface TestMapper {
    @Select("select ${col1}, #{col2} as col2 from dual")
    public Map test(String col1, String col2);
}

junit 테스트

import static org.junit.jupiter.api.Assertions.assertEquals;
import java.util.Map;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import com.yedam.app.emp.mapper.TestMapper;

@SpringBootTest public class TestMapperClient {

@Autowired TestMapper testMapper;
@Test
public void tes() {
    String col = "scott";
    Map map = testMapper.test("sysdate", col);
    assertEquals(col, (String)map.get("col"));
}

}


7. 적용전과 후를 비교
![](https://velog.velcdn.com/images/yedam_it/post/34fd9f27-d012-4ff9-a678-c4d5549f08d0/image.png)


### security 설정
```java
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityCustomizer;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public PasswordEncoder bcryptPassword() {
        return new BCryptPasswordEncoder();
    }

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.authorizeHttpRequests((requests) -> requests.antMatchers("/home", "/").permitAll().antMatchers("/admin/**")
                .hasAuthority("ROLE_ADMIN")
                //.anyRequest().authenticated()
                .anyRequest().permitAll()
                )
                .formLogin(login -> login.defaultSuccessUrl("/home").loginPage("/login").usernameParameter("userid")
                        .permitAll())
                .logout().logoutUrl("/logout").logoutSuccessUrl("/home").permitAll()
        // .and()
        // .csrf().disable();
        ;
        return http.build();
    }


    @Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        return (web) -> web.ignoring().antMatchers("/images/**", "/js/**", "/css/**");
    }
}

프로퍼티 파일 암호화

1. 라이브러리 추가


        com.github.ulisesbocchio
        jasypt-spring-boot-starter
        3.0.5

2. 빈등록

@Configuration
public class JasyptConfig {

    @Bean(name = "jasyptStringEncryptor")   //    복호화할 때 사용할 빈
    public StringEncryptor stringEncryptor() {
    String jasyptkey = System.getenv("jasyptkey");
        final String key = jasyptkey;
        PooledPBEStringEncryptor encryptor = new PooledPBEStringEncryptor();
        SimpleStringPBEConfig config = new SimpleStringPBEConfig();
        config.setPassword(key);
        config.setAlgorithm("PBEWithMD5AndDES");
        config.setPoolSize("1");
        encryptor.setConfig(config);
        return encryptor;
    }
}

3. 암호화

public class JasyptTest {

  @Test
  public void testpass(){
    String encodedPass = encPass("db");   
    System.out.println(encodedPass);
  }

  public String encPass(String rawPass){
    String jasyptkey = System.getenv("jasyptkey");     //암호화할 때 사용할 키는 실행할 때 외부에서 주입
    StandardPBEStringEncryptor standardPBEStringEncryptor = new StandardPBEStringEncryptor();
    standardPBEStringEncryptor.setAlgorithm("PBEWithMD5AndDES");
    standardPBEStringEncryptor.setPassword(jasyptkey);             
    String encodedPass = standardPBEStringEncryptor.encrypt(rawPass); 
    return encodedPass;
  }
}

4. properties 파일에 패스워드 암호화된 값으로 변경

jasypt.encryptor.bean=jasyptStringEncryptor
  db.username=ENC(X3XXXX==)
  db.password=ENC(eGXXXX==)

5. run configuration에서 enviroment 추가

name: jasyptkey  value: 사용할 키

springboot 어노테이션

Sun, 10 Nov 2024 16:47:22 GMT

springboot 버전

springboot    3.2.9   <==   3.2.0  <==  2.7.18
    spring    6.1.12  <==   5      <==  5
   mybatis    3.5.14  <==   3.0.3  <==  2.3.2
      java    21      <==   17     <==  11

springboot annotation

@EnableAutoConfiguration
@EnableWebMvc
@SpringBootApplication
@Configuration
@PropertySource, @ConfigurationProperties, @Value
@ComponentScan, @Component
@Bean, @Required, @Singletone, @Lazy
@Autowired, @Inject, @Qualifier, @Resource
@PostConstruct, @PreConstruct, @PreDestory
@RestController, @Controller, @Service, @Repository
@CrossOrign
@ExceptionHandler
@ControllerAdvice, @RestControllerAdvice
@RequestMapping, @GetMapping, @PostMapping, @PutMapping, @DeleteMapping, @PatchMapping
@CookieValue
@Valid, @InitBinder
@PathVariable
@RequestAttribute, @RequestHeader, @RequestParam, @RequestPart, @RequestBody
@ModelAttribute, @SessionAttributes
@ResponseBody, @ResponseStatus
@Transactional
@Cacheable, @CachePut, @CacheEvent, @CacheConfig

AOP Anotation

@Aspect
@Pointcut
@Before, @After, @Around, @AfterRetruning, @AfterThrowing

JPA Annotation

@Entity
@Table
@Id, @GeneratedValue
@column
@OneToMany
@ManyToOne

Java Bean Validation Annotation

@NotBlank, @Null, @NotNull
@NotEmpty
@Email
@Min, @Max
@Digits, @Positive, @PositiveOrZero, @Negative, @NegativeOrZero
@Future, @futureOrPresent, @Past, @PastOrPresent

Swagger Annotation

@Tag
@Operation
@Parameter
@ApiResponse
@Schema
@ApiModelProperty

MyBatis 프로시저와 TypeHandler

Sun, 10 Nov 2024 16:35:07 GMT

1. FileVO

@Data
public class FileVO {
    private String userid;
    private String filename;
    private String filetype;
}

2. UserVO

@Data
public class UserVO{
    private String userid;
    private String name;
    private String[] hobby;
    private List files;
}

String[] 타입과 List 타입의 파라미터 전달

3. OracleArrayHandler

public class OracleArrayHandler implements TypeHandler {
  @Override
  public void setParameter(PreparedStatement ps, int i, Object parameter, JdbcType jdbcType) throws SQLException {
    OracleConnection conn = ps.getConnection().unwrap(OracleConnection.class);         
    Array reportsArray = (Array)conn.createOracleArray("STRINGARRAY", (String[])parameter);        
    ps.setArray(i, reportsArray);
  }

4. mapper xml과 인터페이스

    
    call insert_user(
          #{userid},
          #{name},
          #{hobby, typeHandler=com.yedam.app.OracleArrayHandler},
          #{files, typeHandler=com.yedam.app.OracleArrayStructHandler}
        )
        

    public void insertUser(UserVO vo);

5. 테스트파일

@SpringBootTest
public class UserMapperTest {

    @Autowired 
    UserMapper userMapper;

    @Test
    public void testStruct() {
        UserVO vo = new UserVO();
        vo.setUserid("9999");
        vo.setName("test");
        vo.setHobby(new String[] {"read","ski"});
        vo.setFiles(List.of(new FileVO("test1","jpg"),
                            new FileVO("test2","pdf")));
        userMapper.insertUser(vo);    
    }
}

6. 오라클 타입 생성

create or replace type STRINGARRAY as table of varchar2(30);


create or replace TYPE FILETYPE AS OBJECT 
(   USERID VARCHAR2(20),
    FILENAME    VARCHAR2(20),
    TYPE    VARCHAR2(20)
);

create or replace type fileArray as table of FILETYPE;

7. procedure

create or replace PROCEDURE INSERT_USER 
(
    p_userid VARCHAR,
    p_name VARCHAR,
    p_hobby STRINGARRAY,
    p_files FILEARRAY 
) AS 
BEGIN
    --profile 등록

    --hobby (String[]) 등록
    for i in 1..p_hobby.count loop
        insert into hobbys values (p_userid, p_hobby(i));
    end loop;

    --file (List) 등록
     for i in 1..p_files.count loop
        insert into files values (p_userid, p_files(i).filename, p_files(i).filetype);
    end loop;

END INSERT_USER;

JavaScript VS jQuery

Sun, 10 Nov 2024 15:54:30 GMT

자바스크립트 기능

DOM api
AJAX
validation

DOM api

분류	자바스크립트	jquery
요소선택	document.getElementById("div")	$("#div")
	.getElementsByTagName("div")	$("div")
	.getElementsByName("div")	$("[name='div']")
	.getElementsByClassName("div")	$(".div")
	.querySelector("css slector")
	.querySelectorAll("css slector")
html 요소 생성	변수 = document.createElement("option")	$newTag = $("
html 요소 추가	부모태그.append( node)	$(부모)append($newTag)
	.prepend(), .appendChild()	.prepend($newTag)
	.insertAdjacentElement(position, element)
	.insertAdjacentHTML(position, text)
	.insertAdjacentText(position, text)
	형제.after(), before()	$형제.after(), before()
html 내용 변경	태그.innerHTML = '수정할내용'	$태그.html("수정할내용")
html 요소 삭제	부모태그.removeChild(태그)
	태그.remove()	$태그.remove()
html 속성 변경	태그.setAttribute('속성', '값')	$태그.attr('속성','값')
	태그.속성명 ='값'	.prop('속성','값')
	태그.removeAttribute('속성')
input 값	태그.value	$태그.val()
css 변경	태그.style.속성 = 'xxx'	$태그.css('속성','값')
	태그.style.display = 'none' 또는 'block'	.hide(), show()
class 변경	태그.classList.add() / remove() / togger()	$태그.addClass()/removeClass()/toggleClass()
	.contains("클래스명")	.hasClass("클래스명")
	.className = "클래스명"	.attr("class", "클래스명")
data속성	태그.setAttribute("data-속성", "값")	$태그.data("속성", "값")
	태그.dataset.속성 = "값"
event 추가	태그.addEventListener("type", handler)	$태그.bind(), on(), one()
event 삭제	태그.removeEventListener("type")	.unbind(), off()
traverse-부모	태그.parentElement , closest()	$태그.parent(), closest()
자식	childNodes, children,	children(),
	firstElementChild, lastElementChild	first(), last()
		find("css선택자")
형제	nextElementSibling, previousElementSibling	$태그.prev(), next()
		.prevAll(), nextAll(), siblings()
필터		eq(index), gt(), lt(), odd(), even()
반복문	forEach()	each()
ajax	XMLHttpRequest 객체
	fetch()	$.ajax(), $.post(), $.get(), $.getJson()
		$("div").load(url)

dom 객체와 jQuery 객체 변환

//dom 객체
var btn = document.getElementById("btn1");
btn.style.backgroundColor = 'red'

//jquery 객체
var $btn = $("#btn1");
$btn.css("backgroundColor","blue")

//dom => jquery   : $()로 감쌈
$(btn).css("backgroundColor","blue")

//jquery => dom   : get(0) 함수
$btn[0].style.backgroundColor = 'red'
$btn.get(0).style.backgroundColor = 'red'

$("div").eq(0)    // jquery
$("div")[0]       // dom
$("div").get(0)   // dom

//each 반복문 안에서 객체 타입
$("div").each(function(idx, item){   
  item            // dom 객체
  $(item)         // jQuery 객체
  $(this)         // jQuery 객체
})

fetch() VS $.ajax()

get 방식

fetch(url + "?var=value").then();

$.ajax(url + "?var=value").done();

post(queryString)

//fetch
fetch(url, {method:'post', body: "fv=val&sv=val" }).then()

//jQuery ajax함수 $.ajax(url, {method:'post', data: "fv=val&sv=val" }).done() $.ajax(url, {method:'post', data: {"fv":"val", "sv":"val" } }).done()

3. post(jsonString)
```javascript
 let data = {"fv":"val", "sv":"val" }

 //fetch 함수
 fetch(url, {method: 'post', 
             headers: { "Content-Type": "application/json", },
             body: JSON.stringify(data)
       }).then()    

//jQuery ajax함수
 $.ajax(url, {method: 'post', 
              contentType : "application/json",
              data: JSON.stringify(data)
        }).done()

반복문

// javaScript
array1.forEach((element, index) => console.log(element));

// jQuery
$( "li" ).each((index, element) => console.log( element ));


//each 반복중단
$.each(arr, function(idx, item){
  return;         // continue
  return false;   // beak
})

자바 키워드

Sun, 10 Nov 2024 03:36:49 GMT

자바키워드

abstract
class
interface
instanceof
main
null
package
private
public
protected
return
static
switch
for
while
if~else
this
super
try~catch
finally
throw
throws
void
main
implements
extends
float
double
byte
short
char
boolean
int
long
case
do
continue
break

자바개념

상속 (inheritence)
객체 (object)
변수 (variable)
상수 (literal)
참조타입 (reference type)
오버라이딩 (overriding)
오버로딩 (overloading)
다형성 (polymorphism)
깊은복제 (deep clone)
생성자 (constructor)
캡슐화 (encapsulation)
박싱/언방싱 (boxing/unboxing)
쓰레기수집기 (Garbage Collector)
게터/세터 (Getter/Setter)
힙 (heap)
스택 (stack)
인스턴스 (instance)
람다식 (Lambda Expressions)
정규표현식 (Regular Expression)
메소드 (method)
매개변수 (parameter)
멀티테스킹 (multi tasking)
캐스팅 (casting)
싱글톤 (singletone)
예외처리 (exception)
스태틱 (static)

알아야 할 클래스

Object
System
String
StringBuffer
StringBuilder
Math
Byte, Short
Boolean
Character
Integer, Long
Float, Double
Random
Calendar
Date
Arrays
StringTokenizer
Class
Pattern
DecimalFormat
SimpleDateFormat
MessageFormat
LocalDate
LocalTime
Period
Duration
Collections
List
Set
Map
Properties
Queue
Stream
File
Path
Iterator
Exception
Connection
Statement
ResultSet
Operator
Optional
Serializable
Scanner

IT 용어

Sun, 10 Nov 2024 03:16:51 GMT

linux

ftp
telnet
web server
DNS
DHCP
IP주소(퍼블릭/프라이빗, 고정/유동)
서브넷과 서브넷 마스크
CIDR
라우팅과 라우터
포트

DATABASE

인덱스
정규화
제약조건(일관성)
트랜잭션
조인
서브쿼리
그룹함수
실행계획
프로시저와 함수의 차이
트리거

JavaScript

var , let, const 차이
attribute와 property 차이
클로저
Event 전파
DOM API
JSON
비동기통신(AJAX)

Java

Wrapper Class
인터페이스
오버라이딩과 오버로딩 차이
상속과 다형성
JVM
프로그램 패러다임
- 선언형 프로그래밍
- 함수형 프로그래밍
- 논리형 프로그래밍
- 절차적 프로그래밍
- 객체 지향 프로그래밍
- 명령형 프로그래밍
call by value vs call by reference
제네릭과 람다식

웹프로그래밍

세션과 쿠키의 차이
HTTP 프로토콜
get과 post 차이
WAS와 웹서버의 차이
쿼리스트링 vs json 스트링
REST API
포워드와 리다이렉트 페이지 이동의 차이
부트스트랩
제이쿼리

Node / react / vue

SPA
라우터
useRouter()와 useRoute()
redux
next.js
Options API 와 Composition API 스타일
생명주기 훅(onMounted, onUpdated)

Spring

MVC 패턴
스프링 아키텍쳐
서블릿
스프링 디스페처서블릿
레이아웃 템플릿 엔진
DI / IoC
AOP
JPA 와 MyBatis 차이
디자인패턴(싱글톤패턴/팩토리패턴/퍼사드패턴)
was 종류
전자정부프레임워크
넥사크로 / 웹스퀘어
레포트 도구

clould & deploy

CI/CD
VPC
도커
RDS
형상관리도구

EC2 인스턴스

Sun, 10 Nov 2024 02:49:02 GMT

실습1 : EC2 인스턴스 배포

1. 리전 변경

아시아 태평양(서울)

2. 키페어 생성

사이드메뉴 => 네트워크 및 보안 => 키페어
이름 : awskey
프라이빗 키 파일 형식 : .pem 선택
태그 : myserver
키파일 다운로드
c:\aws 폴더 생성하고 다운받은 pem 키파일 이동
파일 분실 시 재발급 안 되고 서버 접속 할 수 없음

3. 보안그룹 생성

사이드메뉴 => 네트워크 및 보안 => 보안그룹
myserver_sg

보안그룹 => myserver_sg 체크 => 인바운드 규칙 탭 => 인바운드 규칙 편집 버튼

     => 규칙 추가 버튼 => 포트 범위에 80 => 소스 에 "anywhere-IPv4" => 규칙 저장 버튼

4. 인스턴스 시작

서비스 => 컴퓨팅 => EC2 선택
이름 및 태그 : myserver
AMI : Amazon Linux
인스턴스 유형 : t2.micro (프리티어 기본값 )
키페어 : awskey 선택
네트워크 설정 : myserver_sg 보안그룹 선택
스토리지 구성 : 30
인스턴스 시작 버튼
모든 인스턴스 보기 버튼
myserver 인스턴스 선택
public IP 주소 따로 메모해둘 것

실습2 : EC2 인스턴스 접속

MobaXterm 다운로드하고 설치

MobaXterm session 설정

메인 메뉴 => session
SSH 탭
Remote host에 인스턴스의 퍼블릭 IP 입력
specify username 체크 하고 ec2-user 입력
Advanced SSH settings 탭
SSH-browswer type 은 None 선택 파일 전송하려면 SFTP protocol 선택
use private key 체크하고 다운받은 pem 키파일을 지정
OK 버튼

서버 정보 확인

$ ifconfig                     # 퍼블릭 IP 확인
$ curl ipinfo.io/ip
$ cat /etc/os-release          # 리눅스 버전
$ lsblk                        # 스토리지 확인
$ df –h                        # 디스크 사용량 확인
$ free –h                      # 메모리 용량 확인

호스트 이름 변경

$ hostname                                     # 호스트 이름 확인
$ sudo hostnamectl set-hostname webserver      # 호스트 이름 변경
$ sudo reboot                                  # 재부팅

실습3 : http 웹서버 구축

1. 웹서버 구축

    sudo su -                                       # 슈퍼 유저로 변경
    yum install httpd –y                            # http 데몬 설치
    systemctl start httpd                           # http 데몬 실행
                                                    # sudo service httpd start
    systemctl status httpd                          # http 서비스 상태
                                                    # sudo service httpd status  
    sudo netstat -nlp | grep 80                     # 80 포트 확인
    cd /var/www/html                                
    echo “AWS web server start~~~” > index.html     # index 파일 생성