전체 글 (50) 썸네일형 리스트형 [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.. [Vanilla Javascript] Jasmine을 이용해 테스트 코드 작성해보기 -1 레거시 코드 증가 0 버튼을 누르면 하나씩 증가하는 형태의 코드이며 이 코드에는 세가지 문제점이 있다. 레거시 코드의 문제점 1. 관심사의 미분리 증가 한줄의 코드가 여러개의 역할을 하고있는데 하나의 코드는 한가지 역할만 하는 것이 좋다. (단일 책임의 원칙) 그래야 읽기 쉽고 명확한 코드가 된다. 2. 전역변수의 충돌 var counter = 0; 전역변수는 어떤 경우에서라도 쓰지 않는 것이 좋다. 충돌나기 쉽기 때문이다. 3. 재사용이 어려움 var el = document.getElementById('counter-display'); span id를 하드코딩하여 재사용성이 떨어진다. 확장에는 열려있고 변경에는 닫혀있는 코드가 좋은 코드이다. 어떻게 하면 테스트 할 수 있을까? 1. 코드를 UI에서 .. [Javascript] Closure 클로저 클로저(Closure)? 함수가 선언된 환경의 렉시컬 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기술 클로저는 바깥 합수의 변수에 접근할 수 있는 중첩함수이다. 클로저란 다른 함수의 스코프에 있는 변수에 접근 가능한 함수 클로저를 배우기 전에 어휘적 범위 지정 (Lexical Scoping)에 대해 알아보자. 어휘적 범위 지정 (Lexical Scoping) 예제 1 function outer(param){ const outerParam = `Hello ${param}!`; function inner() { console.log(outerParam); // 부모 함수에서 선언된 변수 outerParam를 사용 } return inner; } const clos.. [Javascript] module export, import, 모듈 이름 수정 모듈화를 배우는 도중에 export, import 구문을 헷갈리지않도록 간단하게 정리하려고 한다. export? javascript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 import문으로 가져가 사용할 수 있다. export 종류 Named Exports Default Exports 예제를 살펴보기 앞서 예제의 폴더 구조는 이러하다. . ├── index.html ├── kim.js // import 함수 └── sayHello.js // export 함수 Default Exports 1개의 모듈 export만 가능 Default Exports 예제 index.html type="module"로 js를 추가하기 sayHello.js export default function.. [Javascript] IIFE (즉시 실행 함수) IIFE란? IIFE(Immediately-Invoked Function Expressions) 정의되자마자 즉시 실행되는 함수 표현식 사용이유? 전역 스코프에 불핑요한 변수의 추가를 방지하고 IIFE 내부에 다른 변수들이 접근하는것을 막을 수 있다. 즉, 데이터 프라이버시와 코드 모듈화 문법 (function() { console.log('hi IIFE') }()); (function() { console.log('hi IIFE') })(); // 화살표 함수 사용 (() => console.log('IIFE with arrow'))(); (() => { console.log('IIFE with arrow'); })(); 첫번째 괄호 : function을 감싸는 첫번째 괄호는 익명함수 임을 정의한다. .. 이전 1 2 3 4 5 6 7 다음