[1주차] 고윤정 미션 제출합니다. #6

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

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


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

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

style.css

Suggested change

padding: 24px;

padding-top: 30px;

padding: 30px 24px 24px 24px;

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

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

style.css

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


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

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

style.css

+  color: lightsteelblue;
+  transition: 0.2s;
+}


오호 lightsteelblue 이 색상 예쁘네요

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

style.css

+
+ul li {
+  cursor: pointer;


👍🏻👍🏻

cabrerainbu

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

cabrerainbu · 2024-08-29T05:09:33Z

index.html

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


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

cabrerainbu · 2024-08-29T05:15:37Z

script.js

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


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

cabrerainbu · 2024-08-29T05:21:03Z

script.js

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


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

cabrerainbu · 2024-08-29T05:25:28Z

script.js

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


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

jissssu

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

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

script.js

+  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

+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Th.woff2')
+    format('woff2');


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

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

style.css

+  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

cabrerainbu 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 고윤정 미션 제출합니다. #6

[1주차] 고윤정 미션 제출합니다. #6

jejukyj commented Aug 28, 2024 •

edited

Loading

corinthionia left a comment •

edited

Loading

corinthionia Aug 28, 2024

corinthionia Aug 28, 2024

jejukyj Aug 29, 2024

cabrerainbu Aug 29, 2024

corinthionia Aug 28, 2024 •

edited

Loading

corinthionia Aug 28, 2024

corinthionia Aug 28, 2024

jejukyj Aug 29, 2024

corinthionia Aug 28, 2024

corinthionia Aug 28, 2024

corinthionia Aug 28, 2024

corinthionia Aug 28, 2024

corinthionia Aug 28, 2024

cabrerainbu left a comment

cabrerainbu Aug 29, 2024

cabrerainbu Aug 29, 2024

cabrerainbu Aug 29, 2024

cabrerainbu Aug 29, 2024

jissssu left a comment

jissssu Aug 29, 2024

jissssu Aug 29, 2024

jissssu Aug 29, 2024

jissssu Aug 29, 2024

jissssu Aug 29, 2024 •

edited

Loading

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

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

		src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/LINESeedKR-Th.woff2')
		format('woff2');

[1주차] 고윤정 미션 제출합니다. #6

Are you sure you want to change the base?

[1주차] 고윤정 미션 제출합니다. #6

Conversation

jejukyj commented Aug 28, 2024 • edited Loading

📎 알게 된 부분

📎 개선하고 싶은 부분

📎 Key Questions

📎 배포

corinthionia 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

corinthionia Aug 28, 2024 • 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

Choose a reason for hiding this comment

cabrerainbu 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

jissssu 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

jissssu Aug 29, 2024 • edited Loading

Choose a reason for hiding this comment

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