2023.08.24(목) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Week1 Day 4 보고

• TO-DO LIST

- 38강 스타일링 - 4 - tailwindcss ~ 41강 Wrap up

- 17:00 정기 팀 회의

​

• 배운 내용 요약 정리

- tailwindcss (CSS 프레임워크)

Utility first CSS Framework

HTML과 CSS 파일을 별도로 관리할 필요가 없다.

클래스 명을 고민할 필요가 없다.

디자인이 일관되어 있다.

자유롭게 커스텀이 가능하다.

​

- 디버깅

에러 메시지 확인하기

터미널, 브라우저 콘솔, 리액트 자체의 에러 메시지

​

- 컴파일 에러

컴파일을 할 때 발생하는 에러

전적으로 개발자 실수 ! ! 빠르게 고쳐랑

Syntax Error

Type Error

Reference Error

​

- 런타임 에러

컴파일 과정을 마친 후에 사용자에 의해 실행시 에러

0 나누기 오류

Null 참조 오류

메모리 부족 오류

​

- 중단점 찍기

debugger;

​

React Devtool - Chrome Extension

1. Components: 컴포넌트를 트리 구조로 보여줌. 상태 정보를 확인할 수 있음
2. Profiler: 렌더링된 컴포넌트를 소요 시간과 함께 보여줌

Google Lighthouse

​

• 부족한 점

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고