즐겁게, 코드

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

이번 글에서는 AWS Lambda 서비스를 활용하는 방법을 다룬다. 바닥부터 배포를 경험해보기 위해 serverless 프레임워크나 AWS 웹 콘솔을 사용하는 대신 aws-cli를 활용하는 방법을 정리한다. 1. aws-cli 설치 실습을 위해 AWS 계정과 aws-cli를 설치해준다. 설치 방법은 운영체제마다 상이하니 AWS 문서 에서 본인 OS에 맞게 설치하자. aws-cli 설치가 끝나면 터미널에서 aws --version 커맨드를 통해 설치가 완료되었는지 확인한다. 2. 사용자 계정 연동하기 다음은 aws-cli와 AWS 계정을 연동하기 위해 [내 보안 자격 증명] 메뉴에 들어간다. 이곳이 IAM 대시보드인데, 사용자 인증 및 권한 부여 등의 기능을 모두 여기서 관리한다. aws-cli와의 연동을..

타입스크립트는 새로운 언어가 아니라 자바스크립트의 슈퍼셋(스타크래프트 오리지널과 브루드 워의 관계라고 보면 된다.) 으로, 프로젝트가 거대해질수록 타입스크립트의 사용은 선택이 아닌 반 필수라고 합니다. 먼저 타입스크립트 프로젝트를 구성하려면 두 패키지가 필요하다. typescript와 ts-node 패키지가 그것으로, 둘 다 npm을 통해 내려받을 수 있다. npm i -g typescript ts-node // 혼자 이리저리 갖고 놀 예정이라면 전역으로 설치해주고 npm i -D typescript ts-node // 프로젝트 배포용으로 사용할 예정이라면 프로젝트 폴더에 설치해주자. typescript 패키지는 타입스크립트로 작성한 코드를 자바스크립트로 바꿔 주며(이를 트랜스파일링이라 한다.), ts-..

리액트에서는 일반적으로 상태를 위에서 아래로밖에 전달할 수 없지만, 컨텍스트(context)를 활용하면 전역으로 상태값을 활용할 수 있게 된다. (리액트의 컨텍스트는 자바스크립트와는 달리 '데이터 저장소' 라고 생각하면 된다.) [context의 기본 사용법] import React, { Component } from 'react' // 컨텍스트(데이터 저장소) 생성 const MyContext = React.createContext(defaultValue); // Provider 생성 ... ----------------------------------------------------------- // 에서 {value => /* context 값을 이용한 렌더링 */} 1. 컨텍스트를 활용하기 위해서..

이상한 일이지만 맥에서 Nodemon을 사용할 때는 포트가 이미 점유중이라는 에러가 출력될 때가 있다. 아무튼 이것 때문에 화가 많이 나서 이리저리 검색을 해봤다. (Nodemon에서 동일한 증상을 호소하는 글이 굉장히 많았는데, 결론부터 말하자면 맥과는 관련이 없고 그냥 Case By Case 같다. --; ) 백그라운드 프로세스를 종료하기 위해 먼저 터미널을 열고 다음 명령어를 입력한다. lsof -i :(포트번호) 나의 경우에는 5000번 포트에서 무슨 일이 일어나는지 알고 싶으니 lsof -i : 5000 을 입력해준다. 그럼 이제 5000번 포트에서 구동중인 프로세스 목록이 출력된다. 이제 프로세스를 종료하기 위해 다음 명령어를 입력한다. kill -9 (PID 번호) 내 경우에는 513, 40..

이벤트는 화면에 커서를 올리거나 클릭, 키보드를 조작하는 등 사용자가 행하는 모든 동작을 의미한다. 오늘은 버블링과 캡처링으로 대표되는 이벤트의 동작 흐름에 대해 알아보자. [사용할 예제 파일] 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..