바닐라 자바스크립트 vanilla JavaScript

ECMA Script(ES)

스크립트 표준

네이밍 컨벤션(naming convention)

변수명을 짓는 규칙

null과 undefined

null은 개발자가 의도해서 사용하는 경우이고, undefined는 개발자가 의도하지 않은 경우라고 봐도 무방하다. null은 자바스크립트의 메모리를 효율적으로 관리하고 싶을 때 적절히 사용할 수 있다. 변수에 null을 할당하면 변수가 이전에 참조하던 값을 더 이상 참조하지 않게 되면서 메모리의 특정 위치에 대한 참조가 제거된다. 더 이상 참조가 필요 없는 변수에 대해서 null을 할당함으로 인해 메모리 공간을 확보할 수 있게 되는 것이다.

padStart(), padEnd()

padStart(문자열의 총 길이, 추가할 문자)

문자열 앞에 지정된 문자를 지정된 길이만큼 추가하는 함수

let str = "5";
str = str.padStart(4,0); // 0005

padEnd(문자열의 총 길이, 추가할 문자)

문자열 뒤에 지정된 문자를 지정된 길이만큼 추가하는 함수

let str = "5";
str = str.padEnd(4,0); // 5000

실무 사용 사례

대학 학번 순번 채우기, 날짜 포맷 월, 일을 2자리로 표현

startsWith(), endsWith()

startsWith()

문자열의 시작이 파라미터로 전달된 문자열로 시작되는지를 확인하는 함수

endsWith()

문자열의 끝이 파라미터로 전달된 문자열로 종료되는지를 확인하는 함수

let file = "abc.pdf";
if(file.endsWith(".pdf")) {
  // pdf 파일
} else {
  // 디른 형식의 파일
}

게시판에서 새 글 작성 시 첨부파일은 pdf 파일만 첨부할 수 있다.

join()

let userHtml = [];
for(const user of userList) {
  userHtml.push('<tr>');
  userHtml.push('<td>'+user.name+'</td>');
  userHtml.push('<td>'+user.email+'</td>');
  userHtml.push('</tr>');
}
document.getElementsById('userTavleTbody')
           .innerHtml = userHtml.join('');

배열의 push() 함수를 이용해 차례로 배열에 넣은 후 한 번에 join() 함수를 사용해서 100개의 <tr> 태그 문자열을 만드는 것이 훨씬 간결하고 효율적

pop()과 shift()

스택(Stack)과 큐(Queue)는 자료구조 유형 중 가장 많이 쓰이는 유형이다. 이 중 스택은 데이터가 들어온 순서대로 쌓이고, 출력 시에는 가장 마지막에 쌓인 데이터부터 출력한다. 배열은 데이터가 순서대로 저장되는데 이를 이용해서 스택 자료구조를 구현할 때 pop()함수를 사용하면 배열의 가장 마지막 데이터부터 차례대로 출력할 수 있는 선입후출을 쉽게 구현할 수 있다.

큐는 데이터가 들어온 순서대로 쌓이고, 출력 시에는 가장 첫 번째 데이터부터 출력하는데 배열을 이용해서 큐 자료구조를 구현할 때 shift() 함수를 사용하면 배열의 가장 첫 번째 데이터부터 차례대로 출력할 수 있는 선입선출을 쉽게 구현할 수 있다.

unshift() 함수로 <select> 태그 구현

let cities = [  // 지역 목록
  {code: '02', title: '서울'},
  {code: '21', title: '부산'},
  {code: '064', title: '제주'}
];
// 배열의 첫 번째 요소로 추가
cities.unshift({code: '', title: '지역을 선택하세요'});
let options = [];
for(const city of cities) { // option 태그 구성
  options.push('<option value="'+city.code+'">'+city.title+'</option>');
}

Set 객체

Set 객체는 배열처럼 값들의 집합이다. 배열처럼 데이터 타입에 상관없이 값을 추가할 수 있다. 배열과 가장 큰 차이점은 중복 값을 허용하지 않기때문에 유일한 값을 보장한다.

Set 생성자

Set은 new Set() 생성자를 사용해서 생성
let mySet = new Set();

add()

배열의 push()함수와 동일한 역할
Set에 저장되어 있는 데이터의 수는 size 속성을 통해 쉽게 알 수 있다.

has()

Set에 특정 데이터가 저장되어 있는지 확인

delete()

clear()

저장되어 있는 모든 데이터를 한 번에 삭제

forEach()

Set에 저장되는 모든 데이터를 읽을 때

Map 객체

Object와 매우 유사하다. Map 객체는 키와 값을 맵핑시켜서 값을 저장하며 저장된 순서대로 각 요소에 접근할 수 있다.

Map 생성자

set()

Map 객체에 데이터를 저장할 때는 파라미터로 키와 값을 이용

let userMap = new Map();
userMap.set("name", "홍길동");
userMap.size   // 1

get()

Map 객체에 저장된 데이터를 읽을 때

userMap.get("name"); // 홍길동

has(), delete(), clear(), forEach()

Math.ceil()

숫자에 대한 무조건 올림 처리

게시판처럼 페이징 처리가 필요한 곳에서는 한 페이징당 10건, 혹은 15건 등 한 페이지에 보이는 아이템 수를 조절하게 된다. 전체 아이템이 총 몇 페이지가 되는지 총 페이지 수를 계산해야 하는데 이때 사용한다. Math.ceil(총 아이템 수 / 한 페이지당 보이는 아이템 수)를 사용해서 총 페이지 수를 구할 수 있다.

JSON 객체

JSON 객체에는 2개의 중요한 내장 함수가 있다.

• JSON.stringify : 데이터를 서버로 전송하기 위해서는 데이터 형태를 문자열 형태로 변환해야 할 때 사용
• JSON.parse : 서버로부터 응답받은 데이터는 문자열 형태다. JSON.parse 함수를 사용하면 자바스크립트 Object 객체로 변환해준다.

Symbol

Symbol은 자바스크립트에서 절대 충돌이 일어나지 않는 유일한 key 값을 만들어준다.

let person = {
  firstName = "Jeremy",
  lastName = "Go",
};
let getFullName = Symbol("getFullName"); // 유일한 key 생성
person[getFullName] = function(){
  return this.firstName + "" + this.lastName;
};

for(const key in person) {
  console.log(key);  // firstName, lastName 출력   
}

console.log(person[getFullName]()); // Jeremy Go 출력

Array Destructuring

function getProfile(){
  return [
    'John',
    'Doe',
    ['Red', 'Green', 'Blue']
    ];
}
let [
  firstName,
  lastName,
  [
    color1,
    color2,
    color3
    ]
  ] = getProfile();
console.log(color1, color2, color3);

XMLHttpRequest

서버와 상호작용하기 위해 사용된다. 전체 페이지를 새로 고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있다.

객체 생성

const xhr = new XMLHttpRequest();

요청 전송

xhr.open('GET', '/posts');
HTTP Method, URL 정의, 비동기 여부(기본 값 true)

content-type 값

클라이언트에서 서버로 HTTP 요청을 하기 전에 요청에 맞는 헤더 값을 설정해야 한다. setRequestHeader() 함수를 통해서 요청 헤더 값을 설정할 수 있다. 일반적으로 요청할 때 서버로 전송하는 데이터의 타입을 선언하기 위한 용도로 많이 사용한다. content-type은 서버로 전송할 데이터의 MIME 타입 정보를 설정한다.

content-type 값                     목적
application/json           			json 데이터 전송
text/plain							텍스트 데이터 전송
multipart/form-data					파일 전송

xhr.setRequestHeader('content-type', 'application/json');

send() 함수

const xhr = new XMLHttpRequest();  // XMLHttpRequest 객체 생성
xhr.open("POST", "/posts");  // HTTP Method, URL정의
// 헤더 값 중 content-type 정의
xhr.setRequestHeader("content-type", "application/json");

const data = {
  	id: 2,
  	title: "XMLHttpRequest",
  	author: "Jeremy",
};

// JSON.stringify를 통해 오브젝트 데이터를 문자열 형태로
// 변경해서 전송해야 함
xhr.send(JSON.stringify(data)); 

서버로 전송할 데이터가 있다면 send() 함수에 매개변수로 데이터를 전달하면 된다. 전달된 데이터는 request의 body에 담겨 전송된다. 단, HTTP 요청 방법이 GET인 경우는 send() 함수에 매개변수로 데이터를 전달해도 전달할 데이터는 실제로는 전송되지 않는다.

응답 처리

const xhr = new XMLHttpRequest();
xhr.open("GET", "/posts");
xhr.setRequestHeader("content-type", "application/json");
xhr.send();

xhr.onload = () => {
  if(xhr.status === 200){  // 정상적으로 응답되면 200
    // 응답 데이터를 JSON.parse 함수로 JSON 객체로 변경
    const res = JSON.parse(xhr.response);
  } else {  // 에러발생
    // 응답 상태와 응답 메시지를 출력
    console.error(xhr.status, xhr.statusText);
  }
}

insetAdjacentHTML()

• afterbegin : 접근한 DOM 요소의 자식 노드의 제일 첫 번째 노드로 삽입
  .insertAdjacentHTML("afterbegin", "<li>새 항목</li>");
• afterend : 접근한 DOM 요소 바로 다음 노드로 삽입
• beforebegin : 접근한 DOM 요소 바로 직전 노드로 삽입
• beforeend : 접근한 DOM 요소의 자식 노드의 제일 마지막 노드로 삽입

DOM 이벤트

• onclick
• onchange : <select>는 선택할 수 있는 여러 개의 옵션에서 하나 이상의 옵션을 선택할 때 사용하는 요소로 사용자가 선택하는 옵션을 바꿀 때마다 웹에서는 change 이벤트가 발생. 이외에도 <input type="checkbox">, <input type="radio">
• onfocus : <input type="text"> DOM 요소에 마우스를 위치할 때 발생하는 이벤트
• onblur : 현재 마우스가 포커스 되어 있는 DOM 요소를 빠져나가려 할 때 발생하는 이벤트 → 입력 요소에 입력된 데이터가 정확한 형식으로 입력되었는지, 혹은 필수 입력 값인데 값이 입력되었는지를 입력 DOM요소에서 빠져나가는 순간 확인하는 용도로 사용
• onkeydown, onkeypress, onkeyup
• onscroll
• touch
• onload : 웹 페이지의 모든 HTML DOM 요소가 로딩되면 발생하는 이벤트
  window.addEventListener("load", function() {});
• onunload : 현재 웹 페이지에서 다른 페이지로 이동하거나 브라우저 창을 닫을 때 발생하는 이벤트, 브라우저 창을 닫거나 다른 웹 사이트로 이동을 하게 되면, 자동으로 로그아웃 처리를 구현한다. 또한 현재 페이지에서 선언한 변수 중에서 메모리 공간을 많이 차지하는 변수가 있다면, 메모리 공간을 확보하고자 해당 변수의 값을 null 처리하는 코드를 구현하는 것도 효과적이다.

메모리 할당

메모리 할당 시점

• 자바스크립트는 값을 선언할 때 자동으로 메모리를 할당
• 내장 객체의 함수 호출로 인해 새로운 값이나 새로운 오브젝트를 위해 메모리 할당

스택(Stack) 메모리

• 정적 메모리 할당 시 사용
• String, Number, Boolean, undefined, null은 스택 메모리에 저장
• 후입선출

힙(Heap) 메모리

• 동적 메모리 할당에 사용되며 실제 데이터가 저장되는 위치에 대한 참조(포인터)를 저장
• 배열, 오브젝트, Map, Set같은 객체
• 배열, 오브젝트는 변수가 할당되면, 그 변수는 실제 데이터가 저장되어 있는 메모리 블록의 주소에 대한 참조 값을 저장
• 힙 메모리를 사용하는 변수에 null을 할당하면 메모리가 해제

메모리 해제

• 가비지 컬렉션이라는 자동 메모리 관리 방법을 사용
• 가비지 컬렉션은 메모리 할당을 추적하고 할당된 메모리 블록이 더 이상 필요하지 않게 됐는지를 스스로 판단하여 메모리를 회수하기 때문에 가비지 컬렉션 알고리즘마다 작동하는 방식에 차이가 있다.
• 레퍼런스 카운팅 가비지 컬렉션 : 객체를 참조하는 변수의 수를 관리한다. 객체를 참조하는 변수의 수가 증가할 때마다 카운트가 1만큼 증가. 반대로 객체를 참조하는 변수의 수가 줄어들면 카운트가 1만큼 줄어들고 0이 되는 순간 객체는 가비지 컬렉션 대상이 되고 메모리가 반환
• 마크 앤 스윕 가비지 컬렉션 : roots라는 오브젝트 집합을 가지고 있다. 주기적으로 root부터 시작하여 root가 참조하는 오브젝트들을 Mark한다. root에서 접근이 가능하면 가비지 대상에서 제외되고 Mark되지 않은 오브젝트들은 가비지 컬렉션 대상이 되고 메모리가 반환Sweep

LocalStorage, SessionStorage

웹 브라우저 저장소

LocalStorage

• 저장된 데이터를 삭제하기 전까지 영구 보존
• 저장되는 모든 데이터는 자바스크립트의 오브젝트 데이터처럼 키와 값의 쌍으로 저장할 수 있다. 단 문자열로만
• Number, Boolean, Object, Array같은 형태의 데이터를 저장할 때는 JSON.stringify를 이용하여 문자열로 변환해 저장
• 반대로 데이터를 읽을 때는 JSON.parse를 이용하여 원래의 데이터 형태로 변환

if (typeof Storage !== "undefined") {
  // Storage를 사용할 수 있는지 체크
  localStorage.setItem("title", "The Great");
  // 로컬 스토리지의 title키에 The Great 저장
  
  const users = [
    { id: 1, name: "Hyeok" },
    { id: 2, name: "Seo" },
  ];
  localStorage.setItem("users", JSON.stringify(users));
  // 로컬스토리지의 users 키에 users 배열을 문자열로 저장

• 저장된 로컬스토리지를 삭제할 때는 removeItem() 함수를 사용하고 저장할 때 사용한 Key로 삭제한다.

SessionStorage

• 브라우저 창을 닫는 순간 자동으로 삭제
• 사용법은 로컬스토리지와 일치

Geolocation API

웹 브라우저에 접속한 사용자의 지리적 위치 정보에 대한 위도, 경도 값을 확인할 수 있게 해주는 API

if('geolocation' in navigator) {
  // 위치 정보 사용 가능
  navigator.geolocation.getCurrentPosition((position)=>{
    const latitude = position.coords.latitudel // 위도
    const longitude = position.coords.longitude // 경도
    });
} else {
  // 위치 정보 사용 불가능
}

만약 사용자가 이동 중이며, 위치 정보가 바뀌었을 때에도 콜백함수를 통해 사용자의 위치 정보를 가져올 수 있다.

const watchID = navigator.geolocation.watchPosition((position)=>{
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
});
// 사용자 위치 정보를 감지하지 않을 때는 반드시
// 사용자 위치를 감지하는 함수를 종료시켜야 한다.
navigator.geolocation.clearWatch(watchID);

Web Speech API

음성 정보를 텍스트로 변환해주는 API