3장 - 코드품질(0)

Chrome으로 디버깅하기 🐞

디버깅. 버그를 찾는건 중요한 것 같다. 크롬 디버깅 도구 사용법을 가르치고 있다.

맞다. 실행 단계마다 코드 단위로 추적할 수 있는 부분이 장점이다.

 

Sources 패널 사용법

링크 : ko.javascript.info/article/debugging-chrome/debugging/index.html

위에 링크로 테스트 페이지를 가라고 하니 따라가서 켜보자.

안녕, 존

확인 버튼을 누르면 An example for debugging. 라는 문구가 출력된다.
디버깅은 어떻게 하는가...보통 빈페이지에서 마우스 우클릭 후 '검사'를 누르게되면 나오는 창(패널들)에서 진행한다.

개발자 도구 샘플

보통 이런식으로 생겼다.🎉

 

Sources 탭 부터 설명을 하니까 위에 잘 보면 소스를 까볼 수 있다.

영역을 3부분으로 나누네.

'오픈소스즈' 라고 좌측상단에 토글버튼을 누르면 디렉토리 트리 구조로 파일탐색영역이 나온다.

파일을 우클릭 한 경우.

리소스를 저장한다던가, JS파일을 웹에서 별도로 탭으로 열어본다던가에 유용.

 

코드에디터영역이지만 코드말고도 가능

리소스는 편집이 안되지만, 드래그해서 저장가능.

 

디버그영역

좀있다가 자세히 살펴본다고... 😭넘어가자... 양이 많다는 소리겠지.😭

 

Console 사용법

콘솔탭이다. 다른탭에서 ESC키를 누르면 하단에 퀵 호출로 탭이동을 안하고도 쓸 수 있다. 안보인다면 잘 살펴보자. 펼쳐 볼 수 있다.

표현식을 입력하고 엔타를 딱 때리면 즉시 실행해준다.🔥

하지만 쉬프트+엔타를 동시에 누르면 줄바꿈이되고, 여러 줄 입력 가능.🔥

화살표를 위로 올리면 직전 및 이전에 입력한 내용들을 불러올 수 있다. (우클릭을해서 히스토리를 지우기전까지)

 

중단점(breakpoints) 사용법

콘솔 사용법을 이야기하곤 다시 소스탭으로 돌아간다.

아까 위에 예제페이지 링크열어둔걸로 돌아가서 실습해야함...

코드를 고치지 않았다고 가정하고, 페이지를 새로고치기 전에 중단점을 박아두면 (왜냐면 코드를 고치면 중단점도 바뀔 수 있다.)

해당 코드를 불러오기 전 지정해둔 곳에서 중단점이 걸린다. 말이 좀 이상한데, 지정해둔 '점'에서 '중단'이 걸린다.

 

뭐 다양한 기능을 설명하고 있으니, 눌러보자. 잘못 세팅했을땐 초기화도 할 수 있다. 걱정말고 가지고놀자.

 

debugger 명령어

특별히 쓸 말이 없다 어쩐다.🥺

 

멈추면 비로소 보이는것들

자, 브레이크 걸고 새로고침 하면 중단점이 걸리고, 디버그 창 영역에서 컨트롤을 추가적으로 가능해졌다. 

 

왓치 부분은 잘 안쓰지만 가끔 쓰면 유용하고, (코드에 적기 싫을 때)

콜 스택은 콜백함수라던지 어디서 실행되어 실행되고 타고 들어왔는지 구분할 때 좋다. (사실 직접 짠 구조가아니면 구분이 잘 안되지만🥺)

스코프 영역은 해당 코드범위영역에서 접근 가능한 레벨의 변수를 보여준다.

🌈

 

실행추적하기

이 부분이겠지

멈추면 생기는 Paused in debugger

 

브레이크를 걸었다면 resume (f8키) 버튼을 많이 쓸거고 

보통은 Step (f9키나) Step over(f10)을 많이 쓴다.

f9를 좀 더 많이 사용할텐데, 하나하나 까보는경우 소중하게 참고하자.

F11과 쉬프트+F11은 일단 넘어가고 사용할 때 한번 더 보자.

✨ (또 새로운 꽃인 비동기호출쯤에서...)

 

console.log

출력 : 미리 구현되어있는 함수인 console.log를 이용하는 방법이다. 콘솔창에서 안써도 묵시적으로 출력되긴하지만 코드상에선 써야지..🥺

ESC키를 누르면 어떤 패널에서도 하단에 console 패널을 소환할 수 있단걸 알고 있으니, 적절히 잘 소환해서 써보고

친구들로 console.dir console.error 등이 있다. console.log 말고 한번 써보자.

콘솔.dir은 object형을 한번 써보고

콘솔.error는 한번 이것저것 해보고, 콘솔창을 잘 살펴볼 것.

 

 

코딩스타일

인정한다. 개발자는 간결하고 읽기 쉬운 코드가 최고다.

성능도 좋고 간결해서 라인수도 짧지만 다른사람이 봤을 때, 못알아보는 급의 코드는 협업시 유지보수가 힘들고다.

나를 찾지 않으면 일이 되지 않지. =퇴사불가능

와... 추천할만한 규칙 시트를 설명했다.

확실히 이 스타일 선호도는 팀에따라, 프로젝트에따라, 개인에따라 달라질 수 있으니 만능뿅망치가 아님을..

탭 vs 2스페이스 vs 4스페이스 등으로 싸우지말자.

 

wow

ㅋㅋㅋ

 

문법

중괄호

상세하게 잘 설명해두었다. 나는 요약을 하지.

) {

이렇게 시작하는걸 권장하자. 라는 이야기다.

if (n < 0) {
  alert(`이것을 기본 형식으로 받을자.`);
}

최종 결론은 짧아도 간단해도 이렇게 만들자.🥺

가로길이

요즘은 그래도 4:3 모니터가 많이 사라졌네.. 노트북의 경우 조금 문제될 수 있겠다.

들여쓰기

종류가 여러가지가 있는데, 이것도 팀별로 최신 에디터나 IDE를 쓰고, 통일하자고 맞추면된다.

가로들여쓰기

🌸 스페이스 개수가 몇개인가 탭을 사용하는걸로  싸우지말자.

세로들여쓰기

🌸 가능하면 어떤 일을 행했는지 주석에 남기는게 좋은데, 여기도 재미있는 포인트는 주석의 다음 행에 해당되는 코드를 쓸 지, 아니면 코드 다음에 적을지는 팀별로 미리 협의하도록 하자.

세미콜론

모든 구문 끝에는 세미콜론을 써야 모던하지만, 특정 룰이 적용되면, 안쓰는 경우도 있다는걸 알아두면된다.

절대적인건 없다. 모던한건 꼭 써야한다고 해둘 뿐. (사용할 순 있다 가독성에 나쁠 뿐......)

중첩레벨

한번에 너무 많은 if 로 들어가거나, 중첩해서 함수를 작성하지 말자는 내용

함수의 위치

"헬퍼함수 여러개를 만들어 사용하고 있다면" 이라고 써놓고 있다.

❓ 헬퍼함수에 대해서는 설명을 안해두어서 

-> 다른 함수에 추가적으로 들어가 함수가 하고자 하는 해당 기능을 완성하기 위해 도움을 주는 함수를 말한다.

createElement 가 핸들러를 세팅하기 위해서 elem으로 표현, 할당된 후, setHendler에 파라메터로 들어가고 있다. 들어가서 엘리먼트생성하는 일을 배치받아 담당자로 업무를 시작하겠지.

 

스타일가이드

이제서야 스타일 가이드에 대한 내용이 시작되었다. 프로젝트 시작시에 만들어두면 좋은 스타일 가이드이다.

혼자할때는 거의 만들지 않지만 만들어두면 익숙해져서 좋다.

내 주변엔 보통은 airbnb 많이 쓰더라.

* 저거 직접 다 만들면 시간 엄청 오래걸림...

Linter

스타일 가이드 검사기다. 💙 마이너한 linter의 경우, 정보가 잘 없다. 사람들이 많이 쓰는데는 이유가 있겠지?
가능하면 유명한 ESlint를 쓰는걸 추천한다.

 

여기서부터 2갈래 갈림길이 적용된다.

 

1. 에디터에서 사용하는 외부 확장형 설치형 lint 를 설치하고 빠르게 넘어가기

💚 스크롤을 쭉 내려서 airbnb가 보이는 링크를 바로 누르자. 1.1 부분만 해도 일단 문제없을것이다.

2. 일단 매운맛을 한번 보기.

 

일단, 맘에드는 걸 하나 잡고, ESLint 같은것 (Ecma Script + Lint)

google 사전 - 이러한 천을... 외과용 거즈 붕대를 칭칭 감아놓는다의 느낌으로 다가온다.

- 개발에선 문제가 있는 코드에 표시를 달아두는걸 의미한다.

eslint.org/docs/user-guide/getting-started

Getting Started with ESLint

일단 지금레벨에서 추천은

next steps 까지 들여다볼 필요는 없을 것 같고, 

eslint.org/docs/user-guide/configuring 이거 영어로 되어있어서 일단 패스하거나 진짜로 패스했다면 ㅠㅠㅠ

이 블로그의 글을 읽자.

velog.io/@kyusung/eslint-config-2

ESLint 설정 살펴보기

그래도 처음하는거라서 한번에 안와닿을 수 있다. 이것만 머릿속에 기억하자.
아 나는 일단 최소한 eslintrc 라는 이름을 가진 설정 파일을 만들어야 쓸 수 있구나. (아니면 웹팩 모듈번들러 package.json에서 eslintCongif를 만들어야하는구나.) 하고 외워두자.

 

용어가 많이 나온다. 파서, 프로세서, 환경, 플러그인 등등

기본 가이드를 익힌 후 아래와같은 글 등으로 환경을 설정하는게 가장 빠르고 좋다.

velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

ESLint & Prettier, Airbnb Style Guide로 설정하기

요즘은 그래도 2-3년전보다 정리가 잘 되어있는 곳들이 많다. 위에글은 리엑트 포함이 있는데 필요한거만 살펴보자.
살짝 감이오면

 

github.com/James-Curran/pure-es6-boilerplate

이 프로젝트를 참고해서, 아 최소한 이건 있어야겠구나. 정도만 알아두고 넘어가자. 아님 지금은 바로 위 프로젝트 깃헙주소의 파일을 받아서 자신의 기본프로젝트로 설정하고 바꾸거나 개발해나가자.
왜냐면 JS가 문제가 아니라, 웹팩이니, 빌드니, node package manager 니...
(아니 JS를 빌드한다고?)의문을 가지며 설정 대해서도 공부해야 하기 때문.

(3년전에 작성된 이 보일러플레이트도 심플하네, 버전이 낮아서그렇지.. github.com/jluccisano/webpack-es6-boilerplate )

Prettier

일단 위에서 linter만 이야기하고 모던JS 가이드에서 프리티어에 대한 설명이 없어서 추가.
위에서 서타일 가이드를 열심히 만들어서 스타일 잡고았으면, 바로 위에서 lint로 아 이거 스타일이랑 안맞다고 뿅뿅 표시해주었다.

그럼 프리티어는 이걸 💝프리티~하게💝 어여쁘게 자동으로 수정해주는것을 말한다.

 

주석

주석이란 무인가. 중x의 국가 주석 말고..

네이버사전 : 주석

그럼 JS개발에서 주석(코멘트)를 달려면 어찌 해야하나는 이전에 배웠다.
여기선 코드 품질을 높히기 위해 어떤 주석을 써야하는지 알아보자.

 

좋지않은 주석

풀어서 쓰고있는데 짧게 말하면 명확한 코드엔 주석을 쓸 필요가 없다. 복잡하면 하나의 기능을하는 함수 이름으로 묶어 볼 것.

// 변수 선언을 썸으로 하고, 숫자형 1234 더하기 5를 문자열로 연결한 코드이다.
let sum = 1234 + '5';
// 라고 쓸 필요가 없다는 말이다.

 

좋은 주석

예시를 들어 잘 설명을 해 두었다. "함수 용례와 매개변수 정보를 담고 있는 주석" 부분은 익혀두자.

- 왜? 이걸로 해결했는가? 개발 아키텍처 등.

- 왜 이런 이름인가😇😇😇😇😇😇😇😇😇😇

- 왜 여기에 이 코드를 썼는가. 저걸 쓰면 되는데, 이유가 뭔가?

- ......

// 되는데 이유를 모르겠어서 절대 건들지 말 것.

등등..

 

닌자코드

기억하고 있습니까

데자뷰 느껴본적 있어?

최강닌자 닌자 닌자! 은둔술!! 은닉술!! 최강의 나루토가 되는 방법!!!!!
아... 진짜 싫다. 스파게티 코드도 아니다.
여기 나오는 내용의 의미는 절반이상은 비꼬는 내용이다. 잘 구분해서 보자.

코드 짧게 쓰기 + 글자 하나만 사용하기

가독성이 문제가 아니라 그냥 의미불명의 수준으로 난독화를 해둔 수준이다. 이렇게 작성하지말자.

이름 만드는게 제일 어렵지만 의미있는 변수명과 함수명을 만들도록 노력하고 가독성을 높히자.

 

약어사용하기

보통 팀 내에 약어를 공유하는 wiki나, 가이드를 만들어둔다. 꼭 가이드를 쓰도록하자.

아니 제발 가이드 만들었으면 가이드에 적는걸 까먹지말라고

아무 이야기도 없이 멋대로 변수명이 짧으면... 정말 곤란하다.

ua가 뭐야 ua가 영웅이야? 울트라 아카데미야? ㅠㅠㅠㅠ

포괄적인 명사 사용하기

아 진짜 data라고 해두는거진짜 싫다...

그래... prefix 나 postfix로 다음의 obj, data, value, item, elem 일단 좋다. campaignObj 아... 그래 캠페인 오브젝트구나.

responseUserData...? 아... 그래 뭐... 응답받은 사용자 데이터인가보다.

 

그.런.데... 뭐? "data" 만 딸랑 써두면 안에 뭐 들어있는지 어떻게아냐고 ㅠㅠㅠㅠㅠㅠ 호카게 닌자야? 🥺

 

... data1, data2, data3 (속에 내용 다 다름 다 열어봐야함)

아비규환

 

다음으로 나오는 내용은

let num = 'gogo sing.';
let string = 3.1492349532;

철자가 유사한 단어

let IlikeNinja
// 개발 코드 하이라이터라서 이렇지

 

이미지로 만들거나 이렇게 그냥 쓰면 let IlikeNinja = 'I lika NInje'; 대문자 아이인지 엘인지 뭐가 뭔지 헷갈린다.

 

동의어 사용하기

스타일 가이드 만들 때, 변수명 작성에 대한 가이드도 부족하지 않았나 살펴볼 것. 😂

 

 

이름 재사용하기

정말 정말 무섭다ㅋㅋㅋ  적당히를 모르는 내용이다.
😊 적절히 상황에 맞게... 잘 만들어 드세요..... 제발...

재미로 언더스코어 막 남발하면서 쓰지말자

모든 코드작성엔 이유가 있는것이 좋다.

// 왜 언더스코어를 남발하며 썼는지 이곳에 남기려했지만 여백이 없어 남기지 않았다.

 

미칠듯한 과장 형용사 사용하지 않기

let 킹갓제네럴엠페러충무공마제스티하이퍼울트라판타스틱익스트림지니어스화룡정점마스터문자열변수 = 'Piyo!';

 

let chickSound

가 좋겠지?

 

외부변수덮어쓰기

...악마다 진짜 너무한다

 

부작용이 있는 코드 작성하기

클린코드 책 저자가 보면 거품을 물 내용 / 평생유지보수하는법 저자가 보면 아 선넘었네 하는 내용.
아. 책 영업해야지.

클린코드+클린아키텍처세트

클린코더

Javascript 내용은 아니다. 사놓고 머리맡에서 베고자면 좋다. (물론 읽다가)

 

자. 빨리빨리 넘어가자...

 

함수에 다양한 기능넣기

✨ ^ㅡ^ 노자라는 사람 참 대단하다 싶다.

일단... 하나의 기능을 하는 함수(function)을 만드는것이 좋긴 하다. 그런데 이게 꼭 "법"은 아니다. 어긴다고 벌받지 않는다.

그렇게 된 경우 주석으로 이유를 써주고, 이 커다란 함수가 하는 목적을 잘 작성해두자.

 

*** 너무 많이 함수를 쪼개면 이게 개발을 하는건지 함수 인수 분해를 하는건지 도저히 알 수 없을것이다.

** 편법을 모두 사용하면 후배 개발자들에게 저렇게 살진 말아야지 하고 영감을 심어줄 수 있다.

* 해당 챕터도 쫌 적당히 하자.

 

끝. 다음 포스트에 테스트 자동화와 모카 폴리필을 메모해두련다.

 

테스트자동화와 모카

모카보다 나는 제스트파인데

폴리필

아이고 구브라우저