[번역] 자바스크립트 프로젝트에 대해 궁극적으로 당신이 배워야 할 10가지
프론트엔드 프로젝트는 우리, 프로그래머들에게 많은 선택의 자유, 유연함 그리고 창조를 위한 충분한 공간을 제공합니다.
하지만 그 대가로 그들은 약간의 지식, 계획, 그리고 자기책임 요구합니다..
jQuery, require.js, Angulars, React, ExtJs 그리고 내가 아마도 기억하지 못하는 여러가지 프로젝트들이 2018 Frontend에 상상하지도 못하게 기여하고 있습니다.
제대로 만들어지지 않은 프로젝트 도 어떻게든 관리할수 있는 공통의 패턴을 가지고 있다.
당신은 아래의 가장 중요한 10가지 리스트를 찾게 될 것입니다. 비록 경험많은 개발자들이 동의 할지라도 개인적인 경험에 의한 주장은 논쟁의 여지가 있습니다.
이러한 pattern들은 프로젝트위한 framework, 방법론, team size에 대해 안정된 기반을 제공합니다. 또한 document에 대한 필요성, refactoring 그리고 개발자들이 흘리는 눈물을 줄입니다.
- Divide and conquer
대부분의 사람들은 어디에서든 들었을 것 입니다. 하지만 이 패턴은 과소평가 되어있습니다.
Common.js, Webpack 그리고 Node는 우리에게 다양한 파일들 안에서 코드를 분리하는 기능을 제공합니다.
일관성(Consistency). 당신의 프로젝트 single-export files로 분리하면 codebase가 커질때 검색 및 의존성 관리가 현저하게 쉬워집니다. export후 각각의 파일의 네이밍은 직관적 이어야 하며 구조이동이 쉬워야합니다.
관리(Management). 각각 export하여 자체 파일로 분리하면 필요할때 신속하게 이동할수 있으며, decoupling을 촉진합니다. application의 다른 부분에서 helper 함수가 필요하게 될때에는 공유 폴더를 만든후 옮기면 됩니다. 이것은 코드의 다른부분에 access 가능하도록 만들어 줍니다. Ex) util…
2. Make things embarrassingly obvious
모든 변수, 함수, 파일의 이름을 짓는데 당신의 신생아의 이름을 짓듯이 시간을 할애하십시오. 당신이 오늘 0.3초 아끼기위해 변수의 이름을 x로 지었다면, 한달후 당신은 이 변수가 무슨 의미인지 알아내기 위해 이틀을 사용해야하고 4번의 리펙토링을 해야합니다. 미리 생각하고 긴이름을 두려워 하지 마십시오.
당신의 solution은 아주 똑똑하고 복잡할수 있습니다. 미래에 당신 또는 팀원들은 코드에서 무슨일이 벌어지고 있는지 알아내기 위해 아주 많은 시간을 계속 사용해야합니다. 문서 또는 설명이 필요 없도록 simple하게 작업하는데 집중 하십시오.
3. Resolve magic numbers and string
네이밍과 비슷하게 유혹에 빠질수 있지만 코드에서 매직넘버 또는 문자열을 사용하지 말아야합니다.
아무리 작거나 특별하지 않은 값일지라도, 의미있는 이름의 변수에 넣고, 해당 scope의 맨위로 이동시킵니다.
대부분 명시적으로 값을 코드에 넣어두면 어디에서든 재사용 할 것입니다. 변수를 바로 넣어두면 중복을 줄일수 있으며, 조정이 쉬워지고 이 value에 의미를 부여하게 됩니다.
매직넘버란?
학생의 학적 상태를 1이면 재학, 2이면 휴학, 3이면 제적, 4이면 졸업으로 나타낸다고 가정. 이 경우, ‘이 학생이 졸업했는가’를 따지기 위해 ‘학생.상태 == 1’ 로 나타낼 경우, 이런 식으로 설명 없이 등장하는 상수가 바로 매직 넘버.
4. Fight nesting
만약 당신의 코드가 120 글자를 넘는 경우, 500 라인을 넘는 경우, if 구문이 3단계로 깊어진다면 이것을 나누기 위해 노력 해야합니다. 심하게 중첩된 if 구문을 함수, Promise 또는 Observables로 나눔으로써 복잡성을 해결할수 있습니다. 당신이 비동기 call을 많이 사용한다면, async/await 구문으로 코드를 현저하게 단순화 시킬수 있습니다.
5. Configure hard
만약 application 에서 global values, API endpoint, feature toggle, third-party credentials를 사용한다면, config file을 분리해 두어야 합니다.
config와 같이 web과 node 에서 configs관리를 도와주는 패키지는 많이 있습니다. 당신의 application은 개발을 위해 server와 local 모두에서 사용될수 있습니다. config 파일을 일찍 만들수록 이후 단계가 쉬워지며 환경 작동방식, 사용해야할 credentials, 사용가능한 기능을 조정할 수 있습니다.
7. Unless it is a prototype — write tests
Unit tests, Smoke tests, End-to-end tests. Sanity checks. Test를 작성하지 않으면 당신의 프로젝트는 다시쓰여질 prototype일뿐 입니다. Test를 작성하세요! 당신의 codebase의 복잡도가 점점 증가하면 유지보수가 힘들어지게 될것입니다. 당신을 위해 test를 해야할것 입니다.
언젠가 미래에 당신이 버그를 만난다면, 구름 한점없는 파란하늘이 보일것이고, 과거에 test를 작성한것에 감사함을 느낄것입니다. 당신이 기능을 추가하면서 얼마나 많은 것들이 background에서 조용히 망가지고 있는지 절대 깨닫지 못할것 입니다.
8. Use version control
아무리 prototype, 큰 scale의 enterprise webapp 또한 작고 행복한 프로젝트라도 git 또는 다른 version control 프로그램을 사용해야합니다.
매일 commit하고 branch를 사용하며 어떻게 merge하는지 학습하고 충돌을 해결하고 이전 commit으로 되돌릴수 있어야 합니다. 의미있는 commit 메세지 작성도 중요합니다.
Version control을 통해 시간여행이 가능합니다. 망가진 것을 저장하거나 과거에 바뀐내역을 확인할수 있습니다. Version control의 기본을 배우고, 매일 사용하는것은 아주 중요합니다. 아무리 나머지를 무시하거나 우연히 잘못된 길로 들어섰을때도 version control을 사용하여 고치는것이 가능합니다.
