[JavaScript] 부트스트랩 모달 에러 화면 어두워지고 제어 불능
·
Frontend/JavaScript
채용 공고 등록 폼을 step1 에서 7까지 총 7개의 step으로 구성했고, 등록하기 버튼을 누르면 form이 제출된다. 입력값 유효성 검사를 위해 오전 작업 중 등록하기 버튼을 누르면 모달창이 나오는데 💥 모달창을 닫기 위해 '아니오' 버튼을 눌렀는데 화면이 어두워지고 제어가 먹통이 되는 상황 이 발생했다. 공고 등록 폼 제출 이외에도 여러 버튼을 모달로 처리하고 있는데 이런 현상은 처음이여서 당황했다 7개의 step을 그냥 합쳐야되나.. 라고 순간 생각도 했지만 개발 계획과 어긋나기에 해결 시작 ^__^ 🧐 모달이 닫히고도 화면이 어두워지고 제어가 안되는 이유는?1. 모달 제어를 위한 JS 코드에서 모달을 여러 번 실행해서 발생2. 모달 닫힌 뒤 backdrop 이 꼬이는 현상 발생 ?..
[JavaScript] Error : querySelector() 과 null 의 만남
·
Frontend/JavaScript
에러 발생 💥 TodoList 의 리스트를 Remove(제거) 하는 구현 과정에서 remove가 제대로 진행되지 않음 😡   원인 파악 ✅ Remove 버튼의 클릭은 자바스크립트를 이용해서 태그의 action을 조정하는 방식으로 구성함클릭 이벤트 발생 시 POST 방식으로 remove() 메서드를 진행하게 되는데 아래와 같은 메시지 확인  🧐 서버 로직의 문제가 아닌 자바스크립트 처리 과정에서 문제가 있다고 판단 원인 발견 🌟 Modify 페이지에서 POST 방식으로 Controller 에게 전송되는 과정에서자바스크립트 querySelector() 함수를 사용했는데 아래 코드로 작성했음그런데 Modify 수정 입력 폼(form) 말고 다른 폼이 앞에 존재했었다.. 😅  Document.quer..
[Javascript] 간단한 메모장을 만들어보자 createTextNode() createElement() appendChild() remove()🧐
·
Frontend/JavaScript
1. getElementById() 입력창, 입력창값(value) 가져오기2. createTextNode() 입력한 내용을 텍스트 노드로 변환하기3. createElement() HTML 요소 생성하기4. appendChild() 부모 요소에 생성된 자식 요소 추가하기5. addEventListener() 클릭 이벤트 함수 (추가 / 삭제)6. remove() HTML 요소 제거하기  간단한 메모장을 만들기 위해 입력 영역, 추가 영역, 리스트 영역을 간단한 HTML 코드로 작성하고자바스크립트(Javascript) 로 추가, 삭제 기능을 구현하였다. 1. HTML 코드 작성(위 사진은 CSS 따로 적용) 자바스크립트 메모장 추가/삭제 메모 추가  2. Java..
[Javascript] replace(), parseInt(), toString()문자열을 정수로 변환, 정수를 문자열로 변환 🧐
·
Frontend/JavaScript
메뉴를 주문내역에 추가하는 것을 구현하는 도중가격이 6,200원 6,000원과 같이 타입이 문자열이기 때문에어떻게 하면 정수로 변환하여 더할 것이며 천자리 바다 콤마(,) 가 찍힐 수 있도록 하는 것에 대해 고민했다. 해결 순서 1. 6,200원(문자열 string) 을 정수로 변환 / 6,200원(string)->6,200(number)2. 6200 (number) + 6000 (number)... + 총 금액(number) 계산3. 총 금액 12200 (number)  을 12,200 원 (string) 으로 변환 1. 문자열을 정수로 변환- 정수로 변환하기 전에는 price, price2 는 string 타입인 것을 확인 할 수 있다.  - 정수로 변환해서 출력해보니 6200 이 아닌 6 만 나오..
[JavaScript] break 문 / 반복문을 멈추거나 빠져나올 때 🧐
·
Frontend/JavaScript
break 문은 특정 조건에서 반복문을 멈추거나, 반복문 중간에서 앞으로 되돌아가야 할 경우에 사용한다.단독으로 사용할 수도 있고 반복문을 끝낼 조건과 함께 사용할 수도 있다.예제 1 (자리배치도)1-1 break 문을 사용하지 않았을 때아래는 총 입장객 수에 맞게 번호가 있는 좌석을 배치했다.for문을 사용해 총 56명의 입장객을 한 줄에 5 좌석으로 자리를 배치하였는데,좌석은 56개가 아닌 60개까지 만들어지는 것을 확인할 수 있었다.document.write(``); // 행 (11줄) for(let i = 0; i`); // 열 (5줄) for(let j = 1; j 좌석 ${seatNo} `); } document.write(``); } document.wri..