Javascript
1.[Javascript] 자바스크립트
자바스크립트(Javascript)란, 넷스케이프에서 개발한 웹 전용 스크립트 언어입니다. 이름에 자바가 들어가긴 하지만, 자바와 연관성은 없고, C계열 언어입니다. 자바스크립트가 처음 나올 당시 가장 인기있는 언어였던 자바의 인기에 편승하고자 이름에 자바를 넣게된 것
2.[Javascript] 자바스크립트 에디터 - vscode
vscode는 텍스트 편집기입니다. 텍스트 편집기는 흔히 생각하는 IDE인 비주얼 스튜디오, 이클립스, 인텔리제이와는 다릅니다. IDE는 텍스트 편집부터 다양한 디버깅 툴 등을 지원하는 통합 개발 환경이고, 텍스트 편집기는 기본적으로 텍스트 편집 기능만 가진 에디터입니
3.[Javascript] Hello World!
자바스크립트 시리즈는 HTML을 어느정도 알고 있다는 가정 하에 작성되었습니다.다음은 웹 페이지를 구성하는 html 문서입니다. 처음 생성한 상태 그대로입니다.자바스크립트 코드는 <head>태그 사이 혹은 <body>태그 사이 어딘가에 <script>태
4.[Javascript] HTML 문서에 자바스크립트 삽입
지난 포스트에서는 첫 번째 자바스크립트 코드를 작성하는 방법을 배웠습니다. 이번에는 html 문서에 자바스크립트 코드를 삽입하는 방법들에 대해서 알아보겠습니다.지난 포스트에서도 다룬 방식입니다. html 문서 내부에 <script>코드를 삽입하고 태그 내용으로 자
5.[Javascript] <script>태그의 위치
지난 포스트에서 자바스크립트 파일의 삽입은 외부 임포트 방식을 사용하는 것이 좋다고 했습니다. 그러면 <script>태그 자체는 어디에 넣어야 가장 좋은 효율을 받을 수 있을까요?바쁘신 분들을 위해 결론부터 이야기하자면, </body>태그 직전입니다.<
6.[Javascript] 자바스크립트 코딩 컨벤션
코딩 컨벤션이란 내가 나의 코드를, 다른 사람이 나의 코드를 보고 원활하게 의사소통하고 해석하기 위한 규칙입니다. 코딩 컨벤션을 규정하는 이유느 사람마다 코딩 스타일이 제각각이기 때문입니다. 다음은 자바스크립트에서 if문을 사용하는 세 가지 방식입니다.이처럼 사람마다
7.[Javascript] 주석
한 문장 주석을 적는데 사용하는 방식입니다.한 문장 이상의 주석을 적는데 사용하는 방식입니다.
8.[Javascript] 변수 선언하기
변수란 데이터를 저장하기 위한 공간입니다. 스크립트 처리 과정에서 데이터를 일시적으로 담아두는 공간으로, 한 번에 하나의 값만 저장할 수 있습니다. 그래서 한 변수에 데이터가 이미 존재하는데, 다른 값을 넣으려고 시도하는 경우에 기존의 값은 삭제되고 새로온 데이터가 저
9.[Javascript] 자료형
자바스크립트의 자료형은 다른 언어에 비해서 자유롭습니다. 다른 언어가 자료형마다 엄격한 표현 범위를 가졌다면, 자바스크립트는 변수에 저장되는 값에 따라 가변적으로 변하게됩니다.자바스크립트의 자료형은 다음과 같습니다.기본형은 변수에 값을 저장할 때 값 자체가 변수에 저장
10.[Javascript] 산술 연산자
연산자란 변수나 리터럴(데이터에 보관되는 값이나 값의 표현 방식)에 미리 정의된 처리를 하기 위한 약속된 기호들입니다. 연산자에 따라 다른 처리를 합니다.산술 연산자는 다음과 같은 종류가 있습니다.일반적으로 현실에서 사칙연산을 수행할 때 이용하는 것과 동일한 일을 합니
11.[Javascript] 대입 연산자
대입 연산자는 보통 변수에 식이나 값을 저장시키는 연산자입니다. 대입 연산자는 우측의 값을 좌측으로 대입한다라는 특징이 있습니다.대입 연산자의 종류는 다음과 같습니다.각 대입 연산자를 사용해보면 다음과 같습니다.
12.[Javascript] 비교 연산자
비교 연산자는 좌항, 우항의 식 또는 값을 비교하여 true/false를 반환하는 연산자입니다. 비교 연산자의 종류는 다음과 같습니다.==과 ===, !=과 !==는 자바스크립트의 특징적인 문법입니다. 변수 선언에서 자바스크립트는 아주 자유롭기 때문에 위와 같은 연산자
13.[Javascript] 논리 연산자
논리 연산자는 두 개의 식을 논리적으로 연산하여 true, false 값을 반환합니다.단락 회로 평가는 논리 연산자의 독특한 연산 방식입니다. 논리 연산자는 좌측의 식부터 판별을 시작합니다. 따라서 &&에서 좌측식이 false가 나올 때와 같은 경우가 발생할 경우 우측
14.[Javascript] 비트 연산자
비트 연산자는 2진수로 이루어진 비트 값의 논리 연산에 사용되는 연산자입니다.
15.[Javascript] 기타 연산자들
이번에는 다른 범주에는 속하지 않지만 연산자인 것들에 대해서 알아보겠습니다.콤마 연산자는 식을 이어주는 역할을 합니다. 좀 더 풀어말하자면, 별개의 두 문장을 한 문장으로 이어지게 해줍니다.typeof 연산자는 자료의 데이터형을 문자열로 반환해주는 연산자입니다.dele
16.[Javascript] 연산자 우선순위
연산자들은 한 명령에서 쓰일 때, 서로간에 우선순위를 가지고 연산됩니다. 수학 연산처럼 괄호가 가장 높은 우선 순위를 갖고, 증감, 산술, 비교, 논리, 대입, 비트 순서로 우선순위를 갖습니다.연산자 우선순위 표MDN - 연산자 우선순위생활코딩 - 연산자 우선순위
17.[Javascript] 상수와 const
상수는 코드 내부에서 사용되는 의미있는 숫자 값을 의미합니다. 상수를 사용하는 이유는 특정 숫자 값이 코드 내에서 반복되어 사용될 때 이 반복되는 숫자 값이 무엇인지 쉽게 알게 하기 위해서 사용됩니다. 변수를 사용하면 값이 바뀔 위험이 있어서 오류를 발생시킬 위험이 증
18.[Javascript] var와 let, 스코프 개념
오늘 다루는 var와 let의 차이, 스코프 개념은 자바스크립트를 다루는데 있어서 가장 기본적이고 중요한 지식이므로 잘 기억해두시길 바랍니다.var와 let은 변수 등을 선언할 때 사용하는 선언입니다. var, let으로 선언된 변수는 지난 포스트에서 봤던 const와
19.[Javascript] 호이스팅
호이스팅은 자바스크립트에서 변수나 함수의 선언이 스코프의 최상단으로 올라가는 것 처럼 보이는 개념을 말합니다. 여기서 호이스팅이 개념이라는 것이 중요합니다. 저는 호이스팅을 처음 접할 때 선언을 스코프의 최상단으로 올리는 작업으로 오해했었는데, 나중에 다시 공부하니까
20.[Javascript] 배열
배열은 데이터들의 집합입니다. 하나의 변수에 여러개의 데이터를 담고 싶다면 배열을 이용하게 됩니다.배열내부에 저장된 데이터들에 순서대로 번호를 부여하는데 이를 인덱스라고 합니다. 그리고 인덱스(index)에 저장된 데이터를 요소(element)라고 부릅니다.일반적으로
21.[Javascript] 조건문
제어 구문이란 코드 진행에서 흐름을 제어해주는 명령문들을 말합니다. 제어 구문에는 조건문, 선택문, 반복문 세 가지 종류가 있습니다.오늘은 그 중 첫 번째인 조건문에 대해서 알아보겠습니다.조건문은 조건식의 결과 true/false에 따라서 흐름을 제어하는 제어 구문입니
22.[Javascript] 선택문
선택문(분기문)은 조건식의 값에 따라 여러 분기를 나눈 제어 구문입니다. 물론 else~if문으로도 분기를 명령할 수는 있으나, if문 특성상 코드가 복잡해지기 때문에 분기를 여럿으로 나눌거라면 선택문을 사용하는 것을 고려해보는 것도 좋습니다.선택문에는 switch구문
23.[Javascript] 반복문1
반복문 반복문은 조건식에 따라 특정 구문을 반복하는 제어 구문입니다. 반복문에는 while, do~while, for와 for의 변형 문법이 있는데 우선 while과 do~while에 대해서 알아보겠습니다. while while문은 조건식을 만족하는 동안 블록 내부의
24.[Javascript] 반복문2 - for
for문은 조건식을 만족할 때 까지 블록 내부의 코드를 반복하는 반복문입니다. 전 포스트에서 배운 while, do~while과의 가장 큰 차이점은 조건식 부분이 (초기식;조건식;증감식)으로 이루어져있다라는 점 입니다. for문은 다음과 같이 사용합니다.초기식은 반복
25.[Javascript] 연관 배열
연관 배열은 배열과는 다르게 중괄호{}를 이용하고, 키:값의 쌍을 요소로 갖는 배열입니다. 더 익숙하게는 객체라고도 합니다. 일반적으로 자바스크립트에서 객체라고 말을 하면 이 연관 배열을 의미합니다.배열은 요소의 접근을 인덱스를 통해서 했지만, 연관 배열은 키를 통해
26.[Javascript] 반복문 3 - for~in
for~in 반복문은 for반복문의 개량형입니다. for~in은 연관 배열의 프로퍼티(요소)들을 첫 번째 프로퍼티부터 시작하여 반복문의 내부를 순서대로 처리합니다.for~in은 다음과 같이 사용합니다.가변수라는 단어가 등장하는데, 가변수란 프로퍼티에 접근하기 위한 키입
27.[Javascript] 반복문 4 - for~of
지난 포스트에서 다룬 for~in이 연관 배열을 처리하기 위한 반복문이었다면, 오늘 알아볼 for~of문은 배열을 처리하기 위한 반복문입니다.for~of는 배열 요소를 순차적으로 처리하기 위한 반복문입니다. 사실 배열 뿐만 아니라 열거 가능한 객체들을 순차적으로 처리하
28.[Javascript] 반복문 제어
continue명령은 반복문 내부에서만 사용가능한 명령입니다. 이 명령은 반복문에서 현재 진행중인 루프를 건너 뛰고 다음 루프를 실행합니다.continue명령을 반복문 코드 블록 중간에 사용하게 된다면, continue 아래의 코드들은 무시되고 반복문의 처음으로 돌아가
29.[Javascript] 예외 처리 try~catch
예외란 사용자가 프로그램을 프로그래머의 의도 밖으로 사용한 것을 의미합니다. 프로그래머의 의도에서 벗어난 작동을 시키면 프로그램이 고장나거나, 다양한 오류를 배출할 수 있습니다. 따라서 예외를 처리하는 것은 중요합니다.물론 코드를 작성하는 과정에서 예외를 막을 수 있지
30.[Javascript] 함수
함수는 어떤 값을 받아서 결과를 내보내는 구문입니다. 더 쉽게 말하자면, 특정 기능을 갖는 코드라고도 생각해볼 수 있습니다. 이 함수들은 자바스크립트 내장 객체에 제공하기도 하고(이 경우 메소드라고 부릅니다.) 사용자가 함수를 직접 정의해서 사용할 수도 있습니다.자바스
31.[Javascript] 사용자 정의 함수 1 - function 명령
function 명령을 이용한 함수 선언은 가장 기본적인 자바스크립트 함수 선언 방식입니다. function 명령은 다음과 같이 사용하며, 중괄호를 생략할 수 없습니다.function 명령으로 정의된 함수는 다음과 같이 호출합니다.만약 함수 정의에 인자가 없다면 인수를
32.[Javascript] 인수와 인자
함수를 처음 접하게 되면 인수와 인자라는 단어가 등장합니다. 영어 원문은 전혀 다른 단어이지만, 한자 문화권인 우리나라에서 번역이 되면서 두 단어가 혼동될 여지가 있게되었습니다. 저도 역시 처음 배울 때 인수와 인자를 구분없이 남용했던 적이 있기에 인수와 인자를 정의하
33.[Javascript] 사용자 정의 함수 2 - Function 생성자
자바스크립트에서 함수를 정의하는 두 번째 방법인 Function 생성자는 Function 객체로부터 함수를 생성합니다. 배열편에서 살짝 언급했는데요. 자바스크립트는 배열, 함수, 객체 등을 모두 객체로 취급합니다.Functon 생성자를 통한 함수 정의는 다음과 같이 사
34.[Javascript] 사용자 정의 함수 3 - 함수 리터럴
자바스크립트에서는 함수도 데이터형 중 하나로 간주합니다. 그래서 함수를 리터럴로 표현하고, 변수에 함수를 대입시키고, 다른 함수의 인수로 함수를 넘기고, 반환값으로 함수를 넘기는 등의 동작이 가능합니다.함수 리터럴방식은 다음과 같이 선언합니다.함수를 선언하고, 변수에
35.[Javascript] 사용자 정의 함수 4 - 애로우 함수
애로우 함수(화살표 함수)는 함수 리터럴방식을 간결하게 표현할 수 있게 해준, 단축 문법입니다.애로우 함수는 다음과 같이 사용합니다.함수 리터럴, 즉, 익명 함수를 따르기 때문에 함수명은 따로 없고 변수에 담아서 사용하게됩니다. 그리고 독특하게 인자와 함수 본체를 화살
36.[Javascript] function 명령과 Function 명령/함수 리터럴의 작동
각 함수 선언 방식의 작동 방법에 대해서 조금은 더 구체적으로 알아보겠습니다.다음 코드는 함수를 먼저 호출하고 나중에 선언했습니다. 일반적인 프로그래밍 언어라면 오류가 나겠지만, 호이스팅으로 인해서 아무런 오류 없이 정상적으로 작동합니다.이것을 통해서 function
37.[Javascript] 함수에서 여러 값 반환
일반적으로 생각하는 반환값은 어떤식의 결과나, 변수의 데이터 등 하나의 값만 반환합니다. 그렇다면 함수에서 여러개의 값을 반환하고 싶을 때는 어떤 방식을 이용할 수 있을까요?먼저 방식을 알아보기 전에 분할 대입에 대해서 알고 가야합니다. 분할 대입은 배열, 객체 등의
38.[Javascript] 객체
객체는 상태와 동작 또는 프로퍼티와 메소드로 이루어진 것 입니다. 이렇게 설명하는 객체가 다소 모호한 개념같지만, 객체는 일상생활에서 볼 수 있는 것들이라고 생각하면 이해하기 쉽습니다. 간단하게 예를들면 컴퓨터는 켜져있다/꺼져있다와 같은 상태(프로퍼티)와 프로그램을 실
39.[Javascript] 정적 프로퍼티와 정적 메소드
지난 포스트에서 객체를 소개하며, 객체의 원본에 직접 접근하는 대신, 인스턴스화를 거쳐서 복사본을 이용하라고 했었는데요. 이 과정이 필요없이 이용가능한 프로퍼티/메소드가 존재합니다. 우리는 이들은 정적 프로퍼티, 정적 메소드라고 부릅니다.정적 프로퍼티는 인스턴스 생성
40.[Javascript] 내장 객체 - String
내장 객체는 자바스크립트에 기본적으로 탑재되어 있는 객체입니다. 내장 객체는 따로 인스턴스화 과정을 거칠 필요가 없다는 특징이 있습니다.래퍼 객체는 내장 객체 중에서도 문자열을 다루는 String, 숫자를 다루는 Number, 논리형을 다루는 Boolean 객체를 래퍼
41.[Javascript] 내장 객체 - Number
Number 객체는 자바스크립트에서 숫자 데이터를 처리하기 위한 내장 객체입니다.Number 객체의 모든 프로퍼티는 정적 프로퍼티입니다.NaN은 Not a Number의 줄임말로, 숫자가 아닌 값을 의미합니다. 물론 그렇다고해서 null이나 undefined와 동일한
42.[Javascript] 내장 객체 - Math
지난 포스트에서 다룬 Number 객체는 숫자와 관련된 값을 다뤘다면, Math 객체는 수학적 연산을 다루는 객체입니다.Math 객체는 모든 프로퍼티와 메소드가 정적이라는 특징이 있습니다.
43.[Javascript] 내장 객체 - Array
Array 객체는 배열 객체입니다. 배열을 다루는데 사용됩니다.length는 배열의 길이를 취득합니다.isArray는 정적 메소드로 인수로 객체를 받습니다. 이때 인수 객체가 배열인지를 판별합니다. 배열이라면 true, 배열이 아니라면 false를 반환합니다.toStr
44.[Javascript] 원본 배열을 변경하는 Array 객체의 메소드
Array 객체는 배열을 다양하게 가공할 수 있는 메소드들을 지원하고 있습니다. 이 중에는 배열의 요소를 삭제하거나 추가하거나 가공하는 메소드들이 있는데요. 이 메소드들은 종류에 따라서 원본 배열을 직접 가공, 복사본을 만든 뒤 가공하는 두 종류의 메소드로 나뉘어집니다
45.[Javascript] 파괴적인 메소드
이름부터 괴상한 파괴적인 메소드란 무엇일까요?파괴적인 메소드는 메소드를 실행했을 때 객체(메소드 실행 대상이 되는 자기자신)에 변화가 생기는 메소드를 의미합니다.파괴적인 메소드는 주로 Array 객체에서 많이 볼 수 있습니다. 배열 메소드를 사용하면 메소드에 전달한 기
46.[Javascript] 내장 객체 - Map
Map 객체는 연관 배열을 다루는데 도움을 주는 객체입니다. 기존에는 객체 리터럴로 연관 배열을 관리했는데 ES6에서 Map 객체가 등장하면서 연관 배열을 간편하게 생성할 수 있게 되었습니다.그러면 Map 객체로 연관 배열을 관리하면 어떤 이점이 있는지 알아보겠습니다.
47.[Javascript] 내장 객체 - Set
Set 객체는 중복되지 않는 값들의 집합을 다루는 객체입니다. 값만 중복되지 않으면 자료형이 달라도 집합을 구성하는데 문제가 되지않습니다. 어떻게 보면 배열과 유사하기도 한데요, Set은 인덱스나, 키를 통해 요소에 접근할 수 없고 값을 통해서 접근이 가능합니다.Set
48.[Javascript] 내장 객체 - Date
Date 객체는 날짜와 시간에 대한 데이터를 다루는 객체입니다.우선 들어가기전에 협정 세계시와 로컬 시의 개념을 이해하고 넘어가야합니다. 현실에서 보통 우리나라와 다른 나라들은 시차가 있다고 하죠? 그래서 사람들은 똑같은 인터넷 공간에 접속하더라도 지역에 따라 다른 시
49.[Javascript] 정규 표현
정규 표현(정규식, 정규 표현식)은 특정 패턴을 갖는 문자열을 의미합니다. 대표적인 예로 웹 사이트 주소(https://)나 전화번호(000-0000-0000), 이메일 주소(xxxx@xxxx.xxx)가 특정 패턴을 가지고 자주 사용되는 문자열입니다.이러한 문
50.[Javascript] 내장 객체 - RegExp
RegExp 객체는 정규 표현을 다루는데 사용되는 객체입니다.match는 문자열에서 인수로 지정한 정규 표현과 매치된 문자열을 배열 형태로 반환해주는 메소드입니다.exec도 match와 같이 문자열에서 정규 표현과 매치된 문자열을 반환하는 메소드입니다.match와 ex
51.[Javascript] 내장 객체 - Object
Object 객체는 객체의 공통적 프로퍼티/메소드를 다루는 객체입니다. 자바스크립트의 객체는 배열, 문자열, 숫자 등 내장 객체와 사용자 정의 객체도 Object 객체에 자동적으로 포함됩니다.그래서 Object 객체는 이러한 객체들의 객체라고 할 수 있습니다.아무래도
52.[Javascript] 내장 객체 - Global
Global 객체는 자바스크립트에서 글로벌 변수/함수를 관리하기 위해 내부적으로 자동 생성되는 객체입니다. 글로벌은 어떤 함수에도 포함되지 않는 가장 톱 레벨의 변수/함수의 스코프를 의미합니다.글로벌 객체는 인스턴스화, 메소드 호출이 불가능한 객체이기도 합니다. 그래서
53.[Javascript] Proxy 객체
proxy는 대리, 대신이라는 뜻을 가지고 있습니다. 그 뜻처럼 Proxy 객체는 무언가를 대신하는 역할을 하는 객체입니다.Proxy 객체는 객체의 기본 동작들에 대해서 새로운 동작을 정의할 때 사용하는 객체입니다. 새로운 동작을 정의한다는 것은, 기존의 객체를 조작할
54.[Javascript] 프로토타입
내장 객체 때도 설명했지만 객체는 속성(프로퍼티)와 행위(메소드)를 가지는 개념입니다. 그리고 이러한 개념에 명칭을 부여할 수 있어야하기도 합니다.자바스크립트에서 객체는 객체 리터럴 방식으로 생성했습니다.객체 리터럴 방식은 객체를 만들기 위해서는 요소들을 일일히 새로
55.[Javascript] 프로토타입 체인
우선 상속이라는 객체지향의 개념에 대해 알아보겠습니다. 상속은 어떤 클래스나 객체의 프로퍼티/메소드를 또 다른 객체가 이어받아 새로운 클래스/객체가 마치 자기것 처럼 사용하는 것을 의미하는 객체지향 프로그래밍의 용어입니다.상속에서 상속을 해주는 클래스를 부모 클래스,
56.[Javascript] this
다른 언어와 달리 자바스크립트의 독특한 특징 중 하나는 this의 용법입니다. this가 상황에 따라 가리키는 것이 다르기 때문에 잘 알아두어야 원하는 대로 this를 조작할 수 있습니다.this를 따로 혼자 호출한 경우입니다. 단독으로 this를 호출하면 window
57.[Javascript] 클래스
자바스크립트에는 클래스 개념이 존재하지 않고, 프로토타입을 이용한다고 언급했었습니다. 이 방식은 객체지향 개념을 기존의 언어와는 다른 방식으로 지원해서 조금 복잡하다고 생각이 들었는데요. ES6 버전이 나오면서 드디어 자바스크립트도 클래스를 지원하기 시작했습니다.클래스
58.[Javascript] 클래스 상속
프로토타입에서는 상속 개념을 이용하기 위해서 프로토타입 체인이라는 것을 이용했습니다. 이 방법이 다소 복잡한 감이 있었는데요. ES6에서 class를 지원하면서 extends키워드를 통해 상속을 더 쉽게 구현할 수 있게 되었습니다.다음 코드는 프로토타입 체인을 이용해서
59.[Javascript] protected와 private 멤버 정의
자바계열이나 C계열 언어(자바스크립트도 C계열이지만 예외입니다.)의 멤버들에게는 접근 지정자라고 하는 키워드가 있습니다. public, protected, private 세가지인데요. 이들은 객체 내부의 멤버에 대해서 외부에서 접근할 수 있는 권한을 부여하는 키워드입니
60.[Javascript] 문서 객체 모델 DOM
문서 객체 모델, 일명 DOM(Document Object Model)이라고 부르는 것은 자바스크립트에서 html문서를 조작하기 위해 만들어진 인터페이스입니다. 이 인터페이스는 웹 페이지의 모든 요소들을 계층 구조로 나누어서 표현하고, 각각의 요소에 자바스크립트를 통해
61.[Javascript] 노드 취득
지난 포스트에서 DOM과 노드의 개념에 대해 다뤘습니다. 이번 포스트에서는 노드를 다루기 위한 첫 번째 걸음인 노드 취득에 대해서 알아보겠습니다.노드 취득은 노드를 조작하기 위해 문서 트리에서 특정 노드를 선택하는 것을 의미합니다. 마치 CSS의 셀렉터처럼 조작할 노드
62.[Javascript] 노드 워킹
지난 포스트에서 다룬 노드 취득은 html 문서 전체를 검사하고 노드를 취득합니다. 따라서 노드 취득을 여러번 실시할수록 어플리케이션의 성능에 영향을 주게됩니다. 그래서 처음에만 노드를 취득하고, 나머지 요소는 주변을 따라가면서 취득해보자는 아이디어가 나왔고 이것이 노
63.[Javascript] 이벤트
이벤트란 웹 페이지에서 일어나는 모든 상황들을 말합니다. 우리가 클릭, 드래그, 휠 조작 뿐만 아니라, 새로고침, 접속 등과 같은 것들도 모두 이벤트입니다. 웹 페이지에서 자바스크립트는 이런 이벤트가 발생할 때 마다 실행되어 웹 페이지가 동작하게 만들어줍니다.일반적으로
64.[Javascript] 이벤트 객체
지난 시간에 다뤘던 이벤트 핸들러와 이벤트 리스너는 인수로 이벤트 객체라는 것을 받습니다. 이 이벤트 객체를 통해 핸들러와 리스너 내부에서 이벤트 발생에서 얻을 수 있는 정보들을 얻을 수 있습니다.위 코드에서 두 번째 인자인 리스너에 전달된 e가 바로 이벤트 객체입니다
65.[Javascript] 캡쳐링과 버블링
자바스크립트가 어떻게 이벤트를 처리하는지에 대해서 알아보겠습니다.자바스크립트의 이벤트는 특정 요소에서 발생합니다. 그리고 이 DOM은 여러 객체들로 이루어져있고요. 그래서 이벤트가 발생하면 부모 요소부터 시작해서 이벤트가 발생한 하위 요소까지 전달되며, 이 단계를 캡쳐
66.[Javascirpt] 속성 값 노드, 텍스트 노드
지난 포스트들에서는 요소를 다루는 법에 대해 알아봤습니다. 노드 취득, 워킹을 통해 속성 값도 또한 다룰 수 있는데요. 오늘은 어떤 방법으로 속성 값을 다룰 수 있는지에 대해 알아보겠습니다.첫 번째 방식으로는, 속성 이름으로 접근하는 방식입니다. 가장 기본적으로 직관적
67.[Javascript] 폼 요소 접근
입력 폼은 id 등을 적는 텍스트 박스부터, 날짜 선택, 댓글의 텍스트 에이리어 등을 의미합니다. 그래서 입력 폼에 접근한다는 것은 입력란에 들어있는 값들만 따로 빼와서 처리하겠다라는 이야기입니다.입력 폼은 다음과 같이 간단하게 접근이 가능합니다.그렇다면 라디오 버튼과
68.[Javascript] 노드 추가하기
기존까지는 노드들을 취득하는 방법에 대해 알아봤는데, 이번에는 자바스크립트에서 노드를 추가하는 방법을 알아보겠습니다.create~는 노드를 생성하는 메소드입니다. 접미사에 무엇이 들어가냐에 따라서 요소, 속성, 텍스트 등이 생성됩니다. 그리고 오직 생성만 하기 때문에,
69.[Javascript] 노드 변경과 삭제
replaceChild메소드는 노드를 교체하는 메소드입니다. 주의할 점은 메소드명에 Child가 들어간 만큼 자식 요소를 교체하게됩니다. 그래서 특정 노드를 교체하려면, 해당 노드의 부모 노드를 지정하고 메소드를 사용하는 방식으로 사용해야합니다.removeChild는
70.[Javascript] 스타일 시트 접근
이전까지 배운 요소를 취득, 변경, 삭제는 모두 HTML 문서의 요소에 접근하는 방식이었습니다. 하지만 웹은 기본적으로 html, css, js로 구성되어있습니다. html에 접근하는 방법은 알아봤으니 이번에는 css에 접근하는 방법을 알아보겠습니다.css에 접근하는
71.[Javascirpt] 브라우저 객체 모델 BOM
브라우저 객체는 브라우저에 내장되어있는 브라우저 조작을 위해 제공되는 객체입니다. 예를들면 브라우저의 새로고침, 앞으로가기, 뒤로가기, 새 탭 열기와 같은 조작을 위해 제공되는 객체들입니다.브라우저 객체는 다음과 같이 window라는 최상위 객체 아래에 여러 객체들이
72.[Javascript] 템플릿 문자열
지난 포스트의 BOM을 마지막으로 자바스크립트에 대한 기초적 문법은 종료되었습니다. 이후 포스트부터는 기초보다 어려운 개념이나, ES6, ES6 이후의 신규 문법들에 대해서 다뤄나가려고합니다.템플릿 문자열은 문자열을 간편하게 작성할 수 있도록 만들어진 ES6의 문법입니
73.[Javascript] 객체 확장 표현식
ES6에서 객체 확장 표현식을 지원하면서, 객체를 작성하는데 있어 편의성이 많이 올라갔습니다.기존에는 키 이름과 키 값이 동일할지라도, 키 이름과 키 값을 무조건 명시해주어야했습니다.객체 확장 표현식에서는 키 값을 생략하면, 키의 이름을 통해서 키 값을 지정할 수 있게
74.[Javascript] 구조 분해 할당
구조 분해 할당은 배열이나 객체에서 특정 요소의 값들을 편리하게 가져올 수 있는 문법입니다.배열의 요소를 변수에 할당하기 위해서는 다음과 같이 이용해왔습니다.구조 분해 할당을 이용하면, 좀 더 직관적으로 배열 요소를 변수에 할당할 수 있습니다. 대괄호\[]를 이용해서
75.[Javascript] 전개 연산자
전개 연산자는 닷.을 세 개 찍어서 표현하는(...) 독특하게 생긴연산자입니다. 전개 연산자는 전개라는 단어에서 예상할 수 있듯 어떤 내용을 펼쳐주는 듯한 일을 하는 연산자입니다. 전개 연산자는 배열\[], 객체 {}, 함수 인자() 블록에서만 사용이 가능합니다.그러면
76.[Javascript] XMLHttpRequest
XMLHttpRequest객체는 자바스크립트에서 비동기 통신을 하기 위한 객체입니다. XML, 문자열, JSON, TEXT 등 다양한 데이터 포맷을 비동기 처리할 수 있게 해줍니다.이 중에서 readyState와 같은 프로퍼티를 보시면 HTTP 통신 상태, HTTP S
77.[Javascript] Promise 객체
우선 비동기 처리에 대해 짧게 이야기하고 넘어가겠습니다. 자세한 이야기는 이 포스트를 참조해주세요.비동기 처리는 데이터의 처리를 서버단에서 수행하고, 클라이언트측(브라우저)에서는 사용자와의 상호작용만을 하는 처리 방식입니다. 이 방식덕에 사용자는 요청 후 응답까지 기다
78.[Javascript] Fetch API
비동기 통신을 간편하게 구현하기 위해서 XMLHttpRequest, jQuery, Fetch API 등을 사용합니다. 이 중에서 XMLHttpRequest는 비교적 사용하기 어렵고, 코드가 복잡해지며, jQuery는 다른 강력한 라이브러리들이 등장하면서 점점 사용되지
79.[Javascript] async/await
지난 포스트에서 다룬 Promise 객체는 기존의 콜백 지옥을 크게 개선시켜준 문법입니다. 하지만 이 역시도 비동기 처리가 늘어날수록 then, catch 메소드가 꼬리를 이어 코드가 복잡해집니다. 그래서 ES8에서는 async와 await라는 문법을 도입해서 프로미스
80.[Javascript] 모듈 Module
모듈(Module)은 특정 기능을 가진 함수나 변수들을 모아놓은 것을 의미합니다. 예를들면 다양한 정렬 기능이 포함된 함수들을 모듈로 모아놓고, 그 중에서 필요한 것만 쏙쏙 뽑아서 사용하는 것을 모듈이라고 할 수 있습니다.모듈은 주로 비슷한 기능들, 혹은 하나의 기능만
81.[Javascript] 웹 스토리지 Web Storage
브라우저는 정말 다양한 기능들을 지원합니다. 클라이언트측에서 작업을 하다, 정보를 잠깐 저장해두고 싶다면 어떻게할까요?브라우저는 이런 상황을 위해 자체적인 저장공간을 마련해두었는데, 그것이 웹 스토리지입니다.웹에서 정보를 저장하는데 대표적인 수단으로 쿠키를 이용합니다.
82.[Javascript] Nullish Coalescing Operator
Nullish Coalescing Operator(널 병합 연산자)는 ES6에서 새로 추가된 연산자입니다. Nullish Coalescing Operator은 다음과 같이 물음표를 두 개 붙여서??사용합니다.Nullish Coalescing Operator은 왼쪽 피연
83.[Javascript] default function parameter
default function parameter(기본 값 매개변수)는 함수 인자에 기본 값을 설정하는 문법입니다. default function parameter를 통해 인자에 기본 값을 할당해놓으면, 전달된 파라미터가 없거나 undefined 값을 전달 시 설정된 기
84.[Javascript] shorthand names
shorthand property names는 객체에서 키와 값이 동일할 경우 키를 값으로 사용할 수 있게 해주는 단축 문법입니다.기존 방식에서 객체에 메소드를 정의하려면 키: function() {}의 형식으로 선언했어야합니다. shorthand names는 메소드에
85.[Javascript] optional chaining
optional chaining은 프로토타입 체인으로 묶인 객체들의 프로퍼티에 안전하게 접근할 수 있게 해주는 연산자입니다. 기존에는 존재하지 않는 프로퍼티에 접근하려고 하면 오류를 내보냈지만, optional chaining을 사용하면 존재하지 않는 프로퍼티에 접근해
86.[Javascript] numeric separators
numeric separators는 ES12(ES2021)에 추가된 최신 문법입니다. numeric separators는 숫자 단위를 간편하게 구분할 수 있게 해주는 문법입니다. 사용은 언더바\_로 하는데, 넣고 싶은 숫자 구분 단위에 언더바를 삽입하기만 하면 됩니다.
87.[Javascript] Symbol
Symbol은 ES6에서 추가된 새로운 데이터형입니다. 이름인 Symbol은 일반적으로 상징이라는 뜻을 가진 영어 단어입니다. 상징이란 뜻을 가진 데이터형답게 Symbol은 어떤 값에 대해 식별이 가능한 유일한 이름을 붙이기 위해 사용됩니다.예를들면 어떤 문자열을 봤을
88.[Javascript] Iterator, Generator
Iterator(반복자)는 반복 처리가 가능한 객체를 의미합니다. 좀 더 쉽게 이야기 하자면, 열거 가능한 객체들이 각 요소에 대해 반복 처리가 가능하죠? 이런 열거 가능한 객체들을 반복자라고 합니다. 대표적으로 Array, String, Set, Map 등이 반복자를
89.[Javascript] 자바스크립트 테스트 도구 Jasmine
Jasmine은 자바스크립트 단위 테스팅 프레임워크입니다. 테스트 과정을 일일히 작성할 순 있지만 그렇게 하면 효율이 떨어지므로 프레임워크를 통해 간편하게 환경을 구축하고 테스트를 합니다. TDD가 중요한 개발 기법으로 떠오르는 만큼 테스팅 프레임워크 하나 정도는 다뤄
90.[Javascript] 명명된 인수
명명된 인수는 함수를 호출할 때 이름을 명시할 수 있는 인수를 의미합니다. 다음 코드와 같이 인수를 전달할 때 객체 리터럴로 전달하는 것을 명명된 인수라고 합니다.명명된 인수는 다음과 같은 장점을 갖습니다.생략가능한 인수 표현이 쉽다.인수 순서 변경이 쉽다.인수가 많아
91.[Javascript] Closure
클로저를 알기 전에 스코프 체인에 대해서 알아두어야합니다.자바스크립트는 스크립트가 실행되면 내부적으로 Global 객체를 생성합니다. 이 객체는 인스턴스화 하거나 메소드 호출이 불가능하며, 스크립트에서 글로벌 변수와 함수를 관리하기 위해 생성되는 객체입니다.로컬 변수도
92.[Javascript] Strict mode
자바스크립트는 1995년도에 처음 등장해서 2022년까지 27년동안 사용된 오래된 언어입니다. 긴 역사만큼 수많은 문법과 구문들이 자바스크립트에 등장했고, 그 중에서는 현재 사용하면 안정성 혹은 효율을 떨어뜨리는 구문도 존재합니다. 이런 구문들을 피하려면 왜 이 구문이
93.[Javascript] Tagged Template Strings
이전에 템플릿 문자열이라는 형태로 문자열에 변수를 삽입하는 방법을 배웠었습니다. 오늘 다룰 문법은 템플릿 문자을 발전시킨 Tagged Template Strings(Literals)에 대해서 알아보도록 하겠습니다.Tagged Template Strings는 함수형태로
94.[Javascript] Console 객체
오늘은 자바스크립트를 처음 시작할 때 부터 우리와 함께한 Console에 대해서 다뤄볼까 합니다. 브라우저들은 클라이언트측의 개발을 보조하기 위해 개발자 도구를 지원하고 있는데, 이 개발자 도구를 조작할 수 있도록 하는 기능들을 제공하는 객체가 바로 Console 객체
95.[Javascript] ~, ~~
`~(틸드)`는 오래전에 비트 연산자로써 한 번 등장했습니다. 그리고 비트 연산자는 쓸 일이 없다고 언급도 했었죠. 그런데 오늘은 이 `~` 연산자의 새로운 모습에 대해서 알아보도록 하겠습니다.
96.[Javascript] String.replaceAll()
이번에 소개드릴 새 문법은 replaceAll()메소드입니다. ES2021버전에 새로 추가된 편리한 문법입니다.replaceAll()은 String객체에 추가된 새로운 메소드입니다. 역할은 문자열에서 특정 문자를 지정한 문자열로 변경하는 역할을 합니다.그런데 예전에 똑
97.[Javascript] 테스트 프레임워크 Jest
오늘은 자바스크립트의 또 다른 테스트 프레임 워크인 Jest를 소개해보려고 합니다. 예전에 Jasmine을 소개해드렸었는데요. 사용법이 거의 비슷합니다. 그 이유는 Meta에서 Jasmine을 기반으로 Jest 프레임 워크를 만들었기 때문입니다.테스트 프레임워크 점유율
98.다크 모드 만들기
한 4년?정도 전 부터 유명한 브라우저나 페이지, 어플리케이션에 항상 들어가있는 기능이 하나가 있습니다. 그 기능은 바로 다크 모드입니다.다크 모드란, 기존엔 애플리케이션의 표시를 보통 흰색 바탕에 검은 글씨로 나타냈었는데 그러한 디자인을 반전시켜 어두운 배경에 흰색
99.팝업창 만들기
지난번에 사용자의 주목을 끄는 웹 UI로 모달을 만들었습니다. 이번에는팝업창을 만드는 방법을 알아보려고 합니다.모달때에도 설명했지만 모달과 팝업 모두 사용자의 이목을 끌기 위한 UI라고 설명드렸습니다. 다만 모달은 부모 페이지에 조작이 불가능한 반면, 팝업은 팝업창도,
100.CSS-in-JS
그동안 작성해온 CSS 작성 스타일은 대부분 JS와 CSS를 분리하고 모듈로 연결해서 사용했었을 겁니다. 이 방식을 CSS-in-CSS라고 합니다.모듈화된 CSS는 클래스 네임 중복을 방지해주는 등 중복 문제와 관리의 위험성을 낮춰주었습니다. 하지만 여러 CSS 파일들
101.[Javascript] Canvas API
지난 포스트에서 <canvas>태그에 대해 알아봤습니다.간단히 요약하자면, 자바스크립트 등의 스크립트를 통해 그린 요소를 표시해 주는 태그였는데요. 자바스크립트에선 이런 캔버스의 등장과 함께 Canvas API를 지원하면서 이 캔버스를 다루는 여러 기능들을 제공하
102.[Javascript] html2canvas
html2canvas 라이브러리는 javascript의 화면 캡쳐 라이브러리입니다.사용법도 매우 간단해서, 화면 캡쳐 기능이 필요하다면 편리하게 쓸 수 있는 라이브러리입니다.공식 페이지에 나와있는 설명인데, 사실상 이 코드가 이 라이브러리의 전부라고 해도 무방합니다.
103.[Javascript] Array.prototype.flat(), Array.prototype.at()
오늘은 자바스크립트 비교적? 나온지 좀 된에 추가된 새로운 배열 메소드 두가지를 소개해드리려고 합니다. flat()은 배열의 요소를 지정한 깊이까지 새로 이어붙인 배열을 만들어줍니다. 간단하게 기능을 설명하자면 배열의 중첩 제거, 배열 구멍 삭제라고 할 수 있습니다.
104.[Javascript] 거듭 제곱 연산자 **
오늘은 ES7에서 추가된 거듭 제곱 연산자를 소개해드리겠습니다. 거듭 제곱 연산자는 곱 연산자 두 개를 이어서 사용해 거듭 제곱은 연산하는 연산자입니다. 이때 왼쪽 오퍼랜드가 밑이 되고 오른쪽 오퍼랜드가 지수가 됩니다.기존의 Math 내장 객체의 Math.pow()메소
105.[Javascript] Short Circuit Evaluation
이번엔 Short Circuit Evaluation(단축 평가) (이하 단축 평가)에 대해서 소개해보려고 합니다.사실은 예전에 논리 연산자(https://velog.io/@bami/Javascript-%EB%85%BC%EB%A6%AC-%EC%97%B0%EC%8
106.[Javascript] Array.prototype.sort()와 오름차순 내림차순 정렬
예전에 내장 객체 Array를 소개하면서 메소드인 sort()(https://velog.io/@bami/Javascript-%EB%82%B4%EC%9E%A5-%EA%B0%9D%EC%B2%B4-Arraysort()는 기본적으로 오름차순 정렬을 수행합니다. 그런데