본문 바로가기

SW LAB

Vuetify 커스터마이징 - 체크박스 Component Framework 중 Vuetify 커스터마이징을 소개하려 합니다. Vuetify Document 를 보면 Slot, Props가 잘 소개되어 있는데요. 커스터마이징을 어떻게 해서 공용 컴포넌트로 활용할 수 있는지 소개합니다 :-) 제가 소개하는 커스터마이징 체크박스는 다음과 같은 기능이 있습니다. 체크 데이터 model 적용 이미지를 이용한 체크 유무 표기 및 사이즈 지정 라벨 표기 유무 및 색상, 사이즈 지정 체크박스 가로 위치 지정 데모로 보여드릴 샘플은 다음과 같이 표기됩니다. 코드는 두 개의 파일을 작성하였습니다. 데모 페이지를 표기하는 VuetifyCheckBoxView.vue 커스터마이징한 CCheckBox.vue Vuetify 에 v-checkbox 가 있기는 하지만 이 .. 더보기
Vuetify 커스터마이징 - 버튼 (v-btn) Component Framework 중 Vuetify 커스터마이징을 소개하려 합니다. Vuetify Document 를 보면 Slot, Props가 잘 소개되어 있는데요. 커스터마이징을 어떻게 해서 공용 컴포넌트로 활용할 수 있는지 소개합니다 :-) 제가 소개하는 커스터마이징 버튼은 다음과 같은 기능이 있습니다. 버튼 내 문자열과 색상, 사이즈, Weight 등 지정 아이콘 앞, 뒤 선택하여 삽입 및 색상, 사이즈 등 지정 버튼의 Background, Border 색상 지정 버튼의 가로, 세로 크기 지정 클릭 이벤트 지정 Disabled 지정 데모로 보여드릴 샘플은 다음과 같이 표기됩니다. 코드는 두 개의 파일을 작성하였습니다. 데모 페이지를 표기하는 VuetifyDemoView.vue Vuetify 버.. 더보기
Vue.js 프로젝트 구조 추천 Vue.js 를 이용하여 프로젝트를 생성 후, 고민이 빠지게 되는 것 중 하나가 프로젝트 구조입니다. Back-End 프로젝트의 경우 대부분 비슷한 구조를 갖고 개발을 시작하기 때문에 협업을 할 때 서로 이해하기가 좋지요. 가령 Service, Controller, Dao(Mapper), Dto(Model) 등으로 분류 후 하위에 구체적인 구현체를 생성합니다. Vue.js 의 Convention 가이드에도 프로젝트 구조는 특별히 언급이 되어 있지 않습니다. 그래서 여러 사람들의 프로젝트의 그 간의 경험으로 개발 및 유지보수에 좋은 구조를 소개드립니다. Vue.js 는 Router, Store, API 그리고 각 페이지를 정의한 Component 로 구분할 수 있습니다. 그리고 mixin, plugin, .. 더보기
Clean Architecture : (5장) 객체 지향 프로그래밍 프롬스의 SWDEVLAB 객체 지향 프로그래밍 좋은 아키텍처를 만드는 일은 객체 지향 설계 원칙을 이해하고 응용하는 데서 출발합니다. 그렇다면 객체 지향이란 무엇인가? 이 질문에 누군가는 "데이터와 함수의 조합" 이라고 답을 하는데, 그다지 만족스러운 대답은 아닙니다. 달과 니가드가 함수 호출 스택 프레임을 힙으로 옮기고 OO를 발명한 1966년 이전부터 프로그래머는 데이터 구조를 함수에 전달해 왔습니다. 또는 "실제 세계를 모델링하는 새로운 방법"이라고 대답하는데, 이 또한 얼버무리는 수준에 지나지 않습니다. 이 답변이 전달하려는 의도는 OO는 현실 세계와 의미적으로 가깝기 때문에 OO를 사용하면 소프트웨어를 좀 더 쉽게 이해할 수 있다는 데 있는 듯 합니다. 하지만 그 정의가 너무 모호합니다. OO의.. 더보기
Clean Architecture : (4장) 구조적 프로그래밍 프롬스의 SWDEVLAB 구조적 프로그래밍 에츠허르 비버 데이크스트라는 1930년대 로테르담에서 태어났습니다. 2차 세계대전을 견디며 1948년에 수학, 물리, 화학, 생물에서 최고 점수를 받으며 고등학교를 졸업하고 1952년 3월, 21살의 나이로 네덜란드 최초의 프로그래머로서 암스테르담의 수학 센터에 취업합니다. 1955년, 그는 이론 물리보다 프로그래밍에 대한 지적 도전이 더 큰 의미가 있다고 생각하고 장기적인 진로로 프로그래밍을 선택합니다. 1957년 마리와 데베츠와 결혼할 때, 자신의 직업을 기입해야 했는데, 프로그래머라는 직업이 인정되지 않아 이론 물리학자로 제출하게 됩니다. 진공관 시대였던 이 때는 컴퓨터가 거대하고, 쉽게 손상되며, 느린 데다가 결과마저 믿을 수 없는.. 그래서 극도로 제한.. 더보기
Clean Architecture : (3장) 패러다임 개요 프롬스의 SWDEVLAB 패러다임 개요 소프트웨어 아키텍처는 코드로부터 시작합니다. 따라서 아키텍처에 대한 논의도 최초로 작성된 시점부터 우리가 코드를 통해 배운 내용을 살펴보는 데서 출발하고자합니다 1938년 엘런 튜링(Alan Turing)은 컴퓨터 프로그래밍이라고 부르는 분야의 토대를 쌓았습니다. 튜링은 프로그래밍이 가능한 머신을 최초로 상상한 사람은 아니었지만, 프로그램을 단순한 데이터라고 이해한 최초의 사람이었습니다. 1945년경 튜링은 사람이 식별할 수 있는 형태의 실질적인 프로그램을 실제 컴퓨터에서 코드로 작성했습니다. 이들 프로그램은 반복문, 부기문, 할당분, 서브루틴, 스택 등 우리에게 익숙한 구조를 사용했습니다. 그리고 바이너리 언어를 사용했습니다. 이 때 이후로 프로그래밍에는 수많은 .. 더보기
Clean Code : (3) 함수 프롬스의 SWDEVLAB 함수 프로그래밍 초창기에는 시스템을 루틴과 하위 루틴으로 나누었습니다. 포트란과 PL/1 시절에는 시스템을 프로그램, 하위 프로그램으로 나누었습니다. 지금은? 함수만 살아남았습니다. 어떤 프로그램이든 가장 기본적인 단위가 함수입니다. 이번 포스팅을 하며 함수를 잘 작성하는 방법을 숙지합니다. 작게 만들어라 함수를 만드는 첫째 규칙은 작게! 입니다. 함수는 만드는 두번째 규칙은 더 작게! 입니다. 이 규칙은 근거를 대기 곤란하고, 작을수록 더 좋다는 증거나 자료를 제시하기도 어렵습니다. 저자는 40년간 개발을 하며, 1000줄의 함수, 100~200줄의 함수, 20~30줄의 함수를 모두 작성하는 경험을 했지만 작은 함수가 좋다고 확신하고 있습니다. 80년대에는 함수가 한 화면을 넘.. 더보기
Clean Code : (2) 의미 있는 이름 프롬스의 SWDEVLAB 의미 있는 이름 소프트웨어에서 이름은 어디나 쓰입니다. 변수, 함수, 인수, 클래스, 패키지 그리고 소스파일과 디렉토리에도 이름을 붙입니다. 이렇듯 많이 사용하므로 이름을 잘 지으면 여러모로 편합니다. 이번에는 이름을 잘 짓는 간단한 규칙을 몇가지 살펴봅니다. 의도를 분명히 밝혀라 좋은 이름으로 지으려면 시간이 걸리지만 좋은 이름으로 절약하는 시간이 훨씬 더 많습니다. 변수(혹은 함수나 클래스)의 존재 이유는? 수행 기능은? 사용 방법은? 따로 주석이 필요하다면 의도를 분명히 드러내지 못했다는 말이 됩니다. int d; // 경과 시간 (단위: 날짜) 여기서 이름 d는 아무 의미도 드러내지 않습니다. 경과 시간이나 날짜라는 느낌이 안듭니다. 측정하려는 값과 단위를 표현하는 이름이.. 더보기