JavaScript
자바스크립트란?
- 객체 기반의 스크립트 프로그래밍 언어
- 웹 브라우저 내에서 주로 사용
- 다른 응용 프로그램의 내장 객체에도 접근 가능
- Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용
(출처) 위키백과
◉ JavaScript 특징
스크립트 언어
- 클라이언트 측에서 실행되는 스크립트 언어로, 웹 브라우저에서 실행
동적인 웹 페이지 구현
- HTML과 CSS와 함께 웹 페이지의 동적인 기능을 구현
- HTML 요소들을 동적으로 조작하거나 생성
이벤트 처리
- 웹 페이지의 이벤트(버튼 클릭, 마우스 이동 등)를 처리
- 이벤트에 반응하여 원하는 동작 수행 가능
싱글 스레드
- 자바스크립트 엔진이 한 번에 하나의 작업만 처리 가능
- 코드는 순차적으로 실행
- 한 작업이 완료되기 전에 다음 작업이 시작되지 않음
이벤트 블로킹
- 자바스크립트는 이벤트 기반으로 동작
- 이벤트가 발생하면 해당 이벤트를 처리하기 위한 콜백 함수가 실행
- 이벤트 처리 중에는 다른 작업을 수행할 수 없기 때문에, 오랜 시간이 걸리는 작업을 수행하면 이벤트 처리가 지연되거나 멈출 수 있음 = 이벤트 블로킹
오래 걸리는 작업 처리
- 오래 걸리는 작업을 자바스크립트에서 처리할 때, 일반적으로 비동기적인 처리 방식을 사용
→ 이를 위해 자바스크립트는 스택(Stack)과 큐(Queue)를 사용 - 스택(Stack)
- 함수 호출과 관련된 작업을 저장하는 자료구조
- 나중에 들어간 작업이 먼저 실행되는 "First In Last Out" 방식
- 오래 걸리는 작업을 스택에 추가하면, 해당 작업은 백그라운드에서 실행될 수 있음
- 큐(Queue)
- 비동기 작업의 완료 후 실행할 작업을 저장하는 자료구조
- 먼저 들어간 작업이 먼저 실행되는 "First In First Out" 방식
- 스택의 작업이 모두 실행된 후, 큐에서 순서에 따라 작업이 꺼내져 실행
→ 오래 걸리는 작업을 블로킹하지 않고, 비동기적으로 처리
의존적인 언어
- 자바스크립트는 HTML에 의존하는 언어
- 별도의 설치 없이 웹 브라우저에서 자바스크립트를 실행 가능
◉ JavaScript 작성 위치
외부 방식 (External)
: 자바스크립트 코드를 별도의 외부 파일로 작성하고, HTML 문서에서 해당 파일을 연결하여 사용하는 방식- <script> 태그의 src 속성을 사용하여 외부 파일을 로드
- 보통 <head> 태그 안에 <script> 태그 작성
- 자바스크립트 파일은 HTML 문서의 로딩 시점에 함께 불러와서 실행
- 여러 개의 자바스크립트 파일을 참조하거나 외부 라이브러리를 사용할 때 유용
- 코드의 재사용성과 유지보수성을 높일 수 있음
<script src="파일경로/파일이름.js"></script>외부 방식의 <script>태그의 async속성과 defer속성
두 가지 속성은 자바스크립트 파일의 로드와 실행을 제어하는 데 사용
- async 속성
- 자바스크립트 파일이 비동기적으로 로드, 로드가 완료되면 즉시 실행
- HTML파싱과 병렬로 자바스크립트 파일 다운로드, 파일 로드 끝나는 순서와 상관없이 실행
- 다른 자원과의 의존성이 없는 독립적인 스크립트에 적합
- 실행 순서가 중요하지 않거나, 자바스크립트 파일이 다른 자원에 의존하지 않는 경우 사용
- defer 속성
- 자바스크립트 파일이 비동기적으로 로드, HTML 파싱이 완료된 후 실행
- HTML파싱과 병렬로 자바스크립트 파일 다운로드, 파일 로드가 완료되더라도 실행은 HTML파싱 완료 후 순차적 실행
- 다른 자원에 의존하는 스크립트의 경우 사용
- 자바스크립트 파일의 실행이 HTML문서의 구조나 스타일 등에 영향을 줄 수 있는, 실행 순서가 중요한 경우 사용
<script src="script.js" async></script> <script src="script.js" defer></script>
속성을 명시하지 않을 때의 기본 동작 방식
- 자바스크립트 파일이 동기적으로 로드, 로드가 완료되면 즉시 실행
- HTML파싱과 자바스크립트 파일의 로드 및 실행이 차례대로 진행
- 즉, 자바스크립트 파일의 로드와 실행이 완료될 때까지 HTML파싱 중단
- 자바스크립트 파일의 로드와 실행이 HTML 문서의 파싱을 차단하므로, 파일 크기가 크거나 다운로드 속도가 느린 경우 웹 페이지의 로딩 시간이 지연될 수 있음
내부 방식 (Internal)
: 자바스크립트 코드를 <script> 태그 내부에 작성하는 방식- <script> 태그의 시작 태그와 끝 태그 사이에 작성된 코드는 자바스크립트로 해석
- HTML 문서의 <head> 태그 내부나 <body> 태그 내부 어디에든 작성
- 외부 방식보다 웹 페이지의 로딩 속도를 높일 수 있음
- 특히 자바스크립트 코드가 웹 페이지의 구조와 상호작용하는 경우에 유용한 방법
<script>
// 자바스크립트 코드 작성
console.log("Hello, World!");
</script>내부 방식의 작성 위치에 따른 차이
1. 태그 내부에 작성 : 자바스크립트 코드가 HTML 문서가 렌더링되기 전에 실행
( 태그는 일반적으로 외부 파일을 로드하거나, 문서의 초기화 작업 등 수행하는 데 사용)
2. 태그 내부에 작성 : 자바스크립트 코드가 HTML 문서의 내용이 렌더링되는 동안 실행
( 태그는 문서의 동적인 동작을 구현하는 데 사용)
⇒ 코드의 실행 시점과 문서 구조에 따라 적절한 위치를 선택하여 사용
인라인 방식 (Inline)
: HTML 요소의 이벤트 속성에 자바스크립트 코드를 작성하는 방식- 이벤트 속성은 특정 이벤트가 발생했을 때 실행되는 코드를 정의하는 데 사용
- 간단한 이벤트 처리에 활용
- 예를 들어, <button> 요소의 onclick 속성에 JavaScript 코드를 작성하여 해당 버튼이 클릭되었을 때 실행되는 동작을 지정 가능
- 간단하고 빠르게 JavaScript 코드를 적용
- 코드의 양이 많아질 경우 가독성과 유지보수 어려움
<button onclick="console.log('Button clicked!')">Click me</button>◉ Vanilla JS 다운로드하기
- vanilla-js라는 이름의 JavaScript 라이브러리를 제공하는 웹 사이트
- vanilla-js 라이브러리는 JavaScript의 다양한 기능을 간편하게 사용할 수 있도록 도와주는 도구로 개발됨
- vanilla-js 라이브러리는 순수한 자바스크립트를 기반으로 하며, 외부 라이브러리나 프레임워크에 의존하지 않고 독립적으로 사용할 수 있도록 설계됨
- 다운로드한 후 HTML 문서의 아무 곳에나
<script src="경로/vanilla.js"></script>를 작성하여 사용
개발, 분석 배운 내용 정리하기!