프로그래밍 잡동사니

[10분 테코톡] 🧀 제리의 MVC 패턴 위 영상을 참고해 프리코스에 자주 언급되었던 MVC 패턴에 대해서 정리해보았다 MVC 패턴 이전의 프로젝트들은 규모가 커질수록 코드가 복잡해져서 한 눈에 파악하기도 힘들고 하나의 기능을 수정할 때마다 대부분의 코드를 갈아엎어야 하는 등 문제가 많았다 → MVC 패턴은 이 상황에서 유지보수가 용이한 규칙성들을 공식화한 것이라 볼 수 있다 MVC = 유지보수가 편해지는 코드 구성 방식 Model: 데이터와 관련된 부분 View: 사용자에게 보여지는 부분 Controller: Model과 View를 이어주는 부분 MVC 패턴을 지키며 코딩할 수 있는 5가지 규칙 Model은 Controller와 View에 의존하지 않아야 한다 (= Model 내부에 Controller..

에러 처리 console.log('[Start]'); foo(); // ReferenceError: foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다. console.log('[End]'); 에러가 발생하지 않는 코드를 작성하는 것은 불가능하며, 에러를 방치하면 프로그램은 강제 종료된다 // DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다. const $button = document.querySelector('button'); // null $button.classList.add('disabled'); // TypeErr..

제너레이터 ES6에 도입된 제너레이터(Generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다 제너레이터 함수는 함수 호출자(caller)에게 함수 실행의 제어권을 양도(yield)할 수 있다 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다 제너레이터 함수를 호출하면 이터러블인 제너레이터 객체를 반환한다 // 제너레이터 함수 선언문 function* genDecFunc() { yield 1; } // 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; }; // 제너레이터 메서드 const obj = { * genObjMethod() { yield 1; } }; // 제너레이터 클래스 메서드 c..

전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 에러 처리가 곤란하며 여러 비동기 처리를 한 번에 하는 것에도 한계가 있다. ES6에서는 새로운 패턴으로 프로미스(Promise)를 도입해 콜백 패턴의 단점을 보완하고 비동기 처리 시점을 명확하게 표현한다 // 프로미스 생성 const promise = new Promise((resolve, reject) => { // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다. if (/* 비동기 처리 성공 */) { resolve('result'); } else { /* 비동기 처리 실패 */ reject('failure reason'); } }); Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를..

마지막 미션은 다리 건너기 게임을 구현하는 것으로, 제약사항과 함께 학습 목표에 리팩터링이 추가된다 함수(또는 메서드)의 길이가 10라인을 넘어가지 않도록 구현한다 메서드의 파라미터 개수는 최대 3개까지만 허용한다 제공된 InputView, OutputView, BridgeGame, BridgeMaker 클래스를 사용한다 InputView에서만 Console.readline()을 이용해 사용자의 입력을 받을 수 있다 BridgeGame 클래스에서 InputView와 outputView를 사용하지 않는다 Random 값 추출은 제공된 BridgeRandomNumberGenerator의 generate()를 활용한다 이외에 각 클래스의 제약사항은 클래스별 세부 설명을 참고한다 클래스 분리와 메서드 구현에 있..

타이머 자바스크립트는 타이머를 생성할 수 있는 setTimeout / setInterval, 타이머를 제거할 수 있는 clearTimeout / clearInterval 함수를 제공하며, 전역 객체의 메서드로 제공되는 호스트 객체로 비동기 처리 방식으로 동작한다 // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. setTimeout(() => console.log('Hi!'), 1000); // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. // 이때 콜백 함수에 'Lee'가 인수로 전달된다. setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee'); // 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다. ..

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생시키는데, 이 때 호출될 함수를 이벤트 핸들러라고 하며 브라우저에게 이벤트 핸들러 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다 Click me! 특정 이벤트에 대응하는 다양한 이벤트 핸들러 프로퍼티를 할당해 브라우저로 호출한다 Click me! 위와 같이 함수 호출문을 할당해 이벤트 핸들러를 등록하는 방식이 있지만 권장되지 않는다 Save { /* React */ } Save Save Save JSX 상에서는 직접 HTML에 사용하는 것이 아니기 때문에 문제는 없다 Click me! DOM을 가져와 이벤트 핸들러 프로퍼티에 함수를 바인딩 해주는 방식이 존재한다 Click me! addEventListener 메서드 방식은 캡처링/..

Set Set🔽 Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org Set 객체는 중복되지 않는 유일한 값들의 집합으로, 배열과 다음과 같은 차이가 있다 const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 이터러블을 인수로 전달받아 Set 객체를 생성할 수 있다. 이 때 중복 값은 제거된다 const set = new Set(); set.add(1).add(2..

3주차 미션은 로또 게임을 구현하는 것으로, 다음 두 가지 목표가 추가되었다 클래스(객체)를 분리하는 연습 도메인 로직에 대한 단위 테스트를 작성하는 연습 구입금액을 입력해 주세요. 8000 8개를 구매했습니다. [8, 21, 23, 41, 42, 43] [3, 5, 11, 16, 32, 38] [7, 11, 16, 35, 36, 44] [1, 8, 11, 31, 41, 42] [13, 14, 16, 38, 42, 45] [7, 11, 30, 40, 42, 43] [2, 13, 22, 32, 38, 45] [1, 3, 5, 14, 22, 45] 당첨 번호를 입력해 주세요. 1,2,3,4,5,6 보너스 번호를 입력해 주세요. 7 당첨 통계 --- 3개 일치 (5,000원) - 1개 4개 일치 (50,000..

이터러블 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 자료구조를 위해 미리 정의한 규칙이다. ES6 이전의 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 다양한 방법으로 순회할 수 있는데, ES6에서는 순회 가능한 자료구조를 이터러블로 통일해 for…of문, 스프레드 문법, 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. isIterable([]); // -> true isIterable(''); // -> true isIterable(new Map()); // ->..