[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS #2

choichoijin · 2022-10-14T06:43:40Z

‼️ week1을 복제해서 week2 폴더를 만든 후 작업했어요! week2 폴더를 보시면 됩니다!

📦week2
 ┣ 📂cloneVelog
 ┃ ┣ 📂assets
 ┃ ┣ 📒main.js
 ┃ ┣ 🎨reset.css
 ┃ ┣ 🎨style.css
 ┃ ┣ 📜velog.html
 ┃ ┣ 🎨write.css
 ┃ ┣ 📜write.html
 ┃ ┗ 📒write.js
 ┗ 📂todoList
     ┣ 🧷addIcon.svg
     ┣ 🧷deleteIcon.svg
     ┣ 📒main.js
     ┣ 🎨reset.css
     ┣ 🎨style.css
     ┗ 📜todo.html

기본 과제 (레트로 TodoList 🎮 + JS) week2/todoList

✨ 구현 기능 명세

오늘만 보기, 내일만 보기, 함께 보기 버튼에 따라 레이아웃을 달리 합니다.
버튼에 따라 .slideToRight, .slideToLeft, .slideToOrigin 클래스를 이용해 조정했습니다.
입력을 완료하고 버튼을 누르면, 텍스트와 삭제 버튼을 가진 li 를 ul 태그 안에 생성해줘요
handleSection함수 에서 사용자가 어느 section에 있는 버튼을 눌렀는지 idx로 구분합니다. 구분한
idx를 바탕으로 handleListItem함수 에서 li 태그를 생성합니다.
삭제 버튼을 누르면 해당 li 를 삭제해줘요
deleteListItem함수에서 클릭한 버튼의 parentElement를 삭제하도록 했습니다.

🎁 PR Point

아무래도 세미나를 들었어야 한다는 생각이 .. 다 까먹어서 생각보다 오래걸렸어요 ㅠ
handleSection이라는 함수에

      e.target.parentElement.classList.contains("today")
        ? handleListItem({ addButtons }, 0)
        : handleListItem({ addButtons }, 1);

이와 같은 함수가 있는데요 코드를 줄이려고

      handleListItem({ addButtons }, e.targetparentElement.classList.contains("today") ? 0 : 1)

와같이 작성하니 작동하지 않았어요 왤 까요 🤔

😭 소요 시간, 어려웠던 점

4~5h

😎 구현 결과물

2022-10-14.3.19.43.mov

심화 과제 (딜리버블밖에 없는 velog 💙 + JS) week2/cloneVelog

✨ 구현 기능 명세

Dropdown
.hidden, .colorGreen class를 이용했습니다
태그 CREATE/DELETE
write.js 파일을 참고해주세요!

🎁 PR Point

Keydown 시 영어 인풋을 입력했을 때 문제가 없었으나 한글을 입력했을 때 마지막 글자 태그가 한 번 더 생성되는 것을 확인할 수 있었습니다. 한글은 한 글자에 여러 번의 키다운 이벤트가 일어나기 때문인데 참고한 블로그 첨부해요-!
https://kwangsunny.tistory.com/33

😭 소요 시간, 어려웠던 점

3h

😎 구현 결과물

2022-10-14.3.25.12.mov

joohaem

야무지네요🔥🔥🔥🔥 고생해쒀!~@

joohaem · 2022-10-15T00:56:18Z

week2/todoList/main.js

+}
+
+//할 일 리스트 추가.
+function handleListItem({ addButtons }, idx) {


단순 index 이지만 의미전달을 위해 dayIdx 정도로 서술함도 괜찮겠당

조으네요!!

woogisea · 2022-10-17T15:03:43Z

week2/todoList/main.js

+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);


다른 분들도 selector를 통해 dom에 접근할때 변수명을 $로 통일하셨던데 특별한 이유가 있을까요..?
저도 태그를 하나하나 선택하는것이 진짜 좋은 방법인지 의문점이 들었는데 함수를 선언하니까 가독성이 훨~~~씬 좋아지네요!! 저도 바로 적용해보겠씁니다~

사실 저번 기수 팟장님이 쓰신 코드로 요 방법을 알게 되어서 그대로 가져온 거예요!! 흠.. $인 이유는.. 제 추측으로는 가독성을 위해 길이를 줄이는 단순한 기능이라 문자 형식으로 선언하는 것보다는 특수문자를 사용하는 것이 더 나은 것 같아 보이네요!

woogisea · 2022-10-17T15:09:38Z

week2/todoList/main.js

+window.onload = () => {
+  eventManager({
+    navButtons: $$("nav > button"),
+    todaySection: $("section.today"),
+    tomorrowSection: $("section.tomorrow"),
+    addButtons: $$("button.add"),
+  });
+};


window.onload가 되는 시점에 eventManager함수에 navButtons, todaySection,tomorrowSection,addButtons를 모두 인저로 넘겨주고 각 인자가 필요한 함수에서 그때그때 불러서 쓰는 방식으로 이해했는데 맞을까요??

마자여! 계속해서 같은 코드로 선언해주는 걸 피할 수 있었습니다

woogisea · 2022-10-17T15:18:25Z

week2/todoList/main.js

+      e.target.parentElement.classList.contains("today")
+        ? handleListItem({ addButtons }, 0)
+        : handleListItem({ addButtons }, 1);


button에 이벤트가 발생되었을때 지금 로직으로는 today가 클래스명에 포함되어있는지를 먼저 검사한 후 handleListItem의 idx로 넘겨주는데 만약 handleListItem({ addButtons }, e.targetparentElement.classList.contains("today") ? 0 : 1) 이런식으로 작성하게 된다면 today를 검사하는 것 보다 handleListItem 함수 실행이 빨라서 undefined 값이 들어갈 수 도 있지 않을까..? 라는 얇은 생각입니당,,,,

오오 그렇네요 ..! 👀 혼자 완벽한 코든데 왜 안되지 생각하고 있었는데 저런 허점이 .. ㅋㅋ 감사합니다!

woogisea · 2022-10-17T15:21:18Z

week2/cloneVelog/write.js

+  const tagList = $("ul.tagList");
+  const li = document.createElement("li");
+  const tags = $$("li.tag");
+  const tagTextArr = Array.from(tags).map((tag) => tag.innerText);


Array.form 과 map을 통해서 배열을 만드는 방법...! 하나 얻어가요!!!!

woogisea · 2022-10-17T15:23:46Z

시험기간인데도 양질의 코드 감사합니다!!! 많이 배웠슴당 다음 과제도 부탁해요~~ㅎㅎㅎ

joohaem · 2022-10-19T01:18:26Z

week2/todoList/main.js

+function handleLayout({ todaySection, tomorrowSection, navButtons }) {
+  navButtons[0].addEventListener("click", (e) => {
+    e.preventDefault();
+    todaySection.className = "today slideToRight";
+    tomorrowSection.className = "tomorrow hidden";
+  });
+
+  navButtons[1].addEventListener("click", (e) => {
+    e.preventDefault();
+    todaySection.className = "today slideToOrigin";
+    tomorrowSection.className = "tomorrow slideToOrigin";
+  });
+
+  navButtons[2].addEventListener("click", (e) => {
+    e.preventDefault();
+    todaySection.className = "today hidden";
+    tomorrowSection.className = "tomorrow slideToLeft";
+  });
+}


@Dev-jwJeong 컴퓨터가 코드를 이해하는 데에 차이가 있는 게 무슨 말일까요 ??!

별개로 직접 공백을 통해 클래스를 지정하는 부분에서 휴먼에러가 생길 가능성이 크다는 의견도 있을 것 같아요

@joohaem 앗..! 제가 말을 이상하게 적어놨네요ㅜ, ㅜ 컴퓨터가 코드를 이해하는 것보다는 add, remove를 명시적으로 표기해 줌으로써 다른 사람이 코드를 봤을 때 이해하기 쉬울 것 같다는 생각이었습니다..!

그렇네요~!! 어떤 식으로 class를 부여하고 없애는지 직관적으로 알기 위해서는 add, remove 방식이 확실히 좋을 것 같아요! 나중에 다른 분들이 코드 읽고 수정하기에 더 좋겠네요
휴먼 에러도 맞말이구 ..
다음에는 냅다 클래스명 집어넣지 말고 add remove 써야겠어용

woogisea · 2022-10-18T06:45:51Z

week2/todoList/style.css

+.slideToRight {
+  width: 100vw;
+  transform-origin: left;
+  transition: all 0.5s;
+}
+
+.slideToLeft {
+  width: 100vw;
+  transform-origin: right;
+  transition: all 0.5s;
+}


transform-origin을 통해서 transition의 기준값을 정해주는 방식은 새로운데!! 배워갑니당~~~!!!

joohaem · 2022-10-19T01:18:26Z

week2/todoList/main.js

+function handleLayout({ todaySection, tomorrowSection, navButtons }) {
+  navButtons[0].addEventListener("click", (e) => {
+    e.preventDefault();
+    todaySection.className = "today slideToRight";
+    tomorrowSection.className = "tomorrow hidden";
+  });
+
+  navButtons[1].addEventListener("click", (e) => {
+    e.preventDefault();
+    todaySection.className = "today slideToOrigin";
+    tomorrowSection.className = "tomorrow slideToOrigin";
+  });
+
+  navButtons[2].addEventListener("click", (e) => {
+    e.preventDefault();
+    todaySection.className = "today hidden";
+    tomorrowSection.className = "tomorrow slideToLeft";
+  });
+}


@Dev-jwJeong 컴퓨터가 코드를 이해하는 데에 차이가 있는 게 무슨 말일까요 ??!

choichoijin added 12 commits October 12, 2022 13:25

chore: 코드 리뷰 반영

9baad8b

chore: week1 파일 복사

2546c4b

chore: week1 코드 리뷰 반영

08d8842

chore: week1 폴더 복사

b08b1e8

feat: 추가, 삭제, 레이아웃 기본 기능 구현

95da66d

chore: class명 지정 코드 수정

4cf4137

chore: 리스트 추가 코드 수정

8b6f060

chore: 변수명 수정

6bfcd9c

feat: velog dropdown 구현

8d3709d

fix: 한글 인풋 중복 실행 안되도록

bb42f21

feat: 태그 추가시 중복 방지

8235cf7

chore: 코드 정리

26cd5b3

choichoijin requested review from woogisea and pinktopaz October 14, 2022 06:47

choichoijin self-assigned this Oct 14, 2022

choichoijin marked this pull request as ready for review October 14, 2022 06:50

choichoijin changed the title ~~[ 2주차 기본 과제] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS~~ [ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS Oct 14, 2022

joohaem approved these changes Oct 15, 2022

View reviewed changes

woogisea reviewed Oct 17, 2022

View reviewed changes

woogisea reviewed Oct 18, 2022

View reviewed changes

joohaem reviewed Oct 19, 2022

View reviewed changes

choichoijin merged commit cae33fa into main Nov 8, 2022

choichoijin deleted the week2 branch November 8, 2022 16:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS #2

[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS #2

choichoijin commented Oct 14, 2022 •

edited

Loading

joohaem left a comment

joohaem Oct 15, 2022

choichoijin Oct 22, 2022

woogisea Oct 17, 2022

choichoijin Oct 22, 2022

woogisea Oct 17, 2022

choichoijin Oct 22, 2022

woogisea Oct 17, 2022

choichoijin Oct 22, 2022

woogisea Oct 17, 2022

woogisea commented Oct 17, 2022

joohaem Oct 19, 2022

joohaem Oct 19, 2022

woogisea Oct 20, 2022 •

edited

Loading

choichoijin Oct 22, 2022

woogisea Oct 18, 2022

choichoijin Oct 22, 2022

joohaem Oct 19, 2022

		const $ = (selector) => document.querySelector(selector);
		const $$ = (selector) => document.querySelectorAll(selector);

[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS #2

[ 2주차 기본 과제 ] 레트로 TodoList 🎮 / 딜리버블밖에 없는 velog 💙 + JS #2

Conversation

choichoijin commented Oct 14, 2022 • edited Loading

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

✨ 구현 기능 명세

🎁 PR Point

😭 소요 시간, 어려웠던 점

😎 구현 결과물

joohaem 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

woogisea commented Oct 17, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woogisea Oct 20, 2022 • 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

choichoijin commented Oct 14, 2022 •

edited

Loading

woogisea Oct 20, 2022 •

edited

Loading