목록2024/03 (13)
초보 개발자의 성장 일기
input 태그를 만들 때 입력이 안되어있을 때, 즉 빈칸일 때는 if문을 사용해서 체크했다. if (username === '') 하지만 이렇게 하지 않아도 한 단어를 html에 적용하면 간단하게 유효성 체크가 가능하다. 바로 input 태그 안의 속성으로 required를 넣는 것이다. 또한 글자수 길이에 제한을 둘 때 length를 이용해서 유효성 검사를 했지만, if (username.length > 15) 이것 또한 html에서 maxlength를 사용하여 확인이 가능하다. 대신 input의 유효성 검사를 작동시키기 위해서는 input이 form안에 있어야 한다. input안 button을 누르거나 type이 submit인 input을 클릭하면 form이 자동적으로 submit이 되고, 새로고침..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mxgi8/btsFqMO3Gvi/xztOxUlxhM7L6pLe0kacpK/img.png)
리액트만 사용하다가 순수 자바스크립트가 기억이 잘 안나 공부하는 도중, class를 이용하여 추가하고 교체하는 방법이 헷갈려서 다시 공부를 시작했다. 기초를 중요하게 생각해서 deep dive책을 다시 읽고 있고, 노마드 코더의 바닐라 자바스크립트 강의를 참고했다. // HTML Click Button // JS h1.className = "clicked"; 자바스크립트를 사용하여 직접적으로 CSS를 바꾸지 않고, 클래스명만 변경하여 클래스명에 따른 CSS를 적용하려고 하는데 className을 사용하면 기존에 존재하던 클래스명이 사라지고 새로운 클래스명으로 교체 된다. 기존에 있던 클래스명을 살리고, 자바스크립트로 이벤트 활성시 새로운 클래스명을 추가하는 방법은 무엇일까? classList를 사용하는 ..
바닐라 자바스크립트를 복습하면서 투두리스트를 구현중이다. 할일을 input value로 불러와서 추가를 해야하는데, 새로운 tag요소를 만들어 부모의 태그에 자식태그로 넣으려고 하는 중 append, appendChild 두개의 차이가 궁금해졌다. append, appendChild의 공통점 두 메소드는 부모 노드에서 자식 노드를 추가하는 것이다. append 노드 객체를 사용할 수 있다. text를 사용할 수 있다. 한번에 여러 자식들을 추가할 수 있다. return 값을 반환하지 않는다. const parent = document.getElementsByTagName("body")[0]; const child1 = document.createElement("p"); const child2 = docu..