JavaScript

VanillaJS를 통한 자바스크립트 정리 2

📖 오늘 배운 것 자바스크립트의 모듈화 자바스크립트에서 비동기 다루기 비동기 다루기 실습 (w. To do List) Promise async, await 💪 자바스크립트의 module에 대해 알아보자 솔직히 최근에는 Webpack이나 번들러로 많이 대체해서 쓰지 않을 수도 있다. 그래도 이번 기회에 잘 써서 익숙해지자! Import // export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 // export default로 내보내진 경우 import a from 'folder'; // export 로만 내보내진 경우 import * as a from 'folder'; import {a, b} from 'folder'; // 이름이 너무 길거나 같을 경우 import {a as b} ..

[JavaScript] addEventListener에서의 this 바인딩

오늘은 20 web Projects중 hangman을 VanillaJS 로 구현하고, Component형식으로 바꾸던 와중. this바인딩 때문에 고생했던 기억을 이겨내고자 정리를 해보려고한다. Code 먼저 html에서 module type으로 index.js를 받아오기로 했다. // index.js import App from './App.js'; const app = new App(document.querySelector('.App')); window.addEventListener('keydown', app.handleKeyDown); 이렇게 index.js 에서 window.addEventListner를 호출하고, 'keydown' 이벤트가 일어나면. App.js의 handleKeyDown 메소드..

[JavaScript] JavaScript 로 TDD 및 테스트 코드 작성 하기 (cypress)

👊 오늘의 공부 - Cypress 강의 듣기 => 자바스크립트로 E2E 테스트 코드를 작성함으로써 사용자 중심의 흐름으로 ‘검증’ 가능한 앱을 만들 수 있다. *cypress 깔고 열기 npm install cypress --save-dev ./node_modules/.bin/cypress open 1)Counter 앱 테스트 코드 작성 2)계산기 앱 테스트 코드 작성 => 테스트 코드의 두려움 극복하기 -> 자신감으로 바꾸기 💪 테스트를 작성해야 하는 이유 애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위 DB에 데이터를 입력하는 API를 개발 -> API 호출 -> DB 값 검증 디자인 시안에 맞게 HTML/CSS를 작성 -> 브라우저에서 실제 렌더링한 결과를 확인 새로운 기능을 추가하기 위..

2022/7/31 TIL

1. 오늘 한 공부 자바스크립트 딥 다이브 26장 ES6 함수의 추가기능 딥 다이브 공부할 때 더욱 집중하고 블로그에 한번씩 더 정리를 해보려고 노력해보자. Meal Finder 미니 프로젝트 만들기 이벤트 클릭시 해당 객체의 상위 요소를 배열로 가져오는 event객체의 path와 composedPath()에 대해 배움 find()메서드: true 이면 해당 요소 가져오고 false 이면 안 가져옴 innerHTML요소에 배열 요소를 넣을 때 map을 사용하는데 많이 익숙해졌다, 마크업 언어로 화면 구성하는 것도 많이 늘었지만 더 노력해야겠다. css는 아직 부족해서 더 보고 노력 많이 해야겠단 생각이 든다. 2. 느낀점 오늘도 역시 난 부족했다. 정진 정진 정진! JS 정리 : https://gith..

2022/07/29 TIL

1. 자바스크립트 딥다이브 클래스 정리 클래스 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이다. 클래스와 생성자 함수의 차이점 1. 클래스를 new 연산자 없이 호출하면 에러, 생성자 함수는 new 연산자가 없으면 일반 함수로서 호출 2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다. 3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 생성한 생성자 함수는 변수 호이스팅이 발생한다. 4. 클래스 내의 모든 코드에는 암묵적으로 strict mode 가 지정되어 실행되..

2022/7/28 TIL

1. 자바스크립트 딥다이브 : 제네레이터와 async/awiait 제네레이터 제네레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제네레이터 함수는 함수 호출자에게 제어권을 양도할 수 있다. 제네레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있게 한다. 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도할 수 있다. 제네레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 제네레이터 함수는 함수 호출자에게 상태를 전달할 수 있고, 함수 호출자로부터 상태를 전송 받을 수 있다. 제네레이터 함수를 호출하면 제네레이터 객체를 반환한다. 제네레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제네레이터 ..

2022/7/27 TIL

1. 자바스크립트 딥다이브 책 프로미스 파트를 마무리 - 프로미스는 then, catch, finally 이렇게 세 가지 후속 처리 메서드를 갖는다. 이 후속 처리 메서드가 언제나 프로미스를 반환하므로 프로미스 체이닝이 생긴다. => 이 프로미스 체이닝으로 비동기 처리 결과를 받으므로 콜백 헬에 빠지지 않을 수 있게 된다! - 프로미스는 다섯 가지의 정적 메서드를 갖는다. 1.Promise.resolve, Promise.reject => 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용 => new 연산자로 Promise 만든 후 resolve나 reject하는 것과 같게 작동 2.Promise.all => 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용 => 모든 프로미스가 fullfil..

JavaScript로 알고리즘 준비하기(1) - 정규 표현식(문자열 갖고놀기)

알고리즘을 풀면서 가장 필요했던 부분들과 부족한 부분들 정리를 해볼까 한다. (1) 정규 표현식 정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식이다. (이런걸 형식 언어, formal languange라고 합니다.) 따라서 문자열 비교나 바꾸기 등에 많이 사용되서 알고리즘에 매우 효율적이라고 생각한다. 정규 표현식을 만드는 방법 정규 표현식 리터럴 const exam = /abcd/ RegExp 객체의 생성자 호출 const exam = new RegExp('abcd') 정규 표현식의 사용법 (리터럴) : /패턴/플래그 - 슬래시 사이에 매칭시킬 패턴을 써준다. - 슬래시 다음에 옵션을 설정하는 플래그를 써준다. 1) 정규표현식 패턴 - 정규 표현식의 패턴은 크게 세 가지 분류로 나뉜다. 1...