( 솔직히 여기서 개발자 잘못은 좀 아닌거 같고,아래의 잘못된 프렉탈은 누구 탓을 하긴 좀 그렇지만 CTO잘못이 좀 크다 봅니다. 혹은 사업 발주하는 보도방 기술이사들의 맨먼스 야매산정 문제도 크겠죠 )
1. 니즈에 의해 디자인을 리뉴얼 하고 싶다.
그나마 나은 케이스에 속한다. asis->tobe로 갔을때 최대한 asis를 활용하면 좋은 결과를 많이 볼 수 있다.
사용자에게 익숙함도 UX이다.
2. 이상한 ui 프레임워크를 사용하고있다.
회사만의 프레임워크, 회사만의 규칙, 생산성등의 명분으로 도입되는 이상한 ui프레임워크는
그야말로 보도 듣도 못한 개인에 의해 만들어진 이상한 ui프레임워크인 경우가 많다.
대부분경우 이들은 정상적으로 동작을 하는것 같으나 특정브라우저에서 오류를 일으키고
특히 cs개발자들이 좋아하는 GRID류에서 많이 발견된다.
그냥 페이지네이션과 검색쿼리 CRUD를 페이지로 분리하는 형태로 작성하라,
당장 작성하는 코드량은 많아지지만
장기적으로 페이지 추가가 쉽고 다양한 인력이 와서 적응하는 기간이 짧아진다.
특히 c#이나 델파이류로 만들어진 윈도우 어플리케이션(윈폼)처럼 만드는걸 최대한 지양하라
웹은 웹답게 페이지 형태로 구분 되는편이 페이지 추가와 확장에 좋다.
구지 숨어있는 div를 clone해서 데이터를 바인딩하고 또 거기서 레이어를 띄워 ajax로 넘기는 형태로 만들 필욘 없다는 것이다.
3. 신입들도 구사할만한 기술을 사용하라
대부분 어렵고, 복잡하고, 고도의 자바스크립트 기술을 이용하는 프로젝트를 끌고 가다가
꼭 막바지 혹은 중간쯤에 체력이 딸려 프로젝트를 포기하고 싶은 마음이 들거나,
심신이 지치거나(ㅠ_ㅠ 면도를 못하거나-_-;; 가족과 대화가 줄어드는 상황을 많이 보았다.
그냥 잡코리아 혹은 직업전문학교에서 html+css+js정도 배워서 나온 친구들도 자신이 하고 있는 프로젝트의 일감 일부를 떼어서
진행 시킬수 있는 정도의 기술을 사용해서 구사하라.
이 프레임워크 저 프레임워크 넣는거 좋지만,
자신이 지쳤을때 인력 수급 문제나 자신이 떠났을때 대체인력 수급 문제가 중요하다.
(특히 ... 모 은행권의 스파이더 웹 등등의 이상한 프레임워크.... 센차 Ext-JS... 플렉스...)
그래서 80%정도 구축됬을때 마무리를 위해 추가 인원을 뽑지만...
인원이 추가가 되기 참 힘들어진다. 설사 인원이 추가되었다 할지라도
오히려 자신이 그 인력을 케어하고 코딩까지 하는 그런 일이 비일비재하다.
그리고 거의 기획서는 파워포인트로 "프레임워크를 고려하지 않고"나온다.
퓨어 레벨대로 컨트롤 할 수 없는 (혹은 자신이 그정도 캡파가 안되면) 프레임워크는 도입하지 말라.
보통 회사는 인력/마감에 민감하지만 인력보단 마감에 더 민감하다.
4. 기다려라
현재 http 스펙은 단방향에 응답을 받고 그것을 끊어버리는데
그것을 일종의 편법으로 가능하게 해주는게 비동기 처리 기술이다.
반면에 http2을 개발중인데 이것에서 많은것을 할 수 있게되는데 코멧같은 서버 푸시도 가능하다! (두웅)
html5와 http2 스펙이 대중화가 되면 가능한것을
자바스크립트를 응용하여 억지로 만들어 내지 말라.
가능하면 스펙에 적합하게 짜라는 얘기다.
그리고 input type="date"와 같은 것들도 포함된다.
또한 천재 프로그래머들이 내놓은 프레임워크나 플러그인들을 억지로 개조하지 말라. 제발....
... 요구한데로 만들어줘야 하니 어쩔 수 있겠느냐 하겠지만은...
5. 개발자도구를 열어서 활용하라
자바스크립트에 use strict가 기술되지 않았는다면 다양한 문제가 발견된다.
특히 자신 혼자 작성하는 경우라면 잘 하겠지만-_-; 여러명이 작성하는 경우라면
문제가 알게 모르게 나타난다. (100몇개에 중복된 id속성을 주는 사람과 일해서 참 난감했다.)
개발자 도구를 열어보면 각종; 를 안붙인 오류, 잘못된 속성을 사용한경우, 특정 브라우저만 가능한 속성을 사용한 경우,
이미지 파일없어서 404나는 오류 다양하다.
이런 오류는 꼭 고치자,
본인이 생각하는 제일 볼품없는 회사가
"엄청난 비전이 있고 사업상에 매출이 얼마고 성장가능성이 얼마인데 개발자 도구 딱 열어보면 오류나고 그것을 고칠 계획이 없는 회사"이다.
6. 대부분 문제는 js에서 나온다.....
대부분 고칠 수 없는 문제는. js가 문제가 많이된다.
참조 URL이 없이 어디서 긁어온 소스,
잘못 작성된 js,
혹은 옛날 스타일로 작성되서 바꿀 수없는 웹 플레이어, active-x연결 고리등....
그런건 걍 둔다.-_-; (제가 딸려서요...)
그런게 많은것을 접근성 심사를 받으면 다 맞혀도 그런 코드들땜에 떨어지게된다.;;;
그럼 html과 js만 바꿔야 하는 프로젝트 규모가 VOD나 스트리밍 플레이어까지 다시 만들어야 되는 상황으로 발전....하게된다.
(먼산....)
"use strict"를 꼭 붙인다. 왠만한 jquery 플러그인들은 꼭 붙어있는 use strict...
붙이기 곤란한 상황이라면 자신이 짜는 부분에 대해서 붙이라
즉 실제 소스에 작성하기전에 tdd를 꼭해야하는데
라이브 되고있는 실제 소스에 스크립트 바로 작성하지말고
새로 html파일을 만들고 거기에 테스트를 해본뒤 사이트에 적용하는식으로 하여야 한다.
(이건 시간문제가 좀 강하겠지만 보통 기획이나 디자인하는 단계에서 테스트를 해서 협의하는 형태로 가면 좋다.)
그러면 차후에 테스트해본 tdd에 뭔가를 확장해본다 할지 물리적 오류를 찾는다 할지 할때 좋다.
샘플을 남기는 의미도 있다.
변수는 초기화를 먼저 하고 대입한다.
var commons_stat_history = 0;
commons_stat_history = 10;
와 같이 초기화를 한다, C언어를 작성한 사람들은 보통 초기화를 먼저 하는게 습관 되어있는데
왜냐면 쓰레기 값이 들어가기 때문이다.
js의 쓰레기 값은 undefined겠지만(-_-;;) 컴파일러가 뻗는등의 문제는 없다. js는 관대하고 유연하므로...
그런데 이렇게 초기화 되지 않은 코드들은 확장할때 문제가된다.
또한 전역 변수를 설계를 하고 작성한다.
예를들어 초대리스트를 만든다 할시 유저 정보, 유저 나이, 초대 값등이 있을것이다. 이러한 정보를 묶어서 객체화 하라
혹은 json형태로 갖고 있는것도 좋다.
혹은 프로그램상의 일시적인 저장정보등도 객체화하여 갖고 있어라 sessionVo같은 형태로 네이밍하면 커뮤니케이션도 쉽다.
(sessionVo에 유저 최초 접속시간좀 넣어주세요!)
보통 이러한 정보들은 db에 넣는 경우가 있는데 serialize할때 굉장히 유리해진다.
뭐 이러한 소소한 이점도 있다.
아래의 두변수가 있다 할시
var a = 0, b = 1, c = 2;
console.log(a);
console.log(b);
console.log(c);
var AB = {
a = 0,
b = 1,
c = 2
};
console.dir(AB);
아래쪽이 훨씬 간단하다. ㅎㅋㅋㅋㅋㅋㅋ
var A = function() {
this.a = true;
};
A.prototype.b = function() {
if (this.a) {
console.log('s');
}
};
이런식으로 써도 무관^^*
함수 리터럴을 활용하라
function a(){}는 window에 붙으므로 var a = function(){}과 같이 함수 리터럴을 활용하라
이러한 함수리터럴을 가진 변수는 브라우저 메모리 관리에 좋다.
a = {};
호출단과 함수단을 분리하라
jquery가 만들어준 잘못된 습관중 하나로 ... 이벤트 바인딩 형태로 스크립트를 작성한다는 것이다.
나는 이런 습관을 가진 이들을 매우 많이 봐왔다. 오히려 함수 호출을 하는것을 귀찮다는 이유로 싫어하는 사람이 더많더라.
$(function(){
$('.a').on('click',function(){});
});
이러한 형태로 페이지내에 작성되어있거나 혹은 js파일로 분리되어 있을 수 있다.
이러한 형태의 문제점은 호출 포인트를 찾을 수 없고, 동작을 약간 바꾸게 될때 trigger 커맨드와 같은 형태로
프로그램의 흐름을 바꿔줘야 한다는 점이다.-_-;
혹은 그 페이지가 사라져서 걷어낼때, 이걸 과연 지워도 되냐는 점이 께림직 해진다.
그래서 그냥 두는데-_-; 그냥 두면 또 가독성이 떨어진다. 지우기도 그렇고 어디다 썻는지 다 찾기도 그렇다.
그러면 js파일의 함수가 알수없고 많아지므로 이상한 프레임워크가 되는거다.
결국 나의 판단은 이랬다. "디자인 가는김에 프론트쪽도 갈아버리죠." 또 그렇게 악순환의 반복이된다.-_-;;;
차라리 이런 형태로 작성하라
//함수 몸체
var a = function(){
$('.a').on('click',function(){});
};
//호출
$(function(){
a();
});
이것은 스코프 문제와도 관계가 있고 .a를 클릭했을때의 동작을 페이지가 호출되거나 특정 다른 행위를 했을때 동작하게 하고 싶을때 함수를 호출 시키면된다. 또한 호출과 몸체가 분리되어 있으므로, 어떠한 JUST IN RUN TIME때 호출 포인트에서 어떤 함수가 호출되는지 호출단을 보는 형태가 된다.
호출단 덕후(-_-;;;들은 인자로 넣어 호출의 호출을 엮는 경우도 있다-ㅅ-;
나는 이렇게 작성한다.
var ABC = {
foo:"", // 해당 객체 내에서 쓰는 변수.
bar:0,
init : function(){}, // 초기화 생성자화는 좀 거리가 멀다.
funcA : function(){}, // 각 함수들... 기능별로 쪼갠다.
endl : null // 파괴자 예비용인데 요즘은 걍 습관으로 쓰는거 같다.-_-;;
};
여기 함수 안에서 this는 ABC가 되고 , $ jQuery안에서는 this가 jQuery가된다.
요즘은 js가 프레임워크 달달달 외워서 하는 프로그래밍이 주를 이루니...
꼭 여기서 제시한 팁이나 스타일이 만능은 아니지만 적어도 function(){} function(){} 남발보다는 훨 보기좋다.
7. 마음먹기에 달렸다.
코드에는 마음이 있다.
보통 한국인의 특징은 으쌰으쌰 냄비 근성에 문제가 있다.
처음에는 코드리뷰도 하고 리팩토링도 하고 책도 사보고 하는데 꼭 끝마무리가 안좋다는것이다.
흙먹지마넵! 의견 달아주셔서 감사합니다... 저는 실제 프로토타입 자체를 잘 쓰지않습니다. 프로토스가 생각나서여 ㅋㅋㅋㅋㅋ 그리구... new자체를 거의 안합니다.... 오히려 객체 자체를 그릇이라 보고 동적으로 값을 할당해주고 빼주고 하는 형태로 사용합니다. 해당 하는 값은 json으로 받거나 DOM에 data-키="값" 형태로 붙이기도 하죠(많은 jquery 플러그인들이 이렇게 짜져있는걸 볼 수 있습니다.) 일반변수를 var a= 0;이런식으로 짜기는 하기도 하는데. 좀 얘네들이 연관이 있다. 싶으면 묶습니다.'ㅅ'!
흙먹지마의왜로 function 리터럴을... 객체지향처럼 쓰시는분들이 꽤....많았습니다. (경력 꽤 되는 강사도...) 즉 동적 변수가 아닌 함수 추가... setter/getter추가에 그 역할을 부여하고 있엇죠. 놀라웠습니다.(-_-;;) 그분들을 염두해두고 썼기도 합니다. 변수라면 A.a = {}; 이런식으로 가겠죠..^^;
흙먹지마GC에 의존하여 참조를 낮추어서 관리하긴 좀 어려운 상황이었어요. 그래서 자연적으로 메모리가 낮아지길 기대하긴 어려웠죠 a={};, a=null;등을 했었는데. 이게 GC에 의존할뿐 실질적으로 메모리를 해제 할 순 없었죠 그래서 한 객체를 필요한 값을 세팅해서 쓰는식으로 갔습니다. new로 작성되거나, 클로져들은 모두 제거하고 객체 형태로만 작성햇죠. 쓰면 endl에서 파괴하구요. (이게 기억나다니 신기하네요.)
흙먹지마요즘 js하면 중요시하는 기능이 scope, 클로져,프로토타입? 정도인데 프로토타입은 개발패턴상 new를 남발하게되고 ...-_-; 클로져는 이너 클래스로 내부에서 동적 생성이되어 예측할수없게 메모리 많이 먹게되는 단점이 있어 클로저를 안쓰는쪽으로 가고 있다. 라고 해도 "클로져가 중요한데 왜 안쓰냐고 왜그렇냐고" 되묻는 기술이사 면접관들땜에 짜증이납니다. 좀 알고 면접봤으면... 그사람들 뽑고 믿고있는 사장도 불쌍하죠
흙먹지마네, 참조 카운트를 낮추는 용도죠.... function a() 이렇게 객체형태로 쓰게되면 습관적으로 new 남발 하게 됩니다. 그리고 아시다 시피 jQuery 플러그인구현시 내부 function은 var a = function형태로 작성되어있구요. new를 하지않고 객체 자체를 그릇이라 보고 동적으로 값을 할당해주고 빼주고 하는 형태로 사용합니다.
개발 패턴 차이로 메모리가 왓다갓다 하죠....
아무래도 메모리를 절약하면서 쓰다보니... 어느순간 참조카운트가 높아지고 해제되고 이런걸 경험했나보네요^^
흙먹지마자주쓰는 간략 함수(커먼 예를들면 숫자에 콤마를 찍어준다할지... 그런것들)들은 function으로 해도 무관합니다. static형태니간요. 그러나 new를 자주해야된다면 웹브라우저가 gc에 영향을 받으므로 주기적으로 새로고침을 해줘야합니다. 그렇지 않으면 메모리가 파괴가 안되서 메모리 릭이 많이 발생하죠. 일례로 네이버 메인을 가만...히 두면 몇십분 뒤에 혼자 새로고침을 하는경우를 볼 수 있습니다. 웹게임들도 iframe에 넣고 일정 시간 행동이없으면 메모리 해제를 위해 새로고침을 합니다. 이런 불필요한 루틴 없이 해당 표현(선언이라 표기하기에도 애매하네요) 객체를 계속 재활용하면 파괴하고 생성할 필요없이 살아있는 상태로 데이터를 바인딩 해서 사용이 가능합니다.
나이유미"프로토타입은 개발패턴상 new를 남발하게된다"는게 어떤 의미인지요? js에서 oop를 하려면 결국 prototype,new를 사용해야 하지 않나요? 또한 private function를 구현하려면 closure를 사용할 수 밖에 없는 경우가 있는데, closure를 안쓸 이유가 없지 않을까요?
자바개발을하면서 이너클래스들을 활용하면 참 js의 클로져처럼 많은것을 할 수 있었습니다만, "이너클래스 남발하면 안좋은데요" 이런말을 듣고 궁금한점을 찾아보니... gc알고리즘 자체가 마크-앤-스윕 알고리즘 이더군요. new를 많이하게되면 그만큼 많이 쓰고 많이 지우고 하니 -_- 문제가 발생한다고 생각 하고 그 문제를 없엔 케이스 입니다.
skycries네 new를 하지않으면 동일한 객체를 생성할 수 없기 때문에입니다. 습관적으로 new로 객체 생성하게끔 개발하는 분들을 많이 봤습니다. 일반 웹사이트라면 새로고침을 자주 하게되므로 메모리가 해제가 자주 되지만 새로고침을 하지 않거나 오래 머물를 필요 있는 사이트의 경우 문제가 심각해집니다.
oop의 관점으로 봐도 new를 할필요없고 static class의 경우 그냥 호출만 해도 동작하는 경우가 있습니다. 브라우저 자체의 메모리관리 취약함으로 인해 최대한 static을 사용하여 코딩하였고 결과는 잘나왔습니다. 클로저가 필요한 부분이 많고 많은 플러그인들이나 프레임워크들이 클로저 이용하여 구현하고 있습니다만 이것은 스코프를 거기에 두기 위함 입니다. 예로 jQuery 무지 좋아하고 사랑하는데 pure 자바스크립트보단 느린건 사실이죠.
그러나 사용하시는 프레임워크에서 클로져로 코딩되어있다면 그렇게 그 천재들이 제시한 방법대로 하는것이 맞습니다.!!!!
나이유미"oop의 관점으로 봐도 new를 할필요없고 static class의 경우 그냥 호출만 해도 동작하는 경우가 있습니다." 이 말의 의미를 잘 모르겠습니다. static class로 oop가 구현이 된다는 말씀이신지요? "상속"과 "다형성"을 위해서 prototype,new를 사용하는 것과 나쁜 프로그래머의 "습관적인 new"의 사용은 구분할 필요가 있을 듯 합니다.
흙먹지마다 아시는 내용이신데 왜 물어보세요-ㅅ-;; 계속 설명이 안되는거같아서 걍 코드로 쳐서 드립니다.
var a={ a:1, b:2 }; 일케해도 new할순 있긴해요....; -_-;; new한다 안한다 무섭다 안무섭다가 아니고;; 지향한다! 라는 의미입니다.....ㅠㅠ;
코드로 걍 보는게 빠르겠네요;
// 일케 쓰면 완전 활당이 되어서 bb만 출력됨. function a(){ console.log("aa"); return "a"; } a(); function a(){ console.log("bb"); return "b"; } a();
// 일케 쓰면 객체 생성/해제 gc에서 자유롭고 함수 변조(내용 치환?) 가능 var b = function(){ console.log("b"); return "b"; }; b(); b = {}; b = function(){ console.log("c"); return "c"; } b();
나이유미몰라서 여쭤보는거 맞구요.. 귀찮게 해드린거 같아 죄송한 맘이 드네요 질문이 돌고 돌았는데요 심플하게 달아주신 코드에서 // 일케 쓰면 객체 생성/해제 gc에서 자유롭고 함수 변조(내용 치환?) 가능 이 주석에서 "생성/해제 gc에서 자유롭고" 이게 왜 그런지 궁금한겁니다. 왜 function a는 생성/해제 gc에서 자유롭지 않은지 궁금한겁니다.
나이유미약간 이야기가 잘못 흘러간거 같은데 제가 님의 발언에서 "무조건 나쁘다"라고 느낀 것은 "클로저"에 대한 부분이었어요."클로저를 중요하다"고 생각하는 "사장"님들을 불쌍하다 생각하셔서 그렇게 느꼈습니다. 어쨋든 의문점은 많지만 여기서 끝낼게요. 그냥 호불호의 관점으로 받아들이겠습니다. 그럼 즐거운 하루되세요.
흙먹지마넹, 저도 구현에 문제없고 운영하는데 문제 없으면 걍 넘어갑니다.~; 그러나.... 가끔 종이 한장차이가 참 큰데요... 잘못된 코드를 제가 다바꿔야 되는 부분도 있고...-_-; 일하는 사람들에게 바꾸라해도 안바꿔서 그냥 플젝 드랍시키는 경우도 많았습니다.
var a = function(){}; 이렇게 쓰면 함수 자체도 재정의 해서 확장이 가능한데 function a(){}라고 써서 확장이 불가능하게 되어 업체 하나마다 솔루션 바꿔서 svn다시만들고 재배포 하고 ..... 크게보면 한달에 1억씩 리스크가 난적이 있었고, var a = function(){}; 이렇게 쓰라해도 function a(){}가 더좋은데 더빠른데 더편한데 더짧은데 하는사람과 일을 해보고 "아 이사람은 한달에 1억씩 까먹는 개발자구나" 라고 결론 짖고 "svn을 다시만들든 클라이언트 업체마다 한본씩 재 패키징을 하든 너님들이 알아서 하시오"라고 결론 짖고 손턴적도 있네요.
차라리 흙먹지마님처럼 자세히 물어보는편이 돈버는 개발자다 라고 생각 됩니다. 제가 능력이 딸려 자세히 답변을 못드려서 죄송 스럽고 그렇습니다.
