week1 - ES6 :: Coding Diary

week1 - ES6

kny_0 2022. 12. 10. 06:43

2022. 12. 10. 06:43

✏️ 구현 내용

yotube 클론 코딩

youtube 첫 페이지 구현하기
(page 이동, video 클릭 없이 오직 UI 부분만 구현)
왼쪽 상단의 메뉴 버튼을 눌렀을 때 다른 메뉴 슬라이드로 나오게 하기
video에 마우스 올리면 커지고 빼면 작아지게 하기

** SEO, Media query 적용하기 → semantic tag, 화면 크기에 따라 nav바 유무와 video 크기 조정

ES6 문법 적용하기

var → let, const
반목문 → forEach, map
Event delegation
destructing
함수 람다식

👩‍💻 Issue

css 적용 ⭕
→ flex로 구성
menu, video에서 중복 코드 제거 ⭕
→ forEach로 createvideo, createmenu 함수 여러개 만들어 줌
CORS 에러 ⭕
→ http-server로 해결

⛏️ 피드백

1️⃣ type=module 제거

<script src="src/header/header.js"></script>
<script src="src/headerMenu/headerMenu.js"></script>
<script src="src/headerMenu/headerMenuHover.js"></script>
<script src="src/headerMenu/menuBar.js"></script>
<script src="src/menu/menu.js"></script>
<script src="src/menu/menuHover.js"></script>
<script src="src/video/video.js"></script>
<script src="src/video/videoHover.js"></script>
<script src="src/svg.js"></script>
<script src="src/index.js"></script>

type=module로 선언해 CORS 에러가 발생하여 http-server을 이용했는데 사용해야 할 이유가 없다. js 파일로 나누어 script 태그에 넣어주기만 하면 된다.

2️⃣ body html 태그에 style 금지

<body style="margin: 0">

body {
  margin: 0;
}

3️⃣ Sementic tag 적용

<header id="header"></header>
<nav id="menus"></nav>
<main id="container"></main>

SEO를 위해 sementic tag를 적용한다.

4️⃣ Mediaquery로 Nav, SearchBar 사라지게 하기

@media screen and (max-width: 792px) {
  #menus {
    display: none;
  }
}

@media screen and (max-width: 656px) {
  #search > input {
    display: none;
  }
  #searchButton {
    outline: 0;
    border: 0;
    background-color: white;
  }
}

@media screen and (max-width: 500px) {
  #search > input {
    display: none;
  }
  #searchButton {
    outline: 0;
    border: 0;
    background-color: white;
  }
}

mediaquery로 화면 크기에 따라 nav바와 검색창이 줄어들게 한다. max-width는 유튜브 창을 조절해보며 얻은 값이다.

🧷 Github

stageus_front-end/youtube at main · kknyapple/stageus_front-end

'Assignment' 카테고리의 다른 글

week3 - hook (0)	2022.12.10
week2 - Component (0)	2022.12.10
스테이지어스 was (0)	2022.10.08
스테이지어스 4주차 과제 (0)	2022.10.08
스테이지어스 3주차 과제 (0)	2022.10.03

Coding Diary