온보딩과정 1일차..

1일차에는 과정 통과한 사람들의 코드를 보면서 피드백하며 코딩하면서 생각해야하는 부분들과 사용하면 안되는 것들 또 좋았던 부분들에 대해서 살펴 보았고, 홈페이지들을 탐방하면서는 어떤것들을 사용해서 만들었는지와 이미지 최적화에 대한 이야기들을 위주로 많은 이야기들을 들었습니다.
또한 강사님의 Visual Studio Code의 설정들을 보면서 어떤것들을 사용했고 간단한(?) TODO리스트를 짜면서 활용하는 방법까지 살펴 보았습니다.

첫날에 너무나 많은 정보들이 들어오고 내가 모르던 부분들이 너무나 많았어서 듣고 소화하기까지가 아직 많이 부족한것 같다.. 강의중 메모를 잘 활용해서 중요 키워드들을 정리하고 블로그에 정리하는 식으로 진행하도록 해야겠다.

key값 index로 하면 안된다..?

Map을 사용시에 key값을 index를 그대로 넣게 된다면 리액트가 key를 확인할때 같은값으로 인식하기 떄문에 원하는대로 따로 움직이는게 아니라 같이 움직이게 되므로 index를 사용하려면 `slice-key-${index}`와 같이 각각의 key마다 이름을 붙여주어야 한다.

cx? classNames?

조건에 따라 style을 변경할때 사용함 자세한건 검색

ref

ref같은 경우는 ux적으로 바꾸는것 아니고 데이터를 바꾸면 바뀜과 동시에 페이지 오류가 발생할수 있다 따라서 직접 데이터를 건드리는 부분은 사용하면 안된다.

이메일 정규식

Email regex w3c - 이메일 국제표준 정규식

e.target? e.currentTarget!

e.targer 말고 e.currentTarget
그냥 target은 그 자식요소들 까지 모두 선택되는 반면 currentTarget은 부모 요소만 가져오게 되므로 currentTarget을 사용하는게 좋다.

useState

setState를 사용할때는 한번에 사용하면 리액트는 한번에 처리하려고 하기 때문에 생각과는 다르게 동작할수 있기때문에 그런식의 사용은 하지 않는게 좋다

id태그?

리액트에서는 id태그를 사용할 일이 거의 없다.

핵심 이미지들

화면에 핵심에 속하는 이미지들은 퍼블릭에 있으면 안된다. src폴더에 들어가 있어야 한다.

svg파일 취급

svg파일은 따로 컴포넌트화해서 사용한다. 그렇게 사용하면 이미지 파일의 색상을 임의로 바꿔서 사용이 가능하다.

useClickAway 라이브러리

useOnClickOutside

useClickAway 라이브러리