문법은 약속이 아니라 도구다
처음 JavaScript를 배우면 문법이 낯설게 느껴집니다. let, const, 괄호, 따옴표, 세미콜론, 중괄호 같은 기호들이 갑자기 몰려오기 때문입니다. 마치 외국어의 문법책을 첫 장부터 외워야 하는 기분이 들 수도 있습니다.
하지만 JavaScript 문법은 암기 시험의 대상이 아닙니다. 웹페이지가 기억해야 할 것, 계산해야 할 것, 화면에 보여 주어야 할 것을 표현하기 위한 작은 도구들입니다.
예를 들어 쇼핑몰 페이지를 만든다고 생각해 봅시다. 사용자가 고른 상품 이름, 가격, 수량, 장바구니에 담겼는지 여부, 로그인했는지 여부 같은 정보가 필요합니다. JavaScript는 이런 정보를 값으로 표현하고, 변수에 담고, 계산하고, 비교하고, 화면에 출력합니다.
이번 장에서는 바로 그 첫 번째 도구들을 배웁니다. 값, 표현식, 변수, 문자열, 숫자, 불리언, null, undefined, 연산자, 템플릿 리터럴, 주석과 코드 스타일입니다. 이름은 많아 보이지만 목표는 단순합니다. JavaScript 코드를 읽고, 아주 짧은 코드를 직접 쓸 수 있게 되는 것입니다.
값: JavaScript가 다루는 가장 작은 재료
JavaScript에서 값은 프로그램이 다루는 데이터입니다. 화면에 보여 줄 문장도 값이고, 계산할 숫자도 값이고, 참인지 거짓인지 나타내는 상태도 값입니다.
'Hello JavaScript'
25
true
null위 코드는 각각 하나의 값입니다. 'Hello JavaScript'는 문자열 값, 25는 숫자 값, true는 불리언 값, null은 비어 있음을 의도적으로 나타내는 값입니다.
브라우저 개발자 도구의 콘솔을 열고 값을 입력하면 JavaScript는 그 값을 평가합니다. 평가한다는 말은 코드를 읽고 결과를 만들어 낸다는 뜻입니다.
10콘솔은 10을 그대로 결과로 보여 줍니다. 이번에는 계산식을 입력해 봅시다.
10 + 5결과는 15입니다. JavaScript는 10 + 5라는 코드를 읽고 계산한 다음, 하나의 결과값을 만들어 냅니다. 이렇게 값을 만들어 내는 코드를 표현식이라고 합니다.
표현식: 결과를 만드는 코드
표현식은 실행했을 때 하나의 값으로 평가되는 코드입니다. 숫자 하나도 표현식이고, 문자열 하나도 표현식입니다. 계산식도 표현식입니다.
3
'사과'
3 + 7
'안녕' + '하세요'각각은 모두 하나의 결과를 만듭니다.
3 + 7이 표현식의 결과는 10입니다.
'안녕' + '하세요'이 표현식의 결과는 '안녕하세요'입니다. 숫자에서 +는 덧셈이지만, 문자열에서 +는 문자열을 이어 붙이는 역할을 합니다.
웹페이지에서도 표현식은 계속 등장합니다. 상품 가격과 수량을 곱해 총액을 만들고, 사용자가 입력한 이름을 문장에 넣고, 나이가 특정 기준 이상인지 비교합니다.
12000 * 3
'윤서' + '님, 환영합니다.'
18 >= 13각 표현식은 순서대로 36000, '윤서님, 환영합니다.', true라는 값을 만듭니다. JavaScript 코드를 읽을 때는 먼저 이렇게 질문해 보세요. 이 코드는 어떤 값을 만들어 내는가? 이 질문에 답할 수 있으면 문법이 훨씬 덜 낯설어집니다.
변수: 값에 이름 붙이기
값을 한 번만 쓰고 버린다면 변수는 필요하지 않습니다. 하지만 웹페이지는 보통 같은 값을 여러 번 사용합니다. 사용자의 이름을 인사말에도 쓰고, 프로필에도 쓰고, 저장할 데이터에도 넣어야 할 수 있습니다.
이때 값에 이름을 붙여 두는 도구가 변수입니다.
const userName = '지민';이 코드는 '지민'이라는 값에 userName이라는 이름을 붙입니다. 이제부터 코드에서는 userName을 사용해 그 값을 다시 꺼내 쓸 수 있습니다.
const userName = '지민';
userName;콘솔에서 마지막 줄의 결과는 '지민'입니다.
변수는 상자라고 설명되곤 합니다. 다만 더 정확히 말하면, 변수는 값에 붙인 이름표에 가깝습니다. userName이라는 이름표를 보면 JavaScript는 그 이름이 가리키는 값 '지민'을 찾아옵니다.
변수를 쓰면 코드의 의미가 훨씬 분명해집니다.
12000 * 3이 코드는 계산은 되지만 무엇을 계산하는지 바로 알기 어렵습니다.
const price = 12000;
const quantity = 3;
price * quantity;이제 우리는 12000이 가격이고 3이 수량이라는 사실을 알 수 있습니다. 같은 계산이라도 이름이 붙으면 코드가 문장이 됩니다.
let과 const: 바뀌는 값과 바뀌지 않는 값
JavaScript에서 변수를 만들 때는 주로 let과 const를 사용합니다.
let은 나중에 다른 값을 다시 넣을 수 있는 변수를 만들 때 사용합니다.
let count = 0;
count = 1;
count = 2;처음에는 count가 0이었지만 이후 1, 다시 2로 바뀌었습니다. 카운터 버튼을 누를 때마다 숫자가 올라가는 경우처럼 값이 변해야 한다면 let이 어울립니다.
반대로 const는 한 번 값을 넣으면 같은 변수 이름에 다른 값을 다시 넣을 수 없습니다.
const siteName = '처음 만나는 JavaScript';
siteName = '다른 이름';이 코드는 오류가 납니다. const로 만든 변수는 다시 할당할 수 없기 때문입니다.
처음에는 이렇게 기준을 잡으면 좋습니다. 나중에 값이 바뀌어야 한다면 let, 바뀌지 않아야 한다면 const를 사용합니다. 그리고 확실하지 않다면 우선 const를 사용하세요. 코드를 쓰다가 정말 값을 바꿔야 하는 순간이 오면 그때 let으로 바꾸면 됩니다.
웹페이지 예시로 생각해 봅시다.
const productName = '무선 키보드';
const price = 45000;
let quantity = 1;
quantity = 2;상품 이름과 가격은 이 코드 안에서 바뀌지 않습니다. 그래서 const를 사용했습니다. 하지만 사용자가 수량 버튼을 누르면 quantity는 바뀔 수 있습니다. 그래서 let을 사용했습니다.
이 구분은 단순한 취향이 아닙니다. 코드가 길어질수록 어떤 값이 변할 수 있고 어떤 값이 고정되어 있는지 아는 것이 중요합니다. const는 이 값은 여기서 바뀌지 않는다는 약속을 코드에 남기는 방법입니다.
문자열: 화면에 보이는 대부분의 글자
문자열은 글자 데이터를 표현하는 값입니다. 사용자의 이름, 버튼 문구, 안내 메시지, 검색어, 이메일 주소처럼 웹페이지에서 보이는 많은 정보가 문자열입니다.
JavaScript에서는 따옴표로 감싸 문자열을 만듭니다.
'안녕하세요'
'JavaScript'
'12345'여기서 중요한 점이 있습니다. '12345'는 숫자가 아니라 문자열입니다. 따옴표로 감싸면 JavaScript는 그 안의 내용을 글자로 봅니다.
12345
'12345'첫 번째는 숫자입니다. 계산할 수 있습니다. 두 번째는 문자열입니다. 우편번호, 전화번호, 주문번호처럼 숫자처럼 보이지만 계산 대상이 아닌 값은 문자열로 다루는 경우가 많습니다.
문자열은 +로 이어 붙일 수 있습니다.
const userName = '서연';
const message = userName + '님, 환영합니다.';
message;결과는 '서연님, 환영합니다.'입니다.
문자열의 길이를 알고 싶을 때는 .length를 사용합니다.
const password = 'abc12345';
password.length;결과는 8입니다. 비밀번호가 너무 짧은지 검사할 때 이런 값을 사용할 수 있습니다.
const password = 'abc12345';
const isLongEnough = password.length >= 8;
isLongEnough;결과는 true입니다. 이제 문자열은 단순한 글자가 아니라 판단의 재료가 되었습니다.
숫자: 계산과 크기 비교의 재료
숫자는 가격, 수량, 점수, 나이, 화면 너비, 남은 시간처럼 계산할 수 있는 값을 표현합니다.
const price = 15000;
const quantity = 2;
const total = price * quantity;
total;결과는 30000입니다.
JavaScript에서는 정수와 소수를 모두 숫자 타입으로 다룹니다.
const temperature = 24.5;
const score = 92;계산에는 산술 연산자를 사용합니다.
10 + 3
10 - 3
10 * 3
10 / 3
10 % 3마지막 %는 나머지를 구하는 연산자입니다. 10 % 3의 결과는 1입니다. 10을 3으로 나누면 3이 세 번 들어가고 1이 남기 때문입니다.
나머지 연산자는 생각보다 자주 쓰입니다. 예를 들어 어떤 숫자가 짝수인지 확인할 때 사용할 수 있습니다.
const number = 8;
const isEven = number % 2 === 0;
isEven;결과는 true입니다. 숫자를 2로 나누었을 때 나머지가 0이면 짝수입니다.
계산할 때 주의할 점도 있습니다. 문자열과 숫자를 함께 +로 연결하면 JavaScript는 숫자를 문자열처럼 이어 붙일 수 있습니다.
'10' + 5결과는 '105'입니다. 숫자 덧셈 15가 아닙니다. 사용자가 입력창에 입력한 값은 대개 문자열로 들어옵니다. 그래서 입력값으로 계산하려면 숫자로 바꾸는 과정이 필요할 때가 있습니다. 이 부분은 이후 DOM과 폼을 다룰 때 다시 만나게 됩니다.
불리언: 예 또는 아니오로 상태 표현하기
불리언은 true 또는 false 둘 중 하나의 값만 가집니다. 참과 거짓을 나타내는 타입입니다.
true
false불리언은 웹페이지의 상태를 표현하기에 아주 좋습니다.
const isLoggedIn = true;
const hasCoupon = false;
const isModalOpen = false;isLoggedIn은 사용자가 로그인했는지, hasCoupon은 쿠폰이 있는지, isModalOpen은 모달 창이 열려 있는지를 나타냅니다. 이렇게 불리언 변수는 보통 is, has, can 같은 말로 시작하면 읽기 쉽습니다.
const isAdult = true;
const hasPermission = false;
const canSubmit = true;불리언은 직접 적을 수도 있지만, 비교 연산의 결과로 만들어지는 경우가 많습니다.
const age = 17;
const canWatchMovie = age >= 15;
canWatchMovie;결과는 true입니다. age >= 15라는 표현식이 평가되어 불리언 값을 만든 것입니다.
버튼을 보여 줄지, 경고 메시지를 띄울지, 다음 페이지로 이동할지 같은 결정은 결국 불리언으로 표현되는 경우가 많습니다. JavaScript가 웹페이지와 상호작용할 수 있는 이유도 이런 작은 참과 거짓을 계속 판단하기 때문입니다.
null과 undefined: 비어 있음에도 종류가 있다
처음 JavaScript를 배울 때 가장 헷갈리는 값 중 하나가 null과 undefined입니다. 둘 다 값이 없다는 느낌을 주지만 의미가 다릅니다.
undefined는 아직 값이 정해지지 않았다는 뜻에 가깝습니다.
let userName;
userName;변수는 만들었지만 값을 넣지 않았습니다. 이때 userName의 값은 undefined입니다. JavaScript가 아직 값이 없다고 말해 주는 셈입니다.
반면 null은 개발자가 의도적으로 비어 있음을 넣은 값입니다.
let selectedProduct = null;이 코드는 아직 선택된 상품이 없다는 상태를 분명히 표현합니다. 상품 목록은 있지만 사용자가 아무것도 고르지 않은 상황일 수 있습니다.
둘의 차이를 웹페이지 상황에 연결해 보면 더 쉽습니다. 사용자가 아직 프로필 이미지를 등록하지 않았다면 profileImage를 null로 둘 수 있습니다. 이 값은 실수로 빠진 것이 아니라 현재 이미지가 없다는 의미를 담습니다.
const profileImage = null;하지만 어떤 변수를 만들기만 하고 값을 넣지 않았다면 그 값은 undefined가 됩니다.
let profileImage;실무에서는 undefined가 나오면 값을 넣는 과정을 빠뜨리지 않았는지 확인하는 경우가 많습니다. null은 없음을 표현하기 위해 직접 선택하는 값으로 자주 사용합니다.
연산자: 값을 계산하고 비교하고 저장하기
연산자는 값을 다루는 기호입니다. 이미 +, -, *, / 같은 연산자를 보았습니다. 연산자를 사용하면 값을 계산하고, 비교하고, 변수에 저장할 수 있습니다.
먼저 산술 연산자입니다.
const a = 10;
const b = 3;
a + b;
a - b;
a * b;
a / b;
a % b;산술 연산자는 숫자 계산에 사용합니다. 상품 총액, 할인 금액, 평균 점수, 남은 시간 등을 만들 때 필요합니다.
다음은 할당 연산자입니다. 할당은 변수에 값을 넣는다는 뜻입니다.
let count = 0;
count = count + 1;count = count + 1은 오른쪽의 count + 1을 먼저 계산한 뒤, 그 결과를 다시 count에 넣습니다. 처음 count가 0이었다면 결과적으로 count는 1이 됩니다.
이 코드는 더 짧게 쓸 수 있습니다.
let count = 0;
count += 1;+=는 기존 값에 오른쪽 값을 더해서 다시 저장합니다. 카운터, 장바구니 수량, 좋아요 개수처럼 조금씩 변하는 숫자를 다룰 때 자주 만납니다.
비교 연산자는 두 값을 비교해 불리언 결과를 만듭니다.
10 > 5
10 < 5
10 >= 10
10 <= 9
10 === 10
10 !== 5결과는 각각 true, false, true, false, true, true입니다.
여기서 ===는 두 값이 같은지 비교합니다. !==는 두 값이 다른지 비교합니다. JavaScript에는 ==도 있지만, 처음 배울 때는 ===를 사용하는 습관을 들이는 것이 좋습니다. ===는 값과 타입을 더 엄격하게 비교하기 때문에 예상하기 쉬운 코드를 만드는 데 도움이 됩니다.
'10' === 10결과는 false입니다. 왼쪽은 문자열이고 오른쪽은 숫자이기 때문입니다. 사람 눈에는 둘 다 10처럼 보이지만 JavaScript에게는 다른 값입니다.
템플릿 리터럴: 문장 속에 값을 넣기
문자열을 만들 때 +로 이어 붙일 수 있지만, 문장이 길어지면 읽기 어려워집니다.
const userName = '민수';
const point = 1200;
const message = userName + '님은 현재 ' + point + '포인트를 가지고 있습니다.';동작은 하지만 어수선합니다. 이럴 때 템플릿 리터럴을 사용하면 훨씬 자연스럽게 쓸 수 있습니다. 템플릿 리터럴은 백틱 기호로 문자열을 감싸고, ${} 안에 값을 넣습니다.
const userName = '민수';
const point = 1200;
const message = `${userName}님은 현재 ${point}포인트를 가지고 있습니다.`;결과는 같습니다.
'민수님은 현재 1200포인트를 가지고 있습니다.'하지만 코드가 훨씬 읽기 쉽습니다. 실제 웹페이지에서는 화면에 보여 줄 메시지를 자주 만들어야 합니다.
const productName = '노트북 파우치';
const price = 28000;
const quantity = 2;
const total = price * quantity;
const orderMessage = `${productName} ${quantity}개의 총액은 ${total}원입니다.`;이 코드는 데이터와 문장을 자연스럽게 연결합니다. 사용자가 입력한 이름을 환영 문구에 넣거나, 검색 결과 개수를 표시하거나, 장바구니 총액을 보여 줄 때 템플릿 리터럴은 매우 유용합니다.
템플릿 리터럴 안의 ${}에는 변수뿐 아니라 표현식도 넣을 수 있습니다.
const price = 10000;
const quantity = 3;
const message = `총액은 ${price * quantity}원입니다.`;${price * quantity}가 먼저 계산되고, 그 결과가 문자열 안에 들어갑니다.
주석: 미래의 나에게 남기는 작은 메모
주석은 JavaScript가 실행하지 않는 코드 속 메모입니다. 한 줄 주석은 //로 작성합니다.
// 상품 가격과 수량으로 총액을 계산한다.
const price = 12000;
const quantity = 3;
const total = price * quantity;여러 줄 주석은 /* */를 사용합니다.
/*
사용자가 주문 버튼을 누르기 전에
총액을 미리 계산해 화면에 보여 준다.
*/
const total = price * quantity;주석은 많을수록 좋은 것이 아닙니다. 코드가 이미 충분히 설명하고 있다면 주석이 필요하지 않을 때도 많습니다.
const price = 12000;
const quantity = 3;
const total = price * quantity;이 코드는 변수 이름만으로도 무엇을 하는지 어느 정도 알 수 있습니다. 굳이 가격 곱하기 수량이라고 주석을 달지 않아도 됩니다.
좋은 주석은 코드가 말하지 못하는 이유를 설명합니다.
// 무료 배송 기준은 현재 이벤트 정책에 따라 30000원으로 정한다.
const freeShippingMinPrice = 30000;이 주석은 단순히 코드 내용을 반복하지 않습니다. 왜 30000이라는 숫자가 등장했는지 알려 줍니다. 몇 주 뒤에 코드를 다시 보는 사람에게는 이런 주석이 큰 도움이 됩니다. 그 사람이 미래의 나일 가능성이 높다는 것도 잊지 마세요.
이름 짓기: 코드를 읽기 쉬운 문장으로 만들기
변수 이름은 코드의 가독성을 크게 좌우합니다. 같은 값이라도 이름을 어떻게 붙이느냐에 따라 코드의 분위기가 달라집니다.
const x = 12000;
const y = 3;
const z = x * y;컴퓨터는 이 코드를 이해합니다. 하지만 사람은 한 번 더 생각해야 합니다. x가 무엇이고 y가 무엇인지 알 수 없기 때문입니다.
const price = 12000;
const quantity = 3;
const totalPrice = price * quantity;이번에는 훨씬 분명합니다. JavaScript는 결국 사람이 계속 읽고 고치는 코드입니다. 컴퓨터가 실행할 수 있는 코드에서 멈추지 말고, 사람이 이해할 수 있는 코드로 쓰는 습관을 들여야 합니다.
JavaScript에서는 보통 카멜 케이스를 사용합니다. 카멜 케이스는 첫 단어는 소문자로 쓰고, 그다음 단어부터 첫 글자를 대문자로 쓰는 방식입니다.
const userName = '하린';
const totalPrice = 30000;
const isLoggedIn = true;이름을 지을 때는 값의 의미가 드러나야 합니다. 불리언 값은 특히 질문처럼 읽히면 좋습니다.
const isOpen = false;
const hasItem = true;
const canSubmit = false;isOpen은 열려 있는가, hasItem은 항목이 있는가, canSubmit은 제출할 수 있는가를 나타냅니다. 이런 이름은 나중에 조건문을 배울 때 더 큰 힘을 발휘합니다.
들여쓰기와 코드 스타일: 작은 질서가 큰 혼란을 막는다
처음에는 코드가 짧기 때문에 들여쓰기나 줄바꿈이 별로 중요하지 않아 보입니다. 하지만 코드가 조금만 길어져도 정리되지 않은 코드는 금세 읽기 어려워집니다.
예를 들어 다음 코드는 동작할 수는 있지만 읽기 불편합니다.
const price=12000;const quantity=3;const total=price*quantity;const message=`총액은 ${total}원입니다.`;같은 코드를 줄을 나누고 공백을 넣어 쓰면 훨씬 편합니다.
const price = 12000;
const quantity = 3;
const total = price * quantity;
const message = `총액은 ${total}원입니다.`;공백은 코드의 의미를 바꾸지 않는 경우가 많지만, 사람의 눈에는 큰 차이를 만듭니다. 연산자 양쪽에 공백을 넣고, 관련 있는 코드를 가까이 두고, 한 줄에 너무 많은 일을 시키지 않는 것만으로도 코드가 차분해집니다.
코드 스타일은 멋을 부리는 일이 아닙니다. 버그를 줄이는 일입니다. 보기 쉬운 코드는 실수를 빨리 발견하게 해 줍니다.
작은 실전: 주문 메시지 만들기
이제 지금까지 배운 내용을 하나로 묶어 봅시다. 상품 이름, 가격, 수량, 할인 여부를 변수로 표현하고, 총액을 계산한 뒤, 사용자에게 보여 줄 문장을 만들어 보겠습니다.
const productName = '블루투스 스피커';
const price = 59000;
let quantity = 2;
const hasDiscount = true;
const totalPrice = price * quantity;
const message = `${productName} ${quantity}개의 총액은 ${totalPrice}원입니다.`;
message;이 코드에는 여러 기본 문법이 함께 들어 있습니다. '블루투스 스피커'는 문자열, 59000과 2는 숫자, true는 불리언입니다. productName, price, quantity, hasDiscount는 변수입니다. price * quantity는 표현식이고, 그 결과가 totalPrice에 저장됩니다. 마지막으로 템플릿 리터럴을 사용해 화면에 보여 줄 문장을 만들었습니다.
이번에는 수량이 바뀌는 상황을 생각해 봅시다.
const productName = '블루투스 스피커';
const price = 59000;
let quantity = 2;
quantity += 1;
const totalPrice = price * quantity;
const message = `${productName} ${quantity}개의 총액은 ${totalPrice}원입니다.`;
message;quantity += 1 때문에 수량은 3이 됩니다. 따라서 총액은 177000원이 됩니다. 장바구니에서 + 버튼을 누르는 기능도 결국 이런 생각에서 출발합니다. 버튼을 누르면 수량 값이 변하고, 변한 값을 바탕으로 총액 문장을 다시 만듭니다.
아직 DOM을 다루지 않았기 때문에 화면을 직접 바꾸지는 않았습니다. 하지만 우리는 이미 화면을 바꾸기 위한 핵심 재료를 만들었습니다. 웹페이지는 결국 값의 변화에 따라 달라집니다. JavaScript 기본 문법은 그 값을 만들고 다루는 방법입니다.
흔한 실수 살펴보기
초보자가 자주 만나는 오류를 미리 알아 두면 당황할 일이 줄어듭니다.
먼저 문자열 따옴표를 닫지 않는 경우입니다.
const message = '안녕하세요;문자열은 시작한 따옴표와 같은 따옴표로 닫아야 합니다.
const message = '안녕하세요';다음은 const 변수에 다시 값을 넣는 경우입니다.
const count = 0;
count = 1;count가 바뀌어야 한다면 let을 사용해야 합니다.
let count = 0;
count = 1;또 하나는 변수 이름을 다르게 쓰는 경우입니다. JavaScript는 대소문자를 구분합니다.
const userName = '나은';
username;userName과 username은 다른 이름입니다. 이런 실수는 콘솔에서 ReferenceError 같은 오류로 나타날 수 있습니다. 오류 메시지는 무섭게 생겼지만, 대부분은 JavaScript가 어느 부분을 이해하지 못했는지 알려 주는 힌트입니다.
오류를 만났을 때는 코드를 천천히 읽어 보세요. 따옴표가 닫혔는지, 변수 이름이 같은지, const에 다시 할당하지 않았는지, 문자열과 숫자를 헷갈리지 않았는지 확인하면 많은 문제를 해결할 수 있습니다.
이번 장에서 기억할 것
JavaScript 기본 문법은 웹페이지의 상태와 데이터를 표현하기 위한 최소한의 도구입니다. 값은 JavaScript가 다루는 재료이고, 표현식은 값을 만들어 내는 코드입니다. 변수는 값에 이름을 붙여 다시 사용할 수 있게 해 줍니다.
const는 다시 할당하지 않을 값에 사용하고, let은 바뀌어야 하는 값에 사용합니다. 문자열은 화면에 보여 줄 글자를 표현하고, 숫자는 계산에 사용하며, 불리언은 참과 거짓으로 상태를 나타냅니다. null은 의도적으로 비어 있음을 표현하고, undefined는 아직 값이 정해지지 않은 상태에 가깝습니다.
연산자는 값을 계산하고 비교하고 저장하는 데 사용됩니다. 템플릿 리터럴은 값이 들어간 문장을 읽기 쉽게 만들며, 주석과 코드 스타일은 코드를 오래 이해할 수 있게 도와줍니다.
다음 장에서는 이 값들을 바탕으로 결정을 내리고 반복하는 방법을 배웁니다. 사용자가 성인인지 확인하고, 목록의 항목을 하나씩 처리하고, 여러 개의 UI 요소를 만들어 내는 일은 모두 조건과 반복에서 시작됩니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.