[ TIL ] 2022-05-24

Tips

• 폴더 depth 는 깊어져도 된다. 쓰는 곳, 횟수에 따라 구조를 잘 짜는 게 더 중요.
• 웹팩은 사이즈를 줄이기 위해 함수 이름을 임의로 변경한다.
• js 에서 1000000 을 1000_000 으로 적어도 같다고 인식함.

---

HTML

• onClick 이벤트 적용된다면 button 태그를 가장 먼저 고려하기
• 차트 주석은 legend 태그
• 주소는 address 태그
• 사이드 바는 aside 태그
• dl 안에서 div 로 dt, dd 감싸줘도 됨
  MDN dl

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
</dl>

---

CSS

• 구분선은 ::after 로 만들면 됨
• select 태그 화살표 없애기

.select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

• button 에 aria-label 을 적어줌으로써 접근성 강화. 시각 장애인이 서비스를 이용할 경우 button 을 읽어주는 등에 쓰이기 때문이다.

---

성능 테스트

1. 코드 품질 테스트 : codeclimate

https://codeclimate.com/

• 깃헙 로그인 후, 레포지토리 선택하여 테스트
• 코드 길이 제한 등 커스텀 가능

2. 퍼포먼스 테스트 : 크롬 개발자 도구

1. 크롬 개발자 도구 -> Performance -> 새로 고침

2. 크롬 개발자 도구 -> Lighthouse

   • 시크릿 모드로 해야 더 정확.
   • Generate report 하면 정밀 분석 후 점수, 개선 필요 부분 알려줌.

---

Storybook

스토리북 Storybook
크로마틱 Chromatic

• 컴포넌트 폴더에 들어가는 컴포넌트들(중복 사용 되는 것들)을 테스트 하면 됨.
• Chromatic 으로 Storybook 을 공유할 수 있음. 디자인 팀에 공유하면 업무가 수월.

---

Victory.js

• 차트 주석은 VictoryLegend 로 구현 가능
• 툴팁은 label 사용해서 생성

---

Git

• 브랜치 목록 확인

git branch -a

• 원격 저장소 브랜치 삭제

git push origin --delete <브랜치명> 

• 로컬 저장소 브랜치 삭제

git branch -d <브랜치명>

• 원격 저장소 확인

git remote -v

• 원격 저장소 연결 끊기

git remote remove <원격저장소명>(ex. origin)

• 원격 저장소와 연결

git remote add <원격저장소명> <저장소url>