객체 리터럴을 이용해 객체를 만들 때 key에 대괄호를 사용하는 이유와 용도에 대해 배우다. 0. 글 작성 이유 프로젝트를 진행하던 도중 구글링하다 본 코드에서 객체 리터럴 방식으로 객체를 만들 때 key에 대괄호([key])를 씌우는 것을 봤다. 보통 같으면 이유없이 따라쳐서 코드가 잘 작동 되는지 확인하고 넘길텐데 내 성격은 그렇지않다. 나는 코드를 쓸 때 이 코드를 사용한 이유, 코드의 원리, 의도를 파악해야 직성이 풀린다. 그렇기때문에 key에 대괄호를 씌워서 사용하는 것에 대해 궁금해지기 시작했다. 1. 객체 리터럴 let object = { key1 : 'value', key2 : 'value2' } 객체 리터럴이란 객체를 표현할 때 중괄호 ( { } )를 사용하여 나타내는 방식이다. 객체를 ..
javascript
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcPnVTI%2FbtsmzcyIJyq%2FUPoVGYyWQLTKyDZwo8vSfk%2Fimg.png)
배열 함수의 한 종류인 reduce함수를 배우다. reduce함수는 배열내 요소들로 누적되는 특정 행위를 한다. 특정 행위는 reduce함수 내 괄호안에 함수로 정의할 수 있다. 대표적으로 배열 안의 모든 수의 합을 구할 수 있다. reduce함수의 진행과정은 위의 이미지를 참고하면 된다. 들어간 함수에 따라 배열의 요소에 적용되는 것이 바뀐다. reduceRight는 배열의 가장 뒷부분부터 reduce함수가 진행되는 것이다.
배열 함수의 한 종류인 filter함수를 배우다. 배열내 요소를 filter 조건에 true인 경우만 필터링하는 filter함수이다. Case 1은 함수를 따로 만들어서 filter 함수로 배열 내 각각의 요소들이 조건이 충족하는지 확인한다. Case 2는 filter 함수에서 화살표함수를 사용한 방법이다.
배열함수의 한 종류인 map함수를 배우다. 배열의 모든 요소에 map 괄호 안의 함수를 적용한다. 화살표 함수를 사용해도 되고 따로 함수를 생성해서 함수이름을 적어도 된다. 화살표 함수를 사용할 경우 return 값 반환해야한다. 배열 내의 객체에 map을 쓸 때 특정 key값에만 함수를 적용하고 싶다면 나머지 key값들은 건들 필요가 없으니까, obj(매개변수)가 객체 형태로 함수에 들어가는데 ...obj(매개변수)를 쓰면 나머지 key값들은 그대로 유지된다.
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc3x1bC%2FbtskOTOm5Ei%2FZKWnYE3i3c5j0uIElPx7AK%2Fimg.png)
To do List를 HTML, CSS, JavaScript를 이용해서 만들어보다. HTML, JS Todo List 추가 CSS body{ background-image: url(https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000); background-repeat: no-repeat; background-size: cover; font-family: "Nanum Gothic"; } .container{ background-color: white; /* vh: viewport height로 현재 브라우저 높이를 꽉 채울 때 100vh를 사용 */ height: 10..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcMboh0%2FbtskJrRDeRJ%2FkFySN4vRdFaevs6K1WdHX1%2Fimg.png)
숫자 맞추기 실습을 선생님 코드로 알아보다. 선생님 코드에 내가 생각한 사용자의 편의를 더한 코드이다. 숫자 맞추기 게임 결과값이 여기 나옵니다! 남은 기회:5번 확인 초기화 1. 변수 선언 및 DOM으로 가져오기 let computerNum = parseInt(Math.random()*100)+1; let userInput = document.getElementById("user-input"); let playButton = document.getElementById("play-button"); let resultArea = document.getElementById("result-area"); let chanceArea = document.getElementById("chance-area"); let..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdl6ZGA%2FbtskIRb9Lh3%2FhkVPSn6ul2iadkQUBWzeL1%2Fimg.png)
DOM을 활용하여 HTML태그에 스타일을 적용해 보다. DOM 스타일 속성 실습 스타일 변경 Case 1) 자바스크립트 코드로 스타일 직접 작성하기 // + 버튼에 클래스속성 추가하기 btn.addEventListener("click", () => { // 간단한 스타일 변경은 자바스크립트 코드로 구현 let h1Tag = document.getElementsByTagName("h1")[0]; let btn = document.getElementsByTagName("button")[0]; h1Tag.style.color = "yellow"; h1Tag.style.background = "black"; 간단한 스타일을 적용할 때 사용하는 방법이다. DOM으로 태그네임을 통해서 가져온 태그는 유사배열이니까 ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcQBQFs%2FbtskJqZox96%2FCzzSNCWgoergt90ah67SJ1%2Fimg.png)
변경버튼을 누르면 수지 ↔ 아이유가 되는 코드를 만들다. 변경! 1. 변경버튼의 기능 만들기 document.getElementById("btn").addEventListener("click", () => { // 1 - 1) 변경이라는 버튼을 눌렀을 때 let inputTag = document.getElementById("name") // 1 - 2) 입력값을 변수에 저장 let inputText = inputTag.value console.log("입력", inputText) 변경 버튼을 눌렀을 때 우리는 사용자의 입력값을 받아내야 한다. HTML문서의 btn아이디를 가진 button태그에 이벤트리스너를 걸어서 변경버튼을 클릭했을 때의 기능을 만들려고 한다. 익명 함수에 name아이디를 가진 inp..