TIL #10 | Westagram 로그인 페이지 구현

GEUNNN Lee·2021년 2월 26일
2

Westagram 로그인 페이지

드디어 구현을 끝냈다! 앞으로 갈 길이 멀고 간단한 페이지지만 그래도 뿌듯하다. 하나의 페이지를 처음부터 끝까지 혼자의 힘으로 구현 해본건 이번이 처음이라 신기하다.

페이지를 구현하면서 막혔던 부분과 새로 배운 부분을 정리해보고자 한다.

구현 중 기억해두고 싶은 포인트

  1. 파일 경로
    로컬에서 작업하던 파일을 git에 올리기 위해 옮기는 작업 중에 css 파일의 경로가 제대로 설정되지 않아 css파일이 적용되지 않았다. 왜 css 파일이 구현되지 않나 고민했는데 기초적인 실수를 하고 있었던 것이다.
    css나 js 구현이 html에서 보이지 않는 경우는 가장 먼저 경로부터 확인해야겠다.

  2. Uncaught TypeError
    DOM으로 html을 구현하는데 콘솔창에 찍어보니 자꾸 아래 에러가 떴다.

    `Uncaught TypeError: Cannot read property 'addEventListener' of null`

    구글링을 해보니 js 파일을 연결한 script 태그를 body 가장 윗 부분에 설정해둬서 그렇다는 답을 찾았다. 브라우저가 위에서부터 아래로 정보를 읽고 페이지를 구현하는데 html을 로딩하기도 전에 자바스크립트 파일을 실행하니 내가 선언한 변수를 찾지 못했던 것이다.

    script 태그를 가장 아래로 내리니 에러가 나지 않고 잘 작동했다.

  3. Dom에서 css를 수정할 수 있다.

document.getelementsbyclassname().style.property = new style;

대상 객체에 접근해 style.속성를 사용하여 바꿀 수 있다.

  1. getElementsByClassName의 특정 값
const usernameValue = document.getElementsByClassName("username").value;
const passwordValue = document.getElementsByClassName("pswd").value;

if (usernameValue && passwordValue) {
        const loginBtnSelector = document.getElementsByClassName("loginBtn");
        loginBtnSelector.style.backgroundColor = '#0080ff';
    }

위 코드를 작성하며 if문에 조건을 넣고 console.log로 찍었을 때
cannot set property backgroundcolor of undefined at HTMLinputelement라는 에러가 반환되었다.

서치 결과 dom을 이용해 변수를 선언할 때 사용한 코드는 getElementsByClassName였는데 class의 경우는 여러 개가 있을 수 있어 정확한 대상이 할당되지 않아 에러가 반환되었던 것이다. 각 변수에 [0]을 추가해 class 중에서도 대상을 정해주었다.

if (usernameValue[0] && passwordValue[0]) {
        const loginBtnSelector = document.getElementsByClassName("loginBtn");
        loginBtnSelector.style.backgroundColor = '#0080ff';
    }
profile
Frontend Developer 👩🏻‍💻👩‍💻

0개의 댓글