쌓고 쌓다

로그인 여부에 따라 html 파일의 일부 태그들이 변경되는 상황이다. 예를 들어 로그인하기 전에는 만 존재한다. 로그인한 후에는 위의 id="login"을 가지는 태그는 없어지고 만 가지게 된다. 그런 이유로 아래의 js 파일에서 문제가 발생했다. let loginButton = document.querySelector("#login"); let logoutButton = document.querySelector('#logout'); loginButton.addEventListener('click', () => { window.location = 'https://kauth.kakao.com' }) logoutButton.addEventListener('click', () => { window.locati..

먼저 코드를 한번 읽어보자. 간단히 미리 설명하자면 버튼 클릭 이벤트 등록시 등록 당시의 sequence의 값을 이용해 deleteButtonAndPatch 함수를 수행하길 원한다. let sequence = 0; function example() { sequence++; let btn = document.createElement('button'); btn.addEventListener('click', () => { deleteButtonAndPatch(sequence); }) } function deleteButtonAndPatch(idx) { console.log(idx); } 버튼 태그인 btn에 클릭 이벤트를 등록했다. 클릭시 이벤트 등록 당시의 sequence 값을 deleteButtonAndP..

먼저 상황은 이랬다. 사용자는 중복된 값(여행지)을 선택할 수 있다. 선택한 값 리스트중 원하는 요소(여행지)를 삭제할 수 있어야한다. 중복된 값을 선택할 수 있기에 현재 삭제를 원하는 요소를 가지고 현재 선택된 요소들을 돌며 비교 연산으로 삭제하면 먼저 만나는 값을 삭제해버리는 상황이다. 딱 원하는 순서의 요소를 삭제할 수 있어야하는게 원하는 기능이다. let selectPlaces = []; // 선택된 여행지 여행지는 리스트에 보관하고 있으며 추가와 삭제가 자유로워야하고 삭제한 순번에 맞춰 리스트의 인덱스 값도 삭제해야하는 상황이다. 먼저 여행지 추가시 보이는 화면의 HTML에 추가하고 선택된 여행지 리스트에 담아주는 코드이다. function addPlace(addPlace) { selectPla..

노드를 공부하고 있는데 아래의 코드에서 의문이 생겼다. pipeline.mjs import { pipeline } from 'stream/promises' import zlib from 'zlib' import fs from 'fs' await pipeline( fs.createReadStream('./readme.txt'), zlib.createGzip(), fs.createWriteStream('./readme.txt.gz') ) import { pipeline } from 'stream/promises'를 다음 줄의 import zlib from 'zlib'처럼 왜 작성 안 했을까? import pipline from 'stream/promises'로 작성해도 모듈의 메소드를 가져오는 건 동일할 것..

Map 주요 메소드 및 프로퍼티 new Map() : 맵 생성 map.set(key, value) : key와 함께 value 등록 map.get(key) : key에 해당하는 value를 반환. ( key가 존재하지 않으면 undefined 반환 ) map.has(key) : key가 존재하면 true, 존재하지 않으면 false 반환 map.delete(key) : key와 함께 value 삭제 map.clear() : 맵의 모든 요소 삭제 map.size : 요소들의 개수 반환 맵 생성 - new Map() const map = new Map() 맵을 사용하기위해 맵 객체를 생성합니다. 삽입 - map.set(key, value) map.set(1, 'number 1') map.set('1', 's..

널 병합 연산자(??) 왼쪽 피 연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리연산자이다. falsy 값 (0, '', false, NaN, null, undefined)일 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR(||)와는 대조된다. || 연산자는 falsy 값이면 뒤로 넘어감. const a = 0; const b = a || 3; console.log(b) // output : 3 ?? 연산자는 null과 undefined일 때만 뒤로 넘어감. const a = 0; const b = a ?? 3; console.log(b) // output : 0 const e = null; const f = e ?? 3; conso..

플레이 화면 API를 써보고 싶어서 행맨 게임을 만들어 봤습니다. 확실히 비동기 처리를 잘해야 문제없이 돌아가더라고요... 단순히 데이터를 가져와 쓰는것이 아닌 가져오는 데 걸리는 시간과 그 이후의 과정들을 잘 연결하는 게 문제였습니다. 그 외에도 많은 고비가 있었다... 1. 단어를 가져오는데 시작 버튼을 클릭을 연속으로하면 두 개의 단어가 붙어 구성되는 문제가 있었다. 시작 버튼을 클릭하면 데이터를 가져올때까지 시작 버튼을 비활성화했다. 2. 문자열로 제공받은 단어를 이용하면 문자 하나하나를 다루는데 불편함이 있어 배열에 담는 과정을 포함함. 3. 데이터를 가져오는데 시간이 걸려 그 전에 단어를 가져온 것처럼 실행이 될 때 문제가 있어 비동기 처리함. 위의 두 과정은 아래에서 다룸. 주요 기능 및 구..

구조 분해 할당 구조 분해 할당을 사용하여 객체와 배열로부터 속성이나 요소를 쉽게 가져올 수 있다. candyMachine 객체 const candyMachine = { status: { name: 'machine1', count: 5 }, getCandy() { this.status.count-- return this.status.count } } candyMachine의 getCandy, status.count 속성을 같은 이름의 변수에 대입한다면 아래의 코드로 작성한다. var getCandy = candyMachine.getCandy var count = candyMachine.status.count 이것을 구조 분해 할당 방법을 이용하여 아래와 같이 작성이 가능하다. const { getCand..