문돌이 Theo

디자인 패턴 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 '규약', 약속 형태로 만들어 놓은 것 싱글톤 패턴 하나의 클래스에 하나의 인스턴스만 가지는 패턴 (예 : DB 연결 모듈) 전역 변수를 사용하지 않고 객체를 하나만 생성함 생성된 객체를 어디서든지 참조할 수 있음 여러번 생성해도, 실제로 생성되는 객체는 하나 최초 생성 이후에 호출된 생성자는 이미 생성된 객체를 리턴 환경설정 클래스, 커넥션 풀과 같이 공통 클래스에 사용하는 것이 일반적 싱글톤 패턴의 특징 하나의 인스턴스를 여러 모듈들이 공유하여 사용 인스턴스 생성할 때 드는 메모리 비용이 줄어듦 여러 모듈에서 사용하기 때문에 의존성이 높아짐 싱글톤 예제 코드 Javascript class..

Git 개요 많은 채용공고에서 Git 등의 분산 버전 관리 이용에 능숙한 사람을 찾는다. Git을 사용할 때, 개인이냐 팀이냐에 따라 목적이 달라진다. 싱글 플레이 코드 관리 / 백업 팀 플레이 협업 Workflow 서비스/제품 이력관리 커밋 규칙과 정확한 메세지 코드 리뷰 Git 구조 및 명령어 위의 그림대로 로컬과 원격 레포지토리를 git 명령어를 통해 관리한다. cheat-sheet라는 키워드로 검색하면 명령어와 관련된 이미지 파일들을 찾을 수 있다. Docker, Linux 등의 명령어도 위와 같이 존재하니 잘 모른다면 검색해서 하나 책상에 붙여놓자! Git Branch 버전 관리에서 가장 중요한 것은 '커밋'이다. 각 업무에 대한 이름으로 Branch를 만들고 작업하고 정리하여 커밋을 보낸다. ..

개발자가 좋은 상품, 서비스를 개발하기 위해서는 개발 실력도 중요하지만 프로젝트와 관련된 도구와 시스템, 협업툴을 잘 활용하는 능력 또한 중요하다. 정말 많은 협업 툴이 존재한다. 대표적으로 무엇이 있는지, 어떤 종류가 있는지를 간략하게 소개하고자 한다. 협업 툴 통합개발환경(IDE) IDE의 생산성이 에디터와 비교할 수 없을만큼 좋다. 개발자라면 사용해야할 1순위 툴이다. 하나의 IDE를 통해 개발, 빌드, 배포 등 모든 개발을 최적화시켜주었기 때문에 통합개발환경이라 한다. 객체, 패키지, 클래스 등 상호 참조 확인이 가능하고 Git 내장 등의 편리한 기능도 포함하고 있다. 특히 하이라이팅이 되어 가독성이 좋고, 자동완성 기능, 디버깅!! 등도 상당히 편리하다. IDE는 사용할수록 다양한 기능이 있다는..

3. 클린코드를 만드는 규칙들 3.4 착한 함수 (Function) 함수를 만드는 원칙은 가급적 작게 만들어야 한다고 한다. if문이나 while문 안의 내용은 한줄로 처리되도록 하는 것이 이상적이고 블록 안에서 다른 함수를 호출하도록 작성한다. 함수의 크기는 20줄 이내, 한라인당 150문자를 넘지 않도록 한다. 함수 하나당 하는 일은 하나만 하도록 한다. 여기서 하나의 일은 같은 추상화 수준을 의미한다. public void doTheDomesticThings() { takeOutTheTrash(); walkTheDog(); for (Dish dish : dirtyDishStack) { sink.washDish(dish); teaTowel.dryDish(dish); } } // 리펙토링 public ..

1. 클린코드란 무엇일까? 클린코드를 올바르게 이해하기에 앞서 소프트웨어 대가들은 클린코드가 무엇이라고 생각할까 우아하고 효율적인 코드를 좋아한다. 논리가 간단해야 버그가 숨어들지 못한다. ··· 클린코드는 한가지를 제대로 한다. - 비야네 스트롭스트룹 (C++ 창시자) 훌륭한 프로그래머는 사람이 이해할 수 있는 코드를 짠다. - 마틴파울러 (리팩토링 저자) 클린코드는 단순하고 직접적이다. 클린코드는 잘 쓴 문장처럼 읽힌다. 클린코드는 결코 설계자의 의도를 숨기지 않는다. - 그레디 부치 (객체지향 대가) 코드를 읽으면서 짐작했던 기능을 각 루틴이 그대로 수행한다면 클린코드라 불러도 되겠다. - 워드 커닝엄 (위키 창시자, 익스트림 프로그래밍 창시자) 대가들은 클린코드를 표현하는데 있어 공통적으로 다음을..

Vuex statement manage pattern + library for vue.js 상태 관리 패턴 + 라이브러리 상태를 전역 저장소로 관리할 수 있도록 지원하는 라이브러리 state가 예측 가능한 방식으로만 변경될 수 있도록 보장하는 규칙 설정 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 Vue의 공식 devtools와 통합되어 기타 고급 기능을 제공 State state는 data이며 해당 어플리케이션의 핵심이 되는 요소 각 컴포넌트에서 관리 (.html의 경우 new Vue({}), SFC에서는 .vue에 해당) DOM은 data(state)에 반응하여 DOM을 렌더링 Pass props & Emit event 각 컴포넌트는 독립적으로 데이터를 관리 데이터는 단방향 흐름으로 ..

Component 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 즉, 컴포넌트 개발을 함에 있어 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공 Vue 컴포넌트 === Vue 인스턴스 Vue Component 구조 예시 SFC Single File Component Vue의 컴포넌트 기반 개발의 핵심 특징 하나의 컴포넌트는 .vue라는 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리 즉, .vue 확장자를 가진 싱글 파일 컴포넌트를 통해 개발하는 방식 V..

Concepts of Vue.js MVVM 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴 구성 요소 Model View View Model Model Vue에서 Model은 JavaScript Object JavaScript의 Object 자료 구조 이 Object는 Vue Instance 내부에서 data로 사용되는데 이 값이 바뀌면 View(DOM)가 반응 View Vue에서 View는 DOM Data의 변화에 따라서 바뀌는 대상 ViewModel Vue에서 ViewModel은 모든 Vue Instance View와 Model 사이에서 Data와 DOM에 관련된 모든 일을 처리 ViewModel을 활용해 Data를 얼마만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것 Quick..

Vue.js란? Front-End Development 프론트엔드 개발은 HTML, CSS 그리고 JavaScript를 활용해서 데이터를 볼 수 있게 만들어 줌 이 작업을 통해 사용자는 데이터를 눈으로 볼 수 있고 데이터와 상호작용 할 수 있음 대표적인 프론트엔드 프레임워크 Vue.js, React, Angular What is Vue.js 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 현대적인 tool과 다양한 라이브러리를 통해 SPA(Single Page Aplication)를 완벽하게 지원 SPA 단일 페이지 애플리케이션 (Single Page Aplication) 현재 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 서버로부터 처음에만 페이지를 받아..

Axios ref : https://axios-http.com/docs/intro Promise based HTTP client for the browser and node.js 브라우저를 위한 Promise 기반의 클라이언트 원래 'XHR'이라는 브라우저 내장 객체를 활용해 AJAX 요청을 처리하는데, 이보다 편리한 AJAX 요청이 가능하도록 도와주는 기능 확장 가능한 인터페이스와 함께 패키지로 사용이 간편한 라이브러리를 제공 Installing npm 사용 시 $ npm install axios CDN 사용 시 jsDelivr CDN unpkg CDN Axios 예시 const URL = 'https://jsonplaceholder.typicode.com/todos/1/'..