1. 강의요약
- 검색이 잘 되는 사람이 되자! 존재감! => 매일 TIL요약해서 적기
- 이력서는 항상 PDF로 들고다닐것!
코드리뷰
- key값으로 index를 쓰면 안됨. map이 같을 경우에는 리액트가 헷갈려함.
키 값을 가공해서 넣어주는게 좋다.
- className에 &&를 쓰는 거보단 :를 쓰는 편이 좋다. (&&가 false값일 경우 className값으로 false가 들어가버림)
- classnames라는 라이브러리를 많이 사용한다.
- 들여쓰기 4칸X, 2칸 쓰기!
- 절대로 직접 DOM에 접근해서 값을 바꾸면 안된다.
- target.innerText를 쓰면 정확하지 않다. target.value를 쓸 것.
- 이벤트함수는 handle로 끝나거나 handle로 시작하는게 알아보기 쉽다.
- 정규식테스트 사이트 : regex101.com
-email vaildation은 간단할수록 좋다.
// email regex w3c표준.
^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$
- 검색할 때는 가급적 google에서 영어로 검색하기.
- e.target말고 e.currentTarget을 써라. currentTarget은 이벤트핸들러가 부착된 것을 가리킨다.
// 같은 코드
setShowPw((preState) => {return !preState;})
setShowPw((preState) => !preState;)
- setState를 같은 함수에 여러 개를 쓸 때는 신경써야함. 바로바로 현재 값이 적용되지 않을 가능성이 높음.
- css선택자를 쓸 때는 id를 쓰면 안됨. 커뮤니티 룰.
- 리액트를 사용하면서 필수로 사용해야하는 요소들은 (img 등) public폴더가 아니라 src폴더에 넣어놔야 한다. 그리고 img를 import해서 코드에 사용할 것.
- svg파일의 경우, 하나의 컴포넌트에 export로 다 넣어서 사용할 컴포넌트에 import해서 사용하는 편이 낫다. 이렇게 할 경우, svg에 className을 붙여서 색깔을 변경할 수 있게 된다.
- onClick속성에 직접 함수식을 작성하면 리렌더될 때마다 이벤트를 불러오기 때문에 따로 빼서 쓰는 걸 권장한다.
- transition은 0.2로 넣으면 빨라보인다.
- target.classname쓰지 말기(DOM에서 직접 땡겨서 쓰는 거 하지마!)
- button은 disabled속성 넣어주기.
- svg파일은 용량이 작다면 public폴더가 아닌 src폴더에 넣어준다. svg파일을 한번에 컴포넌트에 export한 다음에 사용할 컴포넌트에 import해서 쓰는 방법이 있는데 이렇게 하면 svg색깔을 변경할 수 있게 된다.
// src/assets/svgs/index.tsx
export { ReactComponent as BellIcon } from './ic-bell.svg'
export { ReactComponent as CalendarIcon } from './ic-calendar.svg'
export { ReactComponent as CalendarRangeIcon } from './ic-calendar-range.svg'
export { ReactComponent as CancelAlertIcon } from './ic-cancel-alert.svg'
// App.tsx
import { BellIcon } from 'svgs'
return (
<div>
<BellIcon className={styled.icon} />
</div>
)
// App.module.scss
.icon {
fill: red;
}
- 컴포넌트명은 PascalCase, 변수명, 클래스명은 camelCase, 상수는 대문자로!
2. 금주 과제
- 개인과제 : 강사님이 올려주신 폴더를 토대로 선발과제 다시 짜보기
- 팀과제 : ToDoList 각자 기능구현하기
=> 일요일 오후 4시까지!
3. 공부해야할 것
- git
- scss