TIL_221218_ ❓☑️ React 과제 수정

내일배움캠프 4기 스파르타코딩 React B반

📒 오늘의 공부

1. 리액트 과제 코드 수정하기

• ✅ 폴더 구조 변경

• ✅ 삭제할 때 alert 추가

• ✅ 주석 수정하기(JSDoc)

• 리뷰 강의 녹화본이 아직 안 올라와서 삭제기능 스스로 구현해 봄

  ❓

  • confirm을 쓰는데 confirm을 정의할 수 없다고 해서 검색해보니 window.confirm을 써야했다.
  • alert는 그냥 쓸 수 있는데 왜 confirm은 window를 써야하는 걸까?
  • 검색해보니 useConfirm을 많이 쓰는데 그렇게 하면 window를 쓰면 한 줄이면 되는 코드가 너무 길어진다.

• JSDoc 기능 사용하기

  • /**
  • 엔터 치면 parameter에 대해서도 주석을 남길 수 있다. ex. string, number

2. React 숙련 강의 - 추가 공부

강의자료의 '추가로 알아보기' 목록 참고

• styled-components의 GlobalStyles

  • 전체에 스타일을 적용할 수 있는지 궁금했는데 결국 못하고 안 되는 줄 알았는데 되는 거였다!!
    -> GlobalStyle.jsx - import and export createGlobalStyle
    -> App.js(최상위 컴포넌트)에 추가

• css nesting

  • style-components 사용할 때 하위 태그를 상위 태그 안에서 스타일 줄 수 있는 것
  • 과제를 하면서 이게 되는 걸 알았는데 지칭하는 용어가 있었다.

• CSS reset은 무엇이고 왜 필요한가?

  • 웹 브라우저마다 지정되어 있는 default style을 초기화함으로써 다양한 웹 브라우저에서 동일한 스타일이 적용되도록 하는 설정 파일
  • Nomalize CSS - 다른 CSS reset과 달리 사용하기 좋은 기본값들은 유지

• template literal

  • 내장된 표현식을 허용하는 문자열 리터럴
  • 백틱 사용

• useState가 함수형 업데이트 방식으로 동작하도록 만들었을까?

  • useState는 비동기 방식인데 이를 해결하기 위해 값이 아닌 함수를 전달하는 동기 방식을 만든 것

• react life cycle에서 component mount, unmount가 어떤 단계에 속하는지?

  • ☑️ 특강 내용 정리하면 더 이해가 잘 될 듯

• Strict mode?

  • 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구
  • <React.StricMode>로 감싼 부분은 그 안의 자손까지 검사가 이루어진다.

• HTTP란 무엇일까?

  • HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜(컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계)

• URI (URL, URN)

  • URI - 통합 자원 식별자(uniform resource identifier)로 정보 리소스를 고유하게 식별하고 위치를 지정할 수 있다.
  • URI의 두 형태 - URL, URN
    -> 통합 자원 지시자(uniform resource locator, URL)
    -> 유니폼 리소스 이름(uniform resource name, URN)
  • URL은 주소, URN은 이름

• query parameter, query string, path variable 이란?

  • Query Parameter - id란 변수에 값을 담아 백엔드에 전달하는 방식(Query String이 동작하는 방식)
    -> 어떤 자원(데이터)의 정렬하거나 필터해서 보여줘야 할 경우

  • Path Variable - 동일한 요청을 경로를 지정
    -> 위치를 특정해서 보여줘야 할 경우

    ---

• 화살표 함수

• () => () 괄호가 return을 대신함

• () => {} 여러줄로 구성되었다면 중괄호 사용, return 꼭 쓰기