KDT0_JinJeongMin 패스트캠퍼스 클론 코딩 #48

JeongMin83 · 2023-07-28T12:30:49Z

KDT0_JinJeongMin - 패스트캠퍼스 사이트 클론 코딩

1. 개요

야놀자 x 패스트캠퍼스 부트캠프에서 진행한 3주차 HTML, CSS 과제로 원하는 사이트를 선정하여 진행한 클론 코딩한 개인 프로젝트.

사이트 주소

원본 사이트 : https://fastcampus.co.kr/

배포 사이트 : https://scintillating-kleicha-014b82.netlify.app/

2. 기술 스택

3. 프로젝트 info

📅 프로젝트 기간

2023년 07월 24일 ~ 2023년 07월 28일

📝 필수요구 사항

✅ 과제에 대한 설명을 포함한 README.md 파일을 제공

✅ 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시

✅ 과정에서 사용한 프로젝트 폴더/파일이 모두 포함

✅ 실제 서비스로 배포하고 접근 가능한 링크를 추가

📝 선택 요구사항

✅ < header >, < section > 등 시멘틱 태그를 최대한 활용

✅ 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용

❌ 부분적으로 BEM 방법론을 도입

✅ JS가 필요한 부분은 되도록 생략하되 이유를 명시(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)

✅ JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현(JS 과제가 아니니까 가볍게 구현하시길 추천해요)

원본 사이트 소개

클론 코딩 대상으로 선정한 사이트는 로 현재 진행 중인 부트캠프를 운영 중인 곳이다.

실제 페이지와 다른(혹은 다를 수 있는) 점

최상단 배너를 끄는 토글 미구현
네비게이션의 카테고리와 섹션 중간에 있는 카테고리에서 마우스 hover시 svg 이미지 색상 변화 미구현
각 섹션별 좌우 토글 버튼의 디테일 부족

4. Section별 구현사항

top-banner
- header 보다 위에 위치한 배너를 만들고 스크롤 시 사라지도록 구현

header
- top-banner가 사라지고 상단에 고정시키기 위해 Javasript의 scrollEvent를 활용하여 구현

silder
- 이 사이트의 FadeIn/Out 슬라이더의 기능은 도트를 이용한 이동, 좌우 토글을 이용한 이동, 시간에 따른 자동 이동 이렇게 3가지로 나뉜다.
- 첫 번째와 두 번째는 input[type="radio"]와 label을 이용한 css로 자바스크립트 없이 구현하였으나
- 마지막 시간에 따른 자동 이동은 setInterval() 메서드를 사용했는데
- 도트나 토글을 이용한 이동과 setInterval()메서드가 겹쳐 슬라이드가 꼬이는 현상이 일어날 것이라 예상하여 javascript로 꼬이지 않게 구현하였다.

이외 섹션
- 이외 섹션은 위와 다른 특별한 기능은 없고 flex를 적극 활용하여 구현하였다.

5. 개선사항

위에서 실제 페이지와 다른 부분들을 시간 여유를 가지고 해결해보고 싶다.
원본 사이트의 slider를 보면 도트나 토글을 연속적으로 클릭하는 걸 막아 놓은 것 같은데 자바스크립트의 쓰로틀과 디바운스를 활용하여 구현할 수 있을 것 같다.
top-banner 때문에 일정 스크롤 이상 넘어갈 때 header를 고정하는 방법을 scroll 이벤트가 발생할 때마다 확인하여 불필요한 연산을 하는 것 같아 새로운 방법을 찾고 싶다.

개선사항에 관한 피드백 주시면 너무 감사하겠습니다 ! 많은 피드백 바랍니다 😊

netlify · 2023-07-28T12:30:53Z

✅ Deploy Preview for scintillating-kleicha-014b82 ready!

Name	Link
🔨 Latest commit	`708cf8b`
🔍 Latest deploy log	https://app.netlify.com/sites/scintillating-kleicha-014b82/deploys/64d0e2a921d43b00087bdbff
😎 Deploy Preview	https://deploy-preview-48--scintillating-kleicha-014b82.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

JitHoon · 2023-07-28T15:24:01Z

저도 click 이벤트를 사용해서 사용자 스크롤에 따라 헤더 컬러를 변경하는 코드를 이번 기회에 접하게 되었는데 여기서 보니까 반갑네요! 사이트 너무 잘 봤습니다~

xxxjinn · 2023-07-31T01:20:04Z

저는 헤더 부분을 css의 z-index와 fixed를 이용해 고정했는데 정민님은 js를 사용해 고정시킨 부분이 인상깊네요! 👍👏

jseo9732 · 2023-07-31T02:44:34Z

저는 이미지 자동 전환 기능 구현 포기했는데 JS로 구현하신 방법 신기하네요👏
이미 끝났지만 제 프로젝트에도 적용하고 싶네요👍👍

yangjaejun · 2023-07-31T04:41:01Z

슬라이더 구현하신 부분 인상 깊게 봤습니다 👍

gahyuun · 2023-07-31T06:29:49Z

스크롤 이벤트를 사용해서 top banner를 사라지게 만드는 게 쉽지 않았을 것 같은데 잘 구현하셨네요 !! 나중에 저도 한번 적용해봐야겠어요~!☺️

minsoo-web · 2023-08-02T13:09:13Z

README.md

- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+### 사이트 주소
+원본 사이트 : https://fastcampus.co.kr/
+<br>


md 문법에서 개행을 하려면 마지막 줄에 띄어쓰기를 두 번 하시면 됩니다.
md에서 태그 사용은 지양해야 하는 방식이기 때문에, md에서 지원하는 방법을 사용해보세요!

minsoo-web · 2023-08-02T13:11:32Z

README.md

README가 너무 깔끔하고, 개선사항을 스스로 정리하신 점이 좋았습니다!

minsoo-web · 2023-08-02T13:12:04Z

assets/category-ai01.jpeg

이미지를 하나의 폴더에 모두 넣어서 관리하다보면 나중에 이미지 관리하기가 어렵습니다.
역할에 맞게 이미지 폴더를 재구조화 해보세요!

minsoo-web · 2023-08-02T13:23:03Z

index.html

정민님! html 문법 오류가 많네요 ㅠㅠ
input, img 태그는 스스로 닫는 태그이기 때문에 닫혀야 하고
닫히는 div 태그들이 많이 빠져있어요

인라인 style은 지양해야 하는 방법입니다.
수정하려면 html에 가서 직접 수정해야 한다는 점도, 똑같은 스타일이 쓰일 때 복붙해야 하는 경우도 안 좋고, 무조건 우선순위를 가져가기 때문에 클래스로 아무리 선택자를 줘도 안 먹힌다는 점도 안 좋은 이유 입니다.

html 문법 오류를 제가 잡아본다고 잡아봤는데,, 워낙 양이 많아서 한 줄 한 줄 다 뜯어보기 전까지는 어려울 것 같아서 리뷰로 남깁니다 ㅠㅠ 한 번 전반적으로 수정해보세요!!

패캠 사이트는 JS로 개발된 사이트이기 때문에 인라인으로 스타일이 들어가는 경우도 많지만, 직접 마크업하고 퍼블리싱하는 입장에서는 인라인 style은 지양해야 합니다.

minsoo-web · 2023-08-02T13:32:31Z

styles/aside.css

+.top-banner input{
+    display: none;
+}


라벨도 없는 input checkbox는 쓰임이 아예 없기 때문에 존재 자체가 필요 없습니다.

minsoo-web · 2023-08-02T13:38:45Z

styles/category.css

+    transition: transform 0.2s;
+}
+
+.category-menu__list-item a{


다음부터는 클래스 네이밍도 직접 해보시길 바랍니다.
태그 선택자는 지양해야 하는 선택자 활용입니다.

minsoo-web

추가 리뷰가 늦었네요 정진님 ㅠㅠ
고생 많으셨어요!!

minsoo-web · 2023-08-08T13:15:14Z

assets/category/category-ai01.jpeg

역할에 맞게 분리하셨군요!! 잘하셨습니다 👍

minsoo-web · 2023-08-08T13:16:16Z

assets/category/category-data04.webp

다른 분 리뷰에서도 질문 남겼던게 기억이 나서 리뷰 남겨봅니다!
webp와 jpg, png 는 어떤 차이가 있는지 아시나요?! 🤔
언제 어떤 확장자의 이미지를 쓸 수 있는지, 써야 하는지를 아는 것과 모르는 것의 차이가 큽니다!

minsoo-web · 2023-08-08T13:17:55Z

index.html

@@ -0,0 +1,3016 @@
+<!DOCTYPE html>
+<html lang="en">


lang 속성은 지정하면 뭐가 좋은지 아시나요? 일단 한글 페이지이기 때문에 ko 로 바꾸면 좋을 것 같습니다!

minsoo-web · 2023-08-08T13:18:27Z

index.html

+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">


어떤 역할의 meta 태그인지 아시나요?!

minsoo-web · 2023-08-08T13:19:55Z

index.html

+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">


<!DOCTYPE html>
을 제외하고 모든 마크업에 쓰이는 태그들은 스스로 닫는 태그이거나, 자식이 있는 태그입니다.
태그를 항상 닫는 걸 신경써보세요!
원래는 formatter가 자동으로 닫아주지만, 지금은 html 문법 오류가 있어서 formatter가 동작하지 않는 것 같습니다..!

minsoo-web · 2023-08-08T14:20:28Z

styles/footer.css

+.footer__company-name strong{
+    font-size: 16px ;
+    font-weight: 700;
+    margin: 0 8px 0 0;


이렇게 적을 때는 margin-right: 8px; 이라고만 적는 게 가독성 측면에서 훨씬 좋습니다!

minsoo-web · 2023-08-08T14:21:23Z

styles/header.css

@@ -0,0 +1,234 @@
+.header-container{
+    width: 100%;
+    z-index: 100;


100 이나 높은 큰 숫자가 필요한가요?
z-index는 필요한만큼만 높은 값을 쓰는 게 맞고, 무분별하게 높은 값을 사용하면, 나중에 관리하기 어려워집니다!
필요한 만큼만 높은 값을 써보세요!

minsoo-web · 2023-08-08T14:21:37Z

styles/header.css

+
+.focus-wrapper{
+    display: flex;
+    flex-direction: row;


이것도 기본 값 같네요!!

minsoo-web · 2023-08-08T14:22:01Z

styles/header.css

+    margin-left: auto;
+    margin-right: auto;


이런 걸 margin: 0 auto; 이렇게 축약하는 게 더 낫습니다!

minsoo-web · 2023-08-08T14:23:40Z

styles/header.css

+    margin: 0 12px 0 0;
+}
+
+.link > svg{


태그 선택자는 지양해야 합니다.
브라우저는 css 선택자를 읽을 때 오른쪽 -> 왼쪽 순서로 읽어가며 dom 요소들을 찾으며 CSS Dom tree 를 구성합니다.
이 때 가장 오른 쪽에 태그 선택자를 사용한다면 dom에 사용된 모든 태그를 찾은 뒤 그 다음 조건에 맞는 부모를 찾습니다.

개발할 때 불필요한 것, 불필요한 것을 컴퓨터에게 시키는 것은 지양하는 것이 좋은 습관입니다!

JeongMin83 added 7 commits July 28, 2023 19:02

Feat: Create Folder Architecture

a8ba02f

Feat: Create top banner

c825d35

Feat: Create header

8f79c52

Feat: Create slider

a41c1a0

Feat: Update slider script

06c24ef

Feat: Create main section

4375581

Feat: Create Footer

4682952

JeongMin83 self-assigned this Jul 28, 2023

minsoo-web reviewed Aug 2, 2023

View reviewed changes

refactor: top-banner 주석 및 파일명 정리

e349636

JeongMin83 force-pushed the KDT0_JinJeongMin branch from 91b08ca to e349636 Compare August 7, 2023 04:19

JeongMin83 added 6 commits August 7, 2023 14:15

refactor: header 주석달기, 필요없는 코드 수정

179319c

refactor: slider 주석, img/input 오류 수정, assets 폴더 관리

9423ab0

refactor: product-new 주석, 코드 오류 수정

2f12a09

refactor: hot, rising, guide, promotion, media 주석, 오류 수정, 폴더 분기

fea7234

refactor: category 주석, 오류 수정, 폴더 분기

b7e95aa

refactor: footer 주석, 오류 수정, 폴더 분기

708cf8b

minsoo-web reviewed Aug 8, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KDT0_JinJeongMin 패스트캠퍼스 클론 코딩 #48

KDT0_JinJeongMin 패스트캠퍼스 클론 코딩 #48

JeongMin83 commented Jul 28, 2023 •

edited

Loading

netlify bot commented Jul 28, 2023 •

edited

Loading

JitHoon commented Jul 28, 2023

xxxjinn commented Jul 31, 2023

jseo9732 commented Jul 31, 2023

yangjaejun commented Jul 31, 2023

gahyuun commented Jul 31, 2023

minsoo-web Aug 2, 2023

minsoo-web Aug 2, 2023

minsoo-web Aug 2, 2023

minsoo-web Aug 2, 2023

minsoo-web Aug 2, 2023 •

edited

Loading

minsoo-web Aug 2, 2023

minsoo-web Aug 2, 2023

minsoo-web left a comment

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

minsoo-web Aug 8, 2023

KDT0_JinJeongMin 패스트캠퍼스 클론 코딩 #48

Are you sure you want to change the base?

KDT0_JinJeongMin 패스트캠퍼스 클론 코딩 #48

Conversation

JeongMin83 commented Jul 28, 2023 • edited Loading

KDT0_JinJeongMin - 패스트캠퍼스 사이트 클론 코딩

1. 개요

사이트 주소

2. 기술 스택

3. 프로젝트 info

📅 프로젝트 기간

📝 필수요구 사항

📝 선택 요구사항

원본 사이트 소개

실제 페이지와 다른(혹은 다를 수 있는) 점

4. Section별 구현사항

5. 개선사항

netlify bot commented Jul 28, 2023 • edited Loading

✅ Deploy Preview for scintillating-kleicha-014b82 ready!

JitHoon commented Jul 28, 2023

xxxjinn commented Jul 31, 2023

jseo9732 commented Jul 31, 2023

yangjaejun commented Jul 31, 2023

gahyuun commented Jul 31, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minsoo-web Aug 2, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minsoo-web left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JeongMin83 commented Jul 28, 2023 •

edited

Loading

netlify bot commented Jul 28, 2023 •

edited

Loading

minsoo-web Aug 2, 2023 •

edited

Loading