15일차
2021. 08. 06 금요일
1. Today's Key points!
- DOM(Document Object Model)
- CREAT, APPEND, READ, UPDATE, DELETE
- 유효성 검사
2. 정리해보자!
- DOM(Document Object Model)은 HTML 및 XML 문서용 프로그래밍 인터페이스이다. 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 페이지를 나타낸다. DOM은 문서를 노드와 객체로 나타낸다. 그렇게 하면 프로그래밍 언어가 페이지에 연결할 수 있다.
- DOM 구조를 조회할 때에는 console.dir 사용
- 자식 엘리먼트 조회하기 : document.body.children
- 부모 엘리먼트 조회하기 : const div = document.querySelector(‘#div’)
div라는 id를 가지고 있는 엘리먼트를 div라는 변수에 할당해준뒤에 div.parentElement를 하면 div의 부모 엘리먼트를 조회할 수 있다. - CREAT element : const tweetDiv = document.createElement(‘div’) div엘리먼트 생성하는 tweetDiv선언
- APPEND(appendChild) : document.body.append(tweetDiv) body엘리먼트 안에 div 생성
- READ(querySelector, querySelectorAll) : 근데 body엘리먼트 안의 자식 엘리먼트중에 한 곳에 들어가야 한다면?
const 해당엘리먼트 = document.querySelector(‘해당엘리먼트’)
해당엘리먼트.append(tweetDiv)를 하면 해당엘리먼트 안에 div가 생성됨. 해당엘리먼트가 id이면 ‘#해당엘리먼트’
class이면 ‘.해당엘리먼트’
querySelector와 같은 메소드 : getElementById - UPDATE(textContent, id, classList, setAtrribute) : 아까 만들어준 tweetDiv에 text를 넣고 싶으면, tweetDiv.textContent = '넣고싶은 텍스트'를 해주면 된다. 그리고 tweetDiv에 class명을 넣어주고 싶다면, tweetDiv.classList.add('클래스명') 이렇게 함으로써 같은 css를 적용받게 할 수 있다.
setAttribute는 속성에 값을 바꿔 줄 수 있다. setAtrribute(name, value)인데 앞의 예처럼 'id', 'id명'을 해주었을 때 tweetDiv에 이미 id가 할당되어 있었다면 바꿔주게 되고, 그게 아니면 속성과 속성값을 추가시킨다. - DELETE(remove, removeChild, innerHTML = "", textContent = "") : tweetDiv.remove()를 하면 append 했던 엘리먼트를 삭제할 수 있다. 여러 개의 자식 엘리먼트를 지우려면, 어떻게 해야 할까? innerHTML을 이용하면 모든 자식 엘리먼트를 삭제할 수 있다. document.querySelector('#container').innerHTML = "";을 해주면 id가 container인 엘리먼트 아래의 모든 엘리먼트를 지운다. 그런데 innerHTML을 이용하는 방법은 분명 간단하고 편리한 방식이지만, 보안에서 몇가지 문제를 가지고 있다. 그래서 이 방법 대신 다른 메소드를 사용하기를 권장한다. removeChild는 자식 엘리먼트를 지정해서 삭제하는 메소드이다. 모든 자식 엘리먼트를 삭제하기 위해서는 반복문을 활용한다.
이 외에도 자식 엘리먼트를 하나만 남기게 할 수도 있다.
또는 직접 클래스 이름이 tweet인 엘리먼트만 찾아서 지우는 방법도 있다.
3. 복습하기!
유효성 검사(Form validation)
누구나 한 번쯤은 웹사이트에서 회원가입을 경험해보았을 것이다. 이러한 가입 과정에서 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야하는 경우가 생긴다.
- 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등)
- 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다.
- 비밀번호와 비밀번호 확인란에 입력된 비밀번호가 동일해야 합니다.
- 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다.
이러한 기능을 유효성 검사라고 부르는데, 이러한 기능을 구현하는 HTML을 만들어보는 과제를 진행했다.
정말 기본적인 기능만 구현하면 되기에 과제를 진행하면서 특별히 어려운 부분은 없었다. 그 중에서 해결이 안된 기능이 하나있는데, 모든 폼이 입력이 안되면 회원가입 버튼이 비활성화 되어야하고, 모든 조건이 만족했을 때 회원가입 버튼이 활성화 되어야 한다. 여기서 모르겠는 부분이 2가지가 있다. 첫번째는 아이디 입력의 조건을 만족하고, 비밀번호 조건을 만족하고, 전화번호를 입력할 때 회원가입 버튼을 활성화 시키는 것은 구현이 되는데, 활성화가 된 상태에서 다시 위의 조건을 만족하지 안흐면 비활성이 되어야하는데 활성상태로 그대로 남아있는 부분을 해결하지 못했다. 두번째는 이러한 기능을 구현하기 위해서는 함수안에 리턴하는 동작이 있어야하는것 같은데, 그냥 바깥에 if문으로 원하는 기능을 리턴하게되면 다른 함수들이 작동을 하지않는다. 첫번째는 알고리즘 적으로 해결이 안된 상태이고, 두번째는 스코프 관련해서 아직 내가 모르는 부분이 있는 것 같다. 이러한 부분들을 주말에 고민해보고 구현해 봐야할 것 같다. 또 CSS를 바꿔보면서 스타일 적으로도 회원가입 창을 꾸미고 CSS연습을 해야겠다.
