[TIL] 내배캠4기 React 24일차

눈이 빠질 것 같아요.. 안약 들이부어도 효과가 읎네..

오전

• 팀원 프로젝트와 병합
• 로그인 후 메인페이지 특정 컴포넌트만 변경

오후

• 메인페이지 드롭다운 버튼 디벨롭
• 로그인 페이지 css 만들기
• 자바스크립트 스터디

---

깃 이슈를 열심히 적어서 무슨 작업을 했는지 보기가 편해졌어요 와우!

오늘 스터디를 하다가 스타일 부분을 읽었는데 마침 구글링해서 적용한 개념이 나와서 넘 신기방기 동방신기..

// 홈 화면 드롭다운 버튼 기능
export function onToggle() {
    let ulElementBeforeLogin = document.querySelector(".navbarBeforeLogin")
    let ulElementAfterLogin = document.querySelector(".navbarUserAccountMenu")

    // 사용자 상태 확인
    authService.onAuthStateChanged((user) => {

        if (user) {
            ulElementAfterLogin.classList.toggle("active");
        }
        else {
            ulElementBeforeLogin.classList.toggle("active");
        }
    });


}

클래스 프로퍼티

ClassName

• 클래스 문자열 전체에 변경사항 반영

ClassList

• 클래스 하나만 조작하게 해주는 메서드
• add/remove/toggle

elem.classList.add/remove("class")
: class를 추가하거나 제거

elem.classList.toggle("class")
: class가 존재할 경우 class를 제거하고 그렇지 않으면 추가!

elem.classList.contains("class")
: class 존재 여부에 따라 true/false 반환

+ 로그인 여부에 따라 드롭다운 메뉴가 다르게 보여야 했는데 작동은 되지만, 좀 더 간결하게 짤 수 있는 방법을 생각해봐야 겠다.

내일은 ~

S3 배포
프로젝트 완전 합치기
로그인/회원가입 창 CSS완성하기

---

눈이 건조할 때는 잠시 추억여행을 하자.. 동방신기 옛날영상 보면 저항없이 우는 사람 tlqkf..