[1주차] 고윤정 미션 제출합니다. by jejukyj · Pull Request #6 · URECA-ReCoder/vanilla-todo

jejukyj · 2024-08-28T02:19:21Z

안녕하세요! LG U+ 유레카 프론트엔드 1기 고윤정입니다.
걱정반 설렘반으로 시작했던 첫 과제가 끝났습니다..! 과제를 진행하면서 자바스크립트 실력이 많이 부족하구나를 느꼈습니다🥲
역시 머리로 하는 구현과 직접하는 구현은 하늘과 땅 차이네요.. CSS도 생각보다 시간이 많이 걸린다는 점을 새로 깨달았습니다 하하
그래도 과제를 진행하면서 전보다 조금 성장한 느낌이라 기쁩니다!!
계속해서 꾸준히 JS 공부 해나가겠습니다💪 화이팅

📎 알게 된 부분

DOM 메소드를 사용하면서 DOM 조작 방식에 대해 알게 되었습니다.
- document.createElement : 새로운 요소노드 생성
- textContent : 요소의 안에 텍스트 넣기
- appendChild : 특정 요소의 마지막 자식으로 추가
- addEventListener : 특정 요소들에 이벤트 추가
완료한 할 일 목록을 표시하기 위해 'Element.classList.toggle'을 사용하면서 Element.classList를 이용한 클래스 제어 방법에 대해 알게 되었습니다.

📎 개선하고 싶은 부분

그날 그날 수정한 부분 커밋하기
기능 구현 먼저 완벽히 한 후 추가적인 작업하기
웹 스토리지 흐름을 이해하고 적용해보기

📎 Key Questions

DOM이란 무엇인가요?
- HTML 태그로 이루어진 트리이며 DOM 트리로 문서 조작 가능합니다.
JavaScript로 DOM을 조작하는 방법은 어떤 것이 있나요?
- createElement()로 요소를 생성하고 appendChild()를 통해 요소의 자식으로 다른 요소를 넣습니다.
- addEventListener로 어떤 동작을 했을 때 어떤 이벤트가 이루어지도록 동작을 추가할 수 있습니다.
Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?
- 종류 : input, button, form, title ...등
- 이유 : 내용과 의미를 명확히 하기 위해서 시멘틱 태그를 사용합니다.
Flexbox Layout은 무엇이며, 어떻게 사용하나요?
- 레이아웃을 유동적으로 배치하는 방법으로 display: flex;를 통해 사용이 가능합니다.
  - flex-direction : 배치 방향 조절
  - justify-content: 수직 방향 배치
  - align-items: 수평 방향 요소 배치

📎 배포

Vercel을 사용하여 배포하였습니다.
https://vanilla-todo-git-jejukyj-ko-yoonjeongs-projects.vercel.app/

결과 화면 🔽

corinthionia

윤정 님 첫 미션 고생하셨습니다!!!
코드가 완전 간결하고 깔끔해서 코드리뷰 하기 수월했어요 🥹👍🏻 그런데 텍스트가 길 경우 영역밖으로 벗어나는 문제가 있는 것 같습니다...!!.! 몇 가지 코멘트 남겨 두었으니 확인해 보시면 좋을 것 같아요 👀🎉

corinthionia · 2024-08-28T07:13:16Z

index.html

-    <div class="container"></div>
+    <div class="container">
+      <span class="title">To Do List</span>
+      <!-- <form action=""> -->


불필요한 코드나 console.log 등은 나중에 지워 주세요!

corinthionia · 2024-08-28T07:33:26Z

index.html

+        placeholder="할 일을 입력하세요"
+        onkeydown="EnterKeyDown()"
+      />
+      <button id="addBtn">+</button>


JavaScript에서는 주로 lowerCamelCase를 사용하지만, CSS에서 id나 class명을 지정할 때에는 일반적으로 kebab-case를 사용합니다! 또한 축약형을 사용하는 것보다는 길더라도 정확한 이름을 사용하는 게 더 좋을 수도 있습니다 👀

Suggested change

<button id="addBtn">+</button>

<button id="add-button">+</button>

(참고) TOAST UI - HTML/CSS/Sass

자바스크립트에선 카멜케이스를 주로 사용한다고 들었는데 왜 가끔은 케밥케이스를 사용하지? 라는 의문을 가졌었는데 덕분에 궁금증이 해결됐습니다! 그리고 축약형이 무조건 좋은 줄 알았는데 아니었네요😮 피드백 감사합니다!

컨벤션은 습관으로 들이도록 노력해야겠어요! 덕분에 복습 합니다 ㅎㅎ

corinthionia · 2024-08-28T07:35:13Z

index.html

+      />
+      <button id="addBtn">+</button>
+      <!-- </form> -->
+      <div class="division-line"></div>


corinthionia · 2024-08-28T07:35:57Z

index.html

+      </div>
+      <div class="division-line"></div>
+
+      <div class="done-box">


그리고 <section> 등의 Semantic tag를 사용해 보는 것도 좋을 것 같아요~!

corinthionia · 2024-08-28T07:36:38Z

script.js

+const todoList = document.querySelector('#todoList'); //TO DO
+const doneList = document.querySelector('#doneList'); //DONE
+const todoTitle = document.querySelector('.todo-box .list-title'); // TO DO 제목
+const doneTitle = document.querySelector('.done-box .list-title'); // DONE 제목


camelCase와 kebab-case를 섞어서 사용하셨는데 혹시 어떤 기준으로 나누신 건가요? id랑 class 차이일까요?!

어떠한 기준을 가지고 나눈건 아니고 원래 기본적으로 camelCase를 사용하는데 전에 자바스크립트 강의를 들었을 때 container의 id나 class명을 kebab-case로 썼던 기억이 있어서 저도 모르게 container나 box는 kebab-case로 사용한 것 같습니다..!🫨

corinthionia · 2024-08-28T08:37:04Z

style.css

+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: linear-gradient(


그라데이션 오묘하니 예쁘네요 ✨🩵

corinthionia · 2024-08-28T08:37:44Z

style.css

+  padding: 24px;
+  padding-top: 30px;


Suggested change

padding: 24px;

padding-top: 30px;

padding: 30px 24px 24px 24px;

이렇게 줄여 쓸 수도 있습니다! 순서대로 상 우 하 좌 (시계방향!)

corinthionia · 2024-08-28T08:39:30Z

style.css

+button {
+  border: none;
+  width: 25px;
+  height: 40px;
+  font-size: 20px;
+  background-color: white;
+}


버튼을 사용할 때에는 cursor: pointer로 커서를 변경하는 디테일도 챙기면 좋을 것 같습니다! 😉
참고자료 - 커서 속성

corinthionia · 2024-08-28T08:40:07Z

style.css

+button:hover {
+  color: lightsteelblue;
+  transition: 0.2s;
+}


오호 lightsteelblue 이 색상 예쁘네요

corinthionia · 2024-08-28T08:40:20Z

style.css

+}
+
+ul li {
+  cursor: pointer;


👍🏻👍🏻

Yunil-dev

디자인 감각이 돋보이는 프로젝트였습니다! 고심한 만큼 코드도 더 깔끔해 보이네요! 앞으로 함께 잘 성장해 봅시다 🥰

Yunil-dev · 2024-08-29T05:09:33Z

index.html

+        placeholder="할 일을 입력하세요"
+        onkeydown="EnterKeyDown()"
+      />
+      <button id="addBtn">+</button>


컨벤션은 습관으로 들이도록 노력해야겠어요! 덕분에 복습 합니다 ㅎㅎ

Yunil-dev · 2024-08-29T05:15:37Z

script.js

+
+function EnterKeyDown() {
+  //엔터키로 추가
+  if (window.event.keyCode === 13 && todoInput.value !== '') {


저도 동일한 방법으로 키 입력을 감지하는 방법을 알아보다가 <input>태그를 <form>태그로 감싸 사용하면 엔터키 입력으로 추가가 가능해진다는 사실을 알고 바로<form>태그 사용했습니다. 제 기준에는 <form>태그가 편하더라구요 😁

Yunil-dev · 2024-08-29T05:21:03Z

script.js

+      doneList.appendChild(li);
+    } else {
+      todoList.appendChild(li);
+    }


toggle메서드를 이용해서 요소를 숨기거나 보이게 하는 방법도 매우 좋은 것 같네요! 적용해봐야겠어요 ~

Yunil-dev · 2024-08-29T05:25:28Z

script.js

+
+  //삭제
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();


헉 저도 이벤트 전파 때문에 e.stopPropagation사용했는데 태그를 세분화해서 클릭이벤트를 적용하면 전파가 일어나지않겠군요 👍🏻👍🏻

jissssu

윤정님! 코드가 간결하고 명확하게 작성되어 있어, 전반적인 흐름이 이해하기 좋았던 것 같습니다! 덕분에 윤정님 코드 보면서 몰랐던 부분도 또 배워갑니다! 앞으로도 좋은 개발 기대하겠습니다! 👏

jissssu · 2024-08-29T05:26:03Z

script.js

+function updateCount() {
+  const todoCnt = todoList.children.length;
+  const doneCnt = doneList.children.length;
+
+  todoTitle.textContent = `📝 TO DO (${todoCnt})`;
+  doneTitle.textContent = `✔️ DONE (${doneCnt})`;


updateCount 함수 코드가 단순하면서도 필요한 기능을 효과적 작성하신 것 같아요! 저도 간결하고 좋은 코드 작성하고싶어요!

jissssu · 2024-08-29T05:26:11Z

script.js

+
+function EnterKeyDown() {
+  //엔터키로 추가
+  if (window.event.keyCode === 13 && todoInput.value !== '') {


window.event.keyCode도 키보드 이벤트가 발생했을 때 어떤 키가 눌렸는지 확인하기 위해 사용되는 속성이라는걸 처음 알았네요! 위에 주현님 코드리뷰도 보면서 어떤 메소드가 더 좋은건지 덕분에 배워갑니다!

jissssu · 2024-08-29T05:28:48Z

style.css

+  font-family: 'LINESeedKR-Th';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Th.woff2')
+    format('woff2');


저도 폰트 적용해야하는데 어떤식으로 적용할지 잘 몰랐던 것 같아요! 다음에 저도 이런식으로 적용해야겠어요!

jissssu · 2024-08-29T05:30:04Z

style.css

+input:focus {
+  outline: none;
+  border-color: lightsteelblue;
+  transition: 0.2s;


해당 css 속성은 저도 몰랐던 부분이네요! 윤정님 코드 보면서 하나 더 알아갑니다!

jissssu · 2024-08-29T05:31:58Z

style.css

+}
+
+#doneList li.complete {
+  text-decoration: line-through;


텍스트에 장식 효과를 적용하는 속성을 적용해봐야겠어요!!

jejukyj added 4 commits August 28, 2024 10:54

Docs : ToDoList HTML 작성

694447e

Docs : 소제목 이모지 및 카운트 횟수 추가

4340d14

Design : 투두리스트 스타일 구현(가운데 정렬, 색상, 폰트 적용)

b8f44f7

Feat : 할 일 추가, 삭제, 완료 기능 구현

c3b0cba

corinthionia reviewed Aug 28, 2024

View reviewed changes

Yunil-dev reviewed Aug 29, 2024

View reviewed changes

jissssu reviewed Aug 29, 2024

View reviewed changes

jejukyj added 5 commits August 29, 2024 14:48

Refactor : ID, CLASS명 'kebab-case'로 변경, Semantic tag <section> 사용

91b572c

Design : 버튼에 포인터 동작 추가, padding 코드 한 줄로 정리

151b79a

Refactor : EnterKeyDown() 함수 삭제 및 코드 정리

6f6ef04

Refactor : input onkeydown을 form태그로 감싸는 것으로 수정, form 제출시 새로고침되지 않도록 설정

6cb63c7

Refactor : 수평 정렬을 고정값 px에서 상대값 vh으로 단위 변경하여 수정

26d9360

	<button id="addBtn">+</button>
	<button id="add-button">+</button>

	padding: 24px;
	padding-top: 30px;
	padding: 30px 24px 24px 24px;

Conversation

jejukyj commented Aug 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📎 알게 된 부분

📎 개선하고 싶은 부분

📎 Key Questions

📎 배포

Uh oh!

corinthionia left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

corinthionia Aug 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Yunil-dev 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!

jissssu 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!

jissssu Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jejukyj commented Aug 28, 2024 •

edited

Loading

corinthionia left a comment •

edited

Loading

corinthionia Aug 28, 2024 •

edited

Loading

jissssu Aug 29, 2024 •

edited

Loading