[1주차] 김지원 미션 제출합니다. #3

geeoneee · 2023-09-15T06:23:22Z

🟪 배포링크

https://vanilla-todo-18th-zeta.vercel.app/

🟪 결과화면

🟪 KEY QUESTIONS

1. DOM은 무엇인가요?

DOM(The Document Object Model)은 문서 객체 모델로서 HTML, XML 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. DOM은 nodes와 objects로 문서를 표현하며, 웹 페이지와 스크립트를 연결하는 역할을 합니다. DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다!

2.HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?

[방법들]

insertAdjacentHTML
element.insertAdjacentHTML(position, text);
위처럼 사용하고 target HTML Element의 특정 위치에 원하는 노드를 추가할 수 있는 메서드입니다.
position에는 beforebegin, afterend, afterbegin, beforeend 가 있고, text로는 HTML 또는 XML로 파싱 가능한 String을 받습니다.
createElement
let element=documnet.createElement(tagName);
위처럼 사용하고 지정 tagName의 HTML Element를 생성하는 메서드입니다. 이때 tagName은 생성하려는 element 타입의 string입니다.
[어떤 방법이 적합할까]
createElement는 간단하고 직관적이지만, 요소의 모든 속성을 설정해야 해서 복잡한 요소를 만들 시 코드가 길어질 수 있습니다.
필요에 따라 적합한 방법을 찾는 것이 중요하다고 생각합니다!

3. Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?

[Semantic tag를 사용하는 이유]
시멘틱 태그는 "의미가 있는 태그"라는 뜻입니다. HTML tag들 중에서도 의미가 있는 태그들을 의미합니다.
Semantic tag를 사용하는 이유는 크게 2가지가 있는데, 하나는 Search engine optimization이고, 다른 하나는 유지보수성입니다. 단순히 div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해집니다.

[종류]

: 문서의 머리말을 나타냅니다. 보통 로고, 제목, 메뉴 등을 포함합니다. : 문서 내비게이션을 정의합니다. 주로 웹 페이지의 주요 메뉴나 링크를 감싸기 위해 사용됩니다. : 날짜와 시간 정보를 정의합니다. 속성을 사용하여 머신 파싱 가능한 형식으로 제공합니다.

4. Flexbox Layout은 무엇이며, 어떻게 사용하나요?

[Flexbox Layout]
CSS의 display 속성 중 하나로, 컨테이너들의 레이아웃, 정렬, 그리고 간격을 설정하는 데에 효과적입니다.
flex의 핵심 아이디어는 화면 크기에 맞춰 화면 안 아이템들의 넓이와 높이를 가장 최적이 길이로 맞춰준다는 점입니다. 따라서 디바이스의 화면 크기에 따라 유동적으로 아이템들의 크기를 조정할 수 있습니다.(flexible)
[사용법]

Flexbox 레이아웃을 적용하고자 하는 부모 요소에 CSS 속성을 설정합니다.
자식 요소에 대한 배치방향과, 유연성, 정렬, 간격을 설정합니다.

5.JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?

웹 브라우저에서 바로 실행 가능 : 별도의 프로그램을 설치할 필요 없이, 웹 브라우저에서 직접 실행할 수 있는 유일한 프로그래밍 언어 중 하나입니다.
브라우저 호환성 : 모든 주요 웹 브라우저에서 실행되는 표준 언어입니다.
클라이언트 및 서버 측 프로그래밍 : 클라이언트 측과 서버 측 어플리케이션 개발 모두에서 사용 가능합니다.
거대한 커뮤니티 : 자바스크립트는 거대한 개발자 커뮤니티와 다양한 개발 리소스를 가지고 있으며, 이로 인한 지속적인 지원과 라이브러리/프레임워크 개발이 이루어집니다.

6.코드에서 주석을 다는 바람직한 방법은 무엇일까요?

충분한 정보를 전달하는 좋은 주석을 추가하기 위해서는 여러 규칙들이 있습니다.

코드 복제 피하기
명확한 주석을 작성할 수 없다면 코드에 문제가 없는 지 확인하기
버그를 수정했다면 주석을 추가하기
주석이 많다고 좋은 것이 아님을 명심하고, 작성한 주석의 필요성 검토하기

🟪 느낀 점

우선 방학동안 리액트 공부&개발만 하다가 오랜만에 바닐라 자바스크립트를 하려고 하니 생각보다 쉽지 않았습니다🥲
이번 과제를 계기로 공부했던 내용들을 복습하고 예전보다 조금 더 깊게 이해하는 뜻깊은 활동이었습니다. (복습의 중요성을 다시금 깨닫는 계기가 되기도 했어요ㅎㅎ)
기능 단위로 commit 작성하는 것에 익숙해져야겠다고 생각했습니다...! 후에 누가봐도 해당 커밋이 어떤 기능을 담고 있는지 알 수 있게 작성하는 것이 코드를 다시 볼 때 도움이 되더라구요

dhshin98 · 2023-09-16T16:34:51Z

script.js

+  if (newTodo !== "") {
+    toDoInput.value = "";


이 부분은 저도 리뷰를 받아서 알게 된 부분인데, todoInput 입력시 스페이스바를 눌렀을때도 리스트에 추가되는데, trim()을 통해 공백을 제거하시면 빈 스페이스바 todo 를 방지할수 있다고 합니다!

dhshin98 · 2023-09-16T16:36:30Z

script.js

+  event.stopPropagation();
+  const li = event.target.parentElement;
+  li.remove();
+  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));


filter 함수를 통해 깔끔하게 코드를 구현하신것 같아요 ! 👍

dhshin98 · 2023-09-16T16:53:24Z

style.css

+  padding: 10rem;
+  padding-top: 2rem;


저는 px만 사용하는데, rem도 자유롭게 쓰시는 것 같아 배워갑니다!

dhshin98 · 2023-09-16T16:53:28Z

style.css

+  font-style: normal;
+}
+body {
+  background-image: url("https://www.10wallpaper.com/wallpaper/1366x768/2106/Macos_Monterey_2021_Apple_WWDC_5K_Poster_1366x768.jpg");


배경 강렬하고 진짜 애플 느낌 나는거 같아서 좋네용 ㅎㅎ🍎

dhshin98 · 2023-09-16T16:59:21Z

script.js

+    toDoInput.value = "";
+    const newTodoObj = {
+      text: newTodo,
+      id: Date.now(),


id 값에 Date.now()를 통해 현재 타임스탬프로 넣으신거 신박하고 좋은 것 같네요!!

flowerseok

고생하셨습니다. 코드가 멋져용

flowerseok · 2023-09-16T16:54:38Z

script.js

+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  const amPm = hours >= 12 ? "PM" : "AM";
+  clock.innerText = `${hours}:${minutes}:${seconds} ${amPm}`;
+  clock.innerText = `${hours}:${minutes}:${seconds}`;


시간이 표시되니 좋아요 . clock.innerText가 두 번 할당되고있어요!

flowerseok · 2023-09-16T17:26:55Z

script.js

+  span.innerText = doneTodo.text;
+  const button = document.createElement("button");
+  button.innerText = "🗑";
+  button.addEventListener("click", deleteDoneItem);


Done에서 delete가 안되고 있어서 열심히 찾아보는데 잘 모르겠네요 ㅠㅠ
찾으시면 꼭 저도 알려주세요 !

local storage의 donetodos에서 삭제를 해도 계속 로컬에 남아있는 경우가 있는 것 같아요.
로컬스토리지상에서 id 가 null 로 바뀌게 되어서 삭제가 안되는 것 같은데..
확실하진 않지만, saveDoneItems 함수에서 인자를 받지 않고
doneToDos 배열을 저장하려고 해서 doneToDos 배열에 id가 null로 들어가나 싶어요..
확인해보시면 될것같습니다!!

간헐적으로 donetodos id 에 null이 들어가서 발생하는 케이스 맞는 것 같아요.
이 경우에 paintToDo, paintDoneItem 함수가 제대로 작동하지 않고 있네요..!

화면에서 done-todo를 삭제해도 localStorage 반영되지 않음

새로고침 되지 않는 이상 todo 들이 paint 되지 않음 (saveToDos 함수는 잘 작동)

flowerseok · 2023-09-16T17:28:51Z

style.css

@@ -0,0 +1,99 @@
+@font-face {


폰트 추가하신 거 너무 멋져요 이쁜 폰트 잘 고른 것 같아요 ㅎㅎ

flowerseok · 2023-09-16T17:30:27Z

script.js

+const toDoForm = document.getElementById("todo-form");
+const toDoInput = toDoForm.querySelector("input");
+const toDoList = document.getElementById("todo-list");
+const TODOS_KEY = "todos";


이렇게 선언해서 쉽게 이해할 수 있게 만들어서 좋은 것 같아요. 다시 사용하기도 좋을 것 같아요 저도 사용해야겠어요

flowerseok · 2023-09-16T17:33:07Z

script.js

+  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
+  saveToDos();
+}
+function paintToDo(newTodo) {


paintTodo 보다 더 직관적인 함수명을 사용하는 것이 더 보기 쉬울 것 같아요 !

Gaeun-Kwon

지원님 안녕하세요, 프론트엔드 운영진 권가은입니다 🙌
이번 과제 하시느라 수고 많으셨습니다~!! 깔끔한 css 가 눈에 띄는 과제였던 것 같아요 ㅎㅎ.

다른 분들이 리뷰 잘 남겨주셔서 저는 몇 가지만 코멘트 간단히 남겨보았으니 한 번 확인해주세요!
다음 과제도 화이팅입니다!!!! 💪

Gaeun-Kwon · 2023-09-17T02:23:14Z

style.css

+  background-image: url("https://www.10wallpaper.com/wallpaper/1366x768/2106/Macos_Monterey_2021_Apple_WWDC_5K_Poster_1366x768.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;


지금 초기 화면에서 배경이 화면 하단까지 꽉 차지 않고, 내부 요소들 크기에 따라 배경이 같이 커지고 있는 것 같아요.
그리고 위아래 스크롤 시 배경도 같이 스크롤 되고 있는 것 같습니다 (요건 취향차이지만요 ㅎㅎ)

2023-09-17.10.49.14.2.mov

해당 문제는 아래 속성을 추가해서 배경을 고정시키면 해결될 것 같습니다! 😄

background-attachment: fixed;

Gaeun-Kwon · 2023-09-17T02:38:52Z

script.js

+  li.appendChild(span);
+  li.appendChild(button);


append() 메서드를 사용하면 여러개의 노드를 한 번에 append 해줄 수 있어서, 한 번 사용해보셔도 좋을 것 같아요! 😄

Suggested change

li.appendChild(span);

li.appendChild(button);

li.append(span, button);

Gaeun-Kwon · 2023-09-17T02:50:18Z

script.js

+  span.innerText = doneTodo.text;
+  const button = document.createElement("button");
+  button.innerText = "🗑";
+  button.addEventListener("click", deleteDoneItem);


간헐적으로 donetodos id 에 null이 들어가서 발생하는 케이스 맞는 것 같아요.
이 경우에 paintToDo, paintDoneItem 함수가 제대로 작동하지 않고 있네요..!

화면에서 done-todo를 삭제해도 localStorage 반영되지 않음

새로고침 되지 않는 이상 todo 들이 paint 되지 않음 (saveToDos 함수는 잘 작동)

Gaeun-Kwon · 2023-09-17T03:15:55Z

script.js

+function moveToDone(event) {
+  const li = event.target.parentElement;
+  const text = li.querySelector("span").innerText;
+  const id = parseInt(li.id);
+  const doneTodoObj = {
+    text,
+    id,
+  };
+  li.remove();
+  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
+  saveToDos();
+  doneToDos.push(doneTodoObj);
+  paintDoneItem(doneTodoObj);
+  saveDoneItems(doneTodoObj);
+}


id 에 null값이 들어가는 이슈 관련,

const id = parseInt(li.id);

여기서 parseInt를 지우고 돌려보니 id에 'todo-list'(ul element) 가 들어오는 경우가 있더라구요!

그래서 살펴보니.. moveToDone 함수를 eventListener에 달아둔 것이 li 태그인데, 이벤트 타겟의 parentElement를 li 변수로 받아오고 있는 것 같아요.
현재 구조: ul태그 > li태그 > span,button

이 부분 한 번 확인해보시면 좋을 것 같아요!!

geeoneee added 18 commits September 14, 2023 13:43

clock 생성

3ff0cd1

todolist update

a19b164

todolist 삭제 기능

56799cf

todolist 저장 기능

0cc6068

todo 삭제기능 수정

a1d01a9

+버튼 기능 추가

7698c65

html 구조

23cacbd

script.js 정리

d67be81

feat: add DoneTodo

fd53864

style: clock css 적용

3e72996

style: style.css 수정

8039cd3

style : background image, color

2c59c49

style : style.css 수정

903ed80

코드 복사

e3b0e16

css 최종 수정

fd56e71

배포용

394f342

배포확인

9e49845

fix: 배경 주소 변경

a197552

dhshin98 reviewed Sep 16, 2023

View reviewed changes

flowerseok reviewed Sep 16, 2023

View reviewed changes

Gaeun-Kwon reviewed Sep 17, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 김지원 미션 제출합니다. #3

[1주차] 김지원 미션 제출합니다. #3

geeoneee commented Sep 15, 2023 •

edited

Loading

dhshin98 Sep 16, 2023

dhshin98 Sep 16, 2023

dhshin98 Sep 16, 2023

dhshin98 Sep 16, 2023

dhshin98 Sep 16, 2023

flowerseok left a comment

flowerseok Sep 16, 2023

flowerseok Sep 16, 2023

dhshin98 Sep 16, 2023

Gaeun-Kwon Sep 17, 2023

flowerseok Sep 16, 2023

flowerseok Sep 16, 2023

flowerseok Sep 16, 2023

Gaeun-Kwon left a comment

Gaeun-Kwon Sep 17, 2023 •

edited

Loading

Gaeun-Kwon Sep 17, 2023

Gaeun-Kwon Sep 17, 2023

Gaeun-Kwon Sep 17, 2023

	li.appendChild(span);
	li.appendChild(button);
	li.append(span, button);

[1주차] 김지원 미션 제출합니다. #3

Are you sure you want to change the base?

[1주차] 김지원 미션 제출합니다. #3

Conversation

geeoneee commented Sep 15, 2023 • edited Loading

🟪 배포링크

🟪 결과화면

🟪 KEY QUESTIONS

1. DOM은 무엇인가요?

2.HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?

3. Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?

4. Flexbox Layout은 무엇이며, 어떻게 사용하나요?

5.JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?

6.코드에서 주석을 다는 바람직한 방법은 무엇일까요?

🟪 느낀 점

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

flowerseok 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

Gaeun-Kwon left a comment

Choose a reason for hiding this comment

Gaeun-Kwon Sep 17, 2023 • 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

geeoneee commented Sep 15, 2023 •

edited

Loading

Gaeun-Kwon Sep 17, 2023 •

edited

Loading