[TIL] 프리온보딩 1일차 - 220503

🔍 검색 잘하기 

한글로 검색하면 오래된 코드들이 많이 나올 수 있다. 때문에 구글에서 영어로만 검색하면 괜찮은 코드들이 많이 나온다.

EX) email regex w3c

 

 

🔑 <li>의 key값

<li>에 key값을 index값으로 주는 실수를 많이 했는데

key값에 unique한 값이 들어가지 않으면 부정적인 영향을 미칠 수 있다.

그래서 아래 예시와 같이 string으로 key값을 생성해서 사용하는 방법이 좋다.

<ul>
    {list.map((_, idx) => {
        const key = `list-key-${idx}`;
        return <li key={key}>예시입니당</li>;
    })}
</ul>

 

 

🎲 이메일 정규표현식 변경

이전 내 코드에선 이메일 정규표현식을 아래와 같이 작성했다.

const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;

 

하지만 이 정규표현식을 적용하는건 옳지 않다.

만약 .com이 아니고 .info처럼 3글자 이상인 경우엔 안되기 때문에 'email regex w3c'를 검색해서 적용하자.

 

 

🎉 event.target보다는 event.currentTarget 사용

currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다.

event.target은 자식의 위치, 즉 내가 클릭한 자식 요소를 반환한다.

하지만 currentTarget은 이벤트가 적용되어 있는 부모의 위치를 반환한다.

 

 

🖼 SVG 파일은 따로 assets 폴더 만들어서 관리

SVG 파일은 추후에 클래스명 추가하여 색깔 변경 등등이 가능하다.

 

 

💎 중요한 이미지 파일은 public 폴더가 아닌 src에 넣기

이메일 유효성을 체크하는 아이콘이나 비밀번호를 보이게/숨기게 하는 아이콘은 필수 요소이기 때문에 중요한 파일이다. 때문에 public에 넣지 않고 src 안에 넣는 것이 좋다. (assets 폴더 생성하여 사용하거나 현재 위치의 Component 바깥에 두는 것이 좋다.)

 

 

🎯 지정된 요소 외부의 클릭을 감지할 땐 useOnClickOutside() Hook 사용하기

예를 들어 modal 외부의 요소를 클릭할 때 modal을 닫는데 사용하는 React Hook이다.

🔽 사용 방법은 아래 링크 참고하기

useOnClickOutside

 

 

🎨 Etc

1. event 함수명은 handle함수명으로 하기!

2. css 선택자는 무조건 class로 접근하기! (id는 css가 아닌 의도가 있을 때만 접근)

3. useEffect에 [ ] 배열 비우는 경우 useMount() 사용하기! (가독성이 좋음)

4. event.target.innerText() 대신 dataset 사용하기!

5. setState(!state) 말고 setState(prev => !prev)로 사용하기! (비동기여서 현재 값이 들어가지 않음)

6. currentColor : 부모의 색깔 사용 가능!

7. 코드 마지막 한줄은 비워두자!

 

 

📌 참고하면 좋은 사이트나 좋은 툴

1️⃣ react-use

GitHub - streamich/react-use: React Hooks — 👍

 

2️⃣ dribble (디자이너 커뮤니티)

Dribbble - Discover the World’s Top Designers & Creative Professionals

 

3️⃣ Color Picker

윈도우용 무료 컬러 피커(Color Picker) 사용하기

 

4️⃣ Visual Studio Extension

1. Auto rename tag

2. Beautify

3. Eslint

4. Prettier

5. Stylelint

6. svg

7. TODO highlight