JavaScript 기초
기술노트
JavaScript 기초
JavaScript는 웹 페이지를 더욱 역동적이고 사용자 친화적으로 만들어주는 프로그래밍 언어입니다. 웹 브라우저에서 동작하며 최근에는 Node.js를 통해 서버에서도 사용됩니다.
JavaScript 개요
JavaScript의 역할
JavaScript는 다음과 같은 중요한 역할을 합니다:
- 동적인 기능 추가: 버튼 클릭, 폼 전송 등 사용자와의 상호작용
- 비동기 통신: 페이지 새로고침 없이 서버와 데이터를 주고받음
- 웹 애플리케이션 개발: Gmail, Facebook처럼 복잡한 기능 구현 가능
JavaScript 작성 및 실행 방법
JavaScript를 HTML과 연결하는 방법입니다:
- 인라인 스크립트: HTML 요소 안에 직접 작성
- 내부 스크립트: HTML 문서 안에서 <script> 태그로 작성
- 외부 스크립트: 별도의 파일로 작성하여 연결 (권장 방식)
변수와 데이터 타입
변수 선언
변수는 데이터를 저장하는 공간입니다:
- var: 예전 방식, 권장하지 않음
- let: 변경 가능한 데이터를 저장할 때 사용
- const: 변경되지 않는 데이터를 저장할 때 사용
기본 데이터 타입
- String(문자열): 텍스트 데이터 저장
- Number(숫자): 정수와 소수 저장
- Boolean(불리언): 참(true) 또는 거짓(false)
- Undefined: 값이 정의되지 않음
- Null: 의도적으로 비워둠
참조 데이터 타입
- Object(객체): 다양한 데이터를 키와 값으로 저장
- Array(배열): 여러 데이터를 순서대로 저장
- Function(함수): 특정 작업을 수행하는 코드 묶음
연산자
연산자는 데이터를 계산하거나 비교할 때 사용합니다:
- 산술 연산자: 더하기(+), 빼기(-), 곱하기(*), 나누기(/)
- 비교 연산자: 값이 같은지(==, ===), 큰지 작은지(>, <)
- 논리 연산자: 둘 다 참(&&), 하나만 참(||), 참과 거짓을 바꿈(!)
조건문과 반복문
프로그램의 흐름을 결정할 때 사용합니다:
- if 문: 조건에 따라 코드 실행 여부 결정
- switch 문: 여러 조건 중 하나 선택할 때 사용
- for 문: 반복 작업을 할 때 사용
- while 문: 조건이 참일 때 계속 반복
함수
함수는 특정 작업을 반복해서 사용할 때 유용합니다:
- 선언식: 미리 정의된 함수
- 표현식: 변수에 할당된 함수
- 화살표 함수: 간결하게 함수 표현 (ES6 방식)
객체와 배열
객체
객체는 관련 데이터를 묶어서 관리하는 데 사용합니다:
```javascript let person = { name: "홍길동", age: 30 }; ```
배열
배열은 여러 개의 데이터를 순서대로 저장합니다:
```javascript let fruits = ["사과", "바나나", "오렌지"]; ```
DOM 조작
DOM은 HTML 문서 구조를 의미하며, JavaScript로 요소를 선택하고 수정할 수 있습니다:
- 요소 선택: getElementById(), querySelector()
- 요소 수정: textContent, innerHTML
- 이벤트 처리: click, mouseover, submit 등 사용자 상호작용 처리
비동기 JavaScript
페이지를 새로고침하지 않고 서버와 데이터를 주고받는 방법입니다:
- 콜백 함수: 비동기 작업이 끝난 후 호출되는 함수
- Promise: 콜백을 개선하여 비동기 작업을 관리
- async/await: 비동기 작업을 더 쉽게 표현
모듈화
코드를 작은 단위로 나누어 관리하기 편하게 만듭니다:
```javascript // math.js export function add(a, b) { return a + b; }
// app.js import { add } from './math.js'; console.log(add(2, 3)); ```
모범 사례와 디버깅
코드를 더 깔끔하게 작성하고, 문제를 찾기 쉽게 합니다:
- 모범 사례: 의미 있는 변수 이름, 주석 사용, 중복 코드 피하기
- 디버깅: console.log(), 브라우저 개발자 도구 활용
추가 학습 자료
더 깊이 있는 학습을 위한 자료입니다:
