[ 2주차 기본 과제 ] WEB 💛 TO DO MATE 🌈 없애보자!!!!! #5

eunbeann · 2023-04-21T14:53:39Z

✨ 구현 기능 명세

기본 과제
1. 하트 안의 숫자
  - 미완료한 할 일의 개수를 계산하여 보여줍니다.
  - 할 일 완료 시 갯수가 줄어듭니다.
2. 카테고리 별 할 일 추가
  - 카테고리 별 할 일 추가가 가능합니다.
  - 모달을 띄워 진행합니다.
3. 달력 / MY 버튼 클릭 시 페이지 이동
  - 달력 ⇒ href = “/”
  - MY ⇒ href =”/mycategory”
심화 과제 ^.ㅜ…
1. 카테고리별 할일 추가
  - 모달안의 input에 자동 포커스 되는 기능이 있습니다.
  - 연달아 추가되며 , 중복되는 할일을 추가되지 않습니다.
2. 바닐라자스 → 라우터 구현해보기
  - 👇 폴더구조 참고 + 응용
```
├── 📁 src
│   ├── 📁 pages
│   │   └── main.js
│   ├── 📁 components
│   │   └── router.js  //페이지 이동
│   ├── App.js         // App 컴포넌트
│   └── index.js       // 애플리케이션의 시작점 (App을 생성)
└── index.html      // 브라우저에 업로드될 HTML파일
```
3. MY 페이지 : Drag and Drop
  - 할 일 카테고리들이 존재
  - 드래그앤 드랍으로 카테고리 순서변경
  - 새로고침해도 유지
    - localStorage
  - 메인에도 반영

🌼 PR Point

체크박스를 이미지로 바꿔주었습니당 아주 귀여운 3D하트

🥺 소요 시간, 어려웠던 점

로컬스토리지가 어려워서 새로운 데이터를 로컬 스토리지에 못 넣었다. ㅠ
- 보여지기만 하는 중 … 현재 mockdata가 구조화되어있어서 이 구조와 로컬스토리지 사용 방법에 대한 공부를 더 하고서 수정해야할 것 같다.
실질적인 기능 보다는 “보여지는 것”에 초점을 맞춘 것 같아서 너무너무 아쉽다.
- 시험 공부랑 병행하느라 시간에 쫓기다 보니ㅠㅠ 시험 끝나자마자 리팩토링 갈겨줌
현재 할 일이 한 자리수
기능에 대한 확신이 없어서 커밋을 자꾸 부분부분이 아니라 완성하고, 야매로 기능별로 커밋하게 된다. 진행 중에 커밋하는 습관 들이기 ㅠㅠ
새로 추가 된 버튼에 id 값을 제대로 줘야지 체크했을 때 체크 버튼이 제대로 먹히는데 현재는 엉뚱한 곳에 체크 버튼이 먹힌다. 요거 수정필요…

🌈 구현 결과물

Arooming

시험기간이라 힘들었을텐데 넘 수고했다아앙🫡🫡 할 일 체크하면 하트 돌아가는 거 넘 귀여움;;;;ㅜㅜ

Arooming · 2023-04-21T16:23:37Z

todoMate/index.html

-        <button type="button" class="footer__btn">
-          <img class="footer__img" src="imgs/home.png" alt="home" />
+        <button type="button" class="footer__btn" id="calButton">
+          <img class="footer__img" src="imgs/home.png" alt="calendar" />


alt 야무지게 잘 넣는다!!🤗 나 자꾸 까먹어서 마지막에 추가함ㅠ_ㅠ

ㅎㅎ 나두..다 적고 확인하면서 추가한 내 alt들 아 근데 저번에 성경이가 리뷰 달아줬는데

현재 페이지 설정이 ko로 되어 있으니까 alt도 동일한 언어로 적어주는게 좋다고 했었어!! 👀
스크린 리더가 읽어줄 떄도 필요하니까! 웹 접근성을 생각하면 그게 맞는 듯 합니다
관련 MDN 링크도 두고 갑니다

alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.

ㅎㅎㅎ 야무진 은빈짱!

Arooming · 2023-04-21T16:29:25Z

todoMate/data.js

+    "title": "💪",
+    "tasks": [
+      {
+        "id": 1,


id는 중복해서 쓰면 안된다더라공!
id 중복금지 요고 한번 보면 좋을듯!!

이게
toDos -> id
toDos -> tasks -> id
의 두 ID라 난 둘이 다른 객체라고 판단해서 둘 다 Id를 넣었는데도 문제가 되려나?!
뭐라고 검색해야할지 몰라서 일단 GPT(...)한테 물어봤는데 일단 얘는 문제가 없다고 하네?!
그래도 좀 더 찾아봐야겠어 🤔 큰 생각 없이 한 거였는데 집어줘서 고마워!! 쪽

아니요, 코드에서 두 개의 ID를 사용하는 것은 문제가 되지 않습니다. 주어진 코드에서는 "SOPT" 객체와 "tasks" 객체 모두 ID가 사용되었습니다. 이러한 ID는 각 객체를 고유하게 식별하는 데 사용됩니다.

"SOPT" 객체의 ID는 코드베이스 내에서 다른 객체와 구별하기 위해 사용되며, "tasks" 객체의 ID는 "SOPT" 객체와 관련된 작업 목록 내의 각 작업을 식별하는 데 사용됩니다.

따라서 두 개의 ID를 모두 사용하는 것은 올바른 데이터 구조와 조직을 유지하기 위해서 필요합니다. 프로그래밍에서 객체에 ID를 사용하는 것은 일반적인 관행이며, 코드베이스를 명확하고 체계적으로 유지하는 데 도움이 됩니다.

Arooming · 2023-04-21T16:32:08Z

todoMate/main.js

+      <label for="check${toDoLi.id}${Things.id}">
+      </label>
+        <li class="to-do__list">${Things.title}</li>
+        </div>`)


우왓 요로케도 쓰는구낭 나는 tasks는 따로 모아서 전부 배열에 넣고 forEach() 돌려버렸는데..! 다른 방식도 알아갑니도~

우와 나는 map 거의 안 썼었는데 이렇게 쓰면 훨씬 직관적이고 효율적인 것 같네!? 배워갑니다 최고최고☺️

Arooming · 2023-04-21T16:32:56Z

todoMate/styles.css


-.to-do__list-btn:focus {
-  filter: brightness(0);
+.to-do__list-container > input {


선택자도 야무지게 쓰시네여!?

저번 코드리뷰 받고 더 신경써서 햇삼!!! 계속 써보려고 노력하는 중 🥸

pinktopaz

은빈이 과제 야무지게 했네~!
은빈이 코드 보고 나도 과제 막 정신없이 하느라 함수로 코드를 분리하지 않고 막 갈긴게 없나 확인해봐써 ㅋㅎㅋㅎㅋㅎㅋㅎ
저번 PR 때 리뷰 받은 거 바로 적용한 것도 넘 므쪄🌸
심화과제도 시간 날 때 해보면 엄청 도움될거야>< 다음 과제도 하이띵-!

pinktopaz · 2023-04-25T14:44:23Z

todoMate/data.js

+    "title": "😻💪",
+    "tasks": [
+      {
+        "id": 1,


이거 인덱스로 접근해도 될 것 같은데 id 속성을 따로 준 이유가 있을까요오?!

오!!!! 인덱스 접근을 전혀 생각하지 못했네요
직관적인 키 값을 주고 싶다는 생각에 냅다 id를!
리팩토링시에 참고하겠습니다 🫡

pinktopaz · 2023-04-25T14:46:23Z

todoMate/index.html

@@ -15,330 +15,40 @@
    <title>TO_DO_MATE</title>
  </head>
  <body>
+    <!-- Modal -->
+    <div class ="modal-background">


modal에 쓸 수 있는 시맨틱 태그로 dialog가 있지요오 한 번 참고해서 리팩토링해보는 거 추천!
HTML dialog 태그

pinktopaz · 2023-04-25T14:47:13Z

todoMate/index.html

-        <button type="button" class="footer__btn">
-          <img class="footer__img" src="imgs/home.png" alt="home" />
+        <button type="button" class="footer__btn" id="calButton">
+          <img class="footer__img" src="imgs/home.png" alt="calendar" />


ㅎㅎㅎ 야무진 은빈짱!

pinktopaz · 2023-04-25T14:47:37Z

todoMate/index.html

        </section>
      </main>
      <footer>
-        <button type="button" class="footer__btn">
-          <img class="footer__img" src="imgs/home.png" alt="home" />
+        <button type="button" class="footer__btn" id="calButton">


여기 클래스랑 id 둘 다 준 이유가 무엇일까요오?!

pinktopaz · 2023-04-25T14:48:49Z

todoMate/index.html

-        <button type="button" class="footer__btn">
-          <img class="footer__img" src="imgs/person.png" alt="home" />
+        <button type="button" class="footer__btn" id="myButton">
+          <img class="footer__img" src="imgs/person.png" alt="my" />


my도 좋은데! 스크린리더가 읽어줄 때 'my'라고만 나오면 유저가 뭔지 헷갈리기 쉬우니까 + 언어 설정이 ko니까 alt="카테고리-순서-바꾸기-페이지" 이런 식으로 해도 좋을 것 같아!

pinktopaz · 2023-04-25T14:54:32Z

todoMate/main.js

+//  데이터 불러오기 -Calendar
+const CalSection = document.querySelector(".calc__container")
+const CalList = calend.map((Cals) => {
+    return`


요렇게 넣어주는 것도 좋다! 나는 뭔가 한 번에 코드 집합을 만들어서 렌더링을 하면 기능별로 구분이 되지 않을 것 같아서 하나하나 만들어줬는데 은빈이 코드 보니까 영역별로 만들면 그렇게 많이 구별이 안되는 것도 아닌 것 같고! 흠흠 조금 더 고민해봐야겠다 나도
야무진 코드 쭈아

pinktopaz · 2023-04-25T14:55:38Z

todoMate/main.js

+<p class="calc__day-num-title">${Cals.date}</p>
+</article>
+`
+}).join(" ");


오홍 여기 join은 무슨 용도일까나!

pinktopaz · 2023-04-25T15:23:42Z

todoMate/index.html

+    <div class ="modal-background">
+      <div class="modal-container">
+        <p>할 일 추가</p>
+        <input type="text" class="modal-input" placeholder="WHAT TO DO" />


오홍 이거 input 왜 form으로 안 감싸줬을까나?!

pinktopaz · 2023-04-25T15:24:31Z

todoMate/main.js

+function openModal(event) {
+    const modal = document.querySelector(".modal-background")
+    modal.style.display = "flex";
+    const parent = event.target.parentNode.parentNode


form으로 인풋 감싸고 form의 submit 이벤트에 대해서 addEventListener를 하면 event.target.parentNode까지만 써주면 돼서 더 깔끔할 것 같아요!

modal 스타일을 css에 정의하지 않고 js 설정한 이유가 있을까?

어떤 모달인지도 명확하게 명명해주었으면 좋게써용!

pinktopaz · 2023-04-25T15:26:12Z

todoMate/styles.css

@@ -14,6 +14,47 @@ body {
  font-family: "Nanum Gothic", sans-serif;
 }

+.modal-background {
+  display: none;


css 순서 적용해줬네! 굿굿
중간중간 공백이 들어가면 더더 가독성이 좋을 것 같앙!

urjimyu

은빈~!! 시험기간인데도 코드리뷰 반영해서 이번에 더 깔끔하게 하려고 고민한 게 보여❣️ 함수도 야무지게 만들구!! 넘넘 고생헀어어🙌🏻

urjimyu · 2023-04-27T13:11:36Z

todoMate/data.js

+      {
+        "id": 3,
+        "title": "분리수거",
+        "done": false


이렇게 done을 미리 넣어주는 방법도 있겠구나! 좋당✨

urjimyu · 2023-04-27T13:12:16Z

todoMate/imgs/heartDone.png

3d 하트 너무 귀여워요ㅠㅠㅠ❣️

인졍이다 지짜 흑흑 ㅠㅠ

urjimyu · 2023-04-27T13:14:30Z

todoMate/main.js

+      <label for="check${toDoLi.id}${Things.id}">
+      </label>
+        <li class="to-do__list">${Things.title}</li>
+        </div>`)


우와 나는 map 거의 안 썼었는데 이렇게 쓰면 훨씬 직관적이고 효율적인 것 같네!? 배워갑니다 최고최고☺️

urjimyu · 2023-04-27T13:17:20Z

todoMate/main.js

+})
+const myButton =document.querySelector("#myButton");
+myButton.addEventListener('click', () =>{
+    window.location.href='/mycategory' 


window.location 나도 써봐야겠다!👀

urjimyu · 2023-04-27T13:17:52Z

todoMate/styles.css

  place-items: center center;
 }

 .calc__do-num-title {
-  z-index: 100;
+  z-index: 50;


z-index를 이렇게 설정한 이유가 궁금해요오👀

Happhee · 2023-04-28T11:35:57Z

todoMate/imgs/heartDone.png

인졍이다 지짜 흑흑 ㅠㅠ

Happhee · 2023-04-28T11:39:26Z

todoMate/main.js

+function openModal(event) {
+    const modal = document.querySelector(".modal-background")
+    modal.style.display = "flex";
+    const parent = event.target.parentNode.parentNode


modal 스타일을 css에 정의하지 않고 js 설정한 이유가 있을까?

Happhee · 2023-04-28T11:40:32Z

todoMate/main.js

+function openModal(event) {
+    const modal = document.querySelector(".modal-background")
+    modal.style.display = "flex";
+    const parent = event.target.parentNode.parentNode


어떤 모달인지도 명확하게 명명해주었으면 좋게써용!

Happhee · 2023-04-28T11:41:12Z

todoMate/main.js

@@ -52,3 +52,10 @@ const countBox = () => {
    const CalcNum = document.querySelector(".day:nth-child(6) .calc__done-num")
    CalcNum.innerHTML=`${uncheckedBoxes.length}`
 }
+
+// CheckBoxes에 이벤트 리스너 담기
+const checkBoxes = Array.from(document.querySelectorAll(".to-do__list-btn"));


querySelectorAll하면 배열로 받아와지는데 Array.from을 쓴 이유가 무엇일까아아아?!

Happhee · 2023-04-28T11:42:59Z

todoMate/main.js

이칭구는 왜 대문자이죠?!

Happhee · 2023-04-28T11:46:25Z

todoMate/main.js

+  // 미완료 할 일 개수 계산
+const countBox = () => {
+    const uncheckedBoxes = checkBoxes.filter(checkBoxes => !checkBoxes.checked);


필터 잘쓰는데!

eunbeann added 9 commits April 21, 2023 23:44

feat: 상수데이터 이동

8619f81

design: 자잘한 css 수정

a5c7d4a

feat:상수 파일 가져와서 컴포넌트 구성

61ed3ba

feat: 미완료 할 일 숫자 계산

660a3b5

feat: checkboxes에 이벤트 리스너 담기

387c706

feat: 버튼 누르면 모달창 열리게

f1f1807

feat: 새 항목 submit

60b0b9b

feat:버튼으로 페이지 이동

75981bf

feat: 1차 마무리; 기본 과제

db579df

Arooming reviewed Apr 21, 2023

View reviewed changes

eunbeann requested review from pinktopaz and urjimyu April 22, 2023 04:21

pinktopaz reviewed Apr 25, 2023

View reviewed changes

urjimyu reviewed Apr 27, 2023

View reviewed changes

eunbeann added 3 commits April 28, 2023 14:56

code-review: 모달 input form으로 감싸고 container 삭제

929fef1

code review: alt 태그 en -> ko

97574c3

refactor: 자잘한 리팩토링

a7c1e7e

Happhee reviewed Apr 28, 2023

View reviewed changes

eunbeann self-assigned this Jun 5, 2023

eunbeann added the 기본과제 label Jun 5, 2023

eunbeann merged commit 97581b0 into main Jul 16, 2023

[ 2주차 기본 과제 ] WEB 💛 TO DO MATE 🌈 없애보자!!!!! #5

[ 2주차 기본 과제 ] WEB 💛 TO DO MATE 🌈 없애보자!!!!! #5

Conversation

eunbeann commented Apr 21, 2023 • edited Loading

✨ 구현 기능 명세

🌼 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

Arooming left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pinktopaz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

urjimyu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eunbeann commented Apr 21, 2023 •

edited

Loading