성장일기

🤔 문제 바닐라 자바스크립트로 프로젝트를 진행하던 중 html에 자바스크립트 파일을 연결하던 부분을 변경하게 되었다. 단순히 타입을 모듈로 변경한 것이었다. 그런데 이렇게 타입을 지정하니까 js 파일에서 삽입한 코드의 이벤트 함수를 인식하지 못했다. 버튼을 눌러도 아무런 반응이 없었다. // box 안에 버튼 넣어주기 const box = document.querySelector(".box"); box.innerHTML = ` Click! `; // 버튼의 이벤트 함수 const handleClick = () => { console.log("hi"); }; 🔑 해결 이 문제는 전역에서 해당 handleClick 함수를 찾지 못해 생기는 것이었다. 타입을 모듈로 지정하면 해당 파일만의 스코프가 만들어진다...

문제상황 let arr = [1, 2, 3] return arr.reduce((sum, e) => sum++, 0); 예상했던 반환값은 arr의 길이인 3인데, 0인 반환됐다. sum++를 ++sum로 바꿔쓰니 예상대로 값이 나왔다. 증감 연산자가 원인이었다. 해결 arr.reduce() 속 누산기는 콜백 함수의 반환값을 누적한다. 함수의 반환값을 sum++로 쓸 경우, 기존 변수값을 반환한 후에 값에 +1을 한다. 하지만 누산기는 반환값을 누적하므로 +1 연산이 되지 않는 것이다. arr.reduce()의 콜백함수에서 증감 연산자를 사용하려면 ++sum과 같이 전위 연산자를 사용하거나 sum += 1로 더하기를 곧바로 실행해줘야 한다.

🤔 문제 상황 [[], [], []] 와 같은 2차원 배열을 만들기 위해 코드를 작성하는 중이었다 let arr = new Array(3).fill([]);위와 같이 Array() 생성자로 배열을 만들고 array.fill()을 이용해 안을 배열로 채웠다. 그리고 나서 arr[0]에만 숫자 1을 추가하려했다. let arr = new Array(3).fill([]); arr[0].push(1); console.log(arr); // [[1], [1], [1]]그런데 결과는 내 예상 밖이었다. 모든 배열에 숫자가 추가된 것이다. 처음에는 new Array() 생성자가 원인이라고 생각했으나 fill()이 원인이었다. ✅ array.fill() arr.fill(value[, start[, end]]) valu..

🤔 BEM이란? Block / Element / Modifier 세 가지로 구성된 class이름을 짓는 방법 📌 미사용시 Find Kakao Account of Password #login-form input:not([type="submit"]) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); transition: border-color 0.3s ease-in-out; } #login-form input[type="submit"] { background-color: var(--yellow); cursor: pointer; padding: 20px 0; border-radius: 5px; }📌사용시 welcome to kakaoTalk If you have a Kakao..

🤔 문제점 #login-form input:focus { border-color: var(--yellow); } #login-form input:not([type="submit"]) { border-bottom: 1px solid rgba(0, 0, 0, 0.2); transition: border-color 0.3s ease-in-out; } 아래 transition 코드가 작동하지 않는 상황 📌 원인 css의 cascading 중요도 명시도 코드 순서 세 번째 때문에 문제가 생겼다 border-bottom 이 구성되기도 전에 색상 설정(input:focus)이 작성되었기 때문 input:focus를 먼저쓰면 색을 설정해줘도 border가 없으니 적용이 불가능하고, 그 이후에 not으로 border-b..

문제 세 개의 프로퍼티 name과 surname, id를 가진 객체 user가 담긴 배열이 있습니다. name과 surname을 조합해 fullName을 만들고, 이를 이용해 두 개의 프로퍼티 id와 fullName을 가진 객체를 담은 새로운 배열을 반환해주는 코드를 작성해보세요. 예시 let john = { name: "John", surname: "Smith", id: 1 }; let pete = { name: "Pete", surname: "Hunt", id: 2 }; let mary = { name: "Mary", surname: "Key", id: 3 }; let users = [ john, pete, mary ]; let usersMapped = /* 여기에 코드를 작성하세요. */ /* us..

문제 기능을 "확장"할 수 있는 계산기 객체를 만들어 주는 생성자 함수 Calculator를 작성해봅시다. Calculator는 두 단계를 거쳐 만들 수 있습니다. 첫 번째 단계는 "1 + 2"와 같은 문자열을 받아서 “숫자 연산자 숫자” 형태(공백으로 구분)로 바꿔주는 메서드 calculate(str)를 구현하는 것입니다. 이 함수는 +와 -를 처리할 수 있어야 하고, 연산 결과를 반환해야 합니다. 예시 let calc = new Calculator; alert( calc.calculate("3 + 7") ); // 10 두 번째 단계는 계산기가 새로운 연산을 학습할 수 있도록 해주는 메서드 addMethod(name, func)를 추가해 주는 것입니다. 연산자 이름을 나타내는 name과 인수가 두개인..

문제 "my-short-string"같이 여러 단어를 대시(-)로 구분한 문자열을 카멜 표기법을 사용한 문자열 "myShortString"로 변경해주는 함수를 작성해보세요. 대시는 모두 지우고 각 단어의 첫 번째 글자는 대문자로 써주면 됩니다. camelize("background-color") == 'backgroundColor'; camelize("list-style-image") == 'listStyleImage'; camelize("-webkit-transition") == 'WebkitTransition'; 힌트: split을 사용해 문자열을 배열로 바꾼 다음 join을 사용해 다시 합치면 됩니다. 나의 풀이 function camelize(str) { // arr = [my, loving, c..

문제 아래 조건을 만족하는 함수 sumInput()을 작성해 봅시다. prompt 창을 띄워 사용자에게 숫자를 입력해 달라고 요청한 후, 입력받은 값들을 배열에 저장합니다. 숫자가 아닌 값, 혹은 빈 문자열을 입력하거나 'Cancel' 버튼을 누르면 질문을 멈춥니다. 배열 요소의 합을 계산하고 리턴합니다. 주의: 숫자 0은 유효한 숫자이므로, 사용자가 0을 입력하더라도 질문이 멈추지 말아야 합니다. 나의 풀이 prompt 창으로 숫자를 입력받아, 값들을 배열에 저장 숫자가 아닌 값 / 빈 문자열 ('') / cancle 버튼 (null) 을 입력 시 질문이 멈춤 ('0' 입력시 멈추면 안됨) 배열 요소의 합을 계산하고 리턴 function sumInput() { let array = []; let val..

문제 str의 길이를 확인하고, 최대 길이 maxlength를 초과하는 경우 str의 끝을 생략 부호 ("…")로 대체해주는 함수 truncate(str, maxlength)를 만들어봅시다. 새로 만든 문자열의 길이는 maxlength가 되어야 합니다. 함수의 반환 값은 원하는 길이로 줄여진 문자열이 되어야 합니다. 예시 truncate("What I'd like to tell on this topic is:", 20) = "What I'd like to te…" truncate("Hi everyone!", 20) = "Hi everyone!" 나의 풀이 function truncate(str, maxlength) { if (str.length > maxlength) { let result = str.s..