회사에서 너무 정적인 사이트만 만드는 느낌이라 엄청 동적인 프로젝트를 만들고 싶단 생각이 들기 시작했다.요즘 핫하다는 인터렉티브 웹사이트에 대해 찾아보다가, 패스트캠퍼스 인터렉티브 강의를 발견하여 결제했다.(사실 canvas가 뭔지도 모르고 그냥 인터렉티브에 꽂혀서 결

DOM : 트리 전체Node : 트리를 구성하는 요소 하나하나Node 하나하나가 API이기 때문에 자바스크립트로 제어 가능!API : "너가 이렇게 주문하면 내가 이렇게 해줄게!"라고 메뉴판처럼 만들어 둔 것 즉, 콜라 버튼을 누르면 콜라가 나오는 자판기처럼 내가 할

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야 하는 경우 setTimeOut() 함수를 사용할 수 있다.첫 번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두 번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.세 번째 인자부터는 가변인자를 받는데

addEventListener()는 document의 특정 요소 (Id, class 등) event를 등록할 때 사용한다. html js querySelectorAll 함수를 이용해 div 안의 id 값 'cols'와 button의 class값 'btn'을 가져온 후,

video 태그만을 선택해서 refresh하는 기능을 구현하기 위해서 구글링을 약 두 시간 가량 한 후에 querySelector로 해결했다.querySelector를 처음 써봤다... 아니 사실 처음 안 걸수도..?더 구체적인 엘리먼트를 선택하고 싶다면 querySe

디자인 패턴이란 소프트웨어 개발을 하면서 발생하는 다양한 이슈들을 해결하는데 도움을 주는 기술들이다.프레임워크, 라이브러리 같은 도구들과 달리 순수한 패턴 즉, 조언자의 역할만 한다.JavaScript의 대표적인 디자인 패턴에는 싱글톤 패턴, 팩토리 패턴, observ

일반적으로 export, import문을 사용하는 것은 정적인 방식이다.정적인 import 방식은 문법이 단순하고 제약사항이 존재한다.모듈 경로엔 원시 문자열만 들어갈 수 있기 때문에, 함수 호출 결과값을 경로로 쓰는 것이 불가능했다.모듈 경로는 문자열만 허용되기 때문

프로그래밍에서 모듈이란 코드들의 묶음이라고 볼 수 있다.높은 독립성을 바탕으로 기능적으로 구분될 수 있는 단위로 묶은 코드들을 좋은 모듈화를 구현했다고 볼 수 있다.모듈이란 기능적으로 구분될 수 있는 코드들을 높은 독립성을 가질 수 있도록 묶어놓은 코드 묶음이므로 모듈

자바스크립트에서 값은 원시값과 참조값으로 나뉜다.NumberStringBooleanNullUndefined원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다.ObjectSymbol참조값은 변수가 객

while문은 특정 조건을 만족할 때까지 계속해서 주어진 실행문을 반복 실행한다.우선 조건식이 참인지 판단하여 참이면 내부 실행문을 실행한다.내부 실행문을 전부 실행하고 나면, 다시 표현식으로 돌아와 또 한 번 표현식이 참인지 판단한다.while문이 무한 루프에 빠지지

문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔준다.문자열이 숫자가 아닌 경우 NaN이 출력된다.소수점의 경우 소수점이 모두 출력되며, 숫자형으로 바뀌게 된다.Number(str)와 동일하게 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔준다.문자열이 숫자가 아닌

흰 티에 청바지를 입은 어떤 사람 (= 변수)이 있다.직업이 명확하지 않은 그냥 어떤 사람이다. (= undefined)그 사람이 피팅룸에 들어가서 경찰 제복을 입고 나왔다. 이때부터 직업이 경찰임을 알게 되고, 축구선수 복장을 입으면 축구선수임을 알게 된다.이 때 종

알고리즘 문제가 뒤로 갈수록 단순 배열, 객체로는 풀리지 않는다객체와 유사하게 생긴 Map과 Set에 대해 알아보자!객체 : 키가 있는 컬렉션 저장배열 : 순서가 있는 컬렉션 저장Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다.다만, Map은 키에 다양한

레벨 2 알고리즘 문제에서는 index로 문자열에 접근하니 계속 오답처리가 되었다.charAt을 사용하여 접근하니 모든 테스트 케이스가 통과됐다.이 둘의 차이가 대체 뭐길래...? 란 생각을 갖고 두 접근법의 차이를 찾아보았다!string0string.charAt(0)

뒤늦게 적어보는 Javascript 기본 개념들!블로그 글 하나에 기본적인 개념들을 한번에 쭉 정리해보려고 한다.명시적으로 값이 비어있음을 나타낼 때 사용한다.아무것도 참조하고 있지 않다는 의미가 담겨 있으며, 객체를 담을 변수를 초기화할 때 많이 사용한다.null은

Javascript에서 Flatten이란 배열 구조 안에 또 다른 array를 인덱스로 가질 때 즉, 이중 배열일 때 배열을 평평하게 만드는 작업을 말한다.이렇게 말로 표현하면 굉장히 어려운 말처럼 보이지만, flat method를 통해 살펴보면 이해하기 쉽다!모든 하

처음부터 비동기 처리를 위해 async-await를 써온 줄 알았는데 async-await도 역사가 있었다.역시 세상에 똑똑한 개발자는 넘나 많은 것...async-await를 쓰기까지의 과정을 살펴보자!Callback 함수란 함수의 인자로 들어가는 함수를 말한다.여기

수업시간에 stack과 queue가 있다는 이론적인 개념을 배웠다.stack과 queue개념만으로도 어질어질했는데 해당 개념에서 한발 더 나아가 Event Loop에 대해 배웠다.Stack과 Queue가 무엇인지 살펴보고, Javascript의 Event Loop와 다

이름부터 희한한 재귀함수...지난주에 재귀함수 문제를 풀다가 탈모가 오는줄 알았다ㅎㅎ오늘은 이름부터 이상한 재귀함수에 대해 살펴보고 싶지 않지만 살펴보자....!재귀함수란 함수가 직접 또는 간접적으로 자신을 호출하는 함수다. 즉, 함수가 계속해서 자신을 실행하여 반복하

Javascript Closure는 Javascript 기본 동작 원리(?)라고 하는데기본이라는게 이렇게 어려울 줄이야..?수업을 들으면서도 어질어질했던 Javascript Closure에 대해 살펴보자Closure의 개념을 이해하기 위해서는 Scope에 대해 먼저 살