Yang Taeho's Dev. & Music: 2017

2017년 12월 28일 목요일

프로그래밍의 정석 책에 대한 소개와 관점에 대한 프리젠테이션

프로그래밍의 정석 - YES24

위 책을 가지고 독서 모임에 참여하였다. 첫 날이고 다들 토론에 대한 감이 없는 관계로 첫 시간은 주최자의 프리젠테이션으로 시작하였다. 둘째 시간은 프리젠테이션 내용과 책의 내용을 바탕으로 토론을 했다.

아래 내용은 첫 시간에 들은 내용과 프리젠테이션 발표 자료를 취합하여 정리한 내용이다.

왜 하필 이렇게 코드를 작성했나요?

일반적으로 취향, 가치관, 지식, 규칙을 흔히 말한다. 하지만 이것은 아름다운 이야기일뿐..
결국 중요한 이유는 돈 ( 시간 )

코드를 어떻게 짜는가에 대한 가장 중요한 이유는 돈 = 시간 = 개발 시간 + 수정 시간(일반적으로 개발 시간의 8~9 배) 이다.
왜냐하면 프로그래밍에 필요한 자원은 인건비가 전부라고 봐도 무방하기 때문이다.

이 코드의 당위성을 설명할 근거

이 코드를 이렇게 작성하면 사후 이 코드를 수정 시 시간이 절약됩니다.

꿈 같은 이야기... 현실에서는 코 앞의 일정과 이해관계로 설득의 근거가 될 수 없다.
고객 요구사항, 투입 가능 자원, 필수 구현 사항, 프레임웍 및 언어에 대한 제약, 일정 준수 등의 가치가 충돌하는 가운데서는 수정시 시간이 절약된다는 근거는 설득력이 희박하다. 심지어 위원회 개발로 치닫게 될 위험이 커진다. 위원회 개발을 초래할 수 있는 가치의 충돌을 포스( forth )라고 한다.
설득과 책임을 통해 위의 여러 가치들을 보다 구체적이고 강력한 방향성으로 묶을 수 있다.

보다 구체적이고 강력한 방향성

코드 ( 프로젝트 )를 보다 구처젝이고 강력한 방향성으로 이끌기 위한 여러 근거들을 바탕으로 설득의 과정을 거친다.
서로 고도화된 개발 지식 체계를 갖고 있는 경우 등에서 원리를 바탕으로 설득해 볼 수 있다.

원리의 항목: 추상, 캡슐화, 은닉, 패키지, 관심의 분리, 완전성과 순수성, 정책과 구현, 인터페이스와 구현, 단일 참조, 분할 정복
원리 중심 설명의 예시: 이거 캡슐화가 깨졌잖아. 고쳐야 할 것 같아. / 이건 인터페이스 분리가 필요할 것 같은데?
원리의 미덕: 원리 수준에서 설득되는 팀을 구축할 수 있다면 해당 팀은 큰 가치를 달성할 수 있다. ( 향후 수정에 드는 비용이 매우 감소하기 때문에.. )
추상: 일반화 ( 카테고라이즈, 그룹화 ), 사상 ( 모델링, 기억할 것만 남김 ) 을 통해 달성할 수 있다.
추상의 미덕: 구체는 매우 다양하며 복잡하기 때문에 필요한 요소들만을 단순화한다.

원리로 설득이 되지 않는 경우 원칙을 바탕으로 설득해 볼 수 있다. 단, 원칙을 바탕으로 설득시 원리를 위배하지 않아야 한다.

원칙의 항목: 결과의 국소화, 반복의 최소화, 로직과 데이터의 일체화, 대칭성, 선언형 표현, 변경 빈도
원칙 중심 설명의 예시: 교장 선생님 훈화 말씀 시 사열한 학생의 예. 학생은 모두 정렬되어 서있어야 한다는 원칙이 세워져있다면, 모두가 똑바로 서있기 때문에 일사병으로 쓰러지는 학생을 발견할 수 있다. / 코딩스탠다드가 지켜지고 있는 모듈 안에서는 코딩스탠다드가 깨진 잘못되거나 품질이 떨어지는 코드를 쉽게 발견할 수 있다.
원칙의 미덕: 지켜질 때 지켜지지 않는 요소를 쉽게 인지할 수 있다.
논란? : 선언형 표현은 반드시 좋다고 할 수 있을까?

선언형 표현은 로직이 들어가지 않고 상태관리의 곧홍이 격감하기 때문에 안전하다.
고로 어느 정도 수준의 품질을 유지하는데 유용하다.
하지만 선언형의 한계로 인하여 팀원 전체가 해당 선언형의 한계치를 초과할 수 없게 된다.
또한 코드의 품질도 해당 선언형의 한계치를 초과할 수 없게 된다.
선언형 한계의 예시: 애노테이션을 적극 활용한 프로젝트에서 해당 애노테이션을 통해 쉽게 기능의 추가 등이 가능하나 해당 애노테이션을 구현할 수 있는 능력은 도태되게 된다.
따라서 코드 품질과 발전 가능성을 염두하여 선언형을 어디까지 사용할 것인가의 균형을 잘 잡아야 한다.

원칙으로 설득이 되지 않는 경우 가치를 가지고 설득해 볼 수 있다. 단, 가치를 바탕으로 설득시 원칙을 위배하지 않아야 한다.
가치의 항목: 의사소통, 단순성, 유연성

가치 중심 설명의 예시: 너 혼자 일할거야? 코드 이렇게 짜면 알아보겠어?
단순성과 유연성의 상보성: 단순성과 유연성은 흔히 상반되는 가치로 인식되지만 프로그래밍에서는 최소기능을 단순하게 짜야 유연해진다. 즉 단순성과 유연성은 상반되는 가치가 아니라 상보되는 가치이다.
단순성과 유연성의 예시: Math.sin() 은 어디에나 쓸 수 있으며 항상 입력값에 대해 일정한 값을 반환한다.

설득의 레벨링. 고도화된 인원 간에는 가치와 원칙과 원리가 어우러진 설득이 가능하다. 하지만 대부분의 경우 설명의 근거를 레벨링하여 원리에 대한 이야기와 원칙에 대한 이야기, 가치에 대한 이야기를 나눠서 해야 설득할 대상의 혼돈을 방지할 수 있다.
가치로 설득이 되지 않는다면 가치의 기저인 철학을 통해 설득해 볼 수 있다.

철학 :: 가치의 기저

철학은 크게 합리주의와 상대주의로 나뉜다.
합리주의는 이성주의로서 연역적 방법론을 사용한다.
합리주의의 미덕은 기준제시이다. 일반적인 수준에서 이성적인 이야기를 하기 때문에 이해하기 편해서 쉽게 받아들여진다.
상대주의는 경험주의로서 귀납적 방법론을 사용한다.
상대주의의 미덕은 상황평가이다. 어떠한 가치에 대해 변증법을 사용한 설명 등을 바탕으로 옳고 그름을 헤아릴 수 있다.
변증법의 예시: a=b 이고 b=c 이다. 그러므로 a=c 이다.
따라서, 우리가 누군가를 설득하기 위해서는 이성적으로 이해하기 쉬운 화두를 바탕으로(합리주의 기준제시) 근거를 가지고 설명(상대주의 상황평가)하거나 근거를 나열하고 이해할 수 있게 풀어서 설명하는 등으로 두 가치를 상보적으로 활용하여야 한다.

2017년 12월 21일 목요일

html javascript radio handler 예제

2017-11-07

썩 좋은 예제는 아님...

전역 namespace 선언하고

엘레먼트 구분하고

사용할 엘레먼트 별 이벤트 만들어 넣고

핸들러 영역 구분하고

사용할 핸들러 만들어 넣음. 끝..

jquery 코드 부분은 DOM 기본 셀렉터로 바꾸는게 더 좋다고 생각하지만 귀찮으니까 이 정도로 정리..

멜론 티켓 때 코드를 안 옮겨 놔서 한 번 써봄...

toggle, on 등에 각각 shield 패턴이 들어가야 제대로 된 형태라고 볼 수 있을듯...

setProp 도 역시 jQuery 랩핑이라 그냥 그럼.... .prop 대신 쓸 수 있게 만들면 좋을듯..

var dom = {};

dom.ele = {};

dom.ele.radio = {};

dom.handler = {};

dom.handler.setProp = function(eleId,prop,value){

$dom[eleId].prop(prop,value);

//document.getElementById(eleId)[prop] = value;

};

dom.handler.toggle = function(eleId,prop){

//var value = $dom[eleId].prop(prop) ? false : true;

var value = document.getElementById(eleId)[prop] ? false : true;

dom.handler.setProp(eleId,prop,value);

};

dom.ele.radio.toggle = function(eleId){

var prop = 'checked';

dom.handler.toggle(eleId,prop);

};

dom.ele.radio.on = function(eleId){

var prop = 'checked';

dom.handler.setProp(eleId,prop,true);

};

var $dom = {};

$dom.clazz = {};

var initDom = function() {

$dom.btn_sms_y = $('#btn_sms_y');

$dom.btn_sms_n = $('#btn_sms_n');

$dom.btn_email_y = $('#btn_email_y');

$dom.btn_email_n = $('#btn_email_n');

};

function init_agree(){

var agreeText ="";

if(smsBool){

dom.ele.radio.on('btn_sms_y');

//$('#btn_sms_y').prop( 'checked', true );

}else{

dom.ele.radio.on('btn_sms_n');

//$('#btn_sms_n').prop( 'checked', true );

}

if(emailBool){

dom.ele.radio.on('btn_email_y');

//$('#btn_email_y').prop( 'checked', true );

}else{

dom.ele.radio.on('btn_email_n');

//$('#btn_email_n').prop( 'checked', true );

}

2017년 12월 20일 수요일

HTML 에서 Array.forEach 의 한계 -> ie, getElementsByName

chrome, firefox 등에서는 input 을 getElementsByName 등으로 잡을 경우

Array로 잡아준다.

반면 ie는 HtmlCollection 이라는 것으로 잡아준다.

그래서 forEach는 동작하지 않는다.

HtmlCollection 이 Array 처럼 동작하게 하기 위한 파싱.. 따로 prototype 에 extend 하지는 않고 그냥 함수에 인자로 해당 HtmlCollection을 넣는 식으로 구성했다.

/**

* for IE HtmlCollection parse to Array

var toArray = function(eles) {

// shield

if (eles.forEach && typeof eles.forEach == 'function') {

return eles;

}

var ELEMENT_NODE = 1;

var isElements = (eles.item && (eles.item(0).nodeType == ELEMENT_NODE));

if (!isElements) {

if (window.console) {

console.log("toArray use only Elements.");

}

return eles;

}

// logic

var tempItem;

var resArr = [];

var htmlCollection = eles;

for (var i = 0, len = htmlCollection.length; i < len; i++) {

tempItem = htmlCollection.item(i);

resArr.push(tempItem);

};

return resArr;

}

ele.labes 하면 input 인경우 htmlFor 가 해당 input id와 동일한 label 을 가져온다.

이 것도 ie에는 없다.

인풋의_아이디 가 해당 input 의id라고 할 때

document.querySelector('label[for'+인풋의_아이디+'])

로 가져올 수 있다.

[초급 팁] jsp 현재 시간 timestamp

<%-- JSP Common params --%>

now : 현재 타임이 영문식으로 출력

today: 20171117100302 로출력됨.

양태호: [크롤링] 유튜브 플레이 리스트 총 시간.

양태호: [크롤링] 유튜브 플레이 리스트 총 시간.: [크롤링] 유튜브 플레이 리스트 총 시간. https://www.youtube.com/playlist?list=PL9gStYgm-otNJae7Ng5HWre9yfcjdvCE0 와 같이 리스트 목록의 총 재생시간을 구하는 것.. ...

[크롤링] 유튜브 플레이 리스트 총 시간.

https://www.youtube.com/playlist?list=PL9gStYgm-otNJae7Ng5HWre9yfcjdvCE0

와 같이 리스트 목록의 총 재생시간을 구하는 것..

크롤링이라기에는 너무 별로지만... 뭔가 url 넣으면 총 재생시간 나오는 그런 식으로 디벨롭해야 쓸만해질듯....

const looper = (i,ele,list)=>{

//console.log("ee",i,ele);

return {

idx: i,

ele: ele.innerText

}

};

const times = document.getElementsByClassName('style-scope ytd-thumbnail-overlay-time-status-renderer');

let res = [];

let i = 0;

for (time of times) {

res.push(looper(i,time,times));

i++;

}

res.reduce((sum,item,idx,list)=>{ const arr = item.ele.split(':'); const currSec = Number(arr[0])*60+Number(arr[1]); return currSec + sum;},0)/(60*60);

2017년 3월 10일 금요일

[ 삽질 노트 ] 17-03-10 maven war 배포시 리소스 갱신 안됨.

[ 삽질 노트 ] 17-03-10 maven war 배포시 리소스 갱신 안됨. 한 줄 요약 메이븐 프로젝트 WAR 배포가 비 정상적으로 잘 안될 때는 maven clean 을 한 후 다시 maven package 를 해보자. TL;DR 사내 프로젝트 API 작업을 하고 있다. 로컬에서 maven run 을 하고 테스트도 다 돌려서 잘 돌아가는 걸 확인했다. 그런데 해당 프로젝트를 WAR 패키징해서 서버에 배포하고 WAS를 실행시키면 여지없이 뻗어버렸다. 에러 메시지는 과거엔 있었지만 존재하지 않는 sql 혹은 Alias 가 중복 정의 되었다는 그런 메시지 들이었다.

alias ‘어떤 이름’ is already mapped to the value ‘다른 이름'

작업한 내용이 mybatis 샘플 mapper.xml 등의 위치 변경. mybatis 샘플 mapper.xml 등의 삭제. mybatis alias 수정 등이었다. 관련된 내용에 대한 메시지였기에 이것 저것 건드려 봄. 결과적으로 안되는데 계속 시도해서 시간만 버림. 패키징된 WAR를 까보니 이미 없어야할 xml maven clean 명령으로 프로젝트의 target 폴더를 리셋하고 다시 패키징해서 배포하니 잘 된다... #maven, #메이븐, #배포, #WAR, #java, #api, #mybatis, #마이바티스

2017년 2월 25일 토요일

[삽질 노트] Spring boot - main 설정에서 여러 개의 basepackages 이용하기.excutable WAR 배포하기

[삽질 노트] Spring boot - main 설정에서 여러 개의 basepackages 이용하기.excutable WAR 배포하기
## 한 줄 요약 ##
Spring boot 에서 @ComponentScan 에 basepackages 혹은 value 에 basepackage를 명시해 줄 떄는 반드시 루트로 잡아주자.....

## 남은 삽질 ##
excutable WAR 배포하기 - 잘 아시는 분 있으면 볼만한 곳이라도 좀 알려주셨으면...

## maybe TL:DR ##
현재 회사에서 API 개발 작업을 하고 있다.
그런데 어제 그제 잘 돌아가던 api가 완전히 먹통이 돼서 초기 로딩도 안되고 있는 것이다...
설정 관련된 걸 다 갈아 엎어 보았지만 나아지질 않았다.

계속 @Mapper 선언 해 놓은 부분들을 읽어들이질 못했다...

뾰족한 원인을 찾지 못하고 이틀 째 삽질을 했다. 금요일 저녁 8시 문득 스캔 관련된 부분이 문제이겠단 생각이 들었다.
Spring boot 을 최초 실행시키도록 선언해놓은 Application 클래스의 @ComponentScan 부분을 수정해보았다.

@ComponentScan(value="com.greenmango.example","kr.co.gmango")

이 부분이었는데 문제는 간단했다.

"com.greenmango.example" 이 부분에서 실질적인 basepackage 는 com.greenmango 였기 때문에 왠지 모르게 com.greenmango.example 내부도 scan을 하지 않았던 것이다.
이 생각을 못했던 이유는 분명히 애노테이션이 잡힌 부분들은 com.greenmango.example 이하였기 떄문이다.

어쩄든 내가 스프링의 스펙에 그만큼 미비한 부분이었다고 생각한다... 그래도 과장이나 됐는데 이러려고 개발자했나 자괴감 드는 이틀이었다... 시간이 너무나 없는 순간인데...

그래도 정신 바짝 차리고 달려보자!

2017년 2월 17일 금요일

Eclipse를 Windows 10 작업 표시 줄에 고정 - 아이콘 두 개 생기는 것 방지

eclipse 바로 가기를 만들고 해당 바로 가기의 이름은 eclipse로 변경한다.
해당 바로 가기 우클릭 > 속성 > 바로 가기 > 대상(T) 에 아래 command line argument 를 추가

[기존 이클립스 경로]\eclipse.exe -vm "[JDK 위치]\jre\bin\server\jvm.dll"

시스템 > 고급 시스템 설정 > 환경 변수 > 시스템 변수(S) > 변수 Path 의 값에 [JDK 위치]\bin 추가

[JDK 위치] = C:\Java\jdk1.8.0_121 와 같이 실제 jdk 가 설치된 위치

[기존 이클립스 경로] = C:\dev\tools\eclipse 와 같이 실제 eclipse 가 설치된 위치

출처: Pinning Eclipse to Windows Taskbar - http://notesofaprogrammer.blogspot.kr/2015/05/pin-eclipse-to-windows-taskbar.html

#이클립스 #윈도우 #윈도우즈 #윈도우10 #윈도우즈10 #환경설정

#eclipse #windows #windows10 #localSetting