담백한 웹 개발 이야기

2019년 6월 8일에 정리한 포스트입니다. 글의 목적 소프트웨어의 구성요소는 객체, 객체간의 관계, 조건문, 반복문이라는 재료가 대부분 구성된다. 이전에는 조건문과 반복문 재료를 다루기 위해서 현실세계에서 유용한 사항들을 선언형으로 대체 가능한 문법들 정리에 다뤘다. 이번에는 객체에 대한 내용을 정리했다. 객체를 다루는 것은 현실세계를 해결하는 데 있어서 필수라고 할 수 있다. 사견을 정리하는 것보다 도서 몇권을 발췌하여 객체과 객체지향에 대한 내용을 작성했다. 목차 객체란 객체와 자료구조 객체지향의 본질 객체의 역할과 책임 관련 포스트 요약 참고문헌 객체란 객체란 식별 가능한 개체 또는 사물이다. 객체는 자동차처럼 만질 수 있는 구체적인 사물일 수도 있고, 시간처럼 추상적인 개념일 수도 있다. 객체는..

Nuxt 기반한 프로젝트에서 vue/eslint-plugin-vue를 사용중이다. prettier 를 사용하려고 검토하는 도중 우연히 vue/eslint-plugin-vue에 룰이 많다는 것을 알게 되었다. 초기 세팅 시에 잡혀있는 plugin:vue/recommended는 굉장히 약한 수준의 룰이다. eslint-plugin-vue를 참고해서 아래와 같이 룰을 수정했다. 1. rules에 prettier로 작업했던 유사한 룰을 추가했다. 2. 기본룰 수준을 plugin:vue/recommended에서 plugin:vue/strongly-recommended로 변경했다. module.exports = { root: true, env: { browser: true, es6: true }, plugins: ..

2019년 4월 25일에 작성한 포스트입니다. 글의 목적 서비스 배포 과정과 안정화 기간에 대한 일렬의 과정은 안전한 서비스 운영을 위해서 중요하다. 하지만 이러한 지식은 현업에서 경험하는 방법외는 얻기 힘들다. 서비스 개발 및 운영을 하는 엔지니어들에게 도움을 주고자 작성을 했다. 배포와 관련된 지식들 배포 프로세스 소프트웨어를 배포하기 위해서는 프로세스가 존재한다. 나는 프런트를 담당하고 있는 데, 프런트에는 일반적으로 백엔드 배포에 의존성이 있다. 의존성이 있는 소프트웨어가 있으면 협업부서간의 명확하게 순서를 정의해야 한다. 배포 과정중에 일시적으로 서비스를 사용하지 못하는 경우가 있다. 이럴때는 사용자들이 소프트웨어를 사용하지 못하도록 공지사항과 같은 장치를 둔다. 롤백 플랜 롤백 플랜이란 배포 ..

글의 목적 한번쯤은 다른 누군가에게 전해받은 레거시 코드를 받아 프로젝트를 진행해야 되는 경험이 있었을 것이다. 나는 2018년 10월부터 i.kakao.com으로 서비스 되고 있는 카카오 i 오픈빌더를 이어 받았다. 프로젝트는 초기 빌딩 시 프런트 전문가들이 투입되지 않아 개선점이 많이 필요했다. 현재는 프런트 인력이 추가되어 리팩토링이 진행될 예정인데, 그 과정에 앞서 지금까지 진행했던 내용을 공유할 필요성이 있어 정리한 자료이다. 목차 2018.10~11 오픈빌더 투입 2018.12 코드 리팩토링 시작 2019.01 오픈빌더 기술적부채상환 전략 2019.02 설정 페이지 리팩토링 2019.05 응답형식 구조 리팩토링 2018.10~11 오픈빌더 투입 초기에 오픈빌더는 서버 개발자로 구성된 조직에서 ..

배터리의 충전중 상태와 충전까지 남은 시간을 조회할 수 있다. 배터리량과 남은 배터리 사용 시간을 조회할 수 있다. 브라우저 지원 범위 Chrome / Edge / Opera / Android 에서 지원한다. Browser compatibility 코드 예제 6장 코드 스니펫 > Boilerplate 코드를 기반으로 데모가 제작되었습니다. 데모보기 공식 사이트 링크 자바스크립트로 배터리 상태 조회하기 배터리의 충전중 상태와 충전까지 남은 시간을 조회할 수 있다. 배터리량과 남은 배터리 사용 시간을 조회... blog.naver.com

MVC 제작시기 초안: 1979.12.10 마지막: 2003.08.20 제작회사 및 관련언어 XEROX PARC Smalltalk-80 제작목적 MVC의 기본 목적은 사용자의 멘탈모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것이다. 이상적인 MVC 솔루션은 사용자가 도메인 정보를 직접 보고 조작하는 착각을 지원한다. 특징 MVC는 Model-View-Controller로 구성된다. Model은 도메인 데이터를 의미하며 순수한 데이터의 역할을 한다. Model은 단일 객체일 수 있고, 어떤 객체의 구조일수 있다. Model의 노드는 같은 수준으로 있어야 한다. 문제 지향 노드(예: 달력 약속)와 구현 세부 정보(예: 단락)를 혼합하는 것은 혼란스럽고 잘못된 형태로 간주한다. Controlle..

파트별 구현 옵져버 const obj = {}; Observer(obj, 'counter', (newValue, oldValue) => { console.log('LOG:', newValue, oldValue) }); obj.counter = 0; obj.counter = 1; // LOG: 0 undefined // LOG: 1 0 const Observer = (obj, property, callback) => { let value = obj[property]; Object.defineProperty( obj, property, { configurable: true, enumerable: true, set: (newValue) => { callback(newValue, value); value = n..

const set = new Set(); set.add(1); set.delete(1); set.add(2); console.log(set.has(1), set.has(2)); // false true 교집합 const intersectSets = (setA, setB) => { const intersection = new Set(); for (const elem of setB) { if (setA.has(elem)) { intersection.add(elem); } } return intersection; }; console.log( intersectSets( new Set([1, 2, 3, 4]), new Set([2, 3]), ) ); // Set {2, 3} 합집합 const unionSets =..

명령형과 함수형 비교 두 리스트 연결로 비교 명령형 명령형 방식에서는 리스트의 첫 셀과 마지막 셀에 대한 포인터를 유지함으로써 O(1)만에 두 리스트를 이어 붙일 수 있다. 첫 번째 리스트의 마지막 셀이 두 번째 리스트의 첫 번째 셀을 가리키도록 변경함으로써 쉽게 구현할 수 있다. 단 두 리스트를 모두 파괴한다는 점에 유의해야 한다. 두 리스트를 이어 붙인 뒤 두 리스트를 재사용할 수 없다. 함수형 함수형 방식에서는 첫 번째 리스트의 마지막 셀을 이런 식으로 변경할 수 없다. 대신 우리가 마지막 셀을 복사하면서, 복사본에서 다음 셀을 가리키는 포인터가 두 번째 리스트의 첫 셀을 가리키게 만든다. 그런 다음, 끝에서 두 번째 셀을 복사하면서 꼬리 포인터가 방금 생긴 마지막 셀의 복사본을 가리키게 한다. 이..

이 글은 2020.02.29에 Composition API RFC 번역에 작성된 내용 요약과 Vue Mastery에서 확인할 수 있는 Composition API 관련 영상을 정리한 내용입니다. Composition API란 Composition API는 Vue 컴포넌트의 로직을 유연하고 구성하기 위한 API입니다. Vue 2.x에 추가 가능하고, Vue 3.0에서는 내장으로 제공할 함수기반 API 세트입니다. 가장 기본이 되는 API는 ref와 reactive입니다. 먼저 ref는 프리미티브 타입을 반응형 상태로 만들 수 있습니다. const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 그..

글의 목적 기능을 개발하기 앞서 선작업이 필요한 것은 개발에 소요되는 일정을 산정하는 것이다. 서비스에 필요로하는 기능은 많지만 현실적으로 모두 구현한다는 것은 힘들기 때문에 우선순위 조정이 필요했다. 그래서 일정산정에 대한 정확한 과정을 알아보기로 하였다. 용어정의 Feature : 요구 사항, 스펙과 같은 기능 하나를 의미합니다. MD : Man Day 약자로 한사람이 하루를 작업한 것을 의미합니다. 즉, 8시간입니다. 일정산정 과정 User Story => Feature List => Estimation 일정산정의 과정은 기획서를 참고하여 사용자 스토리를 작성하고, 사용자 스토리를 기반으로 기능 리스트를 작성한다. 그리고 마지막으로 기능 리스트를 통해 일정산정하게 된다. User Story 사용자 ..

글의 목적 함수나 클래스 레벨의 코드를 수정하는 것은 굉장히 빈번하게 발생하고 익숙한 작업이다. 하지만 구조 레벨을 수정하는 것은 빈번하지 않고 큰 비용이 발생하는 작업이다. 구조 리펙토링은 상태와 로직을 수정하지 않고 컴포넌트, 파일, 폴더를 역할과 책임 그리고 이해하기 쉬운 형태로 재정렬하는 것이다. 이 포스트에서는 컴포넌트 구조 리펙토링을 다룬다. 이해하기 쉬운 코드와 소프트웨어 철학을 학습했는 데도 불구하고 시간적인 여유가 없어 구조적인 리펙토링을 진행못할 때가 많다. 개인적으로 싫어하는 탁상공론을 벗어나 구조레벨의 리펙토링을 진행하였고, 관련해서 기본적인 방법들을 정리하고자 작성한 포스트이다. 표기정의 ngFor Angular에서 사용하는 리스트 렌더링 문법이다. vue에서는 v-for를 사용한..