오늘 하루

• 9:50am 출첵
  새벽에 잠에 들어 조금 늦게 출발을 했다.
  지금도 많이 졸린 나는 커피로 버티고 있다. 🧑🏻‍💻
• westagram clone
  내가 만든 레이아웃에 기능 하기
  [기능구현완료]
• Git & Github | by 준식님
  git과 github에 차이, westagram github에 초기세팅,
  꼭 알고 있어야 할 명령어들을 알려 주셨다.

Westagram 기능 구현

코드를 한줄씩 정리해서 이벤트 속성을 알아보자

const userId = document.querySelector(".loginId");
const userPw = document.querySelector(".loginPw");
const userBtn = document.querySelector(".loginBtn");
const Validation = ()=>{
    const memberId = userId.value;
    const memberPw = userPw.value;
    if(memberId.includes("@") && memberPw.length >= 5){
        userBtn.classList.add("active");
    }else{
        userBtn.classList.remove("active");
    }
}
userId.addEventListener('keyup',Validation);
userPw.addEventListener('keyup',Validation);

내가 쓴 코드를 정리 해보자

1. 각 태그들한테 셀렉터로 클래스값을 가져왔다.
2. 화살표 함수 (Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.
   화살표 함수로 Validation 함수를 지정했고, input 값 즉, id 와 pw는 값을 받아와야 하기 때문에
   value속성으로 받아왔다.
   3.조건문 성립: value 값을 받은 id와 pw를 비교하는데,
   아이디는 includes() 메서드는 배열에 지정된 요소가 포함되어 있는지 여부를 확인
   이메일을 사용할때 @를 쓰기에 includes 메소드로 사용해 (@)포함되면 이라 볼 수 있다.
   즉, 아이디값이@이고 아이디값의 길이가 5이상이면,
   버튼태그에 classList 로 add 값을 active 클래스로 받아온다.

classList 란?

클래스 요소를 받아올 수 있고, 그 중 add 를 사용하면 추가 할 수있다.

버튼 부모에 opacity 를 0.2를 주면 투명도를 설정하고
classList add 를 지정했으니 버튼에 active 클래스에 투명도가 다시 기본 컬러로 돌아온다.

loginBtn {
    margin-top: 10px;
    padding: 5px;
    border-radius: 4px;
    border: none;
    background-color: #C4E1FB;
    opacity: 0.2;
    transition: all 0.2s;
}
.loginBtn.active{
    opacity: 1;
}

🧑🏻‍💻 16기가 18기에게

오늘은 저녁 이후 16기 이전 기수님들이 좋은 조언과 선배로써 충고를 해주셨다.
준비를 너무 잘하셔서 나에겐 많은 도움이 되었다. 위코드 시작한지 일주일이 지났지만, 한 편으로 많은 걱정과 불안함은 찾아 올 수 밖에 없었다.
그렇다. 16기님들이 선배로써 우리의 마음을 잘 아셨고, 크게 걱정 할 일은 아니다.
위코드 3개월 과정동안 많은걸 얻어가며 프로젝트 경험으로 실력이 많이 늘 것이라고 하셨다. 정말 도움이 되었던 시간이였습니다. 감사합니다 ~ ~ : )

문제해결 방법?

✓ 구글링

제일 좋은 방법은 구글링이다..📝

프론트엔드 Tip:

✓ 프론트엔드 공부 사이트