텍스트를 모두 대문자 또는 모두 소문자로 표시하거나 각 단어를 대문자로 표시하는 데 사용https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

기록 스택 구독 및 조작경로 에 URL 일치경로 일치 에서 중첩된 UI 렌더링react-router-dom은 "클라이언트 측 라우팅"을 가능하게 합니다.https://reactrouter.com/en/main/start/concepts

react에서는 폴더 구조를 제시 하지 않는다.몇가지 인기있는 방식이 있으니 너무 고민하지 말고 쓰고 싶은걸 써라대신 폴더구조를 너무 많이 중첩하지 마라.중첩이 많으면 파일을 옮길때 import들을 업데이트 하기 어렵다.3,4 번 중첩으로 제한 하는걸 추천한다.http

서버 상태 가져오기, 캐싱, 동기화 및 업데이트 해준다.react는 데이터를 가져오거나 업데이트하는 방법을 제공하지 않는다.기존 상태 관리 라이브러리(redux, recoil) 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않습니다. 서버

전역상태 라이브러리useState처럼 상태 관리atoms나 다른 selectors를 입력으로 받아들이는 순수 함수상태를 계산 할 때 사용get인자를 통해 다른 atom이나 selector에 접근 할 수 있따.Selectors와 다른 점은 매개변수를 받을수 있다.http

this선언식 같은 경우 this는 전역객체를 가리킨다.표현식은 상위 스코프의 this를 참조한다. 그래서 콜백함수 내부의 this와 외부함수의 this의 불일치 문제를 해결할 수 잇다.호이스팅선언식은 호이스팅이 발생하지만, 표현식은 호이스팅이 발생하지 않는다.선언식e

target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환)신버전을 원하면 es2016, esnext 이런 것도 입력할 수 있다.https://points.tistory.com/

border 끼리 간격테두리 분리 또는 상쇄https://developer.mozilla.org/ko/docs/Web/CSS/border-spacing

객체의 key들을 뽑아서 배열로 만든다.배열에 쓰면 인덱스를 뽑아 배열로 만든다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

현재 기준 날짜를 알려준다.data.getMonth() //년도를 알려줌월을 나타내는 0 ~ 11의 정수를 반환한다. 1월은 0, 12월은 11이다.날짜(1 ~ 31)를 나타내는 정수를 반환한다.요일(0 ~ 6)를 나타내는 정수를 반환한다. 일요일 0월요일 1화요일 2

!는 입력 값을 boolean으로 형변환 해준다.!!는 타입의 데이터를 boolean 타입으로 명시적으로 형 변환(Type Conversion)하기 위해 사용 https://ifuwanna.tistory.com/278

무한스크롤을 clientHeight, scrollTop, scrollHeight을 이용해서 구현 했는데 Intersection Observer을 이용해서 구현 할 수 있다.뷰포트와 타깃 엘리먼트가 교차되는 부분을 비동기적으로 관찰하는 api다.scroll 이벤트는 성능

저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook무엇에 접근하는지에 따라 type이 달라진다.https://velog.io/@jinyoung985/React-useRef%EB%9E%80

주어진 공간을 넘어가는 컨텐트를 어떻게 보여줄지삐져나오는 컨텐트를 숨긴다.스크롤바가 생겨서 사용자가 원한다면 컨텐트를 끝까지 볼 수 있다.컨텐트의 크기가 주어진 공간을 넘어가는 경우에만 스크롤바가 생긴다

페이지네이션을 구현한 적이 있는데 모바일에서는 버튼을 누르는것은 불편하다 이때 사용하는게 무한스크롤사용자가 스크롤링 하다가 미리 로드된 콘텐츠를 다 확인하면 다음 목록을 또 로드해서 별도의 인터렉션 없이 목록을 계속 불러오는 방식scrollHeight - clientH

writing-mode 속성에 대응하기 위해서 설계텍스트의 수평 수직 배치 설정상 하 padding좌 우 paddinghttps://velog.io/@katanazero86/CSS-padding-block-padding-inline-is-where-suppor

슬라이드 기능으로 이미지나 영상등을 보여주는 uiautoplay 를 사용하지 않는다.사용자가 직접 캐러셀을 컨트롤 하게끔 한다. \- 대부분의 사용자들에게 캐러셀은 일반적인 UI 이고 이를 인터페이스 하는데 이미 익숙해져 있다.간결하고 명확한 카피를 작성한다.슬라이더

API 를 통해서 많은 양의 데이터를 가져와 화면에 렌더링해야 하는 경우 자칫하면 성능 문제를 야기할 수 있습니다.이 때 성능을 최적화하기 위한 다양한 방법 중 전통적인 방법으로 페이지네이션이 있습니다.페이지네이션은 데이터의 갯수를 미리 알고 있고 데이터의 추가나 삭제

node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저npm은 패키지의 버전을 선택할 수 있기 때문에 패키지 버전 차이로 생기는 문제를 방지할 수 있다. (유의해야할 점)한번 설치한 모듈을 계속 사용하기 때문에 업데이트 확인이 어렵다. 같은 모듈을 사용

Atomic Design Pattern을 적용해 UI 컴포넌트를 나누는 기준으로 활용https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/장점은 높은 재사용성여