21/05/21 기록(메모)

오늘의 기록들Permalink

✅ 사용자 편의성Permalink

편의성을 생각해서 prefers-reduces-motion이 있다. 이것은 접근성을 위한 미디어 쿼리로 시력에 불편이 있으신 분들은 불쾌하게 작용할 수 있으니 미디어 쿼리를 사용해 너무 화려한 애니메이션이나 깜빡임, 반짝이는 애니메이션을 보여주지 않는게 사용자를 위한 개발이라고 생각한다.

✅ polyfillPermalink

특정 기능을 지원하지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인 주로 core.js를 사용하고 CRA는 기본으로 내장되어 있다.

✅ ReactPermalink

• 비지니스 로직과 UI 코드가 분리되어 있다.
• 추상화가 높을수록 비지니스 로직에 좀 더 집중이 가능하다.
• React.memo는 속성 값이 변경될 때에만 렌더링이 되도록 하는 Hook 이다.
• 속성값(props) : 불변 변수 / 상태값(state) : 불변 변수가 아니다.
• 리액트의 요소가 DOM으로 만들어지기 위해서는 모든 리액트의 요소 타입이 문자열이어야 한다.
• 브라우저에서 실제 DOM을 변경하는 작업은 다른 작업에 비해 시간이 오래걸리기 때문에 필요한 부분만 변경하도록 하는 것이 중요하다.

✅ React 상태값 변경 함수Permalink

1. 리액트는 효율적으로 렌더링 하기 위해서 여러개의 상태값 변경 요청을 비동기로 처리 하면서 배치로 처리한다.

Why ? 만약에 리액트가 상태값 변경 함수를 동기로 처리한다면 하나의 상태값 변경 함수가 호출될 때마다 화면을 다시 그리기 때문에 성능 이슈가 생길 수 있다. 만약 상태값 변경을 동기로 처리하고 매번 화면을 다시 그리지 않는다면 UI 데이터와 화면간의 데이터 불일치가 발생해서 혼란스러울 수 있음

리액트 내부에서 관리하지 않는 외부에서 호출을 하는 경우에는 배치로 동작하지 않습니다. 즉 상태값 변경 함수를 호출할 때마다 렌더링이 발생하게 된다.

만약 외부에서도 배치로 처리되도록 바꾸려면 onClick() 함수 내에
ReactDOM.unstable_patchedUpdates(() => { setCount()})
와 같이 사용하면 된다.

✅ React 의존성 배열에 입력해야 할 값Permalink

useEffect(()=> {
  ...
}, ["의존성 배열"])

• 컴포넌트의 외부 함수는 의존성 배열에 입력할 필요가 없다
• 컴포넌트의 상태값이나 속성값
• 컴포넌트 내부에서 정의된 지역변수나 지역함수
• 컴포넌트 안에 지역변수가 있고 지역 변수를 부수효과함수(useEffect)에서 호출하려면 그 변수도 마찬가지로 의존성 배열에 추가해줘야 한다.
• 지역 함수를 부수 효과 함수 내부에서 사용했다면 의존성 배열에 관리가 되어야 합니다.

✅ 부수효과 함수가 반환하는 값Permalink

useEffect(()=> {
  ...
  return () => {
    ...
  }
}, [])

이와 같이 부수효과 함수에서 반환하는 값은 다음 부수 효과 함수가 실행되기 직전 or 컴포넌트가 unmount 되기 직전에 호출이 된다.

useEffect(() => {
  ...
  window.addEven  tListener('scroll', onScroll);
  return () => {
    window.removeEventListener('scroll', onScroll);
  }
})

부수 효과 함수에서 반환하는 함수를 이용해 위와 같이 이벤트를 등록하고 해제할 수 있다.

✅ 훅 사용시 지켜야 할 규칙Permalink

1. 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.
2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출해야 한다. ( 훅은 함수형 컴포넌트를 위한 기능이라서 )

✅ 브라우저에 URL을 입력했을 때 일어나는 일Permalink

1. 사용자가 URL을 입력한다.
2. DNS 서버에서 입력한 URL의 도메인 네임의 IP를 찾아 URL 정보와 IP를 함께 전달한다.
3. URL 정보와 IP는 HTTP 프로토콜에 의해 HTTP 요청 메시지를 생성한 후
4. TCP 프로토콜을 이용해 인터넷을 거쳐 해당하는 IP의 컴퓨터로 전송한다.
5. 도착한 HTTP 요청 메시지는 HTTP 프로토콜에 의해 웹 페이지 데이터로 변환이 된다.
6. 웹 서버는 웹 페이지 데이터의 정보를 검색한다.
7. 또 다시 HTTP 프로토콜을 사용해 HTTP 응답 메시지를 생성한 후
8. TCP 프로토콜을 이용해 인터넷을 거쳐 원래의 컴퓨터로 다시 전송이 된다.
9. 도착한 HTTP 응답 메시지는 HTTP 프로토콜에 의해 웹 페이지 데이터로 변환이 되고
10. 변환 된 웹 페이지 데이터가 브라우저에 의해 출력이 되어 사용자에게 보여지게 된다.

참고
TCP school