🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

용어 정리 - 이벤트 버블링(event bubbling) : 이벤트 타깃 요소에 이벤트가 발생하면, 최상단의 부모 요소까지 각각 할당된 이벤트가 발생되는 것. - 이벤트 캡처링(event capturing) 3단계의 이벤트 흐름에서 첫 번째 단계이다. 1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계 3. 버블링 단계 가장 최상위 조상에서 아래(타깃 요소)로 이벤트가 전달되는 단계이다. 이벤트(Event) 브라우저에서 로그인 버튼을 클릭했을 때, 뒤로 가기 버튼을 클릭했을 때 브라우저는 버튼의 역할에 맞게 동작을 수행한다. 사용자가 어떤 사건(버튼 클릭, 더블클릭, enter 등)을 발생시켰을 때 브라우저가 이를 감지하여 이벤트(로그인을 한다, 다음 페이지로 넘긴다 등)를 발생시킨..

용어 정리 - HTMLCollection 객체 : 유사 배열 객체이면서 이터러블이다. 인덱스를 키 값으로 가지고 있고, length를 가지고 있다. 배열과 비슷하게 생겼지만 객체이다. - NodeList 객체 : 유사 배열 객체이면서 이터러블이다. forEach 메서드를 제공한다. 요소 노드 취득하기 DOM API(프로퍼티, 메서드)를 사용하여 html 을 변경하기 위해서는 일단 변경할 노드를 선택할 수 있어야 한다. Hello 예를 들어 div 태그 안의 Hello 텍스트를 변경하기 위해서는 div 요소 노드와 연결된 텍스트 노드를 변경해야 한다. 이를 위해 DOM은 여러 가지 메서드들을 제공한다. 1. id를 이용하기 - method : document.getElementById(); - parame..

용어 정리 - 파싱(parsing) : 문장이나, 데이터 문자열을 분석하고 해부하여 원하는 데이터를 뽑아내는 기술 예를 들어 JSON.parse(json) 메서드는 인자로 받은 json을 분석하고 해부하여 객체로 변환한다. const json = `{"string" : "json 변환", "result" : "true"}`; const result = JSON.parse(json); console.log(result);//{string: 'json 변환', result: 'true'} console.log(result.string); //json 변환 console.log(result.result); //true -API(Application Programming Interface) : 리모컨 역할 tv..

Jest 초기 세팅 Jest는 간단한 자바스크립트 테스트 프레임워크이다. babel, typescript, node, react, angular, vue 등을 사용하는 여러 프로젝트와 함께 사용할 수 있다. 1. installing Jest using npm npm install --save-dev jest 2. 예제 파일 sum.js 생성 //sum.js function sum(a,b){ return a + b; } module.exports = sum; 3. 테스트 예제 파일 sum.test.js 생성 이 때 __test__ 디렉토리 안에 있는 파일이나 test.js로 끝나는 파일들은 모두 테스트 파일로 인식한다. const sum = require('./sum'); test('add 1 + 2 to..

Test-driven development TDD를 설명하기 전에, 먼저 디버깅에 대해 알아야 한다. 디버깅은 쉽게 말해서 문제가 발생했을 때 그 문제를 해결해주는 도구이다. 🐛 버그를 잡는다는 의미로 문제의 원인을 잡을 수 있도록 도와준다. 디버깅을 모른다면, 삽질을 하고도 원인을 파악하지 못할 것이다. 때문에 디버깅은 개발에서 떼어놓을 수 없는 스킬이다. sum 이라는 함수를 선언한 후, 실행했을 때 에러가 생기는 것을 알 수 있다. ❌ 버그가 잡힌 것이다. 디버거로 확인을 하면 문제가 생긴 원인을 확인할 수 있다. "원인은 x표시가 난 곳이구나!" 그리고 console.lo가 function이 아니라는 것을 확인할 수 있다. 이런 에러를 처음부터 줄일 수 있도록 도와주는 방법이 바로 TDD이다. T..

동기(Synchronous) vs 비동기(Asynchronous) 카페 점원이라고 생각해보자. 손님에게 복숭아 아이스티를 주문받았다. 그럼 아래와 같이 6 단계를 거쳐 손님에게 제공할 수 있다. 1. 주문받기 -> 2초 소요 2. 복숭아티 파우더를 컵에 넣는다(1 스푼) -> 2초 소요 3. 따뜻한 물을 조금 붓고, 파우더를 녹여준다. -> 5초 소요 4. 파우더가 녹았다면, 얼음을 넣고 차갑게 저어준다. -> 3초 소요 5. 물을 적당량 넣어주고 섞어준다. -> 2초 소요 6. 손님에게 제공한다. -> 2초 소요 동기적 실행(synchronous system) 은 하나의 테스크 실행이 완료될 때까지 다른 테스크들은 블로킹(작업 중단) 되는 방식이다. 1명의 손님에게 음료를 제공하기 전까지 다른 손님의 ..