나의 개발일지

클로저란 함수와 함수가 선언되었을 때의 렉시컬 환경의 조합클로저란, 자신이 선언된 당시의 환경을 기억하는 함수 클로저란, 생명 주기가 끝난 외부 함수의 변수에 접근할 수 있는 내부 함수 function closure() { var name = heewon"; // name은 클로저에 의해 생성된 지역 변수 function displayName() { // displayName() 은 내부 함수이며, 클로저다. console.log(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName();}closure(); clousure()은 지역 변수 name과 함수 displayName()을 생성 displayName()은 clousure() 안에 정의된 내부함수이며 ..

이벤트 버블링(Event bubbling) 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다. 위 그림에서 보면 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가서 window까지 이벤트를 전파하는 것이다. 마치 거품처럼! span 태그를 누르면 span -> p -> div -> main -> body 가 차례대로 콘솔에 찍힌다. 버블링을 마주하고 싶지 않다면?! 버블링을 강제로 중단시키는 방법도 존재한다. 이벤트 객체의 메서드인 event.stopPropagation()을 사용하면 된다. 하지만 꼭 필요한 경우를 제외하고는 버블링을 막아선 안된다. 아키텍처를 잘 고..

복습이 필요할 것 같아서 별코딩의 비동기 시리즈 공부 시작! //로그인 function login(username, callback) { setTimeout(() => { callback(username); }, 1000); } // login("희원", (username) => { // console.log(`${username}님, 안녕하세요`); // }); //장바구니에 넣기 function addToCart(product, callback) { setTimeout(() => { callback(product); }, 1000); } // addToCart("감자", (product) => { // console.log(`${product}를 장바구나에 넣었습니다.`); // }); //결제하기 ..

분명 배웠던 건데 잊고 있던 연산자를 사용하게 되어 정리를 해보겠다 ! : 입력값을 불리언으로 변환하는데, true이면 false로, false이먄 true로 값을 반대로 반환한다. !! : 불리언 타입으로 명시적으로 형 변환한다 !true // false !!true // true !false // true !!false // false !{} // false !!{} // true ![] // false !![] // true !null // true !!null // false !'text' // false !!'text' // true

//스크롤 만들기 //document 한 단계 위에 있는 window window.addEventListener("scroll", function () { // 현재 위치 확인 scrollY if (scrollY >= 100) { document.querySelector(".up-button").style.display = "block"; // console.log("현재위치", scrollY); } else { document.querySelector(".up-button").style.display = "none"; } }); document.querySelector(".up-button").addEventListener("click", function () { window.scrollTo({ top..

긴가민가한 부분을 다시 공부해보았다 예제를 통해 공부하니 확실히 이해되는 느낌이 든다! // foreach와 map 차이점 // 배열의 각 요소의 제곱값 구하기 //forEach 사용 const numbers = [1, 2, 3, 4, 5]; const squaredNumbersForEach = []; numbers.forEach((number) => { squaredNumbersForEach.push(number * number); }); console.log(squaredNumbersForEach); // forEach 사용 결과값 : [1, 4, 9, 16, 25] // forEach는 각 요소를 순회하면서 제곱한 값을 squaredNumbersForEach 배열에 추가한다. // forEach는 ..

setTimeout으로 광고창 닫기 setTimeout은 일정 시간이 지난 후 함수를 실행 시킨다 광고창이다! 5초 후에 닫힙니다 const adBox = document.querySelector(".ad-box"); // 광고창이 n초 후에 사라지게 하기! setTimeout(() => { adBox.style.display = "none"; }, 5000); display="none"을 사용하여 사라지게 만든다! setInterval로 타이머 만들기 setInterval은 일정 시간 간격을 두고 함수를 실행시킨다 광고창이다! 3초 후에 닫힙니다 // 설정한 n초에서 점점 숫자가 줄어들다 0이 되면 광고창이 사라진다! const adbox = document.querySelector(".ad-box")..

개인과제는 물론 팀과제 때에도 fetch라는 함수를 그냥 썼지, 분석하고 공부하고 쓴 것이 아니라서 오늘 전반적인 내용을 이해하고 과제에는 쓰지 않았던 await을 공부하며 TIL을 작성할 계획이다. 우선 비동기 처리라는 의미를 알아보자 비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 만약 무수히 많은 데이터를 요청했을 때, 그 서버에서 언제 응답을 줄지도 모르는데 마냥 기다리기만 한다면 실행하고 기다리고, 실행하고 기다리는 것이 반복되고 이것은 시간이 오래 걸릴 수 밖에 없는 비효율적인 구조가 된다. 그래서 비동기 처리가 필요하다! 자바스크립트에서 fetch는 리소스를 비동기 요청을 할 수 있다. 주로 API를 호출하고..

map() 함수 배열을 순회하면 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행한다. // 각 숫자를 2배로 만들어 새로운 배열 생성 const numbers = [1, 2, 3, 4, 5]; const doubleNumbers = numbers.map(function (num) { return num * 2; }); console.log(doubleNumbers); // 각 숫자의 제곱 값을 가지는 새로운 배열 생성 const numbers1 = [1, 2, 3, 4, 5]; const squaredNumbers = numbers1.map(function (number) { return number * number; }); console.lo..

팀프로젝트 진행 중, 메인페이지에서 상세페이지로 넘어갈 때 객체를 불러오는 것까지는 구현했다(물론 튜터님의 도움을 받아서 ^^) 하지만 화면에 정보가 뜨지 않고 콘솔창에 오류가 발생했다고 떠서 역시나 도움을 청했다 작성된 코드 ▼ const selectedMoive = results.filter((item) => { if (item.id == clickId) { return true; } else { return false; } console.log(item.id); }); console.log(selectedMoive); const card = document.createElement("div"); card.classList.add("movieBox"); card.innerHTML = ` ${title..

// 1. 다음 배열에서 5보다 큰 숫자만 출력하세요. const arr = [1, 4, 2, 3, 10, 15, 0]; const result1 = arr.filter(function(val){ return val > 5; }) console.log(result1) // 2. 다음 배열의 모든 값을 출력하세요 const arr01 = [1, 2, 3, 4, 5]; for(let a = 0; a < arr.length; a++) { console.log(arr01[a]); } //foreach문을 쓴 버전!! const arr1 = [1, 2, 3, 4, 5]; arr1.forEach(function(val){ console.log(val); }) // 3-1. 값과 인덱스값 출력하기 const arr0..

// [요구사항] // 아래 함수 multiply는 두 인자를 받아 곱한 값을 반환합니다. 해당 함수를 완성하십시오. // [코드] function multiply(a, b) { return a * b; } console.log(multiply(2, 3)); // [테스트] // multiply(2, 3)은 6을 반환해야 합니다. // ----------------------------------------------------- // [요구사항] // 주어진 숫자 배열의 모든 요소를 더하는 함수 sumArray를 작성하세요. // [코드] const numbers = [1, 2, 3, 4, 5]; function sumArray(total, number) { return total + number; }..

입력 요소 값 읽기 , 처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있는데 여기서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근한다. 차이점 * 요소의 텍스트에 접근하고 싶다면 --> textContent 또는 innerText * 사용자가 요소에 입력한 값에 접근하고 싶다면 --> value 입력 요소의 value에 접근하여 할 수 있는 것은 크게 두 가지이다 // 읽기 // 대상 요소의 사용자 입력값을 읽어 콘솔에 출력 console.log(target.value) // 쓰기 // 대상 요소의 사용자 입력값을 "변경값"으로 바꾸기 targer.value = "변경값" 클릭이벤트 발생 시 입력값 출력 const textInput = document.getElementById("..

addEventListener onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는것보다 현대적인 방법은 addEventListener 메소드를 이용하는 것!! 예시) //원래 사용하던 방식 Target.onclick = function() {} // addEventListener의 방식 Target.addEventListener('click', function(){}) 이벤트 객체 추가적인 기능과 정보의 제공을 위해 이벤트핸들러에 자동으로 전달된다. 이벤트핸들러 함수에매개변수를 추가하여이벤트 발생 시마다 전달받을 수 있도록 해야한다. //click 이벤트가 발생하면 함수를 호출 Target.addEventListener('click', function(){}) //cl..

appendChild DOM 내 개별요소('노드'라고도 함)에 자식 요소를 추가할 때 사용하는 메소드 요소 생성 document.createElement('p')

event : 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건 웹에서 발생하는 이벤트 예 : 웹페이지 사용자가 버튼을 클릭했다 --> 클릭 이벤트 웹페이지 사용자가 키보드를 눌렀다 --> 키다운 이벤트 웹페이지 사용자가 입력 폼의 내용을 제출했다 --> 제출 이벤트 event handler 각각의 이벤트들은 이벤트 핸들러를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다 --> event handler register : 이벤트가 발생하면, 이 함수를 호출해라! 구문 기본 형태 이벤트가 발생할 수 있는 (혹은 발생할 예정안) 타켓을 선택하고 이벤트 핸..

특징 브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조한다. 즉, window.document는 현재 브라우저에 랜더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다 window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다 이를 이용하면 페이지의 정보를 얻고나 웹 요소를 생성 및 조작할 수 있다. window는 브라우저 탭에 존재하는 js 전역 최상위 객체! --> 어디서든 접근이 가능하다 window 객체 안에는 document 객체가 존재, document 에는 잠재적으로 보여질 수 있는 dom에 대한 정보가 저장돼있다. document 객체는 window.document 혹은 document로..

조건문 for : 구문 작성 시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문이다. for ( 초기식; 조건식; 반복식) { 조건이 true인 경우 반복 수행할 코드 } 초기식 : 반복 조건의 초기화 작업 반복식 : 반복이 끝날 때마다 실행될 작업 //for문 for(let i = 1; i

조건문 : 특정 조건을 만족하는 경우에만 코드 실행 1. if / else if / else / if 중첩문 // if문 let x = 10; if (x > 0) { console.log("x는 양수입니다.") } //----------------------------------------------- //if-else문 let a = 5; if (x > 0) { console.log("a는 양수입니다.") } else { console.log("a는 음수입니다.") } let number = 5; if (number == 3) { console.log("일치합니다.") } else { console.log("일치하지 않습니다.") } // 짝수인지 홀수인지 구분하여 메세지 출력 let num = 4; ..

1. 함수 정의하기 // 1-1. 함수 선언식 : 익명함수를 만들 수 없음. function add(x, y) { // add라는 함수 선언 return x + y; } console.log(add(2, 3)); // 5 function 함수명 ( ) {실행할 문장} function 함수명 (매개변수1, 매개변수2 ... ) {실행할 문장} // 1-2. 함수 표현식 : 익명함수를 어떤 변수에 할당하는 건 함수를 선언한다고 하지 않고, 함수를 표현한다고 한다. let add = function(x, y) { // add 라는 변수에 함수 할당, 익명 함수(이름이 없는) 생성 가능 return x + y; // 익명함수를 선언함과 동시에 add라는 변수에 할당 } console.log(add(2, 3));..

1. 산술연산자 // 1-1. 더하기 연산자 console.log(2 + 3); // 5 console.log("2" + "3"); // "23" console.log("2" + 3); // "23" console.log(2 + "3"); // "23" // --> 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환한다 // 1-2. 빼기 연산자 console.log(5 - 2); // 3 console.log("5" - "2"); // 3 console.log("5" - 2); // 3 console.log(5 - "2"); // 3 console.log("five" - 2); // NaN // --> 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다 // 1-3. 곱하기 연산자(*)..

데이터 타입 runtime : run 하는 time !! 코드를 작성할 때가 아니라, 실제 코드가 실행될 때 (터미널에서 코드가 실행될 때!) 그 때 데이터 타입이 결정된다 // 1. 숫자 // 1-1. 정수 let num1 = 10; console.log(num1); console.log(typeof num1); // 'typeof' 값의 타입을 알아볼 때 쓴다 PS C:\Users\gmldn\OneDrive\바탕 화면\WEEK_1> node 02.js 10 PS C:\Users\gmldn\OneDrive\바탕 화면\WEEK_1> node 02.js 10 number // 10은 숫자 let num1 = "10"; // ""안에는 문자로 인식 console.log(typeof num1); PS C:\U..

변수의 5가지 주요 개념 1. 변수 이름 : 저장된 값의 고유 이름 2. 변수 값 : 변수에 저장된 값 3. 변수 할당 : 변수에 값을 저장하는 행위 4. 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 5. 변수 참조 : 변수에 할당된 값을 읽어오는 것 var (변수명) = (값 할당); (let, const) 변수 : var, let 상수 : const var myVar = "Hello World"; console.log(myVar); //var myVar1; //myVar = 3; //위의 var 변수와 같은 식이다 let myLet = "Hello World1"; console.log(myLet); const myConst = "Hello World2"; console.log(myCons..

구현 목적 원래 하고 싶었던 구현은 'more' 버튼을 클릭하면 이동하시겠습니까? 라는 alert 창이 뜨고 '확인' 버튼을 누르면 각자 상세페이지로 이동하는 것을 시도해봤다 시도 결과 내가 배운 태그로는 안돼서 서치해보니까 location.href 을 쓰라고 나옴 more 이렇게 썼는데도 구현이 되지 않았다.. 도저히 뭐가 문제인지 모르겠어서 조장한테 물어보고 단숨에 해결해주셨다! 나의 문제점 1. 구현해야 하는 게 총 4개였는데 4개 다 함수를 function myFunction ()으로 넣었다 2. '이동하시겠습니까?' 하는 질문형에는 alert 보다 confirm의 함수가 더 어울린다 ++ 3. 추가로 발생된 문제점은 취소 버튼을 눌러도 페이지로 이동한다는 것.. 문제해결 more 1. 각각의 함..