- JavaScript basic
JS의 정의 (자바스크립트란?)
자바스크립트는 웹 페이지에 동적인 기능을 더하기 위해 만들어진 프로그래밍 언어입니다.
HTML이 웹의 '뼈대'를 만들고 CSS가 '외형'을 꾸민다면, 자바스크립트는 웹의 '근육과 신경' 역할을 하여 실제로 움직이게 만듬
오늘날에는 웹 브라우저뿐만 아니라 서버(Node.js), 모바일 앱, 데스크톱 앱 개발에도 널리 쓰이는 가장 인기 있는 언어 중 하나
웹에서 JS로 할 수 있는 일
자바스크립트가 없다면 우리는 인터넷에서 단순히 글자와 그림만 읽어야 했을 것입니다.
- 실시간 상호작용: 버튼을 눌렀을 때 팝업창이 뜨거나 메뉴가 슬라이드처럼 열립니다.
- 데이터 업데이트: 페이지 전체를 새로고침하지 않고도 새로운 댓글이나 날씨 정보를 가져옵니다.
- 시각적 효과: 애니메이션, 차트 그리기, 화려한 그래픽 효과를 구현합니다.
- 입력값 검증: 로그인할 때 아이디가 비어있거나 비밀번호가 짧으면 즉시 알려줍니다.
HTML에 JS 작성하는 방법
자바스크립트를 웹 문서에 넣는 방법은 크게 두 가지가 있습니다.
① 내부 스크립트 (Internal Script)
HTML 파일 안의 <script> 태그 사이에 직접 코드를 적습니다.
<script>
console.log("반갑습니다! 자바스크립트입니다.");
</script>② 외부 스크립트 (External Script)
별도의 .js 파일을 만들고 HTML에서 불러옵니다. (가장 권장되는 방식입니다.)
<script src="script.js"></script>웹브라우저가 JS를 해석하는 과정
우리가 작성한 영어 같은 코드를 컴퓨터는 바로 이해하지 못합니다. 브라우저 내부에는 이를 번역해주는 '자바스크립트 엔진'이 있습니다.
- 로딩: 브라우저가 HTML을 읽다가 <script> 태그를 만나면 JS 파일을 불러옵니다.
- 파싱: 엔진이 코드를 한 줄씩 읽으며 문법에 오류가 없는지 분석합니다.
- 컴파일 & 실행: 코드를 컴퓨터가 이해할 수 있는 기계어로 빠르게 바꾼 뒤 실제 동작을 수행합니다.
JS 기본 용어 정리
자바스크립트를 공부할 때 매일 마주하게 될 핵심 단어들입니다.
- 값 (Value): 100, "안녕" 같이 우리가 다루는 데이터 그 자체입니다.
- 변수 (Variable): 값을 저장하는 상자입니다.
- 연산자 (Operator): +, -, * 처럼 값을 계산하거나 비교하는 도구입니다.
- 함수 (Function): 특정 작업을 수행하도록 미리 만들어둔 코드 묶음입니다.
- 문법 (Syntax): 자바스크립트가 알아들을 수 있게 코드를 작성하는 규칙입니다.
학습 정리
- 자바스크립트는 웹을 움직이게 만드는 동적 언어이다.
- 브라우저 내부의 **엔진(V8 등)**이 코드를 해석하고 실행한다.
- HTML 파일과 연결하여 사용하며, 주로 별도의 파일로 관리하는 것이 깔끔하다.
- JS I/0
데이터를 보여주는 방법 (출력)
자바스크립트에서 결과를 확인하거나 사용자에게 메시지를 전달할 때 사용하는 대표적인 방법들입니다.
① console.log() - 개발자의 영원한 친구
브라우저의 개발자 도구(F12) 콘솔 창에 내용을 출력합니다.
사용자에게는 보이지 않으므로, 주로 코드가 잘 작동하는지 확인하는 디버깅 용도로 사용합니다.
console.log("콘솔에 출력되는 메시지입니다.");
console.log(10 + 20); // 30② alert() - 경고창 띄우기
브라우저 상단에 작은 알림창을 띄웁니다. 사용자가 '확인'을 누르기 전까지는 다음 코드가 실행되지 않고 멈춰있습니다.
alert("환영합니다! 로그인이 완료되었습니다.");③ document.write() - 웹 문서에 직접 쓰기
HTML 문서(body)에 직접 내용을 출력합니다. 주로 테스트 용도로만 사용하며, 실제 서비스에서는 기존 내용을 덮어씌울 위험이 있어 자주 쓰지 않습니다.
document.write("웹 페이지 화면에 직접 글자를 씁니다.");데이터를 받는 방법 (입력)
사용자로부터 직접 정보를 받아오는 가장 기초적인 브라우저 함수들입니다.
① prompt() - 텍스트 입력받기
사용자에게 질문을 하고 글자를 입력받을 수 있는 대화상자를 띄웁니다. 입력받은 값은 항상 **문자열(String)**로 저장된다는 점을 주의해야 합니다.
let name = prompt("이름을 입력해 주세요.", "홍길동");
console.log("당신의 이름은 " + name + "이군요!");② confirm() - 찬성/반대 물어보기
"예/아니오"를 선택할 수 있는 창을 띄웁니다. 확인을 누르면 true, 취소를 누르면 false를 반환하여 조건문과 함께 자주 쓰입니다.
let isDelete = confirm("정말로 삭제하시겠습니까?");
if (isDelete) {
console.log("삭제되었습니다.");
} else {
console.log("취소되었습니다.");
}입출력 활용 시 주의사항
- 자료형 변환: prompt()로 받은 숫자는 문자로 인식되므로, 계산을 하려면 Number() 함수 등을 사용해 숫자로 바꿔줘야 합니다.
- 사용자 경험(UX): alert나 prompt는 브라우저를 멈추게 하므로 너무 자주 사용하면 사용자가 불편함을 느낄 수 있습니다.
- 현대적인 방식: 실제 웹 앱에서는 이런 기본 함수들 대신 HTML의 <input> 태그와 DOM 조작을 통해 더 세련되게 입출력을 처리합니다.
학습 정리
- 출력은 주로 개발 시엔 console.log, 사용자 알림엔 alert를 사용한다.
- 입력은 prompt로 문자열을, confirm으로 참/거짓 값을 얻을 수 있다.
- 브라우저 기본 대화상자는 실행을 일시 정지시킨다는 특징이 있다.
- console.log()
console.log()란 무엇인가?
console.log()는 웹 브라우저의 '디버깅 콘솔'에 메시지를 출력하는 역할을 합니다.
일반 사용자는 볼 수 없지만, 개발자는 이 도구를 통해 코드 뒷단에서 어떤 일이 벌어지고 있는지 실시간으로 감시할 수 있습니다.
비유하자면, 요리사가 요리 중간에 간이 맞는지 직접 먹어보는 '기록용 수첩'과 같습니다.
사용법과 예제
사용법은 매우 간단합니다. 괄호 ( ) 안에 출력하고 싶은 내용물(값, 변수, 식 등)을 넣기만 하면 됩니다.
- 단순 텍스트 출력: 문자열은 큰따옴표(")나 작은따옴표(')로 감쌉니다.
- 변수 값 확인: 변수 이름을 넣으면 그 안에 저장된 값을 보여줍니다.
- 여러 값 동시에 출력: 쉼표(,)를 사용하여 여러 데이터를 한 번에 확인할 수 있습니다.
// 1. 기본 메시지 출력
console.log("프로그램이 시작되었습니다.");
// 2. 변수와 함께 출력
let score = 95;
console.log("현재 점수:", score); // "현재 점수: 95"
// 3. 연산 결과 출력
console.log(10 + 20 + 30); // 60
// 4. 불리언(참/거짓) 출력
console.log(10 > 5); // true왜 alert() 대신 console.log()를 쓸까요?
입문자들은 눈에 잘 띄는 alert()를 선호하기도 하지만, 실제 개발에서는 console.log()를 압도적으로 많이 사용합니다.
- 흐름의 방해: alert()는 확인 버튼을 누르기 전까지 모든 동작을 멈추지만, console.log()는 멈춤 없이 계속 실행됩니다.
- 가독성: 콘솔창에서는 객체({})나 배열([])의 복잡한 구조를 펼쳐서 상세히 볼 수 있습니다.
- 성능: 수백 번의 출력을 확인해야 할 때 alert()를 쓰면 수백 번 클릭해야 하지만, 콘솔은 한 번에 쭉 나열해 줍니다.
꿀팁: 콘솔을 확인하는 방법
브라우저(크롬, 엣지 등)에서 다음 방법으로 콘솔창을 열 수 있습니다.
- 키보드 상단의 F12 키를 누릅니다.
- 'Console(콘솔)' 탭을 클릭합니다.
- 내가 작성한 console.log()의 결과가 찍혀 있는 것을 확인합니다.
학습 정리
- console.log()는 개발자가 코드의 실행 과정을 추적하기 위해 사용하는 출력 함수이다.
- 쉼표(,)를 사용하여 문자열과 변수를 섞어서 출력하면 훨씬 알아보기 쉽다.
- 에러를 찾거나 변수의 현재 상태를 알고 싶을 때 가장 먼저 사용해야 하는 기술이다.
- JS coding rule and style guide
이름 짓기 규칙 (Naming Conventions)
변수나 함수의 이름을 어떻게 짓느냐에 따라 코드의 가독성이 결정됩니다.
- 카멜 케이스(camelCase): 자바스크립트에서 가장 권장되는 방식입니다. 첫 단어는 소문자로, 이어지는 단어의 첫 글자는 대문자로 씁니다. (예: userName, totalScore)
- 의미 있는 이름: a, b, temp 같은 무의미한 이름보다는 userAge, isLoggedIn처럼 역할이 분명한 이름을 사용하세요.
- 상수는 대문자와 스네이크 케이스: 절대 변하지 않는 상수는 대문자와 언더바(_)를 사용합니다. (예: MAX_LIMIT, API_KEY)
코드 구조 스타일 (Code Structure)
시각적으로 깔끔한 코드는 논리적인 오류를 찾는 데도 도움을 줍니다.
- 들여쓰기 (Indentation): 보통 2칸 또는 4칸의 공백(Space)을 사용합니다. 최근에는 2칸을 더 선호하는 추세입니다. 탭(Tab)보다는 공백을 사용하는 것이 어느 환경에서나 동일하게 보입니다.
- 세미콜론 (Semicolon): 문장의 끝에 ;을 붙이는 것은 선택사항이지만, 예기치 못한 오류를 방지하기 위해 명시적으로 붙이는 것을 권장합니다.
- 중괄호 위치: 자바스크립트에서는 여는 중괄호({)를 조건문이나 함수 옆에 나란히 두는 방식을 선호합니다.
// 권장되는 스타일
if (isValid) {
console.log("통과!");
}선언과 할당의 스타일 (Modern Style)
ES6 이후의 스타일 가이드는 안전한 코딩을 강조합니다.
- var 사용 지양: 이제 var는 거의 쓰지 않습니다. 재할당이 필요하면 let, 필요 없으면 const를 기본으로 사용하세요.
- 따옴표 통일: 작은따옴표(')나 큰따옴표(") 중 하나를 정해 일관되게 사용하세요. 최근에는 작은따옴표를 더 선호하거나, 변수 삽입이 쉬운 백틱(`)을 주로 씁니다.
유명한 스타일 가이드들
전 세계 개발자들이 공통으로 따르는 표준 가이드라인이 있습니다.
- Airbnb JavaScript Style Guide: 가장 널리 쓰이는 가이드로, 매우 엄격하고 논리적입니다.
- Google JavaScript Style Guide: 구글에서 사용하는 규칙으로 효율성을 중시합니다.
- StandardJS: 세미콜론을 쓰지 않는 등 아주 간결한 스타일을 지향합니다.
자동 도구 활용 (Linting & Formatting)
인간은 실수를 하기 마련이므로, 도구의 도움을 받는 것이 현명합니다.
- ESLint: 문법적인 오류나 스타일 가이드 위반을 실시간으로 찾아내어 경고를 줍니다.
- Prettier: 코드를 저장하는 순간 미리 정해진 규칙에 따라 줄 바꿈, 들여쓰기 등을 자동으로 정돈해 줍니다.
학습 정리
- 코딩 규칙은 팀원 간의 약속이며, 코드의 유지보수성을 결정한다.
- 변수명은 카멜 케이스로, 상수는 대문자로 짓는 것이 관례이다.
- ESLint나 Prettier 같은 도구를 설정하면 규칙을 일일이 외우지 않아도 깔끔한 코드를 유지할 수 있다.
- ECMAScript
ECMAScript란 무엇인가?
자바스크립트는 처음 만들어질 당시 브라우저마다 동작 방식이 조금씩 달라 개발자들이 큰 혼란을 겪었습니다.
이를 해결하기 위해 ECMA International이라는 국제 표준화 기구에서 "자바스크립트는 이렇게 만들어야 한다"라고 정한 표준 규격이 바로 ECMAScript(줄여서 ES)입니다.
자바스크립트가 요리라면, ECMAScript는 그 요리의 공식 레시피라고 비유할 수 있습니다.
왜 하필 ES6인가?
ECMAScript는 매년 업데이트되지만, 2015년에 발표된 ES6(공식 명칭 ES2015)는 자바스크립트를 완전히 다른 언어처럼 느껴지게 할 만큼 강력한 기능들을 대거 도입했습니다.
오늘날 우리가 쓰는 세련된 자바스크립트 문법의 대부분이 바로 이 ES6에서 탄생했기 때문에, 현대 개발자에게는 필수 지식입니다.
ES6에서 바뀐 핵심 문법들
ES6 이전과 이후의 자바스크립트는 '가독성'과 '편의성' 면에서 엄청난 차이가 납니다.
- let, const의 등장: 기존의 var가 가진 문제점(호이스팅, 중복 선언 등)을 해결하기 위해 새로운 변수 선언 방식이 도입되었습니다.
- 화살표 함수 (Arrow Functions): function 키워드 없이 => 기호를 사용하여 함수를 아주 짧게 쓸 수 있게 되었습니다.
- 템플릿 리터럴: 백틱(`)을 사용하여 문자열 안에 변수를 아주 쉽게 삽입할 수 있게 되었습니다.
- 클래스 (Classes): 객체 지향 프로그래밍을 더 직관적으로 할 수 있는 문법이 추가되었습니다.
- 구조 분해 할당: 배열이나 객체의 값을 한 번에 여러 변수에 쏙쏙 뽑아 담는 기능이 생겼습니다.
왜 지금도 ES6를 강조하나요?
현재 자바스크립트는 ES2024 등 더 높은 버전이 나와 있지만, ES6는 '현대 자바스크립트의 근간'이 되는 버전이기 때문입니다.
대부분의 프레임워크(React, Vue 등)와 라이브러리가 ES6 이상의 문법을 기본으로 사용하므로, 이를 모르면 최신 코드를 읽는 것조차 어려울 수 있습니다.
학습 정리
- ECMAScript는 자바스크립트의 표준 규격이다.
- ES6(2015)는 자바스크립트 역사상 가장 큰 변화가 있었던 버전이다.
- 현대 웹 개발은 사실상 ES6 이상의 문법을 표준으로 사용한다.
- HTML코드 라인 중 JS 를 배치하기 가장 좋은 자리
자바스크립트는 HTML 구조에서 다음과 같이 </body> 태그 바로 위에 삽입하는 것을 추천 합니다.
<html>
<head>
(... 생략 ...)
</head>
<body>
(... 생략 ...)
<!-- 이곳에 추가 -->
</body>
</html>
왜냐하면 화면 출력이 완료된 후에 자바스크립트가 실행되는 것이 좋기 때문입니다.
화면 출력이 완료되지 않은 상태에서 자바스크립트를 실행하면 오류가 발생할 수도 있고 화면 로딩이 지연될 수도 있습니다.
그러므로 자바스크립트는 HTML 구조에서 위와 같이 </body> 태그 바로 위에 삽입하는 것을 추천 합니다.