Today 요약

1. 개발자 도구 강의
2. PWA 강의
3. 포트폴리오 강의

1. What I did?

1.1 포트폴리오 강의(feat.드림코딩)

엘리쌤은 정기적으로 강의를 리뉴얼 해준다. 강의를 정기적으로 리뉴얼 해주는 게 당연한 건 아니다. 그렇기 때문에 이렇게 항상 리뉴얼을 해줄 때마다 수강생들을 위해 고민하고 어떻게 하면 더 도움이 될지 생각해주는 것 같아 감사하다.

그래서 오늘은 리액트 공부가 생각보다 집중이 안되서 예전에 봤던 강의, 복습한다는 생각으로 리뉴얼된 포트폴리오 강의 중에 HTML, CSS 파트 부분을 빠르게 봤다.

예전 강의보다 3시간이나 분량이 늘어난 만큼 새로운 부분도 많이 추가되었다. 그래서 다시 보는 강의지만 생각보다 지루하지 않게 잘 봤다.

2. What I Learned?

2.1 PWA

웹을 모바일 앱처럼 보여질 수 있게 만들 수 있는 PWA에 대해 배웠다.

생각보다 PWA로 웹페이지를 변환하는 건 어렵지 않은 것 같다.

Https를 연결하고 manifest랑 service worker를 잘 설정하면 되는 것 같다. 실제로 실습은 해보지 않았다. 조만간 적당한 프로젝트 하나 가지고 해당 강의 참고해서 PWA로 배포해보자.

2.2 HTML, CSS

포트폴리오 강의로 복습삼아 html의 meta태그를 잘 정의해서 SEO 최적화와 OG에 대해 배웠다.

CSS는 박스, 정렬, 컬러, 포지션, 트랜스폼, 애니메이션 등 전반적으로 자주 사용하는 개념들에 대해서 배웠다.

2.3 크롬 개발자 도구

크롬 개발자도구의 다양한 사용방법에 대해 배웠다.
개발자도구를 이용한 스크린 샷이나 네트워크, 디버깅 등 정말 다양한 사용방법이 있어 앞으로
잘 활용하면 생산성이 충분히 올라갈 것 같다.

- 눈금자 표시
- 언어 변경
- html 긁어오기
- CSS 속성 그룹으로 보기
- 색상 추출하기 (hex → rgb 가능)
- 명령형 팔레트 cmd + shift + p
- 웹 접근성 텍스트 명도대비 4.5:1 (큰 글자는 3:1까지 가능?)
    - 명도대비는 텍스트 컨텐츠가 있는 마지막 노드에서만 확인이 가능
- 가상 클래스 확인 (스타일 탭)
- 박스 모델 확인
- 자바스크립트 비활성화
- 화면 캡처하기
- 디바이스 모드
- 콘솔창 사용하기(console.table, console.error..)
- 영상 속도 조절 코드

3. What I curious?

TIW_2023_06_28