동글이의 STORY

초기 프로젝트를 생성할때 기본적으로 세팅하는 것에 대해 소개해보려고 합니다. 1. 프로젝트 초기화npm init을 하면 package.json이 기본적으로 자동 생성됩니다.npm init // 프로젝트명, 설명 등 작성할 내용이 있을 경우npm init -y // 입력할 내용없이 package.json 생성 package.json : 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일{ "name": "Project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exi..

동적으로 엘리먼트 내부로 script 코드를 추가하려고 한다.그때 바로 append 등으로 html를 삽입하는 것이 아닌script 태그를 생성해서 속성을 지정해준 다음 삽입해줘야 script가 로드된다는 것을 알게되었다. const script = document.createElement("script");script.src = "..."; // 설정할 script의 src 정보script.async = true;document.head.appendChild(script);script.onload = () => { // script load 된 이후에 실행될 코드};

🔶 전략 패턴?객체 지향 디자인 패턴 중 하나로 동일한 문제를 해결하기 위한 여러 알고리즘을 정의, 각가의 캡슐화하여 상호 교환 가능하도록 만드는 패턴런타임 시에 알고리즘을 선택하고 적용할 수 있게 됨장점유연성 : 새로운 전략을 추가하거나 기존 전략을 수정하기 쉬움재사용성 : 전략을 재사용 할 수 있어서 개발비용과 시간을 절약할 수 있음테스트 용이성 : 각 전략을 독립적으로 테스트할 수 있기 때문에 테스트가 용이단점클래스 개수 : 각 전략이 별도의 클래스로 캡슐화 되기 때문에 클래수 수 증가 → 코드 복잡성을 높이고 유지보수 어려워짐오버헤드 : 런타임에 전략을 교체하기 때문에 오버헤드 발생 가능성 있음정렬 알고리즘BubbleSort, QuickSort, insertionSort 등Sorter 클래스가 ..

🔶 장식자 패턴(Decorator pattern)객체에 동적으로 새로운 행위를 추가할 수 있도록 해주는 구조 패턴동작이나 기능을 동적으로 추가하는데 초첨을 둔 것장점서브 클래스에 의전할 필요 없음객체는 새로운 행동에 유연하게 사용될 수 있으며 본 객체를 계속 사용할 수 있다.단점관리가 되지 않으면 아키텍처가 복잡해 질 수 있다.🔹 예시 코드class Book { constructor(title, author, price) { this._title = title; this._author = author; this.price = price; } getDetails() { return `${this._title} by ${this._author}`; }}// decorator ..

🔶 샌드박스 패턴(sandbox pattern)샌드박스 패턴은 어떤 모듈이 다른 모듈과 그 모듈의 샌드박스에 영향을 미치지 않고 동작할 수 있는 환경을 제공하는 것샌드박스에서는 단일 전역 변수가 생성자 ( 격리된 샌드박스에 있는 코드를 전달하는 이 생성자를 이용하여 객체를 생성함)장점단 하나의 전역변수에 의존하는 네임스페이스 패턴의 단점을 여러 개의 샌드박스 객체를 생성함으로 극복외부 요인으로부터 코드를 격리할 수 있다.점으로 연결된 긴 이름을 쓸 필요가 없다런타임(Runtime)에 탐색 작업을 거치지 않게 해준다.🔹 예시 코드function Sandbox() { // argument를 배열로 바꾼다 var args = Array.prototype.slice.call(arguments), ..

🔶 네임스페이스 패턴(NameSpace pattern)변수 이름이 겹치는 상황을 보완하기 위해 사용됨이름들을 한곳에 모아 충돌 방지네임스페이스 패턴은 애플리케이션 또는 라이브러리를 위한 하나의 전역객체를 생성 후 그 안에 필요한 모든 기능을 프로퍼티로 정의하는 것장점변수명 중복 방지신뢰도 증가🔹 예시 코드//전역 객체 하나 생성var globVariable = {}; //객체의 프로퍼티로 추가globVariable.num = 1; //함수도 추가globVariable.increaseNum = function(){ console.log('increase!');} globVariable.decreaseNum = function(){ console.log('decrease!')}ES6 이후, let,con..

🔶 팩토리 패턴(factory pattern)객체 생성 부분을 떼어내 추상화하는 패턴두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴장점 유연성 증가 : 객체 생성하는 부분(CarFactory)과 객체를 사용하는 부분(Car)을 분리하여 객체 생성과 사용에 대한 유연성을 높유지 보수성 증가 : 캡슐화하여 객체 생성 과정을 추상화 → 한 곳만 고쳐도 되기 때문에 유지보수 및 코드 변경이 용이코드 의존성 낮춤단점코드 복잡도 증가 : 팩토리 클래스 추가 작성해야하기 때문유지보수 어려움 : 팩토리 클래스의 존재로 인해 객체 생성 로직이 복잡해짐객체의 생성 과정이 추가로 이루어지므로 약간의 성능 손실이 발생🔹 예시 코드// Product in..

🔶 싱글톤 패턴(singleton pattern)인스턴스(객체)를 애플리케이션 전체에서 공유하는 디자인 패턴전역 변수를 사용하지 않고도 해당 객체를 전역적으로 접근 할 수 있게 되며 공유 자원에 대한 동시 접근을 제어자원 관리 : 객체 하나만 생성하기 때문에 자원 낭비 방지전역 객체 : 전역 객체처럼 동작하므로, 여러 곳에서 접근 사용 가능상태 유지 : 상태 유지 용이안정성 : 다중 스레드 환경에서도 안정성 보장단점의존성 문제 : 싱글톤 객체에 의존하는 다른 객체들이 있는 경우 의존성 문제 발생테스트 어려움 : TDD에 걸림돌이 됨, 테스트 제어 어려움객체의 역할이 명확하지 않음유연성 제한 : 수정 불가, 상속을 통한 확장 불가장점🔹 Class 문법 이용자바에서 싱글톤 패턴을 구현하는 방식을 흉내le..

🔶 메모이제이션 (Memoization)반복되는 결과를 메모리에 저장해놓고 다음에 같은 결과가 나올 때 다시 계산할 필요없이 빨리 실행 하는 기법자바스크립트의 메모이제이션 컨셉은 두가지 개념으로 만들어짐클로저(Closure)고차함수(Hiher Order Functions)(함수에서 함수반환)🔹 클로저클로저는 함수의 해당 함수가 선언된 어휘 환경(lexical environment)의 결합이다.function foo(a) { // 글로벌 스코프 var b = a + 2; function bar(c) { console.log(a, b, c); } bar(b * 2);}foo(3); // 3, 5, 10예제를 보면 bar의 내용이 반복적으로 사용할때 유용하게 쓸 수 있음🔹 함수에서 함수 반환..

함수형 프로그램 사용 이유부수효과 감소동일한 입력이 들어가면 동일한 출력이 나오게 하여 가독성과 유지보수를 용이🔶 고차함수함수를 입력받아서 함수를 반환하는 함수즉, 함수 실행이 완전히 끝날때까지 최소한 두 단계에 걸친 매개변수가 존재완전히 완료되기 전에 여러번 호출 되어야함const decimalCalculator = denominator => numerator => decimalPoint => { const num = numerator/denominator return num.toFixed(decimalPoint)}const divideByThree = decimalCalculator(3) => 5번째 줄const devideTenByThree = divideByThree(10) => 6번..