Conversation
|
zxcv 라는 브랜치에서 PR 을 날리시고, 해당 PR 이 닫히거나 머지되지 않았다면 zxcv 브랜치에서 계속 commit 하고 push 하셔서 열려있는 PR 에 변경 사항을 추가할 수 있습니다! 다음부터 수정할 부분이 있으면 이렇게 새로 브랜치 만든 다음 PR 날리지 마시고, 해당 브랜치에서 계속 commit 을 누적하는 식으로 해보아요 :) |
| # 📌 PR 제목 | ||
| # [번개장터 클론코딩] | ||
| # 💡 설명 | ||
| 일단, 선배님이 제시하신 조건을 정확하게 구현하지 못하였고 문법이 어려워 AI의 도움을 많이 받은 |
There was a problem hiding this comment.
.github 폴더 아래에 PULL_REQUEST_TEMPLATE 이라는 파일은 PR 을 날릴 때, PR 템플릿을 만들기 위해 존재하는 파일입니다!
여기에 내용을 작성하시는 게 아니라 github 에서 PR 날리실 때 메세지를 작성하셔야 됩니다!
|
|
||
| <div class="search-box"> | ||
| <input type="text" placeholder="상품명, 지역명, @상점명 입력" /> | ||
| <button class="search-btn"><img src="assets/search-icon.png" /></button> |
There was a problem hiding this comment.
img, input 태그와 같은 경우, 해당 태그들 안에 내용을 넣지 않는 경우가 많습니다! 그렇기 때문에 html 태그들을 혼자 쓰기 위해 사용되는 문법 중 셀프 클로징이라는 것이 있습니다!
HTML5 에서 셀프 클로징은 필수는 아니지만 나중에 React 를 배우실 때는 필수이니, 지금부터 습관을 들이시는 것도 좋을 것 같습니다!
| <header class="site-header"> | ||
| <div class="header-left"> | ||
| <img src="assets/logo.png" alt="번개장터 로고" /> | ||
| <br><button class="menu-btn">☰</button> |
There was a problem hiding this comment.
☰, ♥, < 와 같은 특수기호와 문자 엔티티로 표현하는 것은 지양해야 합니다!
앞으로는 해당 페이지의 svg 나 png 등을 가져와서 구현하시는 것을 추천드립니다.
이 글도 참고해보시면 좋을 것 같습니다! svg 와 png 의 차이점을 다룬 내용입니다.
| </section> | ||
| </main> | ||
|
|
||
| <footer class="site-footer"> |
There was a problem hiding this comment.
footer 도 디자인과 일치하도록 모두 작성해주세요 ㅠㅠ 클론코딩의 핵심은 똑같이 만드는 것입니다!
| <footer class="site-footer"> | ||
| <p>© 번개장터 클론</p> | ||
| </footer> | ||
| <script src="script.js"></script> |
There was a problem hiding this comment.
script 태그를 닫는 body 태그 앞에 두신 것은 훌륭합니다!
DOM 을 모두 렌더링하고 script 를 불러오면 오류가 일어날 확률이 매우 낮기 때문에 앞으로도 좋은 습관 유지해주세요.
참고하면 좋은 글
조금 더 깊게 공부해보고 싶으시다면 좋은 내용입니다!
| const datas = [ | ||
| { | ||
| id: 1, | ||
| img: "https://raw.githubusercontent.com/2025-summer-mentoring/3rd-task-clone/main/assets/kickboard.png", |
There was a problem hiding this comment.
이미지도 제가 드린 assets 폴더 안에 있는 이미지로 바꿔주세요
| ]; | ||
|
|
||
| function truncateName(name, limit = 20) { | ||
| return name.length > limit ? name.slice(0, limit) + "..." : name; |
There was a problem hiding this comment.
이렇게 js 로 길이를 체크하여 길이를 자르게 된다면 반응형으로 개발했을 때, 삐져나가거나 의도한 대로 보여지지 않을 수 있습니다!
이런 상황에서는 css 중
overflow: hidden, text-overflow: ellipsis, white-space: nowrap 등을 사용하여 구현할 수 있습니다!
각각의 css 가 어떤 역할을 하는지는 공부해보시길 바랍니다.
| card.style.cursor = "pointer"; | ||
|
|
||
| card.innerHTML = ` | ||
| <img src="${item.img}" alt="${item.name}" style="width: 100%; height: 160px; object-fit: cover;" /> |
There was a problem hiding this comment.
여기서도 인라인 스타일을 사용하기 보단, class 를 사용하여 개발하시는 것이 좋을 것 같습니다!
|
|
||
| datas.forEach((item) => { | ||
| const card = document.createElement("div"); | ||
| card.classList.add("product-card"); |
There was a problem hiding this comment.
이렇게 class 에 css 를 계속하여 주입하기 보단, style.css 에 정의하는 것이 좋을 것 같습니다.
| border: 2px solid red; | ||
| border-radius: 4px; | ||
| overflow: hidden; | ||
| width: 400px; |
There was a problem hiding this comment.
width, height 를 px 와 같은 절대단위를 사용하면, 클라이언트의 디스플레이 크기에 따라 예쁘게 보여지지 않을 수 있습니다!
다음부턴 상대단위라는 것을 혼자 공부해 보시고, 적용해 보시는 것을 추천드려요!
|
commit 은 구현한 기능별로 하시는 것이 좋습니다! 그리고 commit 할 때 commit 컨벤션과 메세지 꼭 작성해 주세요! |
2 participants
📌 PR 제목
번개장터 클론 코딩[장현석]
💡 설명
일단, 선배님이 제시하신 조건을 정확하게 구현하지 못하였고 문법이 어려워 AI의 도움을 많이 받은
부분에대해서 반성하고 위의 부분을 개선하기위해서 따로 공부를하고 다시한번 만들어 보고싶습니다.
또 몇가지 부분에서 구현이 안되어서 추후 계속해서 고칠생각입니다.
시매틱 태그를 활용하는 부분애서 어려움을 겪었습니다.
✅ 작업 목록
검색창:호버시 마우스 커서 변경
네비개이션:스크롤시 고정
메인화면:광고와 오늘의 상품 배치
💬 기타 참고사항
제출기한을 지키지못해 정말 죄송합니다.
부족한 것은 시간이 지나더라도 개선하겠습니다. 다시한번 죄송합니다.