2024. 06. 11 (화) 7주차 - Daily Coding - Day02

39강

디버깅 Part 1.

- 에러 메시지 확인하기

- 컴파일 에러와 런타임 에러의 차이점

- 중단점 찍기

 

디버깅이란

- 버그를 잡는 과정을 말한다

- 1940년 당시 엄청 큰 컴퓨터에서 벌레 한 마리가 들어가서 실행이 멈춰버리는 사건이 발생했고,

  그 벌레를 컴퓨터에서 빼니깐 이슈없이 컴퓨터가 다시 작동하게 되었다 그래서 오류를 해결하는 과정을 '디버깅' 이라 말한다.

 

 

디버깅 - 에러 메시지 확인하기

- 터미널, 콘솔, 리액트 자체의 에러 메시지를 통해 확인한다

 

 

컴파일 에러 VS 런타임 에러

컴파일 에러 (Compiled with problems)	런타임 에러 ( 컴파일 과정을 마친 후에 사용자에 의해 실행 시 에러)
- Syntax Error - Type Error - Refernece Error => 전적으로 개발자의 실수	- 0 나누기 오류 - Null 참조 오류 - 메모리 부족 오류

 

중단점 찍기 (breakpoint)

중단점 은 말 그대로 자바스크립트의 실행이 중단되는 코드 내 지점을 의미한다

중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있다

실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있어 디버깅이 가능하다

 

40강

디버깅 Part 2.

- React Devtool (Chrome Extension)

Componets : 컴포넌트를 드리 구조로 보여주며 상태 정보를 확인 할 수 있다

Profiler : 렌더링된 컴포넌트를 소요 시간과 함께 보여준다

 

- Google Lighthouse

구글에서 만든 Profiler이며 profiling만 하기 위해서 만든 전문적인 tool이다.

웹페이지에 퀄리티를 개선시키기 위해 만들어진 tool이며 어떤 웹에서도 모두 사용이 가능하다.

SEO와 같은 지표도 확인이 가능하다.

크롬을 사용하면 별도 설치가 필요없다.

https://github.com/Febase/FeBase/blob/master/S2_Round2/lighthouse.md

 

 

41강

- 리액트 상태

- 리스트 렌더링

- 스타일링

- 디버깅

 

리액트 상태 [이벤트]

이벤트(event)란 우리가 프로그래밍하고 있는 시스템에서 일어나느 사건(action) 혹은 발생(occurance)

 

이벤트 핸들러

이벤트가 발생되면 실행되는 코드 블럭(자바스크립트 함수)

코드 블럭이 이벤트에 응답해서 실해되기 위해 정의되었을 때, 이를 이벤트 핸들러를 등록(register)했다고 말한다

이벤트(사용자의 행동)를 듣는(지켜보는) 메서드 이벤트 리스너에는 DOM요소가 필요하다

Javascript => .addEventListener() 메서드

React => 컴포넌트에 직접 넣어준다 (e.g onClick={} )

 

컴포넌트 함수

컴포넌트는 하나의 함수이다

처음에는 렌더링이 될 때 모든 컴포넌트 함수는 실행이 완료된다

그 다음 컴포넌트 내에서 니벤트가 발생해도 컴포넌트 함수는 다시 실행되지 않는다

JSX : 컴포넌트 스냅샷

 

state

컴포넌트 내에서 바뀔 때마다 항상 컴포넌트를 업데이트 해줄 수 있는 값

state, props -> 값이 바뀔 때마다 컴포넌트는 업데이트가 된다.

 

useStage

- state를 업데이트 해주는 React 라이브러리에서 제공해 주는 빌트인 훅

- 훅(hook) 리액트 v16.8버전부터 나온 기능이며, 함수형 컴포넌트에서만 쓸 수 있는 함수로

   리액트의 lifecycle 기능을 연동(hook) 할 수 있다.

- 해당 컴포넌트 안에서만 사용을 할 수 있다.
- const [state, setState] = useState(initialState)와 같이 사용

 

useState 주의할 점

 

 

Form Input
- <form> <input> tag를 통해 값을 입력할 수 있는 요소를 추가
- 데이터를 유저로부터 받을 수 있는 중요한 요소 중 하나
- 값을 입력 받을 땐 **onChange 이벤트 리스너**를 통해 변화를 감지

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

 

 

Form Input의 종류

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

 

 

Form 제출하기
- <form>에는 onSubmit 이벤트 리스너가 있어서 form의 제출 이벤트를 핸들링
- 이 이벤트를 발생하기 위해서는 <button type=“submit”>이 필요

event.preventDefault()
- 해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우
1. a 태그 클릭 시 href 링크로 이동
2. form의 submit을 누르면 새로 실행이 됨

Two-way binding
- 만약 form을 제출하고 값을 모두 초기화를 해 주고 싶다면?
1. Input에 상태를 value 속성으로 넣어준 후
2. 제출을 한 후에 상태를 초기화 해주면
3. Value에 초기화된 상태가 반영되어 UI에 업데이트

 

 

 

 

이미지 파일의 종류

 

 

이미지 용량에 따른 브라우저에서 처리

 

 

리스트의 key
- 리액트에서 리스트 형태로 만드는 모든 컴포넌트(HTML tag, 커스텀 컴포넌트 등)에 대해서

   key 값을 고유하게 부여해 주어야 에러가 발생하지 않는다.

 

 

CSS-in-JS
- 자바스크립트 코드를 CSS에서 작성하는 방식

 

 

CSS Modules
- css 스타일링을 그대로 사용하면서, 클래스 명이 겹치지 않게 hashing

 

CSS Framework
- 다양한 CSS 프레임워크 도구들이 있습니다.
- 이 외에도 Material UI, Ant Design, Chakra UI 같은 라이브러리도 많이 사용

 

 

TailwindCSS
**Utility first CSS Framework**
- HTML과 CSS 파일을 별도로 관리할 필요가 없다.
- 클래스 명을 고민할 필요가 없다.
- 디자인이 일관되어있다.
- 자유롭게 커스텀이 가능하다. 등등

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

컴파일 에러와 런타임 에러

 

중단점 찍기(debugger)
- 개발자 도구 > 소스 > 자바스크립트 파일

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

 

Google Lighthouse

https://github.com/Febase/FeBase/blob/master/S2_Round2/lighthouse.md

FeBase/S2_Round2/lighthouse.md at master · Febase/FeBase