UX·UI - FrontEnd Dev. Story

CheckBox 4

[Vue] 컴포넌트 팝업창 '오늘 하루 창 열지 않기' 스크립트 만들기 feat. mounted - 포폴

예전에 쿠키를 이용해서 이 기능이 적용된 팝업을 레거시로 만들었었는데 이번에 Vue에서 사용하는 팝업창을 만들게 되었다. 라이프사이클을 사용해서 하다보니 만들면서 기억할 겸 정리 한다.    [ Vue에서 HTML 팝업창 만들기 적용 ] 오늘 하루 열지않는 팝업창 만들기 닫기 오늘 하루 열지 않기     v-model을 이용하여 데이터 바인딩을 적용. checkbox가 클릭되면,data에 doNotShowToday = ture  checkbox가 해지하면,doNotShowToday = false     [ Vue에서 오늘 열지않기 기능 Script 적용 ] export default { data..

프론트엔드/Vue 2025.02.04

[REACT] checkbox 토글 기능 만들기 - javascript 사용하여 useState 리랜더링

회사에서 과제로 To-do 리스트 만드는걸 내줬다.      체크박스의 토글에 따라 일정 완료기능을 넣었는데매번 체크박스를 업데이트 할 때, 스크립트 구조를 어떻게 잡아야할지어떻게 useState로 업데이트하여 리랜더링 해야하는지매번 만들때마다 구조가 늘 꼬여 이번에 정리하며 메모하려 한다.    db.json[ { "id": 0, "type": "To-Do", "title": "맛있는거 만들어먹기", "process": true }, { "id": 1, "type": "약속", "title": "친구랑 맛집가기", "process": false }, { "id": 2, "type": "취미", "title": "상체 조지기", "..

체크박스 unchecked 일때, 체크하라는 alert창 띄우기 :: checkbox, javascript study

input type="checkbox" 체크박스 체크여부로 인한 JS 제작 작업중에 checkbox가 체크가 안되어있을 때, 경고문 뜨도록하는 작업이 들어왔다. 간단할 줄 알았는데 생각보다 로직이 은근 꼬여서 이번 기회에 어떻게 해결했는지 메모하려고 한다. 이런것들이 다 나의 피와 살, 토양과 영양분, 커리어와 연봉이 되거라며.. 연봉 incease(가즈아 🚀)!!! [ HMTL ] 전체 Image Exel PPT Word seach [ JavaScript Version 01 ] // search input이랑 button 부분 const searchInput = document.querySelector('#searchKey'); const searchButton = document.querySelect..

[HTML] 라디오버튼(radio button) 체크박스(check box) 버튼 차이점

1. 라디오 버튼 (Radio Button) 라디오 버튼 특징은 여러 라디오 버튼 중 하나만 선택 가능하다. 인라인 태그에 있는 'checked'는 라디오 박스에 기본값으로 체크 된 상태에서 로딩하라는 표시이다. 라디오 버튼는 여러개 중 하나만 선택되어야 하는데 name 값이 같지 않거나 없다면 제 기능을 발휘하지 못한다. 만약 라디오 버튼 속성에 name 없으면 모두 체크하거나 해제할 수 있는데 그것은 라디오 버튼라고 할 수 없다. 남성 여성 그럼 여기서 체크 값을 가져오는 스크립트를 알아보자. 매우 그렇다. 그렇다. 보통이다. 일단 체크 값들에게 값(value)을 부여한다.그리고 라디오버튼의 name 고통적인것을 이용해서 스크립트를 짠다. $("input[name='radio_answer']").ea..

반응형