[당근마켓 클론코딩] 이정혁 미션 제출합니다. #3

GAMZAMANDU · 2024-07-08T07:05:17Z

흥미있었던 점:
article을 추가하는 코드가 번거로울 것 같아 웹 컴포넌트를 찾아 사용해보았는데,
다른 라이브러리 없이도 컴포넌트를 쓸 수 있다는 점이 흥미로웠습니다.

어려웠던 점:
position에 대한 사용이 익숙치않아 작은 어려움이 있었습니다.

궁금한 점:
클론코딩을 하며 파일정리를 조금 해보았는데,
실제 프로젝트를 할 때는 어떤 식으로 파일 정리를 하는지 궁금했습니다.

kimsiyeon0223 · 2024-07-11T23:37:04Z

굿모닝입니당.
우와!!!! 정말 정말 수고하셨습니다~~
시멘틱태그를 지향하는 모습이 정말 아름답습니다.
웹 컴포넌트라는 개념을 이해하는 데에 있어 조금 복잡하고 힘드셨을 것이라 예상합니다... 쉬웠다면 당신은 천재?ㅋㅋ....
어려웠던 점에 position에 관한 내용이 있으신 데 position보다는 flex라는 개념을 지향하셨으면 좋겠습니다~
flex를 사용하면 좀 더 간단하게 정렬할 수 있고, 반응형 웹 디자인을 지원하는데 아주 유용하다는 장점 등등 이것은 flex를 공부해 보면서 알아가면 좋을 것 같습니다. 밑에 링크도 참고해 주세요.
https://studiomeal.com/archives/197
실제 프로젝트 할 때는 다양한 폴더 구조를 사용하기 때문에 때때로 다를 수 있는데요.
html을 사용한 웹 사이트를 제작할 때는 보통 하나의 상위 폴더 안에 같은 형식의 파일들을 모아서 저장합니다.

ㄴhtml
     ㄴ index.html
ㄴimg
     ㄴ daangn.png
ㄴ css
      ㄴ style.css
      ㄴ default.css
ㄴ scripts
      ㄴ script.js

위와 같은 형태로요!!
다양한 파일 구조에 대해 알아보시는 것도 좋을 것 같다고 생각합니다!!
다시 한번 수고하셨고, 다음 미션도 화이팅~

anys34

수고하셨습니다

anys34 · 2024-07-12T04:46:42Z

mission/static/index-tab/index.html

svg를 import하는 부분을 좀 더 생각하면 좋을 것 같습니다.

kimsiyeon0223 · 2024-07-11T23:38:02Z

mission/script.js

        div.innerHTML += `<card-comp 
        title="${dataa.name}"
-        price="${dataa.price}원"
+        price="20000원"


저희가 미리 만들어둔 data.json을 이용해 미션을 완수해주세요ㅠㅠ

kimsiyeon0223 · 2024-07-11T23:41:55Z

mission/static/joongo-tab/joongo.html

+      <div id="header-div">
+        <div id="header-left">
+          <a href="/mission/static/index-tab/index.html">
+            <svg


이렇게 svg 코드를 다 가져와 사용하게 되면 코드가 무자비하게 길어지고, 가독성이 떨어집니다.

<img src="hihi.svg(이미지 경로)" alt="hihi img" />

와 같이 img태그를 사용해주세요!

kimsiyeon0223 · 2024-07-11T23:43:54Z

mission/static/joongo-tab/joongo.html

+            <div class="download-btns">
+              <a href="" class="store-btn">
+                <svg
+                  width="18"


이것도 위에 코멘트와 같습니다~

kimsiyeon0223 · 2024-07-11T23:44:13Z

mission/static/joongo-tab/joongo.html

-    <script src="../../script.js"></script>
-  </body>
+    <div id="lang-select">
+      <svg


이것두요

kimsiyeon0223 · 2024-07-12T00:38:11Z

mission/static/index-tab/section.css

 #home-main-desc > h1 {
  margin-bottom: 32px;
-  padding-top: 200px;
+  margin-top: 200px;


되도록이면 margin보다는 padding을 지향해주세용

kimsiyeon0223 · 2024-07-12T00:38:51Z

mission/static/joongo-tab/keywords.css

+#fleamarket-keywords {
+    width: 100%;
+    height: 104px;
+


불필요한 공백들을 제거해주세요

kimsiyeon0223 · 2024-07-12T00:39:43Z

data.json

    {
      "id": 1,
-      "img": "./assets/kitty.png",
+      "img": "/assets/kitty.png",


data.json파일은 고치시면 안됩니다ㅠ 저희가 만들어둔 데이터를 써주세요

kimsiyeon0223 · 2024-07-12T00:41:49Z

mission/header.css

 background-color: #ffffff;
 height: 64px;
-width: 1680px;
+max-width: 100vw;


단위들을 통일시켜주세요!!
반응형 웹을 만들려면 px은 피해주세요!!
반응형에 대해 공부해보시는 것이 좋을 것 같습니다~

kimsiyeon0223 · 2024-07-12T00:42:17Z

mission/index.html

+    <section>
+      <div id="home-main-top">
+        <div id="home-main-desc">
+          <h1>당신 근처의<br />지역 생활 커뮤니티</h1>


br은 지양해주세요

winternuary · 2024-07-12T13:13:07Z

너무 수고많으셨습니다! 직접 파일정리를 해보셨다니 너무나도 대단해요
json을 map으로 보여주는 부분도 척척 잘 해 나가신 것 같아 멋있습니다...
다음 미션도 화이팅 입니다!

GAMZAMANDU · 2024-07-23T12:15:41Z

피드백 내용 수정했습니다

GAMZAMANDU added 17 commits July 4, 2024 19:34

first commit

1e76f8e

chore : index.html의 header 제작

10a90c2

chore : index.html의 section 제작

97ce9ba

style : css 정돈

b5e6771

chore : 탭별 폴더 정리

f067487

chore : joongo.html의 상단섹션 추가

39280a9

chore : acticle list의 CSS 완성

ffa4c91

refactor : acticle component add

f4cf7f8

chore : favicon add

8c22d08

feat: acticle JSON 데이터 적용

bf0cc2b

chore : header로 fixed수정, keywords-list component화

b43e9b1

chore : index.html section의 height가 비정상적이던 문제 일시적 해결

b26864a

chore : 하단 keywords 오타 수정 및 css 변경

5d58709

chore : footer-top 제작

36ce8e7

chore : footer 완성

5fa1c2d

style : 간단한 CSS 엔터 넣기

2d4a31a

chore : JSON 데이터 업데이트

c602b91

winternuary requested review from anys34, kimsiyeon0223, seonghoon07 and winternuary July 11, 2024 10:21

anys34 approved these changes Jul 12, 2024

View reviewed changes

mission/static/index-tab/index.html Outdated

Copy link

anys34 Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

svg를 import하는 부분을 좀 더 생각하면 좋을 것 같습니다.

kimsiyeon0223 approved these changes Jul 12, 2024

View reviewed changes

GAMZAMANDU added 5 commits July 23, 2024 17:29

chore : 파일위치 수정

8c03680

chore : index.js의 글자 margin -> padding

4425ab6

chore : html에 있는 svg, img로 변경

984ac89

chore : JSON 원상복구

b15f170

style : css 줄바꿈 삭제

f63187b

GAMZAMANDU added 2 commits July 23, 2024 18:21

chore : favicon 파일경로 수정

9abf2ae

chore : br태그 삭제

cc62ed3

[당근마켓 클론코딩] 이정혁 미션 제출합니다. #3

Are you sure you want to change the base?

[당근마켓 클론코딩] 이정혁 미션 제출합니다. #3

Uh oh!

Conversation

GAMZAMANDU commented Jul 8, 2024

Uh oh!

kimsiyeon0223 commented Jul 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

anys34 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

winternuary commented Jul 12, 2024

Uh oh!

GAMZAMANDU commented Jul 23, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kimsiyeon0223 commented Jul 11, 2024 •

edited

Loading