성장일기

📌 모달 구현 1. 모달의 오픈 여부를 알 수 있는 상태값이 있는 slice 만들기 // ModalSlice.jsx import { createSlice } from '@reduxjs/toolkit'; const initialState = { modal: false, }; export const modalSlice = createSlice({ name: 'modal', initialState, reducers: { showModal: (state) => { state.modal = true; }, closeModal: (state) => { state.modal = false; }, }, }); export default modalSlice.reducer; export con..

🤔 문제 바닐라 자바스크립트로 프로젝트를 진행하던 중 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..