[1주차] 송지석 미션 제출합니다. #6

flowerseok · 2023-09-15T10:49:02Z

[1주차]
공부하면서 천천히 해봤는데 너무 부족한 것을 잘 알 수 있었습니다. 비난과 비판 모조리 환영합니다. 욕을 먹어야 내 안의 분노로부터 빠르게 발전할 수 있는 계기라고 생각합니다. 제 실력에 대해 부족함을 알고 있으므로, 부담없이 패 주십시오. 많이 배워가겠습니다.

[배포링크]
송지석 배포

[Key Questions]

DOM은 무엇인가요? 
Document Object Model(DOM)은 HTML과 XML 문서를 프로그래밍 언어로 조작하기 위한 표준 모델입니다. 이는 문서의 구조를 트리 형태의 노드와 객체로 표현하여 웹 페이지의 구조, 스타일, 내용을 동적으로 변경할 수 있게 해줍니다.
HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요? 
createElement(), innerHTML, insertAdjacentHTML() 등 여러 방법이 있습니다. createElement() 메서드는 다른 방법보다 보안상 이점이 있고, 동적으로 원소를 생성하고 조작하기가 더 간편하므로 일반적으로 가장 적합하다고 볼 수 있습니다.
Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요? 
<header>, <main>, <section>, <article>, <aside>, <footer>, <nav> 등이 있습니다. 이러한 의미론적 태그를 사용하면 웹 페이지의 구조가 명확해져 코드의 가독성과 이해도가 높아집니다. 또한, 검색 엔진 최적화(SEO)와 웹 접근성에도 긍정적인 영향을 미칩니다.
Flexbox Layout은 무엇이며, 어떻게 사용하나요?
 Flexbox는 1차원 레이아웃 모델로, 아이템 간의 공간 배분과 정렬을 쉽게 할 수 있습니다. 부모 요소에 display: flex; 스타일을 적용하면 자식 요소들을 유연하게 배치할 수 있으며, 축 설정과 정렬 방향을 자유롭게 선택할 수 있습니다.
JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요? 
JavaScript는 배우기 쉽고 다루기 편리한 언어입니다. 또한, 운영 체제에 종속되지 않고 실행되며, 웹 서버에 주는 부담도 적습니다. 또한, 온라인 커뮤니티와 자료가 풍부하여 학습이 더욱 용이합니다.
코드에서 주석을 다는 바람직한 방법은 무엇일까요?
주석을 작성하는 가장 바람직한 방법은 코드를 읽는 이에게 최대한 이해가 쉽도록 하는 것입니다. 복잡하거나 중요한 코드 부분에 주석을 추가함으로써, 코드 리뷰나 리팩토링 과정을 더 원활하게 할 수 있습니다.

Seoksong

[style] form 추가

leejin-rho

과제 수고하셨습니다~~!!

leejin-rho · 2023-09-16T05:45:18Z

script.js

+  localStorage.setItem("todoStore", JSON.stringify(todoStore));
+  localStorage.setItem("doneStore", JSON.stringify(doneStore));
+}
+


주석을 써주시면 코드 이해가 더 쉬울 것 같아요..!

leejin-rho · 2023-09-16T13:31:17Z

style.css

+    background-color: #000000;
+    color: #fff;
+    border-radius: 5px;
+    line-height: 18px;


cursor : pointer 써서 버튼 위에 커서 올라갔을 때 포인터로 변하게 해도 좋을 것 같아요~!

leejin-rho · 2023-09-16T15:18:08Z

style.css

+    margin-right: 5px; 
+}
+
+.delete-button:hover {


hover 사용해서 버튼에서 빛나는 것처럼 한 거 멋있어요~

leejin-rho · 2023-09-16T15:39:50Z

script.js

+}
+
+function addTodo() {
+  const todoText = todoInput.value.trim();


trim() 사용하셔서 공백제거해주신거 좋은 것 같아요

leejin-rho · 2023-09-16T15:47:04Z

style.css

+    min-height: 152px; 
+    max-height: 152px ;
+    /* align-items:flex-start; */
+    overflow-y: auto;


overflow 됐을 때 스크롤바 때문에 삭제 버튼 위치가 변하니까 스크롤바를 안보이게 해도 좋을 것 같습니다..!

leejin-rho · 2023-09-16T15:47:53Z

script.js

+
+  deleteButton.textContent = "X";
+  deleteButton.className = "delete-button";
+  deleteButton.addEventListener("click", deleteTodo);


저는 그냥 아이콘으로 넣었는데 이렇게 버튼으로 만드는 것도 좋은 것 같아요!

leejin-rho · 2023-09-16T16:01:02Z

script.js

+  if (todoText === "") {
+    return;
+  }
+  const todoId = new Date().toISOString();


저는 id값은 생각 안 했는데 현재 시간으로 id 넣어주신거 좋은 것 같아요~

leejin-rho · 2023-09-16T16:13:22Z

index.html

    <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" sizes="120x120" href="tiger.png" />


저는 파비콘은 넣을 생각을 안했는데 호랑이 넣으신거 멋져요~!

파비콘 짱~~~

파비콘 좋아요~~₩

geeoneee · 2023-09-17T05:15:47Z

과제 수고하셨습니다:)

geeoneee

귀여운 파비콘이 인상적인 것 같아요:) 과제 수고하셨습니다!

geeoneee · 2023-09-16T16:46:00Z

index.html

-    <div class="container"></div>
+    <main>
+    <h1>할 일</h1>
+    <section class="input"> 


저는 SECTION 태그를 사용하지 않고 DIV 태그를 사용했어서 두 태그가 무슨 차이가 있는지 찾아보았습니다! 링크
지석님처럼 시멘틱 태그를 이용하면 컨텐츠의 구조나 의미를 더 잘 파악할 수 있을 것 같아요. 배워갑니당:)

geeoneee · 2023-09-16T16:57:30Z

style.css

@@ -0,0 +1,110 @@
+main {


CSS 단위 설정하실 때 픽셀(px) 단위가 아닌 rem, em 등을 사용해보시는 것도 좋을 것 같아요! REM이 반응형 디자인에서 유용하게 사용된다고 하더라구요! 저도 px 쓰는게 습관이 돼서 최대한 rem 써보려고 노력 중입니다!ㅎㅎ
관련 기술블로그 링크 남겨드려요!

geeoneee · 2023-09-16T17:01:03Z

style.css

+.delete-button:active {
+    transform: scale(1);
+    box-shadow: 0 4px 10px rgba(255,105,180, 0.2); 
+}


삭제 버튼에 그림자 넣는 디테일...! 너무 좋은 것 같아요:):)

geeoneee · 2023-09-17T05:03:39Z

script.js

+    }
+    todoItem.remove();
+    saveTodos();
+  }


deleteTodo 함수에서 id로 todo 항목인지 done 항목인지 구별하고 한 번에 todolist와 donelist의 삭제를 처리하는 것 좋은 것 같아요! 많이 배워갑니당:)

geeoneee · 2023-09-17T05:12:04Z

script.js

+    }
+    todoItem.remove();
+    saveTodos();
+  }


deleteTodo 함수 안에서 한 번에 처리하는 건 좋은데, 가독성을 위해 함수 밖에서 parentListId를 사용하여 할 일 목록과 완료된 일 목록을 확인하는 코드도 좋을 것 같아요!

function deleteTodo(event) { event.stopPropagation(); const todoItem = event.target.parentNode; const todoId = todoItem.id; const parentListId = todoItem.parentNode.id; const store = parentListId === "todo-list" ? todoStore : doneStore; const index = store.findIndex((item) => item.id === todoId); if (index !== -1) { store.splice(index, 1); todoItem.remove(); saveTodos(); } }```

geeoneee · 2023-09-17T05:13:54Z

script.js

+      const [movedDone] = doneStore.splice(doneIndex, 1);
+      todoStore.push(movedDone);
+    }
+  }


가독성을 위해 todo-list 인지 done-list인지 확인하는 기능을 함수 밖에서 처리하고 함수 내에서는 switchTodo 기능을 하도록 하는 코드도 좋을 것 같습니다!

westofsky

안녕하세요 프론트 운영진 배성준입니다!! 과제 너무 고생하셨어요~~~

코드가 되게 깔끔하게 짜 있어서 재미있게 코드리뷰 했습니다 ㅎㅎ 선택사항까지 구현하시다니.. 역시 시간부자 ???????
reset css, 함수 분리 등과 같은 코멘트 달았습니다 참고해주시면 좋을 것 같아요!!!

westofsky · 2023-09-17T03:58:50Z

index.html

    <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" sizes="120x120" href="tiger.png" />


파비콘 짱~~~

westofsky · 2023-09-17T04:00:31Z

script.js

+function saveTodos() {
+  localStorage.setItem("todoStore", JSON.stringify(todoStore));
+  localStorage.setItem("doneStore", JSON.stringify(doneStore));
+}


선택구현인 로스까지 굿굿입니당

westofsky · 2023-09-17T05:22:35Z

style.css

+.todo-item {
+    display: flex;
+    justify-content: space-between; 
+    align-items: flex-end; 
+    padding: 10px;
+    font-size: 18px;
+    border-bottom: 1px solid #ffffff;
+
+
+}


영어에 대해서는 엔터처리가 안돼있어서 word-break: break-all; 넣어도 좋을 것 같습니다!

Suggested change

.todo-item {

display: flex;

justify-content: space-between;

align-items: flex-end;

padding: 10px;

font-size: 18px;

border-bottom: 1px solid #ffffff;

}

.todo-item {

display: flex;

justify-content: space-between;

align-items: flex-end;

padding: 10px;

font-size: 18px;

border-bottom: 1px solid #ffffff;

word-break: break-all;

}

westofsky · 2023-09-17T07:21:13Z

script.js

+function switchTodo(event) {
+  let clickedTodo = event.currentTarget;
+  const todoId = clickedTodo.id;
+
+  if (clickedTodo.parentNode.id === "todo-list") {
+    doneList.appendChild(clickedTodo);
+    const todoIndex = todoStore.findIndex((todo) => todo.id === todoId);
+    if (todoIndex !== -1) {
+      const [movedTodo] = todoStore.splice(todoIndex, 1);
+      doneStore.push(movedTodo);
+    }
+  } else {
+    todoList.appendChild(clickedTodo);
+    const doneIndex = doneStore.findIndex((done) => done.id === todoId);
+    if (doneIndex !== -1) {
+      const [movedDone] = doneStore.splice(doneIndex, 1);
+      todoStore.push(movedDone);
+    }
+  }
+  saveTodos();
+}


중복코드를 줄이고 함수의 역할을 살짝 분리해보는건 어떨까요 ???

Suggested change

function switchTodo(event) {

let clickedTodo = event.currentTarget;

const todoId = clickedTodo.id;

if (clickedTodo.parentNode.id === "todo-list") {

doneList.appendChild(clickedTodo);

const todoIndex = todoStore.findIndex((todo) => todo.id === todoId);

if (todoIndex !== -1) {

const [movedTodo] = todoStore.splice(todoIndex, 1);

doneStore.push(movedTodo);

}

} else {

todoList.appendChild(clickedTodo);

const doneIndex = doneStore.findIndex((done) => done.id === todoId);

if (doneIndex !== -1) {

const [movedDone] = doneStore.splice(doneIndex, 1);

todoStore.push(movedDone);

}

}

saveTodos();

}

function switchTodo(event) {

const clickedTodo = event.currentTarget;

const todoId = clickedTodo.id;

const isTodoList = clickedTodo.parentNode.id === "todo-list";

if (isTodoList) {

doneList.appendChild(clickedTodo);

moveItem(todoId, todoStore, doneStore);

} else {

todoList.appendChild(clickedTodo);

moveItem(todoId, doneStore, todoStore);

}

saveTodos();

}

function moveItem(itemId, sourceStore, destinationStore) {

const itemIndex = sourceStore.findIndex((item) => item.id === itemId);

if (itemIndex !== -1) {

const [movedItem] = sourceStore.splice(itemIndex, 1);

destinationStore.push(movedItem);

}

}

westofsky · 2023-09-17T07:26:51Z

index.html

+    <main>
+    <h1>할 일</h1>
+    <section class="input"> 
+      <form id="enter-todo">
+        <input type="text" id="todo-input" placeholder="Add here">
+        <button type="button" id="add-button">Add</button>
+      </form>
+    </section>
+  <h2>To do</h2>
+    <section class="Todo">
+
+      <ul id="todo-list"></ul>
+    </section>
+  <h2>Done</h2>
+    <section class="Done">
+
+      <ul id="done-list"></ul>
+    </section>
+    </main>


�시멘틱태그 사용하신 것 너무 좋아요~~근데 들여쓰기 무슨일인가요 ????

westofsky · 2023-09-17T07:27:23Z

script.js

+}
+
+function deleteTodo(event) {
+    event.stopPropagation();


버블링 막아준 것 너무 좋습니당~~

westofsky · 2023-09-17T07:29:03Z

script.js

+function deleteTodo(event) {
+    event.stopPropagation();
+    const todoItem = event.target.parentNode;
+    const todoId = todoItem.id;
+
+    if (todoItem.parentNode.id === "todo-list") {
+      const index = todoStore.findIndex((todo) => todo.id === todoId);
+      if (index !== -1) {
+        todoStore.splice(index, 1);
+      }
+    } else {
+      const index = doneStore.findIndex((done) => done.id === todoId);
+      if (index !== -1) {
+        doneStore.splice(index, 1);
+      }
+    }
+    todoItem.remove();
+    saveTodos();
+  }


여기도 기능을 조금 분리하면 가독성이 더 좋을 것 같아요!!

Suggested change

function deleteTodo(event) {

event.stopPropagation();

const todoItem = event.target.parentNode;

const todoId = todoItem.id;

if (todoItem.parentNode.id === "todo-list") {

const index = todoStore.findIndex((todo) => todo.id === todoId);

if (index !== -1) {

todoStore.splice(index, 1);

}

} else {

const index = doneStore.findIndex((done) => done.id === todoId);

if (index !== -1) {

doneStore.splice(index, 1);

}

}

todoItem.remove();

saveTodos();

}

function deleteTodo(event) {

event.stopPropagation();

const todoItem = event.target.parentNode;

const todoId = todoItem.id;

const isTodoList = todoItem.parentNode.id === "todo-list";

if (isTodoList) {

deleteItem(todoId, todoStore);

} else {

deleteItem(todoId, doneStore);

}

todoItem.remove();

saveTodos();

}

function deleteItem(itemId, store) {

const index = store.findIndex((item) => item.id === itemId);

if (index !== -1) {

store.splice(index, 1);

}

}

westofsky · 2023-09-17T07:37:04Z

script.js

+function loadTodos() {
+  const loadedTodoStore = JSON.parse(localStorage.getItem("todoStore"));
+  const loadedDoneStore = JSON.parse(localStorage.getItem("doneStore"));
+
+  loadedTodoStore.forEach((todo) => {
+    addTodoItem(todo.text, todo.id, todoList, todoStore);
+  });
+  loadedDoneStore.forEach((done) => {
+    addTodoItem(done.text, done.id, doneList, doneStore);
+  });
+}
+
+addButton.addEventListener("click", addTodo);
+
+loadTodos();


데이터 초기 설정이나 위에도 있는데 처음에 실행해야하는 eventListener가 있으면 init()함수로 묶어서 처리해도 될 것 같아요~~

westofsky · 2023-09-17T07:42:47Z

style.css

+section.Todo ul ,section.Done ul{
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+


브라우저 내장 style때문에 태그에 적용되어있는 margin,padding 등을 제어헤주신 것 같은데 태그마다 설정해주기 힘들기때문에 전체적으로 reset시켜주는 것도 방법입니다! css리셋 한번 확인해보시면 좋을 것 같아요 !

moong23

안녕하세요
프론트 파트장 김문기입니다
고생하셨어요~!!!

moong23 · 2023-09-17T09:00:31Z

index.html

    <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" sizes="120x120" href="tiger.png" />


파비콘 좋아요~~₩

moong23 · 2023-09-17T09:00:58Z

script.js

+  newTodo.appendChild(newTodoText);
+  newTodo.appendChild(deleteButton);


Suggested change

newTodo.appendChild(newTodoText);

newTodo.appendChild(deleteButton);

newTodo.append(newTodoText, deleteButton);

을 통해 한줄로 쓸 수 있어요~!

flowerseok and others added 9 commits September 14, 2023 19:13

[feat] 기본 index.html 작성

c4aa0a2

[chore] ul 추가

07fcee7

[chore] 자잘한 수정

1177a80

[feat] css 추가

139d728

[feat] js

0d7c36c

[empty] this is a empty commit

1032cdb

Merge pull request #1 from flowerseok/seoksong

fa1880a

Seoksong

[style] form 추가

9c30dd8

Merge pull request #2 from flowerseok/seoksong

80e9155

[style] form 추가

leejin-rho reviewed Sep 16, 2023

View reviewed changes

geeoneee reviewed Sep 17, 2023

View reviewed changes

westofsky reviewed Sep 17, 2023

View reviewed changes

moong23 reviewed Sep 17, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 송지석 미션 제출합니다. #6

[1주차] 송지석 미션 제출합니다. #6

flowerseok commented Sep 15, 2023

leejin-rho left a comment

leejin-rho Sep 16, 2023

leejin-rho Sep 16, 2023

leejin-rho Sep 16, 2023

leejin-rho Sep 16, 2023

leejin-rho Sep 16, 2023

leejin-rho Sep 16, 2023

leejin-rho Sep 16, 2023

leejin-rho Sep 16, 2023

westofsky Sep 17, 2023

moong23 Sep 17, 2023

geeoneee commented Sep 17, 2023

geeoneee left a comment

geeoneee Sep 16, 2023

geeoneee Sep 16, 2023

geeoneee Sep 16, 2023

geeoneee Sep 17, 2023

geeoneee Sep 17, 2023

geeoneee Sep 17, 2023

westofsky left a comment

westofsky Sep 17, 2023

westofsky Sep 17, 2023

westofsky Sep 17, 2023

westofsky Sep 17, 2023

westofsky Sep 17, 2023

westofsky Sep 17, 2023

westofsky Sep 17, 2023

westofsky Sep 17, 2023

westofsky Sep 17, 2023

moong23 left a comment

moong23 Sep 17, 2023

moong23 Sep 17, 2023

		<link rel="stylesheet" href="style.css" />
		<link rel="shortcut icon" sizes="120x120" href="tiger.png" />

		newTodo.appendChild(newTodoText);
		newTodo.appendChild(deleteButton);

	newTodo.appendChild(newTodoText);
	newTodo.appendChild(deleteButton);
	newTodo.append(newTodoText, deleteButton);

[1주차] 송지석 미션 제출합니다. #6

Are you sure you want to change the base?

[1주차] 송지석 미션 제출합니다. #6

Conversation

flowerseok commented Sep 15, 2023

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

Choose a reason for hiding this comment

geeoneee commented Sep 17, 2023

geeoneee 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

westofsky 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

moong23 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment