추가 적립 안내

자바스크립트 웹 개발을 위한 궁극의 레시피집!

자바스크립트로는 세세한 기능과 데이터 연동을 통해 다양한 동적 웹 페이지를 만들 수 있다. 이 책은 실무에서 자주 쓰는 코드를 선별하여 싣고, 기능별 분류 카테고리를 만들어 필요한 부분만을 참고하여 활용할 수 있도록 구성하였다. 해설의 샘플 코드를 이용하여 동작을 확인하거나 응용과 변경을 통해 실제로 필요한 기능만을 구현할 수도 있다.

최신 에크마스크립트가 표준이므로 빠른 프론트엔드 기술의 변화 속에서도 자바스크립트는 쉽게 사라지지 않는 장점을 지녔다. 그러므로 이를 학습하는 개발자의 입장에서도 오래도록 사용 가능한 기술을 배우는 기회가 될 것이다. 배운 이론과 기술을 최대한 오래 사용할 수 있도록 ‘ES2015’ 이후 새로 개정된 문법을 반영하여 최신 코드로 구성하였다.

자바스크립트 프레임워크인 리액트(React), 뷰(Vue.js), 앵귤러(Angular)를 제대로 활용하기 위해서도 새 규격과 코드 기술 방식의 이해는 필수이며, 이 책은 해당 지식의 기초를 쌓는 데 도움이 될 것이다.

이 책을 통해 얻을 수 있는 것들
? 자바스크립트의 최신 코드와 동향을 파악할 수 있다.
? 지속적으로 활용 가능한 자바스크립트의 기술을 배울 수 있다.
? 에크마스크립트(ECMAScript)의 최신 기술 규격을 파악할 수 있다.
? 목적별로 레시피를 정리하여 사용법을 빠르게 실무에 적용할 수 있다.

CHAPTER 1 자바스크립트 기초 001
001 자바스크립트의 기초 002
002 자바스크립트의 구현(사용) 방식 003
003 다른 파일에서 자바스크립트 불러오기 005
004 값을 로그로 출력하기 007
005 계산 프로그램 만들기 013
006 변수 선언하기 let 014
007 상수 사용하기 const 017
008 주석(코멘트) 추가하기 021
009 두 개의 값 비교하기(비교 연산자) 022
010 복합형(축약형) 대입 연산자 사용하기 024
011 함수 사용하기 function 025
012 화살표 함수 사용하기 028
013 함수의 파라미터 초깃값 설정하기 030
014 다수의 파라미터를 가지는 함수 정의하기 031
015 조건문 사용하기 if 033
016 조건문 사용하기 switch 036
017 반복문 사용하기 for 040
018 반복문 사용하기 while 042
019 반복 처리 스킵 043

CHAPTER 2 판별, 수, 문자 045
020 진위 여부 판별하기 046
021 숫자 다루기 048
022 어림 계산하기(반올림, 올림, 버림) 050
023 임의의 수 다루기 052
024 수학 계산 함수 사용하기 055
025 삼각 함수 사용하기 057
026 문자열 다루기 060
027 문자열의 길이 확인하기 061
028 문자열의 공백 처리하기 trim 063
029 문자열 검색하기(인덱스 검색) 064
030 문자열 검색하기(부분 검색) 067
031 문자열에서 문자 다루기(문자열에서 문자 추출하기) 069
032 문자열 다루기(위치 지정하여 선택하기) 072
033 문자열 다루기(글자 수 지정하여 선택하기) 074
034 지정 문자열 변환하기 075
035 문자열 나누기 078
036 문자열 합치기 081
037 문자열의 대소문자 변환하기 083
038 문자열과 식 함께 다루기 085
039 정규 표현식 사용하기 087
040 정규 표현식으로 특정 문자 검색하기 089
041 소수점 자릿수 지정하기 091
042 문자열 길이 맞추기 094
043 문자열 URI 이스케이프 처리하기 097
044 문자열 URI 디코드하기 100

CHAPTER 3 데이터 다루기 101
045 배열 정의하기 102
046 배열 길이 확인하기 104
047 배열 요소 다루기 ① 105
048 배열 요소 다루기 ② 108
049 배열 요소 다루기 ③ 109
050 배열 요소 추가하기 110
051 배열 요소 삭제하기 111
052 배열 요소 부분 변환하기 112
053 배열 결합하기 113
054 배열 요소 결합하여 문자열 만들기 114
055 배열 요소 검색하기 115
056 조건을 만족하는 배열 요소 가져오기 116
057 배열 요소 역순 정렬하기 120
058 배열 요소 정렬 방법 지정하기 121
059 객체를 포함하는 배열 정렬하기 123
060 배열 요소 알파벳순 정렬하기 127
061 배열 요소 추출하여 새 배열 만들기 128
062 조건을 만족하는 배열 요소 추출하여 새 배열 만들기 130
063 배열 요소 하나로 정리하기 134
064 유사 배열 객체를 배열로 변환하기 136
065 요소의 개별 변수에 분할 대입하기 139
066 배열 섞기(셔플) 140
067 다양한 데이터 타입을 가진 객체 사용하기 142
068 객체 선언, 수정, 확인하기 144
069 객체 복사하기 146
070 객체 속성 확인하기 149
071 객체 요소 값 확인하기 151
072 객체 요소 분할 대입(비구조화 할당)하기 152
073 객체 수정 제한하기 154

CHAPTER 4 데이터 심화 157
074 데이터 타입 이해하기 158
075 가변성과 불가변성 이해하기 160
076 데이터 타입 확인하기 161
077 객체 인스턴스 확인하기 163
078 값 전달과 참조 전달 이해하기 165
079 데이터 타입 변환하기 168
080 정의되지 않은 데이터 이해하기 170
081 빈 데이터 이해하기 171

CHAPTER 5 날짜와 시간 173
082 날짜 다루기(연도) 174
083 날짜 다루기(월, 일) 175
084 시간 다루기 177
085 요일 다루기 179
086 현재 시간과 날짜 가져오기 181
087 날짜 문자열의 타임스탬프 확인하기 183
088 날짜 설정하기 184
089 날짜 계산하기 186
090 날짜 차이 구하기 187
091 경과 시간 확인하기 188
092 카운트다운 190
093 아날로그 시간 표시하기 192

CHAPTER 6 브라우저 197
094 경고 표시하기 198
095 확인창 표시하기 200
096 입력 프롬프트 표시하기 202
097 윈도우 사이즈 확인하기 203
098 디바이스 화소 확인하기 205
099 캔버스에 디바이스 화소 맞추기 206
100 터치 디바이스 사용 확인하기 208
101 페이지 이동하기 209
102 페이지 리로드하기 210
103 페이지 이동하기(앞/뒤로 가기) 211
104 해시(#) 처리하기 212
105 해시 변경 확인하기 213
106 새 윈도우 창 열기 215
107 스크롤 크기 확인하기 216
108 스크롤 설정하기 217
109 타이틀 변경하기 218
110 포커스 확인하기 220
111 전체 화면 표시하기 222
112 온라인/오프라인 대응하기 225

CHAPTER 7 이벤트 처리 227
113 이벤트 처리 이해하기 228
114 이벤트 추가하기 229
115 이벤트 리스너 1회 실행하기 231
116 이벤트 리스너 삭제하기 232
117 페이지 로드 시 이벤트 사용하기 233
118 클릭 이벤트 사용하기 236
119 마우스 조작 이벤트 사용하기 237
120 마우스 오버 이벤트 사용하기 239
121 마우스 오버 이벤트 사용하기(이벤트 버블링) 241
122 마우스 좌표 확인하기 243
123 스크롤 이벤트 처리하기 246
124 텍스트 선택 이벤트 처리하기 247
125 터치 이벤트 처리하기 250
126 터치 이벤트 정보 확인하기 252
127 키보드 입력 이벤트 처리하기 254
128 입력된 키 정보 확인하기 256
129 탭 화면 이벤트 처리하기 258
130 화면 사이즈 이벤트 처리하기 261
131 사이즈 벗어난 화면 처리하기 264
132 이벤트 작동 설정하기 268
133 기본 이벤트 작동 해지 설정하기 270
134 드래그 앤 드롭 기능 사용하기 273

CHAPTER 8 HTML 요소 279
135 자바스크립트 요소 다루기 280
136 셀렉터 사용하기 282
137 ID의 각 요소 값 읽어 오기 284
138 셀렉터 조건 만족하는 요소 읽어 오기 285
139 클래스명으로 요소 읽어 오기 287
140 〈html〉, 〈body〉 요소 읽어 오기 288
141 부모/자식/전/후 요소 읽어 오기 291
142 부모 요소에 자식 요소 추가하기 292
143 지정 위치에 요소 추가하기 294
144 요소 앞/뒤에 다른 요소 추가하기 296
145 HTML 코드 요소 추가하기 298
146 요소를 동적으로 삭제하기 300
147 요소 자신 삭제하기 302
148 요소 생성하기 304
149 요소 복사하기 307
150 요소 교체하기 309
151 노드 교체하기 311
152 텍스트 요소 다루기 313
153 요소 내부 HTML 다루기 315
154 자신을 포함한 HTML 요소 다루기 318
155 요소 속성 다루기 319
156 〈a〉 태그 _blank의 부모창 조작 제한하기 320
157 요소 클래스 속성 다루기 322
158 요소 클래스 유/무효화하기 324
159 스타일 변경하기 327
160 스타일 확인하기 329

CHAPTER 9 폼 331
161 텍스트 박스 값 읽어 오기 input text 332
162 텍스트 박스 값 변경 확인하기 input text 334
163 텍스트 영역 값 읽어 오기 336
164 텍스트 영역 값 변경 확인하기 338
165 체크박스 상태 읽어 오기 340
166 체크박스 상태 변경 확인하기 342
167 파일 정보 읽어 오기 344
168 텍스트 형식으로 파일 읽어 오기 346
169 데이터 형식으로 파일 읽어 오기 348
170 라디오 버튼 상태 읽어 오기 350
171 라디오 버튼 상태 변경 확인하기 352
172 드롭다운 메뉴 값 읽어 오기 354
173 드롭다운 메뉴 값 변경 확인하기 356
174 슬라이더 값 읽어 오기 358
175 슬라이더 값 변경 확인하기 360
176 색상 선택 정보 읽어 오기 362
177 색상 선택 정보 변경 확인하기 364
178 풀다운 메뉴 사용하기 366
179 폼 전송하기 369

CHAPTER 10 애니메이션 효과 371
180 CSS TransitionsㆍCSS Animations 사용하기 372
181 CSS Transitions 종료 시 작업 처리하기 374
182 CSS Animations 종료 시 작업 처리하기 376
183 Web Animations API 사용하기 378
184 요소 크기 변경하기 380
185 요소 이동하기 382
186 요소 투명도 조절하기 384
187 요소 밝기 조절하기 386
188 요소 채도 조절하기 388
189 requestAnimationFrame 사용하기 390
190 requestAnimationFrame 사용하기 HTML 392

CHAPTER 11 그림/사운드/영상 395
191 스크립트로 이미지 로딩하기 396
192 이미지 로딩 후 작업하기 397
193 이미지 로딩 지연시키기 399
194 Base64 형식 이미지 표시하기 401
195 스크립트로 이미지 요소 추가하기 402
196 사운드 사용하기 404
197 스크립트로 사운드 제어하기 406
198 사운드 재생 조절하기 407
199 사운드 볼륨 조절하기 408
200 Web Audio API 사용하기 409
201 영상 로딩하기 411
202 스크립트로 영상 제어하기 413
203 카메라 기능 사용하기 415

CHAPTER 12 SVG/캔버스 417
204 SVG 사용하기 418
205 SVG 요소를 동적으로 추가하기 421
206 SVG 요소 스타일 변경하기 423
207 SVG 요소 마우스로 다루기 424
208 SVG 요소 애니메이션 효과 주기 425
209 SVG 그래픽 다운로드하기 427
210 캔버스 사용하기 429
211 캔버스 요소 색칠하기/선 그리기 431
212 캔버스에 이미지 붙여넣기 433
213 캔버스 화소 정보 다루기 435
214 이미지의 RGBA 값 확인하기 437
215 캔버스의 이미지 가공하기 439
216 DataURL로 캔버스에 이미지 표시하기 441
217 PNG/JPEG DataURL로 불러오기 443
218 캔버스 그래픽 다운로드하기 445

CHAPTER 13 타이밍 제어 447
219 지정 시간 후 작업 실행하기 448
220 지정 시간 후 작업 실행 해제하기 450
221 시간 주기 작업하기 451
222 시간 주기 작업 해제하기 453
223 비동기화 Promise 사용하기 455
224 Promise 성공/실패 처리하기 457
225 Promise 병렬 처리하기 459
226 Promise 직렬 처리하기 461
227 Promise 동적 직렬 처리하기 463

CHAPTER 14 데이터 송수신 465
228 JSON 알아보기 466
229 JSON 문자열 객체로 변환하기 468
230 객체를 JSON 변환하기 469
231 JSON 변환에 들여쓰기 적용하기 470
232 JSON 변환 기능 커스터마이징 471
233 fetch( )로 텍스트 데이터 읽어 오기 472
234 fetch( )로 JSON 데이터 읽어 오기 474
235 fetch( )로 XML 데이터 읽어 오기 476
236 fetch( )로 바이너리 데이터 읽어 오기 478
237 fetch( )로 데이터 보내기 480
238 XMLHttpRequest로 데이터 읽어 오기 484
239 XMLHttpRequest로 작업 상황 확인하기 486
240 XMLHttpRequest로 작업 취소하기 489
241 백그라운드에서 스크립트 작업하기 491
242 백그라운드에서 작업 실행하기 494
243 푸시 알림 497

CHAPTER 15 로컬 데이터 501
244 localStorage 사용하기 502
245 Storage API 데이터 삭제하기 505
246 쿠키로 로컬 데이터 사용하기 507
247 쿠키 데이터 읽어 오기 509

CHAPTER 16 스마트폰 센서 511
248 위치 정보 읽어 오기 512
249 자이로 센서와 가속도 센서 사용하기 515
250 진동 모터 사용하기 519

CHAPTER 17 디버그 521
251 정보/에러/경고 출력하기 522
252 객체 구조 출력하기 523
253 에러 파악하기 525
254 에러 객체 생성하기 526
255 에러 발생시키기 527
256 에러 발생 확인하기 529
257 에러 발생 시 실행 코드 설정하기 531
258 에러 종류 파악하기 533

CHAPTER 18 함수와 클래스 535
259 함수 내부 변수와 상수의 범위 알기 536
260 클래스 정의하기 539
261 클래스 사용하기(인스턴스화) 541
262 클래스에서 변수 사용하기 542
263 클래스에서 메소드 사용하기 546
264 인스턴스 생성없이 정적 메소드 사용하기 548
265 클래스 계승하기 549
266 클래스 데이터의 setter/getter 사용하기 550
267 this 기능 사용하기(화살표 함수) 552

CHAPTER 19 자바스크립트 심화 555
268 자바스크립트 읽기 타이밍 최적화하기 556
269 처리 파일 분할하기(ES 모듈) 558
270 모듈 내보내기 export 560
271 모듈 가져오기 import 561
272 모듈형 자바스크립트 HTML에서 읽어 오기 563
273 반복 처리를 위한 반복자 사용하기 564
274 iterator 정의하여 사용하기 566
275 유일한 데이터 사용하기(심볼) 570
276 배열과 객체에 독자적인 메소드 추가하기 572
277 맵과 키 사용하기 576
278 데이터 중복 없는 Set 사용하기 580

화살표 함수는 일반 함수와 달리 일부를 생략할 수 있다. 파라미터가 하나인 경우는 ( )의 생략이 가능하나, 파라미터가 없거나 2개 이상인 경우는 생략할 수 없다. 입력 a에 대해 a + 2의 결과를 반환하는 함수를 확인해 보자. _028p

sort( )에서 비교 함수를 생략하면 문자열의 유니코드 순서대로 정렬된다. 비교 함수를 생략하게 되면 [1, 5, 10]이나 ['一', '二', '三']처럼 기대하는 정렬 결과를 얻을 수 없다. 그러므로 특별한 이유가 없다면 sort( )에 비교 함수를 명시해야 한다. _126p

고해상도 디바이스란 아이폰의 레티나(Retina) 디스플레이와 같이 화소 밀도(ppi)가 높은 디스플레이(HiDPI 디스플레이)를 말한다. 고해상도에 맞춰 처리 작업을 하지 않으면 해당 기기에서 사진 등이 뿌옇게 보이거나 화소가 깨져 보이는 현상이 발생할 수 있다. 디스플레이 해상도의 물리 화소 확인은 window 객체 devicePixelRatio 속성을 사용한다. _205p

input 요소의 type 속성에 email과 tel 지정이 가능하다. text와 같은 입력 폼이지만 스마트폰에서 폼 형식에 맞는 키보드가 표시된다. tel은 번호 입력용 키보드가 표시되며, email은 영문 키보드가 표시된다. _333p

비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다. fetch( )를 시작으로 브라우저의 표준 기능에도 Promise 사용이 증가하고 있으며, await나 async와 같은 기능도 기본적으로 알아 두면 좋다. _455p

클래스 내부의 함수를 클래스 메소드 멤버 함수라고 한다. 클래스에 멤버 함수를 정의하기 위해서는 다음과 같이 기술한다. 클래스 멤버 함수에 function은 사용하지 않도록 주의하자. 정의할 수 있는 멤버 함수의 수는 제한이 없다. _546p