KDT0_KimMinSeob 인터파크 홈페이지 클론코딩 #63
Conversation
기능을 어떻게 만들어야 하는 지 찾아보다가 본 swiper.js가 조금이라도 도움이 되서 정말 다행입니다 😊
|
.prettierrc
Outdated
| "jsxBracketSameLine": false, | ||
| "jsxSingleQuote": false, |
There was a problem hiding this comment.
- 변경 내용
.prettierrc 파일을 수정하였습니다.
- 발생 오류
말씀해주셨던 대로 Setting.json에서 formatOnSave 가 false가 되어있었습니다. 추가적으로 formatOnSave 값을 변동 하는 것 이외에 각각의 editor.defualtFormatter의 값 또한 VS-code의 기본 형식으로 저장되어 있었습니다.
- 해결 과정
formatOnSave의 값을 true로 변경하고 각각의 editor.defaultFormatter의 값 또한 esbenp.prettier-vscode으로 변경하여 파일에 prettier가 저장하면 반영이 되도록 변경하였습니다.
- 리뷰 관련
prettier을 활용하는 방식에서 은지님의 코드를 봤을 때 다양한 방법이 많겠지만 package.json을 활용하는 방법과 prettierrc 파일을 활용하는 방법이 있었던 것 같습니다. 차이로는 전자는 다양한 설정들을 하나의 파일에서 관리할 수 있다는 장점이 있는 것 같고 prettierrc 파일은 prettier을 설정하는데 조금 더 자세히 설정할 수 있는 장점이 있는 것 같습니다. 앞으로 협업을 하게 된다면 어떠한 방식이 더 쉽고 직관적이게 활용될 수 있을 지에 대해서 고민해봐야 할 것 같습니다.
.prettierrc
Outdated
| "tabWidth": 4, | ||
| "trailingComma": "none", | ||
| "useTabs": false, | ||
| "vueIndentScriptAndStyle": false |
There was a problem hiding this comment.
- 변경 내용
Prettierrc 파일에 들어간 필요 없는 코드들을 삭제했습니다.
- 발생 오류
실제 코드에 적용될 필요가 없는 JSX와 Vue에서 쓰이는 Prettierrc 파일의 코드들이 존재했습니다. Prettier을 적용하기 위해 가장 널리 쓰이는 포멧을 가져와 그대로 사용했기 때문에 파일에 불필요한 코드들이 존재했습니다.
- 해결 과정
먼저 Prettier 속성들에 대해서 숙지하였습니다. 이후 발생하는 문제인 코드가 길어져서 html이 깨지는 문제를 해결하기 위해 printWidth 값을 조정했습니다.
- 리뷰 관련
무엇이든지 알고 써야 한다는 것을 한번 더 느끼는 것 같습니다 😲
.prettierrc
Outdated
| "jsxBracketSameLine": false, | ||
| "jsxSingleQuote": false, |
There was a problem hiding this comment.
추가적으로 메니저님한테 받은 메세지에 대해서 정말 감사드린다는 말씀을 드리고 싶어서 이렇게 코멘트에 남기게 되었습니다 😊😊
이번 클론 코딩을 진행하면서 클론코딩을 실행하는 목적은 진짜 웹 페이지를 따라 제작해보면서 html과 css를 구성하는 능력을 키우는 과정이라는 것을 인지하였고 또한 그러한 목적이 있는 활동이라고 생각합니다. 따라서 이 과정에서 멘토와 멘티의 역할을 나눈다면 멘토는 멘티가 작성한 코드의 개선점을 찾아서 피드백하고 고쳐주는 역할을 가지게 되고 멘티는 최대한 웹 사이트와 비슷하게 작성해야하고, 주어진 시간안에 프로젝트를 끝내는 과정 역할을 가지게 되었다는 생각합니다.
첫 번째로 "최대한 웹 사이트와 비슷하게 작성해야 한다" 라는 역할에 상응하려면 웹 페이지의 구조를 알아야 할 필요가 있었습니다. 하지만 지식이 부족하여 어떻게 웹의 구조를 만들어야 하는가, 그리고 그러한 구조에 class 이름은 어떻게 구현해야 하는 가에 대해서 고민을 많이 하게 되었습니다. 따라서 구조가 반복되는 처음 요소를 통해 점진적으로 구조를 스스로 잡아나갔습니다. CSS도 최대한 같아야 한다 라는 문제에 봉착했을 때 CSS 공부가 미흡하여 최대한 같게 하고자 원 페이지의 CSS를 많이 참고하였습니다.
두 번째로 "시간 내에 프로젝트를 끝내야 한다" 라는 역할에 상응하기 위해 html에 구조에 대해서 파악하고 공부하는데 시간을 많이 사용하여 중요한 CSS를 작성하는 요소를 간과하였습니다. 기본적으로 CSS 지식이 부족한 상황에서 프로젝트의 완성을 목적으로 작업을 하다 보니 CSS를 구성하기 위해 CSS 부분에서 원작자의 코드와 똑같아 진다는 문제가 발생하였습니다.
결론적으로 봤을 때 대 전제인 멘토와 멘티의 역할에서 해당 코드를 작성한 본인의 멘티의 역할은 사라지고 남은 것은 원작자의 코드였으며 멘토의 역할과 모순이 된다는 것을 이제야 알아차리게 되었습니다. 즉 클론 코딩의 의도 파악을 하지 못했고 내가 무엇을 모르는 지를 몰랐던 큰 문제가 있었던 것 같습니다. 이러한 문제를 이번 과제를 통해 빠르게 파악할 수 있어서 정말 다행이라 생각하고 역할에 모순이 발생한 코드임에도 불구하고 이렇게 꼼꼼하게 봐주시고 코드 리뷰를 해주셔서 정말 감사드린다는 말씀을 꼭 드리고 싶었습니다. 앞으로 JS 과제와 토이 프로젝트 등 중요한 과제들이 남아있는데 이러한 문제를 발견하지 못하고 그대로 이러한 방법론을 가지고 갔다면 정말 큰 문제가 발생 했을 수 도 있겠다는 생각이 많이 들었습니다. 남은 리펙토링 시간과 추가 시간을 활용해서 첫째로 남겨주신 코멘트들을 개선시켜 중복코드를 없애는 방법론에 대해서 공부하고 수정하겠습니다. 둘째로 rem을 통한 반응형 웹을 구현해보겠습니다. 마지막으로 현재 웹 페이지에서 개선되어야 할 UI를 하나 찾고 저만의 코드로 수정해보겠습니다. 모순이 있는 코드임에도 코멘트를 달아주시고 알고 있지 못했던 문제도 피드백 해주셔서 정말 감사합니다. ✨✨
은지님은 prettier를 패키지 설치를 통해 활용하고 싶으셨던 걸로 기억하는데, 패키지를 설치해도 설정파일을 통해 관리하는 것은 동일합니다. |
민섭님 좋게 봐주셔서 감사합니다 ! |
| .live__banner--upper-content { | ||
| display: -webkit-box; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-line-clamp: 2; | ||
| overflow: hidden; |
There was a problem hiding this comment.
변경 내용
-webkit-box 변경
발생 오류
글자가 3칸 이상으로 내려올 때 해당 태그가 요소 밖으로 나가게 되는 문제가 발생
해결 과정
구글링 후 webkit-box를 통해서 문제해결
리뷰 관련
chrome과 Safari에서 사용 가능한 webkit을 사용함으로써 디자인 적인 요소를 살릴 수 있게 되었음
css/main.css
Outdated
| body { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| height: 100%; | ||
| } | ||
|
|
||
| main { | ||
| width: 100%; | ||
| padding: 0 5rem; | ||
| } |
There was a problem hiding this comment.
-
변경 내용
main section을 비롯한 body tag 안에 들어가는 요소들에 대해서 부모 요소의 너비를 조정함으로써 너비를 133rem에서 퍼센트 값으로 변경 -
발생 오류
본문에 너비가 133rem으로 고정되어있었기 때문에 하드 코딩이 되어있어 모니터의 크기에 따라 요소가 나오지 않거나 scroll bar가 생기는 문제가 발생 -
해결 과정
부모 요소들에 퍼센트 값을 주고 해당 header와 main section에 각각 75%의 너비를 고정으로 주면서 모니터의 크기에 따라 반응하도록 코드를 수정 -
리뷰 관련
모니터에 따른 UI를 구현하는 것이 무엇보다도 중요한 것을 느낌. 작은 화면으로 모니터링 했을 때 모든 글씨가 깨지는 현상이 발생하였음. 따라서 퍼센트를 활용한 유기적인 너비를 구성해야 한다는 것을 배움
css/main.css
Outdated
| .swiper-container { | ||
| width: 100%; | ||
|
|
||
| overflow: hidden; | ||
| } | ||
|
|
||
| .swiper-slide { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .slide__image { | ||
| width: 100%; | ||
| border-radius: 0.7rem; | ||
| object-fit: cover; | ||
| } | ||
| .left-btn { | ||
| width: 3rem; | ||
| height: 3rem; | ||
|
|
||
| position: absolute; | ||
| top: 50%; | ||
| left: 0; | ||
| z-index: 1; | ||
|
|
||
| transform: translate(-50%, -50%) rotateY(180deg); | ||
|
|
||
| border-radius: 10rem; | ||
| background: hsla(0, 0%, 100%, 0.8); | ||
| border: 0.1rem solid rgba(0, 0, 0, 0.1); | ||
| box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.13); | ||
| } |
There was a problem hiding this comment.
-
변경 내용
중복되는 swiper 기능을 main.css에 취합 -
발생 오류
모든 swiper가 사용되는 section에 swiper 관련 css가 중복되어서 사용되었고 코드의 이름들이 지저분해 짐. -
해결 과정
피드백을 통해 알았던 문제들과 수업에서 배운 지식을 활용해 최대한 겹치는 css는 따로 class를 만들어 main.css에서 관리, 기능별로 나누어 중복되는 코드들을 최대한 정리 -
리뷰 관련
해당 작업을 통해 CSS파일이 상당히 줄었음. 항상 웹 페이지를 만들 때 무조건 만들고 시작하는 것이 아니라 구상을 다 끝마치고 하나하나 시작해야 된다는 것을 배움
css/footer.css
Outdated
| .footer__banner .footer__banner--list > li:first-child span:before, | ||
| .footer__banner .footer__banner--list > li:last-child span:before, | ||
| .footer__banner .footer__banner--list > li:nth-last-child(2) span:before, | ||
| .footer__banner .footer__banner--list > li:nth-last-child(3) span:before { | ||
| position: absolute; | ||
| :where(.footer__banner--title-modal)::before { | ||
| display: block; | ||
| width: 3rem; | ||
| height: 0.6rem; | ||
| content: ''; | ||
| top: 30%; | ||
| right: -2.5rem; | ||
| z-index: 101; | ||
| background-image: url("../assets/image/under.svg"); | ||
|
|
||
| width: 0.7rem; | ||
| height: 0.6rem; | ||
|
|
||
| position: absolute; | ||
| right: -30%; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| z-index: 1; | ||
|
|
||
| background-image: url('../assets/image/under.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| background-size: contain; | ||
| } |
There was a problem hiding this comment.
-
변경 내용
반복되는 요소들에 공통적인 CSS 프로퍼티를 주기 위해 where 선택자를 이용 -
발생 오류
해당되는 자식 선택자들에 대한 선택적인 CSS 프로퍼티를 주기 위해 중복되는 코드들이 사용되어 가독성이 매우 떨어짐 -
해결 과정
피드백을 통해 Where이라는 가상요소 선택자를 활용해서 구현 -
리뷰 관련
비록 이번 코드에서는 태그 선택자를 사용하지 않기 위해 각 모달창을 구현해야 하는 요소들의 클래스를 다르게 줌으로써 구현을 했지만 where이라는 가상요소 선택자에 대해서 알 수 있었음. 중복되는 h1, h2, p 같은 태그들을 사용해야 하는 경우가 온다면 where을 통해 가독성 높은 코드를 구현해보고자 함
css/header.css
Outdated
| .header { | ||
| margin-top: 0.7rem; | ||
| padding: 0 5rem 0; | ||
|
|
||
| border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08); | ||
| background-color: chocolate; | ||
| } | ||
|
|
||
| .header__wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| width: 75%; | ||
| margin: 1rem auto; | ||
|
|
||
| white-space: nowrap; | ||
| background-color: cornflowerblue; | ||
| } |
There was a problem hiding this comment.
-
변경 내용
불필요한 코드를 없애고 하드 코딩 된 요소들을 제거 -
발생 오류
padding : 0 15rem; 등과 같은 난잡한 코드들이 가독성을 저해함 -
해결 과정
피드백을 통해 부모 요소에 width값을 주고 해당 요소들에 퍼센트 너비를 부여함으로써 불필요한 코드들을 제거 -
리뷰 관련
padding과 margin을 남발하면 더 깊은 tag들을 관리할 때 디자인이 상당히 어려워지고 불편해지는 것을 방지하기 위해 최소한의 정렬 요소를 사용해야 한다는 것을 배움
js/script.js
Outdated
| document.querySelectorAll('.footer__modal--button').forEach(function (container, index) { | ||
| container.addEventListener('mouseover', function () { | ||
| document.querySelectorAll('.hover__menu')[index].classList.add('show'); | ||
| }); |
There was a problem hiding this comment.
-
변경 내용
모달창이 커서가 올라와 있는 한 닫히지 않는 상태를 구현 -
발생 오류
모달창에 마우스가 도달 할 수 가 없는 문제가 발생, hover을 통해서만 구현을 해서 모달창 구현이 안됨. -
해결 과정
수업 시간에 배운 classList.add() 기능을 활용해서 모달창에 마우스가 도달할 수 있도록 문제를 해결. 처음에 container 기준으로 속성을 부여하지 않아서 li tag 상단으로 넘어갈 경우 모달창이 사라지지 않는 문제가 발생하여 이를 해결함 -
리뷰 관련
JS 요소를 다룰 때 특히 모달창을 구현하는 경우 mouseover 요소와 mouseleave 요소가 적용되는 범위를 파악하는 것이 중요하다는 것을 배울 수 있었음
css/adBanner.css
Outdated
| .adBanner { | ||
| width: 130.4rem; | ||
| margin: 0rem auto 6rem; | ||
| } | ||
|
|
There was a problem hiding this comment.
-
변경 내용
margin 0 rem;에서 rem 단위 제거 -
발생 오류
가운데 정렬을 하기 위해서 불필요한 CSS 요소를 사용 -
해결 과정
상위 Section에 width : 75%를 부여함으로써 불필요한 CSS 정렬 요소들 제거 -
리뷰 관련
padding과 margin은 각각 필요한 곳에서만 사용해야 한다는 방법론을 배움
css/adBanner.css
Outdated
| .mySwiper7 .swiper-wrapper { | ||
| width: 100%; | ||
| height: 100%; | ||
| .ad__banner { | ||
| display: flex; | ||
| box-sizing: content-box; | ||
| position: relative; | ||
| } | ||
| flex-direction: column; |
There was a problem hiding this comment.
-
변경 내용
불필요한 CSS 요소들 제거 -
발생 오류
정렬을 하기 위해서 사용한 CSS요소들이 중복되고 의미 없는 코드로 존재 -
해결 과정
반복되는 swiper 기능을 main.css로 묶고 부모 요소에서 너비를 퍼센트로 다룸으로써 불필요한 CSS 요소들 삭제, box-sizing과 같은 불필요한 기능을 가진 CSS 선택자들 모두 제거 -
리뷰 관련
.
css/adBanner.css
Outdated
| .mySwiper7 { | ||
| position: relative; | ||
| overflow: hidden; | ||
| width: 130.4rem; | ||
| box-sizing: border-box; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } |
There was a problem hiding this comment.
-
변경 내용
중복 class 제거 및 class 이름 정렬 -
발생 오류
단순 반복이라는 의미로 class 이름을 의미 없이 숫자로 정함 -
해결 과정
중복되는 swiper 기능을 main.css로 묶고 필요한 기능들에만 bem 방식을 활용하여 class Naming 규칙을 활용 -
리뷰 관련
.
css/adBanner.css
Outdated
| .mySwiper7 .swiper-wrapper .swiper-slide .element__image img { | ||
| object-fit: cover; |
There was a problem hiding this comment.
-
변경 내용
image tag 에서 중복되는 요소들을 main.css에 정리하고 class Naming 규칙을 통해 코드를 변경 -
발생 오류
불필요하게 길어진 코드와 해당 태그에서는 필요가 없는 object-fit 속성을 사용하였음 -
해결 과정
main.css에 image 관련 중복 요소를 다루는 기능을 마련하여 불필요한 코드를 제거 -
리뷰 관련
.
css/adBanner.css
Outdated
| z-index: 50; | ||
| top: 50%; | ||
| z-index: 31; |
There was a problem hiding this comment.
-
변경 내용
z-index가 반복되는 불필요한 요소를 제거하고 너무 큰 z-index를 수정 -
발생 오류
z-index가 두 번 선언되어 불필요한 코드 발생, 너무 큰 값의 z-index로 파악이 어려워지는 문제 발생 가능성 증가 -
해결 과정
z-index 를 삭제하였고 중복되는 button과 관련된 요소들을 main.css에서 정리하여 불필요한 코드의 사용을 줄임 -
리뷰 관련
.
css/adBanner.css
Outdated
| .adBanner .shopping__content { | ||
| width: auto; |
There was a problem hiding this comment.
-
변경 내용
width : auto; 프로퍼티 삭제 -
발생 오류
기본 값을 CSS 프로퍼티로 기입하였음 -
해결 과정
해당 CSS Property 삭제 -
리뷰 관련
CSS를 통해서 정렬을 구사할 때 확실하게 정렬하는 법을 숙지하여 width:auto와 같은 아예 불필요한 코드를 다시는 사용하지 않도록 주의해야 함
css/adBanner.css
Outdated
| width: 4.8rem; | ||
| height: 4.8rem; | ||
| margin-top: -1.5rem; | ||
| transform: translateX(50%); |
There was a problem hiding this comment.
-
변경 내용
margin-top : -1.5rem과 같은 하드 코딩 요소들을 전부 제거하고 퍼센트를 사용하여 배치 -
발생 오류
가운데 오게 하기 위해 고정된 뷰포트에서만 작용하는 하드 코딩 요소를 사용하였음. -
해결 과정
중복되는 버튼을 main.css에서 정리하고 top에 퍼센트를 부여하고 tranformY를 통해 중심 축을 변경하여 정확히 가운데 위치하도록 변경하였음 -
리뷰 관련
정확히 가운데 위치하는 방법을 숙지하여 앞으로 요소를 absolute로 배치할 때 문제 없이 진행할 수 있음
There was a problem hiding this comment.
Intersection Observer API를 활용해서 배너들이 뷰포트의 30%이상을 넘기면 fade in 효과를 적용해보았습니다.
API를 활용하는데 있어서 큰 어려움은 없었습니다.
하지만 관련 내용을 찾아보던 중 intersection observer api를 사용하면 scroll에 따른 user의 log를 볼 수 없다는 것을 알 수 있었습니다. 소비자 데이터를 수집하는 관점에서는 아직 intersection observer api를 사용하기에는 어렵다는 것을 알 수 있었습니다. 따라서 UI적으로 사용하는 관점에서는 사용을 해도 무방하나, 쇼핑몰 같은 소비자의 정보 log를 얻어야 하는 웹사이트에서는 기존의 scoll effect를 구현해야 한다는 것을 알 수 있었습니다.
인터파크 페이지를 클론코딩하였습니다.
✅ 사이트 주소
✅ 프로젝트 소개
✅ 프로젝트간 수행 목표
1. HTML
2. CSS
✅ 구현 화면
## ✅ 배운점 ### 1. HTML 구성하기 - 처음 클론코딩을 진행해보면서 UI를 사용할 때 최대한 간결하게 자세한 정보보다는 사진과 그래픽 위주로 구현하여 유저가 한눈에 페이지를 볼 수 있게 해야 한다는 것을 느끼게 되었습니다
2. Swiper 구성하기
3. CSS 구성하기
✅ 아쉬운점
1. 반응형 웹사이트 만들기
2. 클린코드
3. Align-items를 통한 정렬