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

kwonET · 2023-04-21T14:22:35Z

✨ 구현 기능 명세

기본과제

‼️‼️‼️ 할일 목록 데이터는 상수파일에 저장해 사용합니다 ‼️‼️‼️

✅ `하트 안의 숫자`

1. 미완료한 할일의 갯수를 계산하여 보여줍니다.
2. 할 일 완료 클릭시 갯수가 줄어듭니다.

✅ `카테고리별 할일 추가`

1. 카테고리별 할일 추가가 가능합니다.
2. 모달을 띄워 진행합니다

✅ `달력 / MY 버튼 클릭시 페이지 이동`

1. 달력 → href=”/”
2. MY → href=”/mycategory”

심화 과제

✅ 카테고리별 할일 추가

1. 모달안의 input에 자동 포커스 되는 기능이 있습니다.
2. 연달아 추가되며 , 중복되는 할일을 추가되지 않습니다.

✅ Vanilla JavaScript로 SPA구현하기

1. 바닐라자스 → 라우터 구현해보기

2. 👇 폴더구조 참고 + 응용

├── 📁 src
│   ├── 📁 pages
│   │   └── main.js
│   ├── 📁 components
│   │   └── router.js  //페이지 이동
│   ├── App.js         // App 컴포넌트
│   └── index.js       // 애플리케이션의 시작점 (App을 생성)
└── index.html      // 브라우저에 업로드될 HTML파일

✅ MY 페이지 : Drag and Drop

1. 할 일 카테고리들이 존재
2. 드래그앤 드랍으로 카테고리 순서변경
3. 새로고침해도 유지
- 1. localStorage
4. 메인에도 반영

🌼 PR Point

1. 할일 숫자 연동

    /**
     * 할 일 체크 후 하트의 숫자를 조정하는 부분
     */
    var target=document.querySelectorAll('.todo-icon');
    var todoRemain=target.length;
    const todoRemainContainer=document.querySelector('#today .todo-num');
    todoRemainContainer.innerText=todoRemain;
    const checkedList=[];
    for(var i=0;i<target.length;i++){
        target[i].addEventListener('click',(e)=>{
            if(!checkedList.includes(e.target.parentNode.id)){
                e.target.style.filter='invert(0%) sepia(0%) saturate(7500%) hue-rotate(327deg) brightness(96%) contrast(104%)';
                todoRemain-=1;
                todoRemainContainer.innerText=todoRemain;
                checkedList.push(e.target.parentNode.id);
            }
        })
    }

카테고리와 할 일을 js의 dom으로 관리하고, 해당 할 일의 아이콘이 클릭 될 때마다 js로 숫자를 계산하는 방법으로 구현하였습니다 ! 아이콘을 할 일마다 구분해야 할일 숫자를 중복으로 계산하는 것을 막을 수 있기 때문에, 체크된 아이콘의 id를 checkedList로 구분해주었습니다.

2. 할일 추가와 localStorage 연동

    window.onload=function(){
        // window.localStorage.clear();
        if (callNum){
            for (var i=0;i<data.length;i++){
                const todoObj= Object.entries(data[i].todo);
                for(var j=0;j<todoObj.length;j++){
                    // var todoList=JSON.stringify(todoObj[j][1]);
                    window.localStorage.setItem(todoObj[j][0],todoObj[j][1]);
                }
            }
        }
    }

할 일을 윈도우 창이 로드될 때마다 localStorage에서 가져와서, 새로운 할 일이 추가 되어서 localStorage가 업데이트되었을 때 새로운 데이터를 가져와 보여줄 수 있도록 하였습니다. 이 과정에서 데이터의 키, 값을 관리하고 불러오는 과정이 조금 헷갈렸던 것 같아요 ㅎㅎ.
이렇게 로컬 스토리지를 연동함에 따라 할일 데이터를 가져오는 부분도 관련해서 조금 수정되었습니다 !

    const keys=Object.keys(window.localStorage);
    keys.sort()
    if (keys[i]===data[i].id){
        const value=window.localStorage[keys[i]];
        const values=value.split(',');
        for (var v of values){
            todoContainer.append(todoPlus(v));
        }
    }

🥺 소요 시간, 어려웠던 점

6h

가장 시간을 많이 쓴 부분은 로컬 스토리지를 연동하는 부분이었고, dom에 대한 이벤트를 관리하는 부분을 1번 과제에서 했어도 2번 과제에서도 좀 시간을 썼던 것 같습니다. ㅎㅎ

🌈 구현 결과물

할 일에 대한 아이콘이 체크될 때마다 금요일의 하트 속 숫자가 줄어드는 모습입니다.
카테고리에 대한 할 일을 추가할 수 있는 부분입니다.

simeunseo

보니까 보미는 체크된 할일 목록을 따로 저장하는 checkedList라든가 localStorage에 할일 정보를 각각의 key, value로 따로따로 저장한다든가 하는 방법으로 코드가 굉장히 깔끔하게 작성될 수 있게 한거같아!!!!
나는 약간 이미 저장되어있는 정보를 탐색해서 찾아낼 수 있는것을 새로운 변수로 빼서 중복하여 저장되는것(?)을 피하려고 했거든? 근데 보미 코드보고 생각해보니까, 내가 굳이 왜 그렇게 했는지 이유가 명확하지 않더라구.. 오히려 코드만 더러워지고
그래서 많이 배워갔습니다!! 고생 많았어이 😙

simeunseo · 2023-04-27T03:21:16Z

dummy.js

+        'ctgr':'블로그',
+        'id':'blog',


오오 보여지는 이름이랑 영문 아이디를 이렇게 같이 저장해놓으면 되는구나... 나는 왜 따로 배열을 하나더만든거지 ;_; 배워갑니다!

simeunseo · 2023-04-27T03:23:48Z

script.js

+    // window.localStorage.clear();
+    if (callNum){
+        for (var i=0;i<data.length;i++){
+            const todoObj= Object.entries(data[i].todo);


헐 entries라는 메소드 처음봐! key, value 값을 배열 형태로 반환할 수 있는 메소드구나!!! 기억해뒀다가 유용하게 써야겠어 (이랬는데 세미나에서 배웠던거 아니겠지,,? 🫢

나도 헤매다가 발견한 메소든데 굳굳 ㅎㅎ

simeunseo · 2023-04-27T03:25:14Z

script.js

+            const todoObj= Object.entries(data[i].todo);
+            for(var j=0;j<todoObj.length;j++){
+                // var todoList=JSON.stringify(todoObj[j][1]);
+                window.localStorage.setItem(todoObj[j][0],todoObj[j][1]);


아 데이터의 key를 localStorage의 key로 사용한거야???
나는 전체 데이터를 하나의 key에 전부 저장했거든...

simeunseo · 2023-04-27T03:28:28Z

script.js

+    todoCtgr.append(ctgrIcon)
+    todoContainer.append(todoCtgr)
+    const keys=Object.keys(window.localStorage);
+    keys.sort()


여기서 sort를 해주는 이유는 뭐야?!

simeunseo · 2023-04-27T03:33:15Z

script.js

+ */
+const callNum=0;
+var ctgrTarget=document.querySelectorAll('.ctgr-icon');
+for(var i=0;i<ctgrTarget.length;i++){


보니까 전체적으로 반복문이 필요할 떄는 항상 for문을 쓴 것 같은데 forEach나 map같은걸 써봐도 좋을 것 같아 ㅎㅎ 아직 정확한!! 차이는 나도 잘 모르겠지만 단순 반복이라면 for( ),배열을 순회하려면 forEach( ), 배열을 순회 후 새 배열을 얻고 싶다면 map( )을 많이 쓴다고 하네. 이것도 읽어보면 좋을거같아 for은 동기적이고 forEach는 비동기적이래!

simeunseo · 2023-04-27T03:36:27Z

script.js

+            modal.style.display='none';
+            const text=modalInput.value;
+            var todoText=localStorage.getItem(ctgr);
+            todoText=todoText+','+text;


혹시 할일 리스트를

'todo':{ 'me':['스트레칭하기','물마시기'] }

여기 안에 리스트 형태로 저장해야 해서 ','를 붙인건가??
만약 그렇다면 아예 저 todo 안의 'me'에다가 push하는게 좀더 낫지 않을까?!

borimong

보미 언니 넘넘 수고 많았어!!! 고민 결과 로컬 스토리지 이용해서 구현했구나!! 넘넘 잘했따 ㅎㅎ 최고야 진짜!!! :)

borimong · 2023-04-28T13:57:12Z

script.js

+/**
+ * 할 일 체크 후 하트의 숫자를 조정하는 부분
+ */
+var target=document.querySelectorAll('.todo-icon');


옹 var 은 지양하는 게 좋은데 혹시 여기서 var 을 써준 특별한 이유가 있을까용??? :)

borimong · 2023-04-28T13:58:37Z

script.js

+function todoPlus(postTarget){
+    const todo=document.createElement('div')
+    todo.setAttribute('class','todo')
+    const todoIcon=document.createElement('img')
+    todoIcon.setAttribute('src','./images/check-to-slot-solid.svg')
+    todoIcon.setAttribute('alt','할일체크아이콘')
+    todoIcon.setAttribute('class','todo-icon')
+    todo.innerText=postTarget
+    todo.prepend(todoIcon)
+    todo.setAttribute('id',postTarget)
+    return todo
+}


개행 넣어주면 더 가독성 잇겠다!!! :)

borimong · 2023-04-28T14:00:05Z

script.js

+    todo.setAttribute('id',postTarget)
+    return todo
+}
+for (var i=0;i<data.length;i++){


이 부분도 함수로 만들어서 분리해주면 더 가독성 있구 좋을 것 같다!!! :)

borimong · 2023-04-28T14:00:18Z

script.js

+    todoContainer.setAttribute('class','todo-container')
+    maintodoContainer.append(todoContainer)
+    const todoCtgr=document.createElement('div')
+    todoCtgr.setAttribute('class','todo-category')


setAttribute 로 깔끔하게 구현했다!!! :)

borimong

반복되는 요소는 map 을 사용해서 구현하는 연습을 해보면 좋을 것 같다는 쉥각!!! 넘 수고 햇어 ㅎㅎ :)

borimong · 2023-05-04T13:06:54Z

index.html

+            <div class="calender-container">
+                <div class="todo-day">월</div>
+                <div class="todo-number">
+                    <div class="todo-num">
+                        6
+                    </div>
+                    <img src="./images/heart-solid.svg" alt="날짜아이콘">
+                </div>
+                <div class="todo-daynum">17</div>
+            </div>


요 부분도 반복되니까 data 파일 map 돌려서 구현해도 좋을 것 같아!!! :)

borimong · 2023-05-04T13:08:28Z

script.js

+        const ctgr=e.target.parentNode.id;
+        const modal = document.querySelector('#modal-container')
+        modal.style.display='block';
+        const modalBtn = document.querySelector('#modal-container #modal button')


id 로 dom 요소를 가져오고 싶은 거라면 getElementById 를 써 봐도 좋을 것 같아!!!! :)

kwonET added 2 commits April 21, 2023 23:15

feat : update source code

69f2ed4

feat : update source code

d4b5eaf

kwonET requested review from simeunseo and borimong April 21, 2023 14:22

simeunseo reviewed Apr 27, 2023

View reviewed changes

borimong reviewed Apr 28, 2023

View reviewed changes

borimong reviewed May 4, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kwonET commented Apr 21, 2023 •

edited

Loading

simeunseo left a comment •

edited

Loading

simeunseo Apr 27, 2023

simeunseo Apr 27, 2023

kwonET Apr 28, 2023

simeunseo Apr 27, 2023

simeunseo Apr 27, 2023

simeunseo Apr 27, 2023

simeunseo Apr 27, 2023

borimong left a comment

borimong Apr 28, 2023

borimong Apr 28, 2023

borimong Apr 28, 2023

borimong Apr 28, 2023

borimong left a comment

borimong May 4, 2023

borimong May 4, 2023

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

Are you sure you want to change the base?

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

Conversation

kwonET commented Apr 21, 2023 • edited Loading

✨ 구현 기능 명세

기본과제

✅ 하트 안의 숫자

✅ 카테고리별 할일 추가

✅ 달력 / MY 버튼 클릭시 페이지 이동

심화 과제

✅ 카테고리별 할일 추가

✅ Vanilla JavaScript로 SPA구현하기

✅ MY 페이지 : Drag and Drop

🌼 PR Point

1. 할일 숫자 연동

2. 할일 추가와 localStorage 연동

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

simeunseo left a comment • edited Loading

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

borimong 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

borimong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwonET commented Apr 21, 2023 •

edited

Loading

✅ `하트 안의 숫자`

✅ `카테고리별 할일 추가`

✅ `달력 / MY 버튼 클릭시 페이지 이동`

simeunseo left a comment •

edited

Loading