[원티드프리온보딩] 220505

props

어쩌구저쩌구 is missing in props validation

따로 props 타입 선언도 해줘야하고 그 전에 설치도 해줘야함
npm install --save prop-types
import PropTypes from 'prop-types';

• https://www.npmjs.com/package/prop-types
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md
• https://reactjs.org/docs/typechecking-with-proptypes.html
• https://haerim95.tistory.com/41

Prop type 어쩌구 is forbidden

any 🙅
array 👉 arrayOf
object 👉 shape

• type 중 쓰면 안되는 애들이 있다. 오류난다.
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md
• https://haerim95.tistory.com/41

Must use destructuring props assignment

• es6, 구조분해할당 : 함수에서 props를 통으로 넘겨받으면 안에서 분해하던가, 분해해서 넘겨받으란 소리다.

props.children

As for "exceptions"
It would seem that some common properties such as props.children or props.className need to be treated as exceptions.
Why should children be an exception?
Most components don't need this.props.children, so that makes it extra important to document children in the prop types.
Generally, you should use PropTypes.node or static type React.Node for children.
It accepts anything that can be rendered: numbers, strings, elements or an array containing these types.

• 예외 처리를 하면 잘 되는데 찜찜함....
  내가 해석을 잘못했나 싶어서 오백번 읽어봄
  그냥 children 안쓰려고 날리고 새로 짜면 자꾸 생겨남....모달창 너뭐돼...? 왜그래...?
  난 react-modal 라이브러리를 두고 뭐하는걸까.....
• https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md

no-static-element-interactions

• div, span에 이벤트 붙이면 오류남
• 역할 지정하라고 오류나고, focus 안간다고 뭐라하고, 빈 태그라 오류나서 div에
  role='button' tabIndex={0} aria-label='background' 붙임.
• https://stackoverflow.com/questions/54274473/how-to-fix-static-html-elements-with-event-handlers-require-a-role

증감연산자 쓰면 안됨....

🙅 for (i = 0; i < l; i++ ) {...}
🙆 for (i = 0; i < l; i+=1 ) {...}

• 쓰고 싶으면 옵션 변경하자 "allowForLoopAfterthoughts": true
• https://runebook.dev/ko/docs/eslint/rules/no-plusplus

삼항 연산자 깔끔하게 써야함

🙅 you===me?true:false
🙆 you===me

• 오류삑삑이 울림ㅠㅠ

클래스 이름 여러 개 쓰기 복잡할땐

<div className={clsx(styles.modal, { [styles.openModal]: Boolean(open) })}>

• npm install clsx 설치하고 행복해지자
• https://www.npmjs.com/package/clsx

import cx from "classNames"
<div className={cx('class1','class2')}></div>

• PostCSS + classnames 정리 잘해두심 https://velog.io/@leewooseong/%ED%94%84%EB%A6%AC%EC%98%A8%EB%B3%B4%EB%94%A9-4%EC%9D%BC%EC%B0%A8-220506

git에서 branch 생성하는법

• fork 한 뒤 원본으로 push는 모르겠다 그동안 이정도(10명) 규모로 협업할 일이 없었다구요ㅠㅠ 안되서 걍 원본을 clone함
• vscode 터미널 열어서 하는게 속편하다

git init
git remote add origin 주소
git pull origin develop
git branch -m master develop
git branch feature/내역할
git checkout feature/내역할

git remote-v로
원본 저장소 이름과 fork 저장소 이름 확인 좀 하자....

중간에 한번 날려먹어서...자동저장하는 거 같았는데 안하네...? 모래를 핀셋으로 한알한알 줍는 느낌이다ㅠㅠ 바구니로 모래를 퍼담는 그날까지 가보자구😭