개발 🐾

map 메소드map은 똑같은 배열 요소의 개수를 갖는 새로운 배열을 만든다. 즉, 기존 배열 속 요소(객체)가 3개였다면 새롭게 만든 배열의 요소도 3개이다.결과값이 undefined 라고 해도 똑같이 3개가 나온다.[1, 2, 3] // map 메소드로 1씩 더한 새로운 배열[2, 3, 4]const tutors = [ { name: "최원장", age: 20, }, { name: "김병연", age: 21, }, { name: "윤창식", age: 22, },];// map 메소드로 나이를 10살 늘린 결과const tutors = [ { name: "최원장", age: 30, }, { name: "김병연", age: 31, },..

filter 메소드 filter 메소드는 조건에 맞는 데이터를 모두 찾을 때 사용한다. 📍기본 형식find와 마찬가지로 찾으려면 조건이 필요하다.return은 필수이고 return 뒤에 조건을 작성한다.조건에 맞는 데이터의 개수에 상관없이 배열로 출력된다.배열.filter((배열내의_요소) => { return 조건})  예시const numbers = [1, 2, 3, 4, 5];const 삼보다큰수들 = numbers.filter((number) => { return number > 4;});console.log(삼보다큰수들); // [4, 5]const products = [ { 브랜드: "수아레", 상품명: "케이블 카라 반팔 니트 - 6 Color", 가격: 39900, ..

find 메소드 find의 뜻은 대부분이 알고 있듯 '찾다'단어의 뜻 그대로 데이터 하나를 찾기 위한 메소드이다. 📍기본 형식데이터 하나를 찾기 위해서는 조건이 필요하다.return은 필수이고 return 뒤에 조건을 작성한다.요소 하나 혹은 객체 하나가 출력된다.배열.find((배열내의_요소) => { return 조건});  예시const numbers = [1, 2, 3, 4, 5];const 삼보다큰수하나 = numbers.find((number) => { return number > 3});console.log(삼보다큰수하나); // 4const products = [ { 브랜드: "수아레", 상품명: "케이블 카라 반팔 니트 - 6 Color", 가격: 39900, 평..

우선,for문이란?한마디로 반복문이다.변수를 할당하여 조건에 따라 작성한 코드를 하나하나 반복하여 실행한다.const a = [1, 2, 3]for(let i = 0; i 234 위와 같은 것이 for문의 기본적인 형식으로 대부분 ()안의 내용이 비슷하다.매번 이 조건을 작성하는 것은 비효율적이기 때문에 forEach를 활용한다. 그렇다면,forEach 반복문이란?앞서 본 for문이랑 비슷하지만 조건과 인덱스 작성 등이 필요 없다. 📍기본 형식 1. 배열 뒤에 점(.)을 찍고 forEach 함수를 실행한다.배열.forEach(); 2. forEach의 파라미터 (괄호 안)에 콜백함수를 작성한다.    콜백함수란? 함수의 파라미터에 들어가는 함수배열.forEach(() => {});// 혹은 배열.for..

비동기 1편 - promise비동기 2편 - async & await [🍦] 손님~ 진동벨로 알려드릴게요! (1) - promisePromise fetch는 Promise를 return 하는 함수이다. 📍fetch란? 외부에서 데이터(정보)를 가져오는 함수 📍Promise가 아닌 경우와 비교하기 (document.querySelector("선택자") vs fetch("주소")) document.querySelectococo910.tistory.com [🍦] 손님~ 진동벨로 알려드릴게요! (2) - async, await비동기 1편 - promise [🍦] 손님~ 진동벨로 알려드릴게요! (1) - promisePromise fetch는 Promise를 return 하는 함수이다. 📍fetch란?..

비동기 1편 - promise [🍦] 손님~ 진동벨로 알려드릴게요! (1) - promisePromise fetch는 Promise를 return 하는 함수이다. 📍fetch란? 외부에서 데이터(정보)를 가져오는 함수 📍Promise가 아닌 경우와 비교하기 (document.querySelector("선택자") vs fetch("주소")) document.querySelectococo910.tistory.com fetch는 비동기 함수이기 때문에 로직이 함께 시작해서 먼저 처리되는 것을 먼저 반환한다.아래 예시 사진을 통해 직관적으로 이해할 수 있다.  예를 들어 일의 순서가 아래와 같다고 하자.0. 시작한다고 알려주기1. TMDB 정보 가져오기2. TMDB 정보를 기반으로 UI 만들기3. 완성됐다..

📍localStorage란?서버에 저장할 정도로 중요하진 않은 정보를 저장하기 위해 사용중요하진 않은 정보란 정보가 날라가도 상관은 없지만 있으면 편리한 정보ex) “오늘 그만 보기” 버튼 클릭 여부DB를 사용하지 않기 때문에 연습용으로 로컬스토리지에 저장, 삭제하는 연습 📍localStorage 다양한 사용법로컬스토리지에 데이터 추가하기 or 수정하기  localStorage.setItem("상품명", "멋있는 셔츠")  로컬스토리지에서 데이터 가져오기localStorage.getItem("상품명")// "멋있는 셔츠" 로컬스토리지의 데이터 삭제하기localStorage.removeItem("상품명")   📍로컬스토리지의 문제점1. 저장 및 불러오기 시 데이터가 문자열로만 저장된다. 2. Arra..

📍이벤트 버블링이란?거품이 계속해서 커지는 것처럼 내부에 발생한 이벤트가 외부러 뻗어나가는 현상이다. 예시로 아래 코드를 살펴보겠다.더보기더보기모달창 세팅[index.html] 본문 모달열기 로그인하기 닫기  [styles.css].modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: gray; opacity: 0.8; /* 추가 */ display: none; padding-top: 100px;}.modal-content { width: 200px; height: 200px; background-color: white; padding: 20p..

변수 : 블록 스코프 문제다음을 수행하세요:1. blockScopeTest 함수 내부에 블록({})을 생성하세요.2. 블록 내부에 let 키워드로 변수 w를 선언하고 값 1을 할당하세요.3. 같은 블록 내부에 var 키워드로 변수 u를 선언하고 값 2를 할당하세요.4. 블록 외부에서 w에 접근하여 콘솔에 출력하세요. (ReferenceError가 발생해야 합니다.)5. 블록 외부에서 u에 접근하여 콘솔에 출력하세요. (값 2가 출력되어야 합니다.) 📍구현한 코드function blockScopeTest() { { let w = 1; var u = 2; } // 블록 외부에서 변수 접근 console.log(w); console.log(u);}분명 맞게 작성한 듯 한데 계속 오류가 났..

Promise fetch는 Promise를 return 하는 함수이다. 📍fetch란? 외부에서 데이터(정보)를 가져오는 함수 📍Promise가 아닌 경우와 비교하기 (document.querySelector("선택자") vs fetch("주소")) document.querySelector()const 요소 = document.querySelector(".클래스이름");console.log(요소) // html 요소가 나온다. // ex) 변수에 담으면 원하는 것이 나온다. fetch()const response = fetch("https://jsonplaceholder.typicode.com/todos/1");console.log(response);이상한 데이터가 나온다. 이게 바로 promise ..