선택자 명시도에 대한 문제다. 1. Ordering (명시도가 같을 경우) hi h1은 무슨 색일까? 정답 : green 이유 : 두 css의 명시도가 같아 제일 아래에 있는 style이 적용됨 2. 명시도가 약간 높을 경우 hi h1은 무슨 색일까? 정답 : blue 이유 : h1.blue의 명시도가 .green보다는 명시도가 더 높아서 blue가 적용됨 3. 셀렉터 선택자가 띄어쓰기가 된 경우 hi h1은 무슨 색일까? 정답 : green 이유 : h1 .blue 라는 것은 위의 html 태그에는 존재하지 않는다. 이것을 적용하려면 hi과 같은 태그가 있어야 한다. 선택자 사이에 띄어쓰기가 있는 것의 의미는 바깥의 클래스가 있고, 그 내부의 자식 엘리먼트가 blue라는 클래스를 가지고 있다는 것이다...
'어떤 배열 2개를 던져주고 두 배열을 비교해서 어떠한 답을 도출해라' 라는 문제가 나오면 어떻게 해야할까? 일단 naive한 답으로써는... for문을 이중으로 사용하여 for 배열1 { for 배열2 { 배열1의 각 요소와 배열2 모두 비교 } } 위와 같은 방식으로 구현하는 것이다. 배열 2개를 모두 순회하여 답을 구할 수 있다. 즉, O(N^2)의 복잡도를 가지게 된다. O(N^2)로 아래의 문제를 한번 풀어보도록 하자. 문제 원문) /* Write a function called same, which accepts two arrays. The function should return true if every value in the array has it's correponding value sq..
요구사항 Start를 누르면 video가 실행된다. video에 마우스를 대는 이벤트가 실행되면 시간초가 카운트되고, 동영상이 실행된다. 마우스를 떼면 시간초 카운트와 동영상이 멈춘다. Start 여기서 공부할 수 있는 것은 media element의 timeupdate 이벤트와 currentTime 프로퍼티 이다. timeupdate는 video나 audio 엘리먼트가 진행될때마다 실행되는 이벤트이며, currentTime은 진행시간을 초 단위로 보여준다. (엘리먼트의 프로퍼티도 굉장히 많고 이벤트 종류도 굉장히 많다라는 것을 알아가자.)
포켓몬 API에 담긴 포켓몬의 이름과 사진을 프로미스로 처리하여 웹에 뿌려주는 웹 사이트를 제작하였다. 이것을 제작하기 위해 먼저 API를 분석했다. 분석 결과는 아래와 같다. 포켓몬은 1번(이상해씨)부터 시작하며, 20번 단위로 끊어져있다. api에는 next와 previous라는 key가 존재한다. 다음 포켓몬 목록을 보기 위해서는 next 키 값에 담겨있는 api를 fetch해야 볼 수 있다. 이전 포켓몬 목록을 보기 위해서는 previous 키 값에 담겨있는 api를 fetch해야 볼 수 있다. 포켓몬의 이름은 주어진 api를 fetch하면 바로 볼 수 있다. 포켓몬 사진을 보기 위해서는 포켓몬의 이름에 묶인 세부사항 api를 한번 더 fetch해야 한다. 일단 solve Previous Next..
이벤트에서는 각 이벤트 관련 동작들이 오브젝트로 반환이 되어, 이벤트 함수에 전달이 된다. 요소.addEventListener('mousemove', (e) => { coordinate.textContent = `X: ${e.clientX}, Y: ${e.clientY}` }) 즉, 위의 코드처럼 addEventListener에 mousemove 이벤트를 줬을 때, 이벤트 핸들러(이벤트가 실행되었을 때 실행되는 함수)는 이벤트 관련 동작의 오브젝트를 인수로 받을 수 있다. 이벤트 관련 동작의 오브젝트에는 다양한 프로퍼티가 있는데, 위 영상에서는 clientX와 clientY라는 프로퍼티를 활용해서 좌표를 표시했다. 이와 같이, 이벤트 타입을 알게되고, 그것이 반환한 오브젝트 내 프로퍼티들을 활용해서 JS..
우리는 자바스크립트를 이용해 함수를 작성할 수 있고, 로직을 짜서 내 의도에 맞게 동작시킬 수 있다. 이때 내 의도가 '사용자가 어떤 부분을 클릭하거나, 화면을 줄이거나 하는 등의 이벤트'가 생길 때 내가 구성했던 로직이 실행이 되길 원하는 것이었다면? 그런 행위를 가능하게 해주는 것이 이벤트 드리븐 프로그래밍이다. 이벤트 드리븐 프로그래밍 앞서 설명했듯, 이벤트 드리븐 프로그래밍은 어떤 이벤트가 생겼을 때, 로직이 실행되도록 만들어주는 프로그래밍 기법이다. 즉, 이벤트 드리븐 프로그래밍은 '내 로직의 실행 여부를 브라우저에게 위임'하는 것으로 정의할 수 있다. 무언가 클릭을 했을 때 내가 만든 로직이 실행되었으면 좋겠다 -> 이벤트 드리븐 프로그래밍 설문을 입력하고 엔터를 눌렀을 때, 입력정보가 서버로..
Jest란 무엇인가? jest는 페이스북에서 개발한 테스팅 라이브러리로써, 테스트 케이스 작성을 편리하게 해준다. 근데 테스트 케이스가 뭘까? 테스트케이스를 왜 쓰는지 알기 위해서는 TDD(테스트 주도 개발)의 개념에 대해 먼저 알아야 할 것이다. TDD란 무엇인가? TDD는 Test-Driven-Development의 약자로써, 한글로 번역하면 테스트 주도 개발이 되겠다. 테스트 주도 개발은 개발의 방법론 중 하나로써, 어떤 기능을 코딩하기 전에 그 기능의 입력, 출력값을 고려한 테스트 케이스를 먼저 작성한 후 테스트를 통과할 수 있는 코드를 작성하는 것을 말한다. 테스트 케이스부터 작성함으로써 얻는 통상적인 이점은 아래와 같다. 본격적으로 코딩하기전에, 프로그래밍이 어떻게 돌아가야 할 지를 우선적으로..
프로미스, fetch, axios, async/await는 좋은 기능이다. 좋지만! 콜백지옥을 의도적으로 한번 경험해보자. 여기에서는 request라는 모듈을 사용할 것이다. request는 uri에 response를 보내고, 요청받은 곳에서 전달한 자료를 받아오는 역할을 하는 라이브러리이다. 자료를 주고받는 기능이니만큼, 비동기적으로 동작한다. request의 파라미터로는 uri와 콜백함수가 있으며 콜백함수는 에러메시지, response, 수신한 데이터를 파라미터로 한다. request('uri', (err, response, data) => {}) 콜백함수의 파라미터 중 하나가 요청한 주소(uri)를 통해 수신받은 데이터( (err, response, data) => {} )를 받으므로, 데이터에 어..
자바스크립트에서 this는 참으로 어려운 개념이다. this가 호출될 때, 호출되는 대상에 따라서 참조하는 범위가 동적으로 바뀌기 때문이다. 메서드로써 호출되면 본인을 호출한 메서드를 가지고 있는 객체를 참조한다. (Array라던지, Object라던지..) 함수 내 함수로써 호출되면 전역을 참조하거나(선언형), 위 스코프를 참조(화살표형)한다. 메서드로써의 this는 무엇을 참조할까? ;[5, 6, 7].push(10) // push 메서드 내부의 this는 `.`뒤의 배열([5, 6, 7])을 참조하게 된다. const a = [1, 2, 3] a.getLast() // getLast 메서드 내부의 this는 `.`뒤의 배열([1, 2, 3])을 참조하게 된다. alert('안녕하세요.') // `.`..
문제 Write a getCharCount prototype function for arrays of strings that returns an object of character counts. (어레이 내 모든 문자열의 문자 하나하나를 카운트해서 오브젝트로 출력하는 getCharCount 함수를 만들어라.) const result = ['Charmander', 'Charmeleon', 'Charizard'].getCharCount() /* * Returns { C: 3, h: 3, a: 5, r: 5, m: 2, n: 2, d: 2, e: 3, l: 1, o: 1, i: 1, z: 1 } */ 문제 해석 모든 것을 순회해서 다른 자료를 만든다. → reduce 메서드를 쓰기 적합한 환경이다. 배열의 메..
