KDT0_KimDaBin 당근마켓 홈페이지 클론 코딩 #46
Conversation
✅ Deploy Preview for dabin-hailey-daangn-clone ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
CSS Flex, Grid를 마스터 하신것같습니다! 중복되는 코드를 작성하거나 클래스명이 중복되는 경우들은 저도 겪는 일들이라 이번 멘토링 이후 함께 연구해봐요 ㅎㅎㅎ |
|
클론 코딩 잘 구현한 것 같아요. 이제 반응형만 구현 해보시면 될 것 같습니다. |
|
와옹... text-overflow: ellipsis; 를 처음 보았어요 신기하고 좋네용 수고하셨습니다 디테일이 정연해서 너무 배울 점이 많았습니다 |
There was a problem hiding this comment.
다빈님 멘토링 시간에 완성을 못하실것같다고 하셨는데 당근마켓 랜딩페이지인줄 알고 깜짝 놀랐습니다. 그만큼 레이아웃 구성, 화면 구성, UI구성 등 다 잘해주신것 같아요!
또한 css에서 클래스랑 html 태그의 구성이 가독성이 좋게 잘 짜신것 같습니다.
이번 과제에는 포함이 되지 않지만 javascript를 위해 약간의 코멘트를 남겨두었습니다.
이 부분은 지금 참고만 해주시고 나중에 javascript에 대한 학습이 어느정도 진행되시고 나서 보시면 되게 간단하고 아무것도 아니라는 생각이 드실거에요!
회고내용도 좋았고 마크업구조도 좋았다고 생각합니다!
과제하느라 고생하셨습니다 :)
| </section> | ||
| </main> | ||
|
|
||
| <!-- footer --> |
There was a problem hiding this comment.
header body footer 스스로 알아보기도 좋고 남이 보기에도 편리한 이런 간단하지만 섬세한 주석은 협업에 분명 큰 도움 됩니다!
| </div> | ||
| <div class="policy-text"> | ||
| <a class="policy-text text-underline" href="https://www.daangn.com/wv/faqs/9010" target="_blank">청소년보호정책</a> | ||
| </div> |
There was a problem hiding this comment.
다빈님은 html 태그와 css 클래스를 깔끔하게 작성하시고 html 태그를 적절하고 다양하게 사용하시는 것 같습니다.
그래서 반복되는 부분을 확인하기 편했고 그렇다는 것은 html 마크업 구조를 잘짜셨다고 할 수 있다고 생각합니다.
비록 이번과제가 html/css과제였지만 javascript를 통해 조금 더 동적으로 데이터를 추가해서 html 마크업에 시간을 줄여볼 수 도 있을 것 같습니다.
그래서 footer-bottom-policy 부분을 javascript로 DOM을 추가해보는 예시를 작성해봤습니다.
우선 index.js 파일을 만들어 javascript를 작성해야 합니다.
그 전에 반복되는 부분을 확인해보면
<div class="policy-text">
<a class="policy-text text-underline" href="" target=">{내용}</a>
</div>
이 부분이 [이용약관, 개인정보처리방침, 위치기반서비스 이용약관, 이용자보호비전과계획, 청소년보호정책]
반복되는 걸로 확인됩니다.
이제 이 부분을 데이터화하여 반복문을 통해 동적으로 DOM을 추가해봅시다.
javasciprt파일로 넘어가서 (index.js)
// 1. 부모 div를 먼저 선택해줍니다.
const footerPolicyDiv = document.querySelector(".footer-bottom-policy");
// 2. 아까 반복되는 부분을 데이터화 해줍니다.
// content, href가 다르게 들어가는 부분이므로 이부분을 데이터 화해서 다르게 보여줄 수 있게 만들어줍니다.
const footerData = [
{
href: "https://www.daangn.com/policy/terms",
content: "이용약관",
id: 1,
},
{
href: "https://privacy.daangn.com",
content: "개인정보처리방침",
id: 2,
},
{
href: "https://www.daangn.com/policy/location",
content: "위치기반서비스 이용약관",
id: 3,
},
{
href: "https://www.daangn.com/wv/faqs/3994",
content: "이용자보호 비전과 계획",
id: 4,
},
{
href: "https://www.daangn.com/wv/faqs/9010",
content: "청소년보호정책",
id: 5,
}
];
// 이제 데이터를 반복문을 통해 dom조작을 해주어야 합니다.
footerData.forEach((data) => {
// policy-text Div태그와 a태그를 만들어주고 속성을 추가해줍니다.
const policyTextDiv = document.createElement("div");
policyTextDiv.classList.add("policy-text");
const policyTextA = document.createElement("a");
policyTextA.href = data.href;
policyTextA.classList.add("policy-text");
policyTextA.classList.add("text-underline");
policyTextA.target = "_blank";
policyTextA.innerHTML = data.content;
// div태그와 a태그를 부모 태그들에게 순서에 맞춰 잘 쌓아줍니다.
policyTextDiv.append(policyTextA);
footerPolicyDiv.append(policyTextDiv)
})제가 저만의 방식대로 dom태그를 동적으로 추가할 수 있게 간단하게 작성해보았습니다.
아직 반복되는 부분을 데이터화 (배열과 객체로 변수를 만들어주는 부분)하는 것이 어색하고 어려울 수도 있고,
또 javascript부분에서 반복문을 통해 내부의 로직을 구성하는것이 어렵고 이해가 안되실 수 도있습니다.
그러나 현재 javascript 학습하시는 부분을 잘 익히시고 다시 이 코드를 보시게 되면 아무것도 아니라는것을 느끼실 꺼에요!
단순히 이번에는 참조만 해보시고 js공부를 한번 해보시고 다시 보시면 이해가 쉬우실거라고 생각합니다.
| background-size: 526px 735px; | ||
| } | ||
|
|
||
| .icon-story { |
There was a problem hiding this comment.
.icon-story로 공통된 부분은 한개의 클래스 선택자로 모으고
다른 부분만 밑에 작성하신 부분은 정말 좋은 것 같습니다!
🥕 당근마켓 웹사이트 클론코딩 과제
🔗 사이트 URL
📆 프로젝트 기간
✅ 구현 사항
🚫 개선 사항 및 아쉬운 점
프로젝트를 시작하기 전, 어떤 구조로 구현할지를 미리 생각해보면 좋을 것같습니다.
BEM 방법론을 사용해보았습니다.
코드의 재사용성을 높이기 위해 클래스를 적절히 분배하고 그에 맞는 class name을 부여해야 합니다.
너비에 따른 반응형 웹으로 디자인하면 더욱 좋았을 것같습니다.
🛠️ 사용한 기술