즐겁게, 코드

ES6부터는 for...of 라는 새로운 문법으로 배열을 순회할 수 있게 되었습니다. const student = ["찬민", "연주"]; for (let i of student) { console.log(i); } // 찬민 // 연주 이렇게 for...of 등 "반복 가능" 한 동작을 수행할 수 있는 객체*를 반복 가능한(iterable)한 객체 라고 부르는데요, 오늘은 이터러블한 객체를 생성하는 방법을 소개하려 합니다. (* 배열 역시 Array 객체이므로 객체 라는 표현을 사용했습니다.) 이터레이터 프로토콜 / 이터러블 프로토콜 이터러블한 객체를 만들기 전에 먼저 이터러블과 이터레이터를 정확히 구분해야만 합니다. 둘을 구분하기 위한 규칙 역시 아래와 같이 존재합니다. 이터레이터 프로토콜 - 반복의..

자바스크립트의 객체의 속성은 문자형과 심볼형을 허용하는데, 심볼형이란 무엇일까? 심볼(Symbol)은 ES6에서 새롭게 추가된 타입으로 심볼로 생성되는 값은 언제나 고유하다는 특징이 있다. [심볼 사용법] // new 키워드 없이 선언함에 유의한다. const symbol1 = Symbol(); // 심볼의 인자는 심볼을 설명하는 역할에 불과하다. const symbol2 = Symbol("name"); 심볼은 인자를 해시화하는 개념이 아니라 심볼마다 완전히 고유한 값이 할당되는데 코드를 통해 살펴보자. Symbol("name") == Symbol("name"); // false 동일한 "name" 인자를 받았다 하더라도 인자는 심볼값의 고유 여부를 결정할때 영향을 미치지 않으며, 심볼은 언제나 고유한 ..

이벤트는 화면에 커서를 올리거나 클릭, 키보드를 조작하는 등 사용자가 행하는 모든 동작을 의미한다. 오늘은 버블링과 캡처링으로 대표되는 이벤트의 동작 흐름에 대해 알아보자. [사용할 예제 파일] const parent = document.querySelector(".parent"); parent.addEventListener("click", (e) => { parent.style.backgroundColor = "black"; }); 위 코드는 parent 클래스명을 가진 요소를 클릭하는 이벤트가 발생할 시 배경을 검정색으로 변경한다. addEventListener로 이벤트 리스너를 추가하는 것은 대부분 알고 있겠지만 앞으로 소개할 내용들은 꽤나 생소한 개념일 것이다. 1. 이벤트의 버블링 const g..

브라우저는 간단한 데이터를 위한 작은 저장소를 제공하는데, 쿠키와 로컬 스토리지(Local storage), 세션 스토리지(Session Storage) 가 바로 그것입니다. 쿠키에 대해서는 나중에 더 자세히 다뤄 보도록 하고, 오늘은 로컬 스토리지와 세션 스토리지에 대해 정리해보기로 하겠습니다. 1. 공통적인 특징 두 브라우저 저장소의 공통적인 특징으로는 쿠키와 달리 웹 서버로부터 고립되어 있다는 점입니다. 오리진에 종속되는 특징으로 인해 서버로부터의 영향을 절대 받지 않으며, 쿠키보다 더 많은 정보를 저장할 수 있다는 이점이 있습니다. [LocalStorage & SessionStorage 사용하기] localStorage.setItem("name", "Chanmin"); localStorage.re..

[지난 글 목록] Express.js & MongoDB 기반 REST api 구현하기 - 1편 (서버 만들기) Express.js & MongoDB 기반 REST api 구현하기 - 2편 (몽고디비 연결하기) 이전 단계에서 몽고디비(MongoDB)를 사용할 준비를 마쳤으니, 이제 몽고디비를 사용해 보자. 몽고디비는 행렬 테이블로 이루어진 기존의 관계형 데이터베이스와는 다르게 어떤 값이든 DB에 어떤 형태로든 추가될 수 있다. 이는 NoSQL 방식의 큰 장점이기도 하지만 자칫하면 무질서한 데이터들로 인해 DB의 무결성을 해칠 수도 있다. 그래서 몽구스에서 제공하는 것이 스키마(Schema)로, 스키마는 데이터 포맷을 일종의 템플릿으로 정해줌으로써 몽고디비에서도 MySQL처럼 구조화된 데이터를 관리할 수 있..

useMemo 훅은 useState와 useEffect에 비해서는 존재감이 다소 떨어지지만 강력한 기능을 탑재하고 있습니다. 바로 메모이제이션을 구현해 함수의 중복 동작을 막아 성능을 향상시킬 수 있는데, 한번 사용 방법을 살펴보도록 하겠습니다. [useMemo 훅의 기본 형태] import React, {useMemo} from 'react' const memoizedValue = useMemo(() => { return (수행할 동작 (주로 시간이 오래 걸리는)); }, [의존값]); 리액트 컴포넌트는 재렌더링될때마다 컴포넌트 내의 모든 함수를 다시 호출하지만, useMemo를 사용하면 의존값으로 주어진 값이 변경될 때만 특정 함수를 호출할 수 있습니다. import React, { useState,..

지난 글에서 익스프레스를 활용한 간단한 REST api 서버를 만들었다. 서버만 만들고 마치기는 2% 아쉬우니, 몽고디비(MongoDB)와 연계해 CRUD 동작을 구현해 보자. 이번 글에서는 몽고디비를 클라우드 서비스로 제공하는 MongoDB Atlas 사용법을 정리할 예정이다. 먼저 cloud.mongodb.com/ 으로 들어가 회원가입을 마치면 보이는 아래 화면에서 [New Project] 를 선택해주자. 프로젝트의 이름과 접근 권한을 설정해주면 아래 화면이 나타난다. 아직 우리가 만든건 껍데기에 불과하니 [Build a Cluster] 를 선택해 본격적인 데이터베이스를 만들어 보자. 사용량에 따라 플랜을 선택한 다음 서비스 제공자는 AWS로 설정한 다음, 하단 배너의 [Create Cluster] ..