패스트캠퍼스X야놀자 프론트엔드 개발_HTML/CSS 과제 리팩토링

📂 LG U+ 홈페이지 클론코딩

패스트캠퍼스X야놀자 첫 번째 프로젝트

2023-07-24~2023-07-28

 

---

레퍼런스 사이트 & 데모 사이트

레퍼런스 : https://www.lguplus.com/
데모 : https://glowing-chebakia-807feb.netlify.app/

 

 

---

프로젝트 설명 및 선정 이유

첫 클론코딩 프로젝트인 만큼 내가 배웠던 걸 써먹어 보고 싶었다

그래서 내 수준(?)에서 구조적으로나 기능적으로 구현할 수 있는 웹 사이트를 선정했다

 

---

구현 내용

1. fixed된 헤더메뉴

position: fixed; 속성을 이용해 스크롤 시에도 헤더 유지

 

2. 슬라이더와 애니메이션 전환효과

swiper 라이브러리와 scrollMagic 라이브러리를 통해 슬라이더와 애니메이션 기능 추가

 

3. 드롭다운 메뉴

CSS의 display 속성을 JS에서 제어하도록 함

 

---

에러발생 및 문제해결

1. header의 posititon: sticky; 가 적용되지 않음

스크롤을 따라오는 header를 기대했는데, position: sticky; 가 적용되지 않고 있다.

sticky 속성을 갖는 요소는, 자신의 바로 위의 부모요소 안에서만 적용된다.

 

// 기존코드

.header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  background: #000;
}

 

---

코드리뷰 및 리팩토링

멘토님의 코드리뷰를 참고해서 개선할 사항과 해결된 부분을 추가하겠다 😄

 

1. 반응형

내 디바이스 기준에 맞춰서 px 값을 사용하다 보니 다른 디바이스에선 짤려 보일 걸 예상하지 못했다.

미디어 쿼리를 이용하는 방법이나 px대신 vw와 같은 유동적인 단위를 쓰도록.

 

2. 시맨틱 태그 활용

<hedaer> 태그의 자식은 <heading>을 쓰는 것이 맞다.

 

3. .toggle 활용

// 기존코드

let onToggle = false
chatbotEl.addEventListener('click', () => {
  onToggle = !onToggle
  if (onToggle) {
    subMenu.classList.add('show')
    chatbotEl.classList.add('show')
  } else {
    subMenu.classList.remove('show')
    chatbotEl.classList.remove('show')
  }
})

classList.toggle()을 사용하면 명시적으로 코드를 줄일 수 있다.

toggle()은 className이 존재하는지 확인하고 존재한다면 className을 삭제한다. 존재하지 않으면 추가한다.

 

// 수정코드

chatbotEl.addEventListener('click', () => {
  subMenu.classList.toggle('show')
  chatbotEl.classList.toggle('show')
})

굳이 변수로 현재상태 유무를 체크하지 않아도 toggle로 간단하게 클래스를 추가하고 제거할 수 있다.

 

 

4. 주석사용보단 네이밍을 잘하자

// 기존 코드

const swiper = new Swiper('.visual .swiper-container', {
  autoplay: {
    delay: 5000, // 5초마다 슬라이드 바뀜

const SECONDS_TO_MS = 1000 와 같이 상수를 먼저 선언하고, 

delay: 5 * SECONDS_TO_MS 처럼 사용하면 주석없이도 코드를 쉽게 파악할 수 있다.

 

 

5. 상대경로 보단 절대경로를 사용하자

"./css/common.css"  👉 "/css/common.css"

어떤 subpath에서도 문제없도록 절대경로 사용을 습관화하는 것이 좋다

 

 

 

6. script 태그는 가능한 </body> 위에 위치시키는 것이 좋다

defer 를 사용하면 스크립트가 페이지의 다른 내용을 파싱하는 동안 실행되지 않고, 파싱이 완료된 후에 실행된다.

또한 </body> 태그 위에 위치시키면, 스크립트가 페이지의 나머지 내용을 방해하지 않고 로딩될 수 있다.

 

 

 

7. id나 class에선 dash(-)를 구분자로 사용하는 것이 좋다

camelCase나 snake_case를 사용하지 않고 dash(-)를 구분자로 사용하는 게 일반적이다.

 

 

 

8. input checkbox는 cheked를 기본값으로 설정할 수 있다

기본값으로 checked되게 하려면, checked 속성을 사용하면 된다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/checkbox

<input type="checkbox"> - HTML: Hypertext Markup Language | MDN

 

 

9. Block 구조에 대한 고민

// 기존코드

   <div class="header-wrap__container">
          <div class="inner">
            <div class="header-navi">
              <nav class="header-navi-menu">
                <ul class="header-nav-lst">
                  <li class="item">
                    <a href="javascript:void(0)" class="item__name">모바일 기기</a>
                    <div class="item__wrap">

👤 멘토님: 조금 더 block의 구조에 대해 고민해보시는 것도 좋아 보입니다!

여기서 'block의 구조'란 말의 의미를 정확히는 모르겠지만

기존코드의 구조나 네이밍이 불필요하고 불명확한 점이 있어서 그 점을 수정하려고 했다.

 

• 의미 있는 클래스 이름 사용
• 시맨틱한 HTML 사용

 

//수정코드

<header class="header">
<div class="header__container">
<nav class="header__nav">

  <!-- Main Menu -->
  <ul class="main-menu">
    <li class="main-menu__item">
      <div class="main-menu__sub">
      </div>
    </li>
  </ul>

  <!-- Sub Menu -->
  <ul class="sub-menu">
  </ul>

</nav>
</div>
</header>

• 의미 있는 클래스 이름 사용
  .header-wrap__container, .header-navi 대신 계층적으로 구분할 수 있게 bem 규칙을 사용했다.
• 시맨틱한 HTML 사용
  header와 nav 태그를 사용해서 좀 더 시맨틱하게 구성했다.

 

좀 더 명확하고 간결하게 줄일 수 있을 것 같은데.. 고민을 더 해봐야겠다 🤔

 

 

10. heading level은 구조적으로 나누자

// 기존코드

 <div class="item__wrap">
                      <ul class="inner">
                        <li>
                          <h4 class="title"><a href="javascript:void(0)">5G휴대폰</a></h4>

기존 코드는 텍스트의 사이즈에 맞게 h4 수준을 사용했다

 

// 수정코드

<h2 class="main-menu__sub-title">

h4 대신 h2로 레벨 수준을 달리 했다.

 

 

11. target="_blank" 사용 시엔 Tabnabbing 공격 방지를 해야한다

Tab nabbing 공격이란? 
새 창이나 새 탭을 띄우면서 동시에 링크가 포함되어있던 부모창의 문서를 피싱사이트로 바꿔치기하는 수법

rel="noopener noreferrer"

속성은 보안 및 개인 정보 보호를 강화하는 중요한 조치다.

 

 

12. '오늘 하루 그만보기' 기능 구현

기존의 배너요소를 닫는 코드에 쿠키를 사용해서 '오늘 하루 그만보기' 기능을 구현했다.

 

// 배더 닫기 클릭 이벤트

function closeBn() {
  const bnEl = document.querySelector('.header-banner')
  const clsBtn = document.getElementById('closeBtn')
  const onTodayCls = document.getElementById('text-chkbox')

  if (!bnEl || !clsBtn || !onTodayCls) {
    return // 요소가 존재하지 않으면 함수 종료
  }

  const cookieName = 'bannerClosedForToday'

  // 쿠키 생성 및 유효기간 지정
  function handleBannerClose() {
    bnEl.remove()
    const expirationDays = 1 // 쿠키 유효 기간을 하루로 설정
    const expires = new Date()
    expires.setDate(expires.getDate() + expirationDays)
    document.cookie = `${cookieName}=true; expires=${expires.toUTCString()}; path=/`
  }

  clsBtn.addEventListener('click', handleBannerClose)

  onTodayCls.addEventListener('click', handleBannerClose)

• 배너의 .closebtn과 .text-chkbox를 클릭하면 핸들러 함수가 호출
• 쿠키의 주어진 날짜의 '일(date)' 기준으로 유효기간 설정
  • .setDate(dayValue) Date 객체의 일(day)을 설정하는 역할.
  • .getDate Date 객체에서 일(day) 값을 반환.
  • .toUTCString() 날짜를 문자열로 변환하여 UTC 시간대로 해석

 

// 쿠키 불러오기

  // 쿠키 불러오기
  function getCookie(name) {
    const cookies = document.cookie.split('; ')
    for (const cookie of cookies) {
      const [cookieName, cookieValue] = cookie.split('=')
      if (cookieName === name) {
        return cookieValue
      }
    }
    return null
  }

• 쿠키에 저장되어 있는 데이터 불러오기
  • const cookies = document.cookie.split('; ') 쿠기 데이터들을 '; ' 구분자로 구분하여 배열로 저장
  • if (cookieName === name) {} 조건문을 통해 불러온 쿠키데이터 이름이 cookieName과 일치 시 value값 반환, 이름이 일치하지 않으면 null 반환

 

// 쿠키 상태확인 (함수 호출부)

  if (getCookie(cookieName) === 'true') {
    bnEl.remove()
  }

• 쿠키가 저장되어 있는지 확인
  
  • cookieValue === 'true' 일시 쿠키가 저장되어 있음 -> 배너를 제거한다

 

 

 

---

🎉 마무리

나름  첫 클론 코딩에  첫 프로젝트였는데 기존 사이트의 기능을 완전히 가져오지 못한 점이 아쉽게 느껴진다. 

그래도 HTML를 구조적으로 작성하는 방식을 배우고, CSS flex와 transition 애니메이션을 사용해본 점은 뿌듯하다.

앞으로 더욱 배우고 써먹어봐야겠다 😆

회고를 작성하면서 느낀점은 에러해결하는 과정을 기록하는 것이 중요하다는 것이디 😱 며칠 전이라고 벌써부터 기억이 나질 않는다..

다음 프로젝트 시에는 꼭! 에러상황과 문제해결 과정을 기록해둬야겠다 🤔