🟨 JavaScript

[제로초] Promise와 동기/비동기 관련 짤막 키워드정리

https://sunshineyellow.tistory.com/64 위는 같이 볼만한 드림코딩 콜백지옥 탈출 Promise 기초 게시글. 제로초 인간JS엔진 보다가 추가적인 키워드 문장 정리가 필요해 작성한다. Promise란? 실행은 됐는데!!! 결과값을 나중에 쓸 수 있다. "실행은 됐는데"가 중요. 그래서 new Promise 안의 익명함수는 동기적으로 실행이 된다. 동기비동기 실행순서 관련해서 아래 코드가 중요하다. 기억해 놓자. let a = 2; const p = new Promise((resolve, reject) => { console.log('실행1'); setTimeout(() => { a = 5; console.log('실행3', a); resolve(a); }, 0); }); // ..

JavaScript 정리 : this (2) 화살표함수에서의 this

여기서 잠깐🔔 화살표 함수의 특징 생성자로 사용할 수 없음 스스로의 this, argument를 가지지 않음 return하지 않아도 값이 반환됨 (본문이 여러 줄로 이루어진 경우는 제외) 화살표 함수의 this는? this = 함수가 정의된 스코프의 this를 가리킴 (생성될 때 this가 결정되며, 화살표함수가 어떻게 사용/호출되든 this는 변하지 않는다.) const obj = { name: '철수', sayName: function() { const innerMethod = () => { return `${this.name}, 안녕!`; }; console.log(innerMethod()); } }; obj.sayName(); // 철수, 안녕! → 그러므로 객체의 메소드는 화살표 함수로 정의하지..

JavaScript 정리 : this (1) 상황별 this

JavaScript에서 this가 가리키는 객체는 정해져 있지 않으며, 호출될 때 결정된다. 아래처럼 다양한 상황에서 this가 어떤 객체를 가리키게 되는지 알아보자. (화살표함수에서의 this는 다음 글에서 정리한다.) 목차 전역 컨텍스트 (Global scope) & 함수 호출 객체에 속한 메서드 호출 객체에 속한 메서드의 내부 함수 호출 함수를 메서드로 호출 (call, apply, bind) 생성자 함수 호출 클래스 이벤트 핸들러 "use strict" 모드 1. 전역 컨텍스트 (Global scope) & 함수 호출 this = 전역 객체 (브라우저에서는 window) console.log(this); // 전역 객체 (브라우저에서는 window) function myFunction() { co..

문제해결 : hash값 받아서 scroll 조정하기

상황 A 페이지에서 a태그 여러개에 링크를 걸어서 누르면 B페이지의 각각 다른 위치로 연결되게 하려고 한다. (여기서 A페이지와 B페이지는 각기 다른 HTML이다.) A페이지 제목1 제목2 제목3 제목4 ... B페이지 컨텐츠 제목 1 컨텐츠 ... 컨텐츠 제목 2 컨텐츠 ... 컨텐츠 제목 3 컨텐츠 ... 컨텐츠 제목 4 컨텐츠 ... 컨텐츠 제목 5 컨텐츠 ... ... 문제 항상 상단에 css가 fixed로 고정되는 header가 있어서 링크로 이동했을 시 원하는 정확한 위치의 처음부터 보이지 않고 중간부터 보이는 현상이 있었다. 조건 A페이지에서 a태그를 누르면 B페이지의 해당 해시아이디를 가진 h4가 header 바로 아래 오도록 스크롤이 이동되어야 한다. 해결 B페이지에서 아래 코드를 실행시..

자동화 : 팝업 높이 계산해서 아래로 쌓기

상황 매번 새로운 팝업이 올라올 때마다 1200px 아래의 팝업 top값을 그 위 팝업의 높이값만큼 수동으로 업데이트하고 있던 상황이었다. 위의 형태의 팝업이 있으며, 각 팝업은 absolute로 표시된다. 팝업 ID 번호는 유연하며, ID 번호는 항상 변경될 수 있다. (관리자사이트에서 사용자인 클라이언트가 맘대로 써넣는다) 각 팝업이 브라우저 너비 1200px 이하로 떨어지면 첫 번째 팝업이 위에서 아래로 순서대로 배치된다. 하단 배치는 css top:npx로 제어되며, 첫 번째 팝업은 top:60px로 시작하고 두 번째 팝업은 top:(위에 있는 팝업의 높이 값 + 20px)로 계산되어야 한다. 1차 해결 const popups = document.querySelectorAll('[id^="pop_..

Level 3 : 9 장바구니버튼 구현하기(localStorage, array, forEach, JSON)

9. 장바구니 기능 만들기 조건 장바구니 버튼을 누르면 localStorage에 배열 형태로 상품이름이 담기고, cart.html을 따로 만들어 해당 html에 상품이 뿌려지도록 만들기 풀이 상품리스트 // 여러개의 장바구니 버튼들을 buttonCarts 변수로 선언 let buttonCarts = document.querySelectorAll('.btn-cart'); // buttonCarts 안의 각각의 buttonCart elements들에게 함수를 실행 buttonCarts.forEach(function(buttonCart){ // buttonCart를 클릭하면.. buttonCart.addEventListener('click', function(){ // localStorage의 cart를 ke..