알루 코딩

🚨 문제 상황 배열에 담긴 요소들을 하나씩 뽑아내는 작업을 할 때 아래와 같은 코드가 있다고 해보자. const allu = new Array(10).fill('dachshund'); const result = [] const asyncFunction = (i) => { return new Promise(resolve => { setTimeout(() => { result.push(i) resolve() }, 1000); }) } allu.forEach(async (_,i)=>{ await asyncFunction(i) }) console.log(result) 위 코드처럼 작성하면 result 값에 원하던 값이 들어가있지 않고 초기의 배열인 빈값이 출력됐다. forEach는 내부에 들어있는 순차적으로배열..

- console 객체는 아무 전역 객체에서나 접근할 수 있다. - time과 timeEnd의 매개변수에는 똑같은 문자열을 넣어줘야 한다. - 자바스크립트에서 변수를 선언할 때, var, let, const를 사용한다. 1. [변수 선언 방식] var : 중복 선언과 재할당이 가능하다. let(ES6) : 중복 선언은 불가하며, 재할당은 가능하다. const(ES6) : 중복 선언과 재할당 둘 다 불가능하다.(※ const로 선언했어도 배열과 객체의 값을 변경하는 것은 가능하다.) 2. [유효한 참조 범위] var : 함수 레벨 스코프(function-level-scope) 아래와 같이 함수 내에서 선언된 변수는 함수 내에서만 유효하다. 하지만, 함수 외부에서는 참조할 수 없다. let / const :..

setInterval() 함수는 인자값을 2개 받는데, 첫번째 인자로는 실행할 함수를 받고, 두번째 인자로는 그 함수를 실행하고 싶은 시간(실행할 시간 간격)을 받는다. 이 때, 시간의 단위는 ms 로, 예를 들어 3초를 주고 싶다하면 3000을 값으로 집어 넣어야 한다. 예를 한번 살펴보자. const clockContainer = document.querySelector(".js-clock"), clockTitle = document.querySelector('h1'); function getTime(){ const date = new Date(); // Date는 클래스이다. date 객체 생성 const hours = date.getHours(); const minutes = date.getMin..

먼저 html 파일이 이런 html 파일이 있다고 해보자. This is title!! css 는 아래와 같다. body { background-color: peru; } .btn { cursor: pointer; // btn 클래스 } h1 { color: #344952; transition: color 0.5s ease-in-out; } .clicked { color: red; // clicked 클래스 } javascript 는 아래와 같다. const title = document.querySelector("#title"); const CLICKED_CLASS = "clicked"; function handleClick(){ const hasClass = title.classList.contain..

https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 이곳을 참조하면, 각종 이벤트 들이 다 나와있다. 온라인, 오프라인 처럼 와이파이가 연결되고 끊겼을 때 처리하는 이벤트도 있었다. function handleOffline(){ console.log("인터넷이 끊겼습니다.") } function handleOnline(){ console.log("인터넷이 연결되었습니다.") } window.addEventListene..

JavaScript에서 함수를 만드는데, 이런 함수를 바로 호출하고 싶을 때가 있을 것이고, 어떠한 사건(이벤트)이 발생하면 그 함수가 실행되도록 하고 싶기도 할 것이다. 그런 이벤트를 처리하는 것을 Javascript에서는 어떻게 구현할까? 객체.addEventListener("이벤트 타입", 해당하는 함수); 라는 것이 있다. 예를 들어, 아래와 같은 코드가 있다고 해보자. function handleResize() { console.log("사이즈가 변경되었어요!") } window.addEventListener("resize", handleResize); 이것은 "resize"라는 이벤트가 발생했을 때까지, handleResize라는 함수를 기다리겠다는 뜻이다. 우리가 앞서 함수 등을 호출할 땐,..

HTML이 Javascript와 함께 웹페이지에 무언가를 쓰려고 하려면, 어떻게 해야 할까? CSS에서 HTML에 접근할 수 있는 것과 같이 Javascript에서도 HTML에 접근할 수 있다. 예를 들어, CSS에서는 HTML에서의 id 값에 접근하려고 할 때, # 기호를 통해 접근한다. // html에서 아래와 같이 적혀져 있다면, ... This is title ... // css에서는 이런식으로 접근한다. #title{color : red ;} Javascript에서는 DOM 함수를 통해 접근할 수 있다. console.log 에서처럼 console은 객체이고 log는 함수이다. 마찬가지로 'document'도 객체인데, 이게 무엇인지 구글 홈페이지에서 log를 찍어보면, console.log(d..

Javascript에서 함수를 작성한다고 가정해보자. function sayHello(name,age){ console.log("Hello! ", name ,"I am ",age,"years old."); // ,(콤마)로 이어준다. } sayHello("KJY",26); 함수에 인자를 주고 그러한 parameter(매개변수)를 더하는 방식은 보통 ,(콤마) 혹은 +(더하기) 연산을 이용해서 사용하곤 하는데, function sayHello(name,age){ console.log("Hello! ", name ,"I am ",age,"years old."); // +(더하기 연산)으로 이어준다. } sayHello("KJY",26); 자바스크립트에는 이러한 스트링 처리를 조금 더 섹시하게 할 수 있는 기..