13. Unix Philosophy
Write programs that do one thing and do it well.
Write programs to work together.
Doug Mcllroy, Unix pipeline inventor
The UNIX Philosophy in 9 paramount precepts
Mike Gancarz (a member of the team that designed the X Window System)
Small is beautiful.
Make each program do one thing well.
Write programs handle text streams, because that is a universal interface.
14. $ ps -ef
Processes Status
Report a snapshot of the current processes
$ grep gradle
Globally search a regular expression and print
Searching plain-text data sets for lines that match a regular expression
$ ps -ef | grep gradle
19. _changeTabs() {
const fragment = this._parseFragment();
if (fragment === null) {
return;
}
_.each(fragment, (value, key) => {
const target = $(_.find(this.$sections, i => {
return $(i).dataset('type') === key);
});
// 선택한 탭으로 변경한다.
target.find('.cs-tab li').removeClass('is-on');
target.find('.cs-tab li')
.has(`a[href='#${value}']`).addClass('is-on');
// 탭에 해당하는 목록으로 변경한다.
target.find('.cs-body').removeClass('is-on');
target.find(`.cs-body#cs-${key}-${value}`)
.addClass('is-on');
});
}
20. _changeTabs() {
const fragment = this._parseFragment();
if (fragment === null) {
return;
}
_.each(fragment, (value, key) => {
const target = $(_.find(this.$sections, i => {
return $(i).dataset('type') === key);
});
// 선택한 탭으로 변경한다.
target.find('.cs-tab li').removeClass('is-on');
target.find('.cs-tab li')
.has(`a[href='#${value}']`).addClass('is-on');
// 탭에 해당하는 목록으로 변경한다.
target.find('.cs-body').removeClass('is-on');
target.find(`.cs-body#cs-${key}-${value}`)
.addClass('is-on');
});
}
DOM을 직접 핸들링, 장황하고 UI의 형태를 한눈에
파악하기 힘듦
21. _changeTabs() {
const fragment = this._parseFragment();
if (fragment === null) {
return;
}
_.each(fragment, (value, key) => {
const target = $(_.find(this.$sections, i => {
return $(i).dataset('type') === key);
});
// 선택한 탭으로 변경한다.
target.find('.cs-tab li').removeClass('is-on');
target.find('.cs-tab li')
.has(`a[href='#${value}']`).addClass('is-on');
// 탭에 해당하는 목록으로 변경한다.
target.find('.cs-body').removeClass('is-on');
target.find(`.cs-body#cs-${key}-${value}`)
.addClass('is-on');
});
}
상태를 class나 data attr에 설정 및 사용하여
전체적인 상태 흐름을 알기 힘듦
22. _changeTabs() {
const fragment = this._parseFragment();
if (fragment === null) {
return;
}
_.each(fragment, (value, key) => {
const target = $(_.find(this.$sections, i => {
return $(i).dataset('type') === key);
});
// 선택한 탭으로 변경한다.
target.find('.cs-tab li').removeClass('is-on');
target.find('.cs-tab li')
.has(`a[href='#${value}']`).addClass('is-on');
// 탭에 해당하는 목록으로 변경한다.
target.find('.cs-body').removeClass('is-on');
target.find(`.cs-body#cs-${key}-${value}`)
.addClass('is-on');
});
}
DOM API의 비용은 비쌈. 상태 변화를 위해
DOM API 호출이 남용됨
23. _changeTabs() {
const fragment = this._parseFragment();
if (fragment === null) {
return;
}
_.each(fragment, (value, key) => {
const target = $(_.find(this.$sections, i => {
return $(i).dataset('type') === key);
});
// 선택한 탭으로 변경한다.
target.find('.cs-tab li').removeClass('is-on');
target.find('.cs-tab li')
.has(`a[href='#${value}']`).addClass('is-on');
// 탭에 해당하는 목록으로 변경한다.
target.find('.cs-body').removeClass('is-on');
target.find(`.cs-body#cs-${key}-${value}`)
.addClass('is-on');
});
}
UI 상태 변화를 위한 render 외의 부가적 메서드
다량 정의