본문 바로가기

개발

 (46)
[JavaScript] 클린코드 참고자료 - 2 (객체) 객체 Object freeze 1차원적인 것만 가능 OPTIONS 같은 경우는 freeze 되지 않는다. const STATUS = Object.freeze({ PENDING: "PENDING", SUCCESS: "SUCCESS", FAIL: "FAIL", OPTIONS: { GREEN: "GREEN", RED: "RED", }, }); STATUS.PENDING = "P"; console.log(STATUS.PENDING); // PENDING - 변하지않음 STATUS.NEW_PROP = "PP"; console.log(STATUS); // {"PENDING":"PENDING","SUCCESS":"SUCCESS","FAIL":"FAIL"} - 추가되지 않음 console.log(Object.isFro..
[JavaScript] 클린코드 참고자료 - 1 (변수, 배열) Udemy 클린코드 강의를 수강하고 내가 지키지 않고 있거나 익숙해 져야 할 것들 정리 변수 타입 검사 console.log(Object.prototype.toString.call("")); // [object String] console.log(Object.prototype.toString.call(new String(""))); // [object String] console.log(Object.prototype.toString.call(arr)); // [object Array] console.log(Object.prototype.toString.call(func)); // [object Function] console.log(Object.prototype.toString.call(date)); /..
[Javascript] plain DB 데이터로 Tree 쉽게 만들기 Tree를 만드려면 염두해야할 두가지 1. DB 데이터를 어떻게 추출하여 트리를 만들 수 있는 JSON 형태로 만들 것인가 2. 만든 JSON을 어떻게 태그로 추출할 것인가 만들 TREE 구조는 이러하다. 이런 트리를 만드려면 다음과 같이 각각의 노드의 Id와 parentId가 필수적으로 필요하다. const data = [ { id: 56, parentId: 62 }, { id: 81, parentId: 80 }, { id: 74, parentId: null }, { id: 76, parentId: 80 }, { id: 63, parentId: 62 }, { id: 80, parentId: 86 }, { id: 87, parentId: 86 }, { id: 62, parentId: 74 }, { id:..
[Javascript] Method Chaining 메서드 체이닝 메서드 체이닝(Method Chaining)이란? 동일한 객체에서 여러 함수가 연속적으로 호출되는 Javascript의 패턴이다. 왜 사용할까? 동일한 개체 참조를 사용하여 여러 기능을 호출 할 수 있기 때문에 코드의 가독성을 높이고 중복성이 줄어든다. 10, 20을 더하고 10을 곱하고 10을 나누는 함수를 생성해보자. 메서드 체이닝 사용 전 const Obj = { result: 0, addNumber: function(a, b) { this.result = a + b; }, multiplyNumber: function(a) { this.result = this.result * a; }, divideNumber: function(a) { this.result = this.result / a; } };..
[PostgreSQL] psql pg_dump으로 덤프하고 새로운 DB에 덤프 적용하기 기존 데이터들을 덤프를 떠야 하는 경우가 종종 있다. 대량의 데이터들을 이용할 때 HeidiSQL을 사용하면 도중에 데이터가 유실되거나 뻑날 수 있어서 cmd를 이용한 psql을 사용한다. 전제 조건 PostgreSQL을 설치 환경변수를 설정 일단 접속 방법부터 알아보자. postgres 계정과 해당 데이터베이스에 접속 postgres 계정 접속하기 psql -U postgres cmd에서 해당 명령어를 입력한다. 계정 안에 있으면 데이터베이스 목록들을 볼 수 있다. \l 또는 \list 데이터베이스에 접속하기 psql -U postgres -d "데이터베이스명" psql -U postgres -d "DB" 데이터베이스 안으로 들어오면 쿼리문을 작성하거나 테이블 목록들을 볼 수 있다. \dt 또한 해당 ..
[Javascript] 이벤트 위임(Event delegation) 이벤트 위임이 생긴 배경 자바스크립트에서는 페이지에 존재하는 이벤트 핸들러의 개수가 페이지 성능에 직접적으로 영향을 미친다. 그 이유는 첫번째로는 각 함수가 메모리를 점유하는 객체여서이고, 두번째는 이벤트 핸들러를 많이 할당하려면 DOM 접근도 많아지며 이는 전체 페이지의 응답성을 떨어트린다. 그러므로 이벤트 위임을 사용한다. 이벤트 위임이란? DOM 트리에서 가능한 가장 높은 요소에 이벤트 핸들러를 단 하나만 할당하여 해당 타입의 이벤트를 처리하는 기법이다. 이벤트 핸들러의 개수를 줄이기 위해 사용한다. click 이벤트는 document 레벨까지 버블링되어 올라간다. 즉 클릭 가능한 요소마다 일일이 onclick 이벤트 핸들러를 할당하지 않고 전체 페이지에 하나만 할당해도 된다. 다음 예제를 보자. ..
[Vanilla Javascript] Jasmine을 이용해 테스트 코드 작성해보기 -3 래거시 코드 증가 0 개선된 코드 index.html Increase ClickCountView.js var App = App || {} App.ClickCountView = (clickCounter, options) => { if (!clickCounter) throw Error(App.ClickCountView.message.noClickCounter); if (!options.updateEl) throw Error(App.ClickCountView.message.noUpdateEl); const view = { updateView() { options.updateEl.innerHTML = clickCounter.getValue(); }, increaseAndUpdateView() { clickCou..
[Vanilla Javascript] Jasmine을 이용해 테스트 코드 작성해보기 -2 카운터 데이터는 돔(DOM)에 반영되어야 한다. 이 역할을 하는 ClickCountView 모듈을 만들자. 데이터를 출력하고 이벤트 핸들러를 바인딩하는 일을 담당할 것이다. 첫번째 스펙 "ClickCountView 모듈의 updateView()는 카운트 값을 출력한다" 그런데.. 데이터를 조회할 ClickCounter를 어떻게 얻지? 게다가 데이터를 출력할 돔 엘레먼트는 어떻게 테스트하지? 주입하자! ClickCounter는 객체를 만들어 파라미터로 전달 받자 데이터를 출력할 돔 엘레멘트로 만들어 전달받자 TDD 방식으로 사고하다 보면 이런식으로 필요한 모듈을 주입받아 사용하는 경향이 생긴다. 하나의 기능 단위로 모듈을 분리할 수 있기 때문에 단일 책임 원칙을 지킬 수 있다. Red describe('A..

티스토리툴바