IT tech Coding/toast ui4 TUI Grid에서 행 삽입과 삭제를 자연스럽게 구현하는 방법 (v3 기준) 웹에서 표 형태의 데이터를 다루다 보면 사용자가 직접 행을 추가하거나 삭제할 수 있도록 하는 기능은 필수가 된다. 특히 TUI Grid를 사용하는 경우에는 다양한 기능이 기본적으로 제공되지만, 실제 프로젝트에서 원하는 방식으로 삽입이나 삭제 기능을 구현하려면 약간의 커스터마이징이 필요하다.이번 포스팅에서는 TUI Grid v3 버전을 기준으로, 사용자가 선택한 위치에 새로운 행을 삽입하고, 특정 행을 자연스럽게 삭제하는 기능을 직접 구현하는 방법을 공유하려 한다.이 기능은 단순히 appendRow()나 removeRow() 같은 기본 메서드를 사용하는 것을 넘어서, 데이터의 흐름을 제어하면서 더욱 유연하게 다루는 방식이다.✅ 행 삽입: 선택한 행 아래에 새 행 추가하기TUI Grid의 기본 행 추가 기능.. 2025. 3. 21. JavaScript로 Toastify 알림 색상을 자동으로 변경하는 방법 JavaScript로 Toastify 알림 색상을 자동으로 변경하는 방법웹 개발을 하다 보면 사용자에게 알림을 표시하는 기능이 필요할 때가 많습니다. 예를 들어, 데이터가 성공적으로 추가되었거나 삭제되었을 때 이를 알려주는 간단한 알림이 있으면 사용자 경험(UX)을 크게 향상시킬 수 있습니다. 이런 상황에서 Toastify 라이브러리는 심플하면서도 스타일리시한 알림을 구현할 수 있는 좋은 도구입니다.이 글에서는 Toastify 알림의 배경 색상을 알림 내용에 따라 자동으로 변경하는 방법을 살펴보겠습니다. 특히, 알림 문구에 특정 키워드(예: "추가", "삭제", "복사")가 포함된 경우, 이에 맞는 색상을 적용하는 간단한 JavaScript 코드를 작성해보겠습니다. Toastify란?Toastify는 웹.. 2024. 12. 18. toast grid Enter키 누르지 않고 입력하기 위한 처절한 나와의 싸움 이 문제에 대해서 처음 생각하고 고민하고, 찾아보고... 했던 기일을 다 합치면... 거의 한달이란 시간일지도 모르겠다. toast Grid git허브에 게시글 너무 많이 봐서.. 이젠 친근하다. 게시글 233개 현재 있는데, 거의 하나씩 눌러보기도 했지만.... 시원한 답변이 없어서 인공지능도 이용해서 찾고 또 찾았다.... 결론부터 말하면 아직 50% 수준... 그래도 Enter키를 치고 수정하는 것을 숫자, 영문자를 입력하면 바로 입력되도록 어렵게 만들었다. 이런 방법도 써보고 저런 방법도 써보고.... chatGPT로 질문을 정말 많이 던졌는데, 아직 toast UI, Grid에 대한 정보가 많이 없어서 그런지 안되는 답만 많이 만들어준다. 예를 들면 지원안하는 것을 메소드로 구현해 주는 등 말이.. 2023. 4. 29. toast ui calender 사용시 에러 Cannot read properties of undefined (reading 'createRangePicker') 처리방법 일정관리하는 프로그램을 개발중인데, NHN에서 고맙게 제공하는 코드가 있어서 며칠째 연구중이었는데, 한 에러때문에 참 많은 시간을 고민하고 찾고 허비한 시간이 많았습니다. 혹시 비슷한 고민하는 분들이 있을지 몰라 이렇게 올려봅니다. 에러 내용은 toastui-calendar.min.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'createRangePicker') at Object.__ (toastui-calendar.min.js:9:129195) at ce (toastui-calendar.min.js:9:39093) at Array.forEach () at t.__r (toastui-calendar.min.js:9:38178.. 2022. 12. 10. 이전 1 다음 반응형
