초보 개발자의 성장 일기

시계를 만드는 도중 10초 미만의 한자리 숫자일때는 1, 2, 3 ... 이렇게 나오는데, 모두 두자리로 01, 02, 03으로 맞추고 싶었다. 처음 생각해낸 방법은 if문을 이용해서 길이가 2미만일 경우 앞에 0을 붙이도록 하려고 했으나, 원하는 길이를 지정하고 그 길이에 부족한만큼 채울수 있는 메소드가 있지 않을까 해서 찾아봤다. padStart를 사용하면 긴 if문을 사용하지 않아도 된다. '2'.padStart(2, '0'); // '02' 2라는 문자에 padStart를 사용해서 길이를 2로 만들고 길이가 부족한 만큼 앞에서부터 0문자를 채우는 것이다. 반대로 padEnd를 사용하면 뒤에서부터 부족한 만큼 채워준다. 주의할 점은 문자만 가능하다는 점이다. 숫자를 사용할 경우 문자로 변환해서 사용..

input 태그를 만들 때 입력이 안되어있을 때, 즉 빈칸일 때는 if문을 사용해서 체크했다. if (username === '') 하지만 이렇게 하지 않아도 한 단어를 html에 적용하면 간단하게 유효성 체크가 가능하다. 바로 input 태그 안의 속성으로 required를 넣는 것이다. 또한 글자수 길이에 제한을 둘 때 length를 이용해서 유효성 검사를 했지만, if (username.length > 15) 이것 또한 html에서 maxlength를 사용하여 확인이 가능하다. 대신 input의 유효성 검사를 작동시키기 위해서는 input이 form안에 있어야 한다. input안 button을 누르거나 type이 submit인 input을 클릭하면 form이 자동적으로 submit이 되고, 새로고침..

리액트만 사용하다가 순수 자바스크립트가 기억이 잘 안나 공부하는 도중, class를 이용하여 추가하고 교체하는 방법이 헷갈려서 다시 공부를 시작했다. 기초를 중요하게 생각해서 deep dive책을 다시 읽고 있고, 노마드 코더의 바닐라 자바스크립트 강의를 참고했다. // HTML Click Button // JS h1.className = "clicked"; 자바스크립트를 사용하여 직접적으로 CSS를 바꾸지 않고, 클래스명만 변경하여 클래스명에 따른 CSS를 적용하려고 하는데 className을 사용하면 기존에 존재하던 클래스명이 사라지고 새로운 클래스명으로 교체 된다. 기존에 있던 클래스명을 살리고, 자바스크립트로 이벤트 활성시 새로운 클래스명을 추가하는 방법은 무엇일까? classList를 사용하는 ..