728x90 리액트13 [React] Drawer와 Tab, Accordian - Console 콘솔에러 제거하기 [React] https://hhahee.tistory.com/174 Drawer와 Tab, Accordian으로 FAQ 구현하기2025년 02월 03일Mui의 Accordion 컴포넌트 사용Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정Drawer안에는 Tabs를 4가지로 구성각 Tab안에는 Questions의 리스트가 나오도록 하였음questionhhahee.tistory.com위 포스팅에서 초래된 콘솔 에러 해결해보기 모두 정상동작하지만 콘솔의 에러 (경고) 코드를 제거하고 싶었다. 1. FaqsTabs.tsx:84 Warning: Each child in a list should have a unique "key" prop.위의 에러에 나온 84번째 줄은 컴포.. 2025. 2. 4. [React] Drawer와 Tab, Accordian으로 FAQ 구현하기 2025년 02월 03일Mui의 Accordion 컴포넌트 사용Help Container에서 해당하는 버튼을 선택하면 Drawer가 나오도록 설정Drawer안에는 Tabs를 4가지로 구성각 Tab안에는 Questions의 리스트가 나오도록 하였음question은 길이와 expand시 bold체에 따라 한줄~두줄로 설정될 수 있음 → useEffect를 사용하여 expand되는 question 혹은 tab이 바뀔때마다 question의 wrapper라고 할 수 있는 AccordionSummary 컴포넌트의 height을 조정함호버 시, 글자색과 AccordionSummary 배경색상을 변경하여 가시적으로 표현함Question은 선택 시 Accordian 형태로 answer가 dropdown되도록 설정하였음.. 2025. 2. 3. [React] KeyDown, KeyUp 한국어 2번? onKeyUp, onKeyDown 한글 입력 시 두번 실행되는 오류특정 환경에서 한글 입력 시 composing 단계를 거치는데 이게 완료되지 않아 keyCode나 which 값이 229가 나오는 에러가 발생한다고 한다.이 229 에러가 발생해 그 연장선으로 key event가 제대로 작동하지 않아 결국 함수가 두 번씩 실행된 것 같은데, 두 번 실행에 대한 정확한 사유는 적혀있지 않았다.onKeyDown을 사용하고, composing 단계랑 keyCode === 229 일 때 return 하는 방법으로 걸러주어 밑의 작성된 코드를 정상적인 동작을 하게끔 만들어 주는 것으로 파악된다.function keyEnterHandler(e) { if (e.isComposing || e.keyCode === 22.. 2025. 2. 3. [React] Mention 기능 (Tribute.js) Tribute.js는 웹에서 @멘션 기능을 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 사용자가 특정 문자를 입력할 때, 해당 문자에 맞는 추천 목록(예: 사용자 목록)을 표시해주고, 그 중 하나를 선택할 수 있는 기능을 제공합니다. 주로 채팅 또는 댓글 시스템에서 사용자의 이름이나 태그를 입력할 때 편리하게 사용됩니다.기본 동작사용자가 @를 입력하면, 미리 정의된 리스트(예: 사용자 목록)에서 해당하는 항목들이 자동으로 제안됩니다.사용자가 제안된 목록 중 하나를 선택하면, 텍스트에 해당 항목이 삽입됩니다.이 라이브러리는 텍스트 영역, 인풋 필드, 또는 WYSIWYG 편집기와 함께 사용할 수 있습니다.예시간단한 예제를 통해서 사용 방법을 설명하겠습니다. @아이콘 버튼을 누르면 멤버 리스트가.. 2025. 2. 3. 이전 1 2 다음 728x90
