타닥타닥 개발자의 일상

데이터의 출처는 세가지 종류가 있다. 1. 프로그램 그 자체 : 데이터가 소스 코드 자체에 적혀있는 경우 (status messages) 2. UI를 통해서 : 유저의 input이나 DOM으로 쓰여진 데이터(tasks in todo app) 3. 외부의 출처를 통해 : Web API 통해서 불러오는 데이터들 (recipe obejct) 이러한 데이터들은 collection of data 데이터의 집합이며 Data structure 자료 구조체를 가진다. 만약 데이터가 단순한 리스트에 대한 값이라면 👉 Arrays or Set 이 적절하다. 만약 데이터가 key,value 값이 필요하다면👉 Object or Map 이 적절하다. key는 vlaue를 설명하는 역할을 한다. 따라서 value에 추가적 설명이..

이전의 글을 통해서 Map이라는 자료 구조를 배워봤다. 그렇다면 Map을 어떻게 활용할수 있을까? 아래 코드와 같이 question이라는 이름을 가지는 Map 형태의 자료 구조가 있다고 하자. const question = new Map([ ['question', 'What is the best programming language in the world?'], [1, 'C'], [2, 'Java'], [3, 'JavaScript'], ['correct', 3], [true, 'Correct 😜'], [false, 'Try again'], ]); 우리가 만들고 싶은 앱은 1. prompt창에서 "What is the best progamming language in the world?' 라는 질문이 뜨고..

자바스크립트에는 다양한 형태의 구조체가 있다. array는 element별로 인덱스가 있고 인덱스 별로 요소를 구분, 외부에서 요소를 호출도 가능하다. 단점은 요소별로 중복된 값이 있을때 중복 값을 제거하거나 중복된 인수의 값을 구하기가 번거롭다는 점이다. Set는 중복된 element를 여러번 추가해도 고유한 element 하나만 요소로 가지는 특징이 있다. 따라서 배열내의 중복값을 제거하거나 고유한 요소의 수를 파악할때 좋은 구조체이다. 단점은 Set에는 인덱스가 없다. 따라서 외부에서 Set내의 element를 key값을 통해서 호출하지 못한다. array와 Set의 아쉬운 점을 보완하는 구조체가 바로 Map이다. 그렇다면 Map의 사용 사례를 알아보자. const rest = new Map(); ..

array를 만들다보면 array 내부의 element들이 중복되는 경우가 있다. 만약 array 내에서 중복되는 값을 제외한 겹치지 않는 element들만 알고 싶거나, 중복되지 않는 고유한 element의 개수를 알고 싶다면, 이 중복 element 를 어떻게 처리해야 하나 멈칫 할 것이다. 그때는 Set를 이용하면 쉽게 배열의 중복값을 제거할 수 있으며 고유한 element 의 갯수를 알수 있다. 우선 Set이 어떤 것인지부터 알아보자. const ordersSet = new Set([ 'Pasta', 'Pizza', 'Pizza', 'Risotto', 'Pasta', 'Pizza', ]); 위와 같이 ordersSet라는 Set가 있다고 하자. 이 세트에는 Pizza와 Pasta라는 중복되는 요소..

const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']; const openingHours = { [weekdays[3]]: { open: 12, close: 22, }, [weekdays[4]]: { open: 11, close: 23, }, [weekdays[5]]: { open: 0, // Open 24 hours close: 24, }, }; 위와 같은 obejct가 있다고 하자. openingHours라는 object는 value가 또 obejct 로 구성된 복잡한 object다. 해당 오브젝트에서 원하는 key,value 값만 쏙쏙 뽑아서 쓰고 싶으면 어떻게 할까? 바로 property name, key, value를 이용하면 된..

아래와 같은 코드가 있다고 하자. 아래의 코드에서 object restaurant는 자신의 object 외부에있는 또다른 object인 openingHour를 불러와서 key와 value를 구성하고 있다. 'use strict'; const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']; const openingHours = { [weekdays[3]]: { open: 12, close: 22, }, [weekdays[4]]: { open: 11, close: 23, }, [weekdays[5]]: { open: 0, // Open 24 hours close: 24, }, }; const restaurant = { name: 'Classico..

openinghours라는 object와 restaurnat라는 object가 각각 따로 존재한다고 가정하자. const openingHours = { thu: { open: 12, close: 22, }, fri: { open: 11, close: 23, }, sat: { open: 0, // Open 24 hours close: 24, }, }; const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Focaccia', 'Bruschetta', ..

restuarnt라는 object에 있는 속성값에 있는 value들을 for 문을 이용해서 하나하나 출력하고 싶다고 하자. const restaurant = { starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], } 그렇다면 menu라는 변수를 먼저 만든다. 그리고 spread연산자를 사용해 starterMenu 속성과 mainMenu 속성에 있는 값들을 모두 menu라는 변수에 집어넣는다. const menu = [...restaurant.starterMenu, ...restaurant.mainMenu]; 여기서 단순히 menu에 모두 들어간 값만 f..

주사위를 굴려 나온수를 합산, 주사위를 굴릴때 1이 나오면 자가 차례에서 합산된 수가 0이 되고 다른 선수에게 차례가 넘어감. 주사위가 1이 나오기 전에 나온 점수를 합산하고 다른 선수에게 넘기려면 hold를 누름. hold를 누를시 차기 차례에서 나온 주사위 수가 합산되며 다른 선수에게 차례가 돌아감. 그런식으로 게임을 해서 먼저 합해진 수가 100이 넘는 사람이 승리. index.html Player 1 43 Current 0 Player 2 24 Current 0 🔄 New game 🎲 Roll dice 📥 Hold style.css @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); * { margin: 0; p..

JS와 연결된 HTML INDEX Show modal 1 Show modal 2 Show modal 3 //클래스 이름 옆에 hidden을 붙여 modal 클래스를 숨긴다. × I'm a modal window 😍 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol..