KDT0_HanEunJi 메종 프란시스 커정 클론코딩 #70
Conversation
|
잘 봤습니다! 우측 하단의 버튼이 특정 scroll y 값부터 보이도록 하는 디테일까지 잘 봤습니다. 말씀하신대로 헤더메뉴 드롭다운의 경우 JS 좀 더 익숙해지시면 구현할 수 있으리라 생각합니다! |
|
|
||
| window.addEventListener( | ||
| 'scroll', | ||
| _.throttle(() => { |
There was a problem hiding this comment.
콜백 함수의 불필요한 실행을 줄이는 것도 함께 생각하면서 프로그래밍 하신게 인상깊었습니다! 저도 적용해보고 싶네요!
.DS_Store
Outdated
There was a problem hiding this comment.
DS_Store와 node_modules 을 gitignore에 넣으면 좋은 점에 대해서 공부해보세요!
| <img width="100%" src="https://github.com/lilviolie/git-practice/assets/95364951/8c4f5edc-92cb-47b0-b493-7970397eff5c"/> | ||
| - Intersection Observer API를 이용해 스크롤 애니메이션 적용 | ||
| <img width="100%" src="https://github.com/lilviolie/git-practice/assets/95364951/47dd2311-0e72-40a6-8c68-e8a14e6e7aa8"/> | ||
| - swiper.js를 이용해 슬라이드 구현 | ||
| <img width="100%" src="https://github.com/lilviolie/git-practice/assets/95364951/0c280227-62c7-4286-bbff-9a07cf360106"/> |
There was a problem hiding this comment.
요 친구들 img src가 동영상이던데, 이미지 태그는 동영상을 담을 수 없습니다. gif로 변환해보세요!
| ## ✨ 아쉬운점 | ||
|
|
||
| - 한정된 시간에 비해 구현할 요소가 굉장히 많았던 웹사이트를 선택해서 기간 내에 구현을 마치기 힘들었습니다. 웹사이트를 구성하는 것이 생각보다 훨씬 신경써야 할 게 많았기 때문에 주제 선정에 좀 더 신경써야겠다는 생각이 들었습니다. | ||
| - 헤더 메뉴에 마우스 호버 시 드롭다운 메뉴가 나타나는 기능을 구현하지 못했습니다. 아직 제 수준으로 구현하기에는 어려운 기능이라고 느꼈기에 트랜지션, z-index, 자바스크립트 등에 대해 훨씬 더 많은 공부가 필요하다는 것을 느꼈습니다. |
There was a problem hiding this comment.
호버시 드롭다운이 나타나는 건 요구사항에 따라 구현 방법이 천차 만별이지만, 간단한 CSS로도 구현이 가능합니다! 배우고자 느끼신 점이 정말 좋은 자세라고 생각합니다 👍
assets/fonts/PostGrotesk-Book.woff2
Outdated
There was a problem hiding this comment.
woff 와 woff2 의 차이는 무엇이 있는지도 같이 공부해보시고, 내가 어떤 폰트 확장자를 사용해야 하는지에 대한 이유도 분명히 알고 사용하는 것이 좋습니다.
추가로, CDN 웹 폰트를 가져와서 사용하는 것과 폰트를 직접 임베딩하는 것에 어떤 차이가 있는지도 같이 공부해보세요!
There was a problem hiding this comment.
간단히 말하면 woff는 압축된 폰트 형식이고, woff2는 woff보다 30~50% 더 압축된 형식이라는 것까지만 알고 있었습니다. 더 찾아보니 Internet Explorer에서는 woff 형식을, 나머지 브라우저에서는 woff2 형식을 사용하도록 해서 폰트의 용량을 줄이는 것이 좋고, woff2 형식과 woff 형식을 모두 사용할 수 없을 때를 대비해 ttf 형식을 같이 사용하는 것도 좋다는 것을 알게 되었습니다. 이 외에도 최적화 부분 또한 생각해보지 못했었는데 생각보다 신경써야 할 부분이 많다는 것을 이제야 깨달았네요ㅜㅜ 앞으로 더 자세히 공부해보겠습니다!
그리고 폰트를 직접 임베딩하는 방식은 폰트 파일이 무겁기도 하고 브라우저마다 지원하는 폰트 파일 형식이 다 다르기 때문에 일일이 파일을 지정해줘야 한다는 것이 단점이라고 알고 있습니다.(혹시 틀렸다면 말씀해주세요..!) 다만 이번 프로젝트에서는 필요한 폰트의 CDN 링크를 찾을 수가 없어서,, 서버 폰트 로딩 방식을 사용했습니다.
There was a problem hiding this comment.
오 네 말씀해주신 내용들이 거의 맞습니다.
폰트 확장자별로 압축용량이 달라서 불러오는 시간이 다르다는 점과, 브라우저별로 호환하는 폰트가 다르다는 점도 인지하고 사용하셨으면 좋겠다는 마음에 리뷰 남겼습니다.
또한 성능적인 차이에서 장단점이 있는데요, 아래 내용을 확인해보시면 좋을 것 같습니다.
# 폴더에 저장해서 상대 경로로 불러오는 방식:
장점:
폰트 파일을 직접 저장하기 때문에 서버에 의존하지 않고 독립적으로 폰트를 제어할 수 있습니다.
사용자가 인터넷에 연결되어 있지 않아도 폰트가 로드되는 경우에도 정상적으로 작동합니다.
단점:
폰트 파일을 웹 서버에 저장하고 있어 서버 용량을 차지할 수 있습니다.
웹 페이지에 방문하는 사용자가 다른 지역에 위치해 있을 경우, 폰트 파일을 다운로드하는데 시간이 걸릴 수 있습니다.
# CDN으로 링크 거는 방식:
장점:
CDN은 여러 지역에 위치한 서버들을 통해 콘텐츠를 제공하므로, 폰트 파일을 더 빠르게 다운로드할 수 있습니다. 이는 사용자 경험을 향상시킵니다.
폰트 파일의 캐싱을 효과적으로 처리하여, 웹 페이지 방문자가 같은 폰트를 사용하는 다른 웹 페이지를 방문할 때 성능 향상에 도움을 줍니다.
단점:
CDN 서비스를 사용하려면 추가 비용이 발생할 수 있습니다. 또는 무료 CDN도 있지만 트래픽 한도나 속도 제한 등이 있을 수 있습니다.
CDN 서버에 의존하므로, CDN 서비스가 다운되거나 느려지는 경우에 웹 페이지에 접근하는 사용자에게 영향을 미칠 수 있습니다.
assets/images/a-la-rose2.webp
Outdated
There was a problem hiding this comment.
webp 확장자와 png 확장자의 차이가 무엇인지 알고 계신가요?!
There was a problem hiding this comment.
webp는 jpg, png 등 기존의 이미지 포맷보다 파일 크기를 더 줄일 수 있고 로딩 시간을 단축할 수 있는 새로운 포맷이라고 알고 있습니다!
There was a problem hiding this comment.
맞습니다! 다만 한 가지 알아두셔야 하는게, webp는 모든 브라우저 및 버전에서 지원하지 않아요
https://caniuse.com/?search=webp
따라서 크로스 브라우징이나, 레거시 환경과 같은 곳에서는 사용할 때 고려해야하는 사항입니다!
css/components/product.css
Outdated
| position: absolute; | ||
| top: 346px; | ||
| width: 100%; | ||
| height: 36px; | ||
| font-family: 'BauerBodoni', sans-serif; | ||
| font-size: 1.75rem; | ||
| letter-spacing: 1px; | ||
| line-height: 2.2rem; | ||
| color: #646467; | ||
| text-align: center; | ||
| transition: 0.8s; | ||
| opacity: 1; |
There was a problem hiding this comment.
비슷한 역할을 하는 요소끼리 모아놓고 개행을 더해주면 가독성에 많은 영향을 줍니다!
css/components/slider.css
Outdated
| .slide1 .rouge, | ||
| .slide1 .aqua-media, | ||
| .slide1 .number-724, | ||
| .slide1 .rouge-extrait, | ||
| .slide1 .rose, | ||
| .slide1 .lhomme, | ||
| .slide1 .gentle-gold, | ||
| .slide1 .gentle-silver, | ||
| .slide1 .universalis, | ||
| .slide1 .vitae, | ||
| .slide1 .celestia, | ||
| .slide1 .soir, | ||
| .slide1 .matin { |
There was a problem hiding this comment.
공통으로 여러 요소들을 선택하기 보다, 하나의 클래스에 값을 명시하고 그 클래스를 가져다 쓰는 방식이 훨씬 관리가 편합니다.
index.html
Outdated
There was a problem hiding this comment.
html만 formatter가 적용이 안 되지 않았나요?
html은 잘못 작성해도 버그를 내거나 다운되거나 하지 않아서 에러를 찾기가 어려울 때가 있습니다.
그럴 땐 prettier의 로그를 보는 것이 굉장한 도움이 되어요
제가 일일이 모든 태그들을 뒤져 본 게 아니라 다음과 같은 방법으로 찾았습니다
클릭시 다음과 같은 로그 창이 뜹니다.
384 번 줄 근처에 무슨 일이 벌어졌는지 알 것 같네요!
node_modules/.bin/prettier
Outdated
There was a problem hiding this comment.
prettier는 npm으로 설치하지 않아도 extension으로 충분히 가능합니다.
| } | ||
| header .menu-container .icons li .country .country-flag, | ||
| .footer-bottom .section3 .country .country-flag { | ||
| background-image: url(../assets/images/flag-france.svg); |
|
진짜 처음에 보여주셨을 때 와... 저걸 어떻게 만들지? 라고 생각했었는데 진짜 똑같이 만드신 것을 보고 정말 대단하시다는 생각이 들었습니다...🫢 IntersectionObserver 꼭 한번 구현해보고 싶었던 기능이었는데 이렇게 자연스럽게 쓰시다니 정말 배울게 많이 있는 코드인 것 같습니다. 파일 분할도 깔끔해서 다음 리펙토링 시간에 저도 한번 나눠서 구현해봐야겠습니다. 정말 수고하셨습니다!! (prettier 적용할 때 package.json()파일 쓰신 것도 좋은 방법론이 될 수 있겠네요!! 저는 extension으로 사용하려다가 prettierrc 적용하는데 문제가 생겨서 해결하려고 찾아본 결과, 멘토님께서 말씀해주신 format on save 설정과 VScode의 Settings.json에서 각각 HTML,CSS,JS에 vs 기본 스타일 대신 "esbenp.prettier-vscode" 를 넣으면 해결이 되었던 것 같습니다. ) |
⚡️패스트캠퍼스 클론코딩 프로젝트⚡️
✨ 프로젝트 소개
메종 프란시스 커정 공식 홈페이지를 클론코딩한 프로젝트입니다.
✨ 필수 요구사항
README.md파일 제공✨ 기술 스택
✨ 주요 개발 기능
✨ 구현하지 못한 기능
✨ 배운점
IntersectionObserverAPI를 사용해 보았습니다. 요소가 뷰포트에 포함되는지의 여부에 따라 더욱 풍부한 트랜지션을 적용할 수 있었습니다.✨ 아쉬운점