KDT0_ChoiJaehun 유튜브 뮤직 홈페이지 클론 코딩

[zoeyourlife]

유튜브 뮤직 웹페이지 클론 코딩

---

링크

원본 페이지: 원본 사이트

• 로그인이 되어있어야 될려나요..?

클론 홈페이지 : 클론 사이트

제작기간: 07-25 日 ~ 07-28 日

사용 기술

1. HTML
2. CSS
3. Swiper JS (CDN으로 사용)

---

개발 사항

1. PC 레이아웃 적용

2. 약간의 디자인 추가

3. 메뉴바 미구현 및 기기에 연결 아이콘 미구현

4. 프로필 hover 시, 보이는 부분 깨짐

5. 왼쪽 nav 화면 약간 깨짐

6. 검색창 태그 디자인

7. 슬라이더 컴포넌트 구현 밑에 더 있지만 중복 컴포넌트라 제외함.

이 부분이 약간 뭔가 불편했음 하나의 컴포넌트로 만들려면?

---

개선 사항

1. 반응형 및 미구현 항목 개선

2. 요소 컴포넌트화 후 전체 페이지 제작

3. 검색창 기능 및 페이지 링크 이동 후 페이지 제작

4. SCSS 좋긴 좋은데, 뭔가 하다보니 너무 난잡해짐. 정리 안됨.

5. Swiper 부분 커스터마이징 부족. 찾아볼 것

참고 사이트

1. 첫번째 블로그 - Swiper 버튼 관련
2. Swiper 공식 사이트
3. SCSS 적용기
   ...

[wowba]

SCSS를 사용하셨는데, SCSS 작성법은 CSS보다 좀 더 BEM 방법론에 맞게 사용하기 좋은 것 같습니다!
저도 다음에 BEM 방법론을 다시 사용한다면 써봐야겠어요!

index.html에 인라인으로 JS를 작성하셨는데, 이를 따로 JS 모듈로 관리 및 ES6 문법을 사용하면 추후 더 좋을 것 같습니다!
그리고 swiper의 이벤트를 사용해서 수직수평을 결정하는 것도 재밌었습니다..!

[zoeyourlife]

SCSS를 사용하셨는데, SCSS 작성법은 CSS보다 좀 더 BEM 방법론에 맞게 사용하기 좋은 것 같습니다! 저도 다음에 BEM 방법론을 다시 사용한다면 써봐야겠어요!

이 부분은 사실 사용하기엔 되게 편했지만, 클래스들의 좀 더 정확한 표현이나 이름을 사용했더라면 하는 아쉬움이 남아있습니다..

index.html에 인라인으로 JS를 작성하셨는데, 이를 따로 JS 모듈로 관리 및 ES6 문법을 사용하면 추후 더 좋을 것 같습니다! 그리고 swiper의 이벤트를 사용해서 수직수평을 결정하는 것도 재밌었습니다..!

이 부분은 동감합니다. 저의 나쁜 습관이기도 한데, 피드백 주셔서 감사합니다. 추후에 고쳐보겠습니다 !

[taki-kim]

SCSS 사용안해봤는데, 한 번쯤 사용해봐야겠다는 생각이드네요.
SCSS로 작성할 시 부모자식요소 간의 구조가 명시적으로 잘 보이는게 장점인거 같아요.
나중에 스타일을 수정해야할 때 CSS보다 작업에 더 용이할 거 같습니다.
(그리고 위 코멘트 보니 , 저도 클래스나 아이디명을 잘 사용하는게 어려운 포인트였습니다..)

추가로 Header 같이 분리할 수 있는 단위들의 스타일 시트를 따로 작성하여 관리하면 더 좋을 거 같다고 생각했습니다!

[iamidlek]

고생하셨습니다!
특별히 코멘트 할 부분이 없어 생략하겠습니다.

리뷰 총평

전체적으로 구현 내용이 많지 않아 코멘트가 필요한 부분은
없어 보입니다. 태그의 default 값인 부분에도 css 한 번 더
적용하는 부분도 불필요한 것 같습니다.
폴더 구조도 Jaehun 안에 넣지 않고 root에 있는 것이
일반적일 것 같습니다.

[iamidlek]

두번 작성된 것 같습니다.

[zoeyourlife]

사실 코딩 과정에서 신경을 못쓴 점이 많았던 것 같습니다 .
저런 덕지덕지 쓰여진 코드들이나, 무턱대고 쓰여진 코드들도 많았던 것 같습니다.
추후 리팩토링 과정에서 다듬어보겠습니다.

[Eojoonhyuk]

사용하지 않는 주석 처리된 부분은 없애는 게 좋을 거 같아요!

[zoeyourlife]

단순히 어떤 부분에서의 시행착오를 따로 작성해둔 곳이 없어서 이런 식으로 되어있는 부분이 많은 것 같아요. 😢

[applevalley]

확실히, SCSS의 사용을 통해 부모-자식 요소간의 관계가 더 직관적으로 보여지게 되거나, 중첩된 내부 요소에 대한 스타일링으로 인해 스타일 시트 내에서 특정 클래스나 id 선택자를 중복해 타이핑하는 부분을 개선할 수 있다는 장점이 있는 것 같네요!
저도 리팩토링하게 되면 SCSS 사용을 적극적으로 고려해보려고 해요!

[zoeyourlife]

SCSS 사용안해봤는데, 한 번쯤 사용해봐야겠다는 생각이드네요. SCSS로 작성할 시 부모자식요소 간의 구조가 명시적으로 잘 보이는게 장점인거 같아요. 나중에 스타일을 수정해야할 때 CSS보다 작업에 더 용이할 거 같습니다. (그리고 위 코멘트 보니 , 저도 클래스나 아이디명을 잘 사용하는게 어려운 포인트였습니다..)

추가로 Header 같이 분리할 수 있는 단위들의 스타일 시트를 따로 작성하여 관리하면 더 좋을 거 같다고 생각했습니다!

저도 이부분은 완전 동감입니다 . 👍

[zoeyourlife]

확실히, SCSS의 사용을 통해 부모-자식 요소간의 관계가 더 직관적으로 보여지게 되거나, 중첩된 내부 요소에 대한 스타일링으로 인해 스타일 시트 내에서 특정 클래스나 id 선택자를 중복해 타이핑하는 부분을 개선할 수 있다는 장점이 있는 것 같네요! 저도 리팩토링하게 되면 SCSS 사용을 적극적으로 고려해보려고 해요!

하지만, 제가 클래스 명을 덕지덕지 붙인 것 같아 개발자 도구로 봤을 때의 더러운듯한 느낌은 지울 수가 없었습니다.
저는 준혁님의 scss 작성안을 참고해서 리팩토링 하면 좋을 것 같다고 느꼈습니다!