[1주차] 이규호 미션 제출합니다. #8

kyuhho · 2023-09-15T13:02:47Z

1주차 미션: Vanilla-Todo

배포

Key Questions

DOM은 무엇인가요?

DOM(문서 객체 모델)은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 다시 말해 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다.

DOM은 HTML 문서를 계층적 구조와 정보로 표현하고, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 따라서 HTML DOM 혹은 DOM tree라고 부르기도 한다.

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

createElement

var newDiv = document.createElement('div');

createElement는 지정 tagName의 HTML Element를 생성하는 메서드이다. HTML Element를 생성해 append하기 때문에 node만 삽입이 가능하다.

insertAdjacentHTML

element.insertAdjacentHTML(position, text);

insertAdjacentHTML은 target HTML Element의 특정 위치에 원하는 node를 추가할 수 있는 메서드이다. 가독성이 좋다는 장점이 있다.

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

Semantic은 '의미론적인'이라는 뜻을 가진 형용사이므로 Semantic tag는 의미가 있는 태그를 뜻한다. header, nav, section, article 등의 태그가 이에 해당한다.

HTML 문서의 가독성과 유지보수가 쉽기 때문에 유지보수를 하거나 다른 작업자가 코드를 볼 때 파악하기 쉽다는 장점이 있다. 또한 검색엔진이 검색을 수행할 때 HTML 내의 태그를 분석할 수 있다.

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

Flexbox Layout은 CSS의 display 속성 중 하나로, 요소들을 가로 혹은 세로 축 정렬하고 유연하게 배치하는 레이아웃 모델이다.

CSS container에 display:flex를 이용하여 요소들의 정렬 방식을 조정하거나 정렬 방향을 변경한다. 또한 flex의 다양한 속성을 사용하여 공간을 분배하고 필요에 따라 크기를 조정한다.

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

웹 브라우저에서 직접 실행되는 스크립트 언어이기 때문에 동적인 웹 페이즈를 만들거나 상호작용을 추가할 수 있다.
웹 브라우저 뿐만 아니라 서버 측 애플리케이션 개발에도 사용된다.
javascript를 이용하여 작은 웹 사이트부터 대규모 웹 어플리케이션까지 높은 확장성을 가지고 있다.
javascript는 다양한 라이브러리와 기능이 있어 다양한 기능을 빠르게 구현할 수 있다.

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

주석은 코드의 가독성과 유지보수성을 향상시키기 위해 중요하다.

의도를 설명하는 주석을 작성해야한다. 코드 자체가 무엇을 하는지 설명하는 주석은 필요하지 않다.
중요한 정보나 코드를 강조하기 위해 사용한다.
TODO 및 FIXME와 같은 작업해아할 부분을 주석으로 사용한다.
협업에 있어 주석의 일관성을 가지고 컨벤션을 지키며 작성한다.
과도한 주석은 피한다.

후기

코드의 구조나 여러 메서드의 용도를 정확히 파악하면서 구현하려하다 보니 저의 부족한 부분을 뼈져리게 느꼈습니다.. 차후 과제에서 더 단단해지기 위해 열심히 하겠습니다!! React로만 구현을 하다가 JavaScript로 기능들을 구현하니 부족한 개념도 보완하고 이해도가 높아지는 시간이였습니다!
커밋컨벤션에 맞춰 git을 사용하는 거에 더 익숙해져야할 것 같아 github를 더 유용하게 사용하도록 노력하겠습니다😊

wokbjso · 2023-09-16T13:15:51Z

index.html

+    <div class="container">
+      <div class="header">
+        <div class="logo">TODO-list</div>
+        <div class="description">투두리스트를 작성하고 오늘 하루를 기록해요


작업 전 html의 큰 틀을 잡아두고 하는 건 좋은 방법인 것 같습니다!!
가독성과 SEO 를 위해 헤더 부분은 div 태그 대신 header 태그를 사용하는 것이 어떨까 싶어요 ㅎㅎ

wokbjso · 2023-09-16T13:16:31Z

style.css

+.header{
+    display: flex;
+    height: 150px;
+    width: 500px;


px도 좋지만 특정 화면 뿐만이 아니라 모든 화면에서 서비스를 잘 이용할 수 있도록 media-query 및 rem 단위로 작업을 하시는 것도 좋은 선택이 될 것 같습니다~~

앞으로 rem 단위로 작업하는 습관을 들여야겠네요!!

wokbjso · 2023-09-16T13:17:37Z

script.js

+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    clockTarget.innerText=`${month+1}/${clockDate} ${week[day]}요일 ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ?  `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;//두자릿수 유지를 위한 삼항연산자
+}


중첩된 삼항 연산자 보다는 padStart 라는 함수를 활용하면 좀 더 간편하게 코드를 작성하실 수 있을거 같아요!!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

padStart 함수를 활용해서 작성하는게 삼항연산자보다 훨씬 코드가 깔끔하겠네요!! 다른 기능에서도 유용하게 사용할 것 같아요 ㅎㅎ 감사합니다 😊

wokbjso · 2023-09-16T13:18:14Z

script.js

+    if(todoText==""){
+        alert("TODO를 입력하세요.");
+        return;
+    }


사용자의 입력이 빈 배열이거나 80자가 넘을 시 alert 띄워주는 부분을 addTodo 함수로 넘기기 전에 eventListener안에서 처리를 해주면 Todo를 추가해야하는 함수인 addTodo 함수의 기능이 좀 더 잘 분리되지 않을까 생각합니다 ㅎㅎ.

eventListner에서 예외처리를 해주는게 함수 기능에 더 맞은 구현이겠네요!! 감사합니다!

wokbjso · 2023-09-16T13:18:57Z

script.js

@@ -37,19 +37,38 @@ function addTodo(){
    addTodoInput.value="";
 }
 function handleClick(event){//click 핸들러
-    const clickedElement = event.target;
+    const clickedElement = event.target; // click event element
    if(clickedElement.classList.contains("todoDelete")){
        deleteTodo(clickedElement);


handleClick 함수에 요소의 클래스 이름 여부에 따라 수행하는 동작을 나누는 방법 참신한거 같아요!!!

wokbjso · 2023-09-16T18:26:10Z

script.js

-    const todoCards = document.querySelector(".todoCards");
-    todoCards.removeChild(todoCard);
+    const Cards = todoCard.parentElement;
+    if(todoCard.checked){//done에서 지우기


변수의 시작은 소문자로 통일해 주는게 좋을 거 같아요 ㅎㅎ

lowerCamelCase를 잘 지켜야겠네요! 감사합니다 ㅎㅎ

moong23

안녕하세요
프론트 파트장 김문기입니다.

심플한 UI이지만 심플하지만은 않은 기능들이 눈길을 사로잡았던 과제인것 같습니다.

일주일동안 과제하시느라구 고생 많으셨고 스터디에서 뵙겠습니다~! :)

moong23 · 2023-09-16T19:13:06Z

script.js

+    todoCard.appendChild(todoElem);
+    todoCard.appendChild(checkbox);
+    todoCard.appendChild(todoDelete);


여러 개의 child를 append해야하는 경우 append()메서드를 사용하여

Suggested change

todoCard.appendChild(todoElem);

todoCard.appendChild(checkbox);

todoCard.appendChild(todoDelete);

todoCard.append(todoElem, checkbox, todoDelete);

와 같이 한줄로도 작성할 수 있습니다~!

코드를 훨씬 간결하게 작성할 수 있겠네요! 다음번엔 적용시켜서 작성하겠습니다!

moong23 · 2023-09-16T19:14:25Z

script.js

+function saveTodos(){
+    const todoCards = document.querySelectorAll(".todoCard");
+    const todos = [];
+    todoCards.forEach((todoCard)=>{
+            const todoElem = todoCard.querySelector(".todoElem").textContent;
+            const isChecked = todoCard.querySelector("input[type='checkbox']").checked;
+            todos.push({text: todoElem , checked : isChecked});
+        }
+    )
+    localStorage.setItem("data",JSON.stringify(todos));
+
+}


해당 함수에서 사용하는 todoCards는 함수가 실행될 때 마다 새로 만들어서 관리하는 것 보다
전역변수로 사용하면서 필요시 추가 / 삭제를 하는것이 조금 더 효율적이지 않을까 싶어요!

saveTodos가 불릴 때마다 배열을 새로 생성하는 것보다 전역변수를 사용하는게 훨씬 효율적이겠네요😥 감사합니다 ㅎㅎ

moong23 · 2023-09-16T19:15:38Z

script.js

+                const doneCards= document.querySelector(".doneCards");
+                doneCards.appendChild(todoCard)
+                todoCard.classList.add("checked");
+                todoElem.style.textDecoration = "line-through";


취소선 디테일 👍👍👍

moong23 · 2023-09-16T19:16:52Z

script.js

+        const localTodos = "[]";
+        localStorage.setItem("data",localTodos);


이 부분은 조금 더 직관적으로 없을 경우에는 빈 배열을 넣는다라고 하기 위해

Suggested change

const localTodos = "[]";

localStorage.setItem("data",localTodos);

localStorage.setItem("data",'[]');

와 적는것은 어떠한지 개인적인 의견을 드려봅니다!

훨씬 직관적인거 같습니다! 앞으로 코드 작성할 때 이렇게 구현해보겠습니다 ㅎㅎ

moong23 · 2023-09-16T19:53:37Z

script.js

+// clock 출력
+function clock(){
+    const date = new Date();
+    const month = date.getMonth();


date객체에서 getMonth를 통해 달을 가져올 때

Suggested change

const month = date.getMonth();

const month = date.getMonth() + 1;

을 통해 변수의 초기값 자체를 고친 값으로 수정해주면 변수를 재사용할 때 좀더 용이하지 않을까 싶네요!

moong23 · 2023-09-16T19:54:29Z

script.js

+
+function init(){
+    clock();
+    setInterval(clock,1000);


초단위의 rerendering을 위해 setInterval 사용하신 점 인상깊네요 👍

moong23 · 2023-09-16T19:56:36Z

style.css

+.todoList{
+    display:flex;
+    flex-direction: column;
+    width: 450px;
+}


이 부분에 height 최대값을 정해준 후, 그 이상의 영역이 필요한 경우
overflow-y: scroll으로 스크롤을 달아주면 더 좋은 UI가 만들어지지 않을까 싶습니다~!

text가 영역을 넘어가지 않도록 text 제한을 두었는데, 그보다 overflow-y : scroll 을 사용하는게 더 좋은 방법이겠네요!!

moong23 · 2023-09-16T19:57:35Z

style.css

+    border-radius: 6px;
+    width: 35px;
+    margin-left: 5px;
+    transition : border 0.3s, color 0.3s;


transition을 통한 animation효과도 완성도를 높이는데 한 몫 한 것 같아요!! 🔥🔥🔥🔥

moong23 · 2023-09-16T20:00:27Z

style.css

+.todoDelete{
+    border: none;
+    margin-bottom: 80px;
+    margin-right: 5px;
+    font-size: 7px;
+    border-radius: 2px;
+    transition : background-color 0.3s;
+}


이 부분에서 x 버튼을 flex를 통해 잡아주셨는데,
부모 component에 position: relative;를 달아주고
todoDelete에 position: absolute; 를 통해 부모의 범위 안에서 right, top값의 조절을 통해 달아주어도 괜찮을 것 같다는 의견입니다!

x버튼을 일관된 위치에 지정하는 방법을 찾다가 해결책으로 flex-grow를 사용하였는데, position을 활용하면 훨씬 간단한 문제였네요 ㅠㅠ 감사합니다!!

moong23 · 2023-09-16T20:03:24Z

script.js

+addTodoInput.addEventListener("keyup", (e)=>{
+    if(e.key === "Enter"){
+        addTodo();
+    }
+})


이 부분은 확실하진 않은데, 한글을 입력한 후 엔터키를 통해 todo를 등록하려 하면
엔터키가 두번 눌린 것으로 인식되는 에러가 있는 것 같아요.
아래 제가 해당 현상을 해결할 때 사용했던 참고자료 링크로 달아놓을게요 참고해보시면 좋을 것 같습니다.
참고자료

참고자료 다 읽어보았습니다! 해당 에러가 발생하는 줄 몰랐는데 앞으로 keyup/keydown 한글 입력 시에 링크 방법을 적용해서 구현해야겠습니다 ㅎㅎ

rmdnps10

UI가 심플하지만 아주 깔끔한 것 같아요 ㅎㅎㅎ 고생많으셨습니다

rmdnps10 · 2023-09-17T02:34:31Z

style.css

+
+}
+.todoCard{
+    background-color: #ECECEC;


자주 쓰이는 색상 코드의 경우 사용자 정의변수로 등록하여 var(--)함수를 통해 직관적인 변수를 통해 이용할 수도 있을 것 같아요~!

반복되는 색상을 등록하여 사용하는게 훨씬 가독성이 좋겠네요!

rmdnps10 · 2023-09-17T02:58:52Z

script.js

-    console.log("clicked");
-})
+function addTodo(){
+    const todoText = addTodoInput.value.trim();


trim 메서드를 사용하여 공백 입력 방지 하는 부분 인상깊네요 ㅎㅎ

rmdnps10 · 2023-09-17T03:05:01Z

script.js

+    todoCards.appendChild(todoCard);
+
+    addTodoInput.value="";
+}
+function handleClick(event){//click 핸들러
+    const clickedElement = event.target;
+    if(clickedElement.classList.contains("todoDelete")){
+        deleteTodo(clickedElement);


clickedElement가 특정 클래스명을 포함하느냐에 따라 반복문을 구성하셨는데, 클래스 이름 덕분에 굉장히 직관적으로 기능에 따른 할 일이 구분되어져있는 것 같네요~!

rmdnps10 · 2023-09-17T03:06:18Z

style.css

+    margin-right: 5px;
+    font-size: 7px;
+    border-radius: 2px;
+    transition : background-color 0.3s;


transition 디테일 좋습니다 😊

rmdnps10 · 2023-09-17T03:20:40Z

style.css

 .todoElem{
-    padding-left:30px;
+    flex:1; /*여백 다 채우게끔*/


전 flex-grow만 많이 보고 이번에 flex: 1이라는 속성을 처음 봤는데, flex-grow, flex-shrink, flex-basis를 단축적으로 지정하는 속성이었군요! 또 하나 배우고 갑니디 😄

kyuhho added 7 commits September 12, 2023 20:27

[feat]: HTML & CSS 기본구조 구현

3002b55

[feat]: input, add button 추

433ba75

[feat]: 시계 구현

bd2e97d

[feat]: add,delelte 구현

e3f911c

[feat]: 체크박스 체크, todo와 done 구분하여 나열

7db23fe

[feat]: todo/done 구분기능, localStorage 저장 구현

25bc6c0

[docs]: update README

0200119

wokbjso reviewed Sep 16, 2023

View reviewed changes

moong23 reviewed Sep 16, 2023

View reviewed changes

rmdnps10 reviewed Sep 17, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 이규호 미션 제출합니다. #8

[1주차] 이규호 미션 제출합니다. #8

kyuhho commented Sep 15, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

kyuhho Sep 17, 2023

wokbjso Sep 16, 2023

kyuhho Sep 17, 2023

wokbjso Sep 16, 2023

kyuhho Sep 17, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

kyuhho Sep 17, 2023

moong23 left a comment

moong23 Sep 16, 2023

kyuhho Sep 17, 2023

moong23 Sep 16, 2023

kyuhho Sep 17, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

kyuhho Sep 17, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

kyuhho Sep 17, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

kyuhho Sep 17, 2023

moong23 Sep 16, 2023

kyuhho Sep 17, 2023

rmdnps10 left a comment

rmdnps10 Sep 17, 2023

kyuhho Sep 17, 2023

rmdnps10 Sep 17, 2023

rmdnps10 Sep 17, 2023

rmdnps10 Sep 17, 2023

rmdnps10 Sep 17, 2023

		const localTodos = "[]";
		localStorage.setItem("data",localTodos);

	const localTodos = "[]";
	localStorage.setItem("data",localTodos);
	localStorage.setItem("data",'[]');

	const month = date.getMonth();
	const month = date.getMonth() + 1;

[1주차] 이규호 미션 제출합니다. #8

Are you sure you want to change the base?

[1주차] 이규호 미션 제출합니다. #8

Conversation

kyuhho commented Sep 15, 2023

1주차 미션: Vanilla-Todo

배포

Key Questions

후기

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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rmdnps10 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