React

React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 함focustext selectionmedia playback애니메이션 적용d3.js, greensock 등 DOM 기반 라이브러리 활용위와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우 DO

기존 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것팝업현재 페이지에 또 다른 페이지를 띄우는 것.외부설정으로 제어할 수 있음(강제로 창을 막는 등)모달새로운/다른 페이지가 아니라 레이어를 보여주는 것.페이지를 이동하면 사라짐.외부설정의 옵션에 영향을 받지 않음

Toggle 두 가지 상태만을 가지고 있는 스위치 코드

input에 값을 입력하면 dropdown으로 유사한 추천 검색 옵션을 보여주는 자동 완성 기능사용자 경험을 향상시킬 수 있음삭제 버튼으로 input의 값을 삭제 할 수 있어야 함drop down 항목을 마우스로 클릭 시 input의 값이 변경되어야 함

input창을 클릭하면 수정이 가능하고 다른 곳을 클릭하면 수정한 내용이 반영되는 컴포넌트사용자가 폼 요소를 클릭하거나 tab키를 눌러 요소로 이동하면 해당 요소가 포커스(focus)주로 데이터 입력 준비를 의미, 포커싱이 이루어지는 순간 초기화 코드 실행 가능auto

레이블 지정을 통해 구성이나 분류에 도움이 되는 키워드 집합을 만들 때 자주 사용Enter 키를 통해 태그가 추가 되어야 함입력한 값이 없는 상태 & 이미 동일한 값이 있는 상태에선 이벤트가 일어나면 안됨태그가 추가된 후 Input 창이 비워져야 함추가한 태그를 삭제할

Tab 동일한 메뉴 라인에서 뷰를 전환할 때 사용 요구사항 선택된 Tab 메뉴의 li 요소에만 클래스명에 focused가 추가되어야 함 의사코드 Tab의 메뉴를 표시할 배열 생성 해당 배열을 바탕으로 map 사용, 요소 만들기 선택된 요소에 상태를 부여하기 위한 u

공부에 참고한 배민 라이브 강의 상태란? 주어진 시간에 대해 시스템을 나타내는 것 언제든지 변경될 수 있음 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 개발자에게 상태 : 관리해야 하는 데이터들 모던 웹프론트엔드 개발 UI/UX의 중요성과 함께

svg 확장자는 지금까지 로컬에 파일을 두고 import 하는 방법으로만 사용해왔어서, json 형식으로 파일을 받는 경우 어떻게 다루어야 할지 막막해졌다.한참 방법을 찾아보다가 발견한 방법이 'dangerouslySetInnerHTML'브라우저 DOM 에서 inner