이번시간은 저번 클리코드 맛보기?에 이어 좀더 딥하게 클린코드에 대해 딮하게 생각해보는 시간이였다.
Tab vs Space
강사님의 추천으로는
물리적으로는 Tab 누르지만 소프트웨어에서는 Space로 인식하도록 설정하는 편이라고 한다.
세미콜론 있냐 vs 세미콜론 없냐
세미콜론 있는 것이 좋으며 Eslint와 Formater에게 모든것을 위임한다고한다.(코드 컨밴선등을 따라야할 듯)
count++; vs count += 1; vs count = count + 1;
이 문제는 내가 좋아하는 문제인데 멘토님께서는 세번째로 사용하는 것을 권장하신다고 하셨다.
count++ 이 후임연산자의 문제에 대해서는 정리했던 적이 있었다.
후임연산자를 사용할수 록 그 값에 대해 예측하기 힘들어지고 멘토님께서는
생각보다 개발자들이 런타임에러를 많이 내는데 그래서 현업에서는 후임연산자의 사용을 금지시켰다고 한다.
if (isLogin) {} vs if (isLogin === true) {}
이문제는 if()문에 들어오는 조건문에 대해 true값인지 확인할 때 is-Prefix 는 불리언 플레그를
의미하기 때문에 Truty를 사용해도 된다고 생각했지만 수많은 레거시로 인해
서버에서 내려온 값이나 전역 상태를 신뢰할 수 없게 되어 후자인 if(IsLogin === true)
=== true 인지 정확히 표현해 주는 조건문을 통해 좀 더 확실히 확인하는 것을 권장!
isLogin && <HelloWanted /> vs isLogin? <HelloWanted /> : <></>
vs isLogin ? <HelloWanted /> : null vs isLogin ? <HelloWanted /> : undfined
이 문제는 처음 생각해 보는 문제였다 JSX에서 조건부 렌더링에 관한 문제인 것 같은데
강사님께서는 JSX에서 null, undefined, Fragment 렌더링이 어떤 차이를 가지는지 꼭 학습하라고 하심!
https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx
isLogin ? <HelloWanted /> : <></> 프래그먼트를 null, undefined를 대신하지 말라고 하심
이 부분만 아니면 나머지는 상관없다고 한다.
list.length && <HelloWanted /> 이 문제는 list.length의 경우 0 또한 렌더링이
가능하기 때문에 사용해선 안됨!
추가로 null vs undefined 중에서는 undefined을 권장? 타입스크립트에서 undefined 사용을 권장해서?이 부분은 좀 더 공부가 필요할 것 같다.
JSX에서의 즉시실행문은 왜 실행될까?
다음 질문은 면접 단골 질문이며 꼬리 질문에 아주 좋은 예시라고 한다
일단 위에코 드는 즉시 실행함수이며 추가로 표현식이다! 표현식은 값으로 간주되며
JSX에서는 값은 렌더링 가능하다! (IIFE 중 E에 해당?)
https://zoon-bloom.tistory.com/25
표현식인 문과 표현식이 아니문
표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다. 이 사진과 같이 표현식과 문은 비슷해서 구별하기 어렵다고 느끼게 된다. 표현식과 문을 구별하는 방법에 대해 살펴보자 문에는
zoon-bloom.tistory.com
내가 사용하고 남이 사용할 함수를 잘 만들자!
매개변수 parameter , 인자 argument 둘은 다르다
매개변수는 함수를 정의하는 곳에 들어갈 값, arguments를 함수를 실행할 때 넣는 값
누군가가 만든 함수를 잘 사용하는 것도 중요하다!
함수는 input을 받고 Output을 준다 이때 많은 함수가 return 값이 없는 void 함수로
만들어지는 경우가 많은데 가능한 return 값이 있는 함수, 즉 1급 객체에 대해 생각하는 것이 중요하다.
1급 객체의 조건!
- 변수에 할당할 수 있다.
- 함수의 매개변수로 전달할 수 있다.
- 함수의 반환값으로 사용할 수 있다.
추가로 타입스크립트에서는 void함수의 타입추론이 어려운데 반환되는 값에 의해 타입을 추론하기 때문이라고 함!
모든 문제, 상황, 타입 고려하자!
위와 같은 코드가 있다고 했을 때 type에 대한 관리자, 강사, 수강생에 대한 타입만 고려한 함수이다!
함수 내의 고려하지 않은 타입이 들어가면 undefined를 뱉을 것이다!
위같이 else 문을 통해 고려하지 않은 타입이 들어와도 else 문을 통해 '해당 없음'이라는
값이 return 되게 된다. 이렇게 모든 상황을 고려한 개발자는 한 끗 차이다!
코드를 개선하는 것도 중요하다! 또한 위와 같은 상황에서는 switch 문을 사용하는 것이 더 바람직할 듯?!
이번 시간도 정말 무료 같지 않은 무료강의였다. 정리한 내용 외에도 개발자의 마인드에 대해서도 많은 얘기를 해주셨는데
'프리온보딩 챌린지' 카테고리의 다른 글
| 프리온보딩 FE 챌린지, 클린코드(4) (0) | 2023.11.19 |
|---|---|
| 프리온보딩 FE 챌린지, 클린코드(3) (1) | 2023.11.13 |
| 프리온보딩 FE챌린지, 클린코드(1) (1) | 2023.11.06 |
| 프리온보딩 FE 챌린지, Ouath(4) (1) | 2023.10.16 |
| 프리온보딩 FE 세션, 쿠키(3) (0) | 2023.10.11 |