숟갈이 원하는 밥상에 숟갈을 얹을 때 밥장에게 구애(?)의 메시지를 함께 보내려고 한다. 여러 방법이 있겠지만 모달을 띄우고 textarea에 메시지를 작성하는 방법으로 구현하고자 했다. 모달은 다른 곳에서도 사용할 수 도 있으므로 slot으로 만들어 재사용 가능하게 했다. id도 정확하게 잘 맞춘 후 작동을 시켰는데 헐, [그림 1]과 같은 결과가 발생했다. 모달을 아무리 클릭해도 반응하지 않았고 코드를 다시 살펴봐도 문제라곤 보이지 않았다. 테스트 코드를 만들고 거기서 작동시키면 잘된다. 뭐가 문제 일까? 한참을 삽질하다가 [그림 2]와 같은 정상적인 결과를 얻었다. 문제의 원인은 HTML에서 모달을 작성한 위치였다. "현재 신청한 숟갈들"을 모니터링해주는 div 안에 작성했던 게 문제였던 것이다. ..

부트캠프 20차시에서 Vue.js의 slot 기능을 적용한 Modal 구현을 실습하였는데 그 내용을 다음과 같이 정리하였다. 자식 컴포넌트를 부트스트랩 디자인의 Modal 컴포넌트로 만들고 부모 컴포넌트에서 자식 컴포넌트를 이용해 하나 이상의 Modal을 구현하고자 한다. | 자식 컴포넌트 부트스트랩 적용 components의 fragments 폴더에 SlotModal.vue 파일을 생성한 후 태그 안에 "부트스트랩 > Components > Live demo"에서 이하를 copy 하여 붙여 넣는다. Modal title ... Close Save changes slot 및 v-bind 적용 부모 컴포넌트에서 하나 이상의 Modal을 생성하기 위해서 id를 props의 modalId와 바인딩한다. mod..

부트스트랩 #4 https://getbootstrap.com/ 1. Static backdrop 모달 가져오기 1.1 Static backdrop 적용 https://getbootstrap.com/docs/5.1/components/modal/#static-backdrop Modal title ... Close Understood 1.2 Modal - Passing options https://getbootstrap.com/docs/5.1/components/modal/#passing-options 모달을 띄우거나 숨긴다. var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false }) 1.3 id="cus..

JavaScript 주요 포인트 #19 DOM 패턴 - 모달과 고객정보 수정 Step 1 전체 남자 여자 조회 생성 삭제 Name Company Gender Email Phone Addres 고객정보 수정 Name Gender 남자 여자 Company Email 올바른 형식의 이메일을 입력하세요. Phone 올바른 형식의 연락처를 입력하세요. Address 주소찾기 저장 닫기 Step 2 전체 남자 여자 조회 생성 삭제 Name Company Gender Email Phone Addres 고객정보 수정 Name Gender 남자 여자 Company Email 올바른 형식의 이메일을 입력하세요. Phone 올바른 형식의 연락처를 입력하세요. Address 주소찾기 저장 닫기 Step 3 input type..