2025-01-24T02:27:50

2025-01-24 02:27:50 +09:00
parent 342a843ce6
commit f43f6328c0
47 changed files with 292 additions and 145 deletions
--- a/doc/00_javascript.md
+++ b/doc/00_javascript.md
@@ -0,0 +1,136 @@
+# 자바 스크립트
+
+## 자바스크립트의 역사와 발전
+자바스크립트는 1995년 넷스케이프 커뮤니케이션즈의 브렌던 아이크에 의해 개발된 스크립팅 언어입니다. 처음에는 LiveScript라는 이름으로 불렸지만, 당시 인기 있던 자바와의 유사성을 강조하기 위해 자바스크트라는 이름으로 바뀌었습니다.
+
+* 초기: 웹 페이지에 동적인 요소를 추가하기 위한 간단한 언어로 시작되었습니다.
+* 성장: ECMAScript 표준화를 통해 체계적인 발전을 이루었고, Node.js의 등장으로 서버 사이드 개발까지 영역을 확장했습니다.
+* 현재: 웹 개발의 필수 언어로 자리 잡았으며, 프론트엔드뿐만 아니라 백엔드, 모바일 앱 개발 등 다양한 분야에서 사용되고 있습니다.
+
+## 웹 브라우저에서의 역할
+자바스크립트는 웹 브라우저에서 실행되는 유일한 프로그래밍 언어입니다. HTML과 CSS로 구성된 정적인 웹 페이지에 동적인 기능을 부여하여 사용자와 상호 작용하는 풍부한 웹 애플리케이션을 개발할 수 있도록 합니다.
+
+* DOM 조작: HTML 문서의 구조를 변경하고 스타일을 조작하여 웹 페이지의 모습을 실시간으로 바꿀 수 있습니다.
+* 이벤트 처리: 사용자의 클릭, 마우스 이동 등 다양한 이벤트를 감지하고, 이에 대한 반응을 처리할 수 있습니다.
+* 비동기 처리: 서버와의 통신, 타임아웃 등 비동기적인 작업을 처리하여 웹 페이지의 응답성을 높일 수 있습니다.
+
+## HTML 문서에 스크립트 포함하는 방법
+HTML 문서에 자바스크립트 코드를 포함시키려면 `<script>` 태그를 사용합니다. 이 태그를 통해 웹 페이지에 동적인 기능을 부여하고 사용자와 상호 작용할 수 있는 풍부한 웹 애플리케이션을 개발할 수 있습니다.
+
+`<script>` 태그는 크게 세 가지 방식으로 사용할 수 있습니다.
+
+### 인라인 스크립트 (Inline Script)
+HTML 문서 내에 직접 자바스크립트 코드를 작성하는 방법입니다. 간단한 코드를 추가할 때 유용하지만, 코드가 길어지거나 복잡해질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다.
+```html
+<body>
+  <p>클릭하면 색깔이 바뀝니다.</p>
+  <button onclick="changeColor()">색깔 변경</button>
+
+  <script>
+    function changeColor() {
+      document.body.style.backgroundColor = 'skyblue';
+    }
+  </script>
+</body>
+```
+
+### 내부 스크립트 (Internal Script)
+`<head>` 또는 `<body>` 태그 내에 `<script>` 태그를 이용하여 자바스크립트 코드를 삽입하는 방법입니다. 인라인 스크립트보다는 코드를 관리하기 쉽지만, 여전히 HTML 문서와 자바스크립트 코드가 섞여 있어 가독성이 떨어질 수 있습니다.
+```html
+<head>
+  <script>
+    // 전역 변수나 함수를 선언하는 경우에 유용합니다.
+  </script>
+</head>
+
+<body>
+</body>
+```
+
+### 외부 스크립트 (External Script)
+자바스크립트 코드를 별도의 .js 파일로 만들어 src 속성을 이용하여 HTML 문서에 연결하는 방법입니다. 코드의 재사용성이 높고, HTML과 자바스크립트 코드를 분리하여 관리할 수 있어 가독성과 유지보수성이 뛰어납니다.
+```html
+<head>
+  <script src="script.js"></script>
+</head>
+```
+```javascript
+function changeColor() {
+  document.body.style.backgroundColor = 'skyblue';
+}
+```
+
+일반적으로 외부 스크립트 방식을 사용하는 것이 권장됩니다. 코드를 분리하여 관리하면 HTML과 자바스크립트 코드를 각각 집중해서 개발할 수 있으며, 코드의 재사용성을 높일 수 있습니다.
+
+### script 태그
+* `<script>` 태그는 `<head>` 또는 `<body>` 태그 내 어디든 위치할 수 있지만, 일반적으로 `<body>` 태그 바로 앞에 위치시키는 것이 좋습니다.
+* defer 속성을 사용하면 스크립트가 HTML 파싱이 완료된 후에 실행됩니다.
+* async 속성을 사용하면 스크립트가 다른 작업과 병렬로 실행됩니다.
+
+
+
+
+---
+
+자바스크립트 기본 문법
+
+2.3 제어문
+조건문 (if, else if, else)
+반복문 (for, while, do while)
+2.4 함수
+함수 선언과 호출
+매개변수와 반환값
+화살표 함수
+3. 객체지향 프로그래밍
+3.1 객체와 프로토타입
+객체 생성
+프로퍼티와 메소드
+프로토타입 체인
+3.2 생성자 함수와 클래스
+생성자 함수 작성
+클래스 문법
+상속
+3.3 this 키워드
+this의 의미와 활용
+함수 호출 방식에 따른 this의 값
+4. DOM 조작
+4.1 DOM 소개
+DOM 트리
+노드 종류
+4.2 DOM 선택
+getElementById
+querySelector
+querySelectorAll
+4.3 DOM 조작
+요소 추가, 삭제, 수정
+스타일 변경
+이벤트 처리
+5. 비동기 프로그래밍
+5.1 비동기의 필요성
+동기와 비동기의 차이
+5.2 콜백 함수
+콜백 함수의 개념
+콜백 지옥
+5.3 Promise
+Promise 생성과 처리
+then, catch, finally
+5.4 async/await
+비동기 코드 동기화
+await 키워드
+6. 고급 자바스크립트
+6.1 모듈
+모듈 시스템 (CommonJS, ES Modules)
+import, export
+6.2 클로저
+클로저의 개념과 활용
+6.3 고차 함수
+map, filter, reduce 등
+6.4 디자인 패턴
+자주 사용되는 디자인 패턴 소개
+7. 실전 예제
+7.1 웹 페이지 동적 구성
+AJAX를 이용한 데이터 가져오기
+웹 페이지 요소 동적으로 변경
+7.2 간단한 웹 애플리케이션 만들기
+To-Do List 만들기
+간단한 게임 만들기