[원티드 프리온보딩] TIL - (18)
5월 24일
Session
<dl>, <dt>, <dd> vs <th>, <tr>, <td>
제목에 나온 태그 그룹들은 각각 description list와 table을 표현하기 위한 태그들로 서로 성격이 굉장히 유사하여 혼동하기 쉬운 태그들이다.
이 둘을 헷갈리지 않기 위해 항상 염두해 두고 있을 두 가지가 있다.
- 자료를 table로 만들고 그 위에 header를 얹을 수 있다면 그것은 dl이 아니라 table이다.
- 반대로 자료를 table로 만들고 그 위에 header를 얹을 수 없다면 그것은 dl이다.
예를 들어,
| ? | ? |
|---|---|
| 음식 | 피자 |
| 나이 | 개발하기 좋은 나이 |
| 에디터 | VS Code |
| Vim |
테이블 형태로 만들고 header를 얹기 위해 고민을 했을 때, 마땅히 얹을 만한 header가 떠오르지 않는다. 즉, header를 얹기에 어색한 자료라는 의미이다. 만약 이것이 dl이었다면
- 음식
- 피자
- 나이
- 개발하기 좋은 나이
- 에디터
- VS Code
- Vim
이런 식으로 각각 연관 있는 요소끼리 묶어두면 따로 놀지 않기 때문에 table에 비하면 더 나은 형태가 갖춰 진다.
다음 예시로,
| ? | ? |
|---|---|
| HTML | 상 |
| CSS | 중 |
| 자바스크립트 | 상 |
| 리액트 | 중 |
이러한 테이블에 header를 얹기 위해 고민을 했을 때, 서로의 연관성을 고려했을 때 얹을 만한 header가 바로 떠오른다.
| 기술 스택 | 숙련도 |
|---|---|
| HTML | 상 |
| CSS | 중 |
| 자바스크립트 | 상 |
| 리액트 | 중 |
이런 식으로 연관성이 깊은 요소끼리 묶여있다면 table로 표현하기 좋다고 볼 수 있다.
Copyrights를 표기할 때 사용할 태그
<small>을 사용하면 된다. MDN에서는 ‘덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다’ 라고 표현하고 있으며, HTML5 specs에선 ‘Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.’ 라고 표현하고 있다.
🔗Code Climate
Github와 연동하여 사용할 수 있는 소스 코드 관리 서비스이다. 작성된 코드를 분석하고 계산하여 보고서를 작성해주며, 이를 참고하여 코드를 다듬어 갈 수 있다.
Storybook
작성한 컴포넌트들에 대해 테스트를 해볼 수 있다. 기본적인 모양을 확인하는 것은 물론이고 props에 따른 모양 변화도 확인할 수 있다. 뿐만 아니라 해당 컴포넌트에 대한 docs도 작성할 수 있어 다른 사람이 사용하기에도 편리하도록 만들 수 있다.
Chromatic
내가 스토리북에서 만든 컴포넌트들을 배포하여 다른 사람들에게 공유할 수 있다. 또한 연결된 컴포넌트가 업데이트가 이루어지면 그것을 인식하여 자동으로 Review를 열어주고 그곳에서 수정한 컴포넌트를 확인해보고 재배포 여부를 확정 지을 수 있다.
Chrome Lighthouse
크롬 개발자 도구에서 기본적으로 제공하는 기능으로써, 현재 접속 중인 사이트에 대한 성능 테스트를 돌려볼 수 있다. Performance, Best practices, Accessibility, SEO, Progressive Web App라는 카테고리에 따라 백분율 점수를 주며, 어떤 점이 좋고 어떤 점을 수정하면 좋을지에 대한 설명과 추천도 함께 표시해 준다.
웹팩은 함수 이름을 변경한다.
웹팩은 컴파일 과정에서 작성한 함수의 이름을 ‘e’, ‘f’, ‘g’ 등 굉장히 짧은 문자로 변경한다. 따라서 코드를 작성할 때 Function.name으로 뭔가에 할당을 해주거나 참조를 하는 것은 좋은 생각이 아니다.
font-display
폰트는 사용자가 페이지에 접속하는 순간 불러와지기 시작한다. 즉, 어떠한 요소에 글자가 입력되어 있는데, 저장된 혹은 지정된 폰트가 불러와 지기 전에 요소가 먼저 불러와져 사용자에게 글자가 보이지 않고 빈 요소만 보일 수 있다는 의미이다. font-display는 이러한 상황에 대해 대처를 할 수 있도록 해주는데, 폰트가 불러와지기 전에 요소를 보여주지 않거나, 지정된 폰트가 불러와지기 전에 다른 폰트를 보여주는 등 상황에 맞게 설정해 줄 수 있다.
IRP
연금저축하면 세액공제 받을 수 있다.