개발 🐾

📍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 ..

📌모달창 열었을 때 뒤의 화면 고정하기모달창을 여는 클릭이벤트 함수에 적용하기 document.body.style.overflow = "hidden"; 모달창을 닫는 클릭이벤트 함수에 적용하기 document.body.style.overflow = "scroll";overflow 설명   📌 모달창 스크롤바 설정.modal-content { max-height: calc(100vh - 200px); overflow-y: auto;}.modal-content::-webkit-scrollbar { display: none;} 📍overflow-y: auto; : 모달 내부 컨텐츠가 주어진 공간을 넘어가는 경우 세로 스크롤바 생성하기스크롤바 커스텀 설명  참고 :CSS position 설명

구현 상황closest(), getAttribute()을 사용하여 영화 카드를 클릭하면 해당 id를 가져오도록 구현하였다. 그럼 이제 그 id를 갖고 뭘 해야하냐!알맞은 방식으로 변환하여 화면에 띄워야 한다. 제공된 과제 내용에 따르면영화 포스터영화 제목영화 내용평점북마크 추가 버튼으로 모달창을 구현해야 한다. 어제 걷기반에서 배운 find() 메서드를 이용해야 함을 튜터님께 전해들었다👂🏻  find() 메서드란?배열에서 조건에 맞는 하나의 내용(요소 혹은 객체)를 찾는 방법이다.배열 내의 요소가 단일 요소라면 조건과 동일한 요소가 그대로 출력이 되고배열 내 요소가 객체라면 조건에 부합한 요소를 갖고있는 객체가 객체 형태 그대로 출력된다. 📍find 작성법배열.find((배열내의_요소) => { r..

[ textContent / innerText / innerHTML ] 셋은 모두 타겟 요소의 컨텐츠를 가져오거나 설정하는 역할이다. 속성 비교textContent: 단순히 텍스트만 필요하거나, 숨겨진 텍스트까지 포함해야 하는 경우innerText: 사용자에게 보이는 텍스트만 필요할 때innerHTML: 요소 내부에 HTML 태그와 콘텐츠를 동적으로 추가하거나 수정할 때속성HTML 태그 포함 여부숨겨진 텍스트 포함 여부주 용도textContentXO태그를 제거한 순수 텍스트 가져오기innerTextXX화면에 보이는 텍스트 가져오기innerHTMLOOHTML 태그와 함께 가져오거나 수정하기  비교 예시See the Pen Untitled by 채채 (@tknbwzhf-the-looper) on CodeP..

주어진 문제배달팁 계산기 만들기버튼이 눌렸을 때 입력한 음식값에 따른 배달비를 출력해야 한다.  📍세팅 html  배달팁 검색! 결과: 원   문제 풀이 과정 📍생각한 로직1. 버튼 클릭 시 이벤트 주기   1-1. 클릭 시 계산기 결과값을 result에 나타내기2. 계산기 함수 실행하기   2-1. 음식값(foodpr.value)에 따라 배달비 거르기  📍구현한 코드const searchBtn = document.querySelector(".btn");const result = document.querySelector(".result");const foodpr = document.querySelector(".food-price");searchBtn.addEventListener("click", ..