[220503] TIL

릿·2022년 5월 3일
0

TIL

목록 보기
13/28

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. 금주 과제

  1. 개인과제 : 강사님이 올려주신 폴더를 토대로 선발과제 다시 짜보기
  2. 팀과제 : ToDoList 각자 기능구현하기
    => 일요일 오후 4시까지!

3. 공부해야할 것

  1. git
  2. scss
profile
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자

0개의 댓글