[1주차] 변지혜 미션 제출합니다. #10

mod-siw · 2023-09-15T13:56:02Z

1주차 미션: Vanilla-Todo

안녕하세요! 18기 프론트 변지혜입니다😄
조금은 빡빡하게 작성했지만... 그래도 최선을 다했습니다.
안좋은 습관이 많이 들어있다는 걸 다시금 체감했네요...ㅎㅎ
React의 소중함을 깨닫기도 하고, 잊고 있던 JS 지식도 되돌아보는 기회가 된 것 같습니다.

정말 최근에 마크다운 언어 쓰는 법을 익혀서 이것저것 많이 써봤는데요!
개발하는 것만큼 열심히 이것저것 썼다만 너무 의욕만 앞선 것 같기도 합니다.
읽기에 불편하지 않기를 바라며... PR 보냅니다☺️

Key Questions

DOM은 무엇인가요?

웹페이지의 HTML을 계층화하여 트리구조로 만든 객체 모델.

HTML의 태그를 객체 (object)로 만들어 JS에서 HTML에 접근하고 수정할 수 있게 함.

각각의 요소를 노드라 하고, 부모 노드, 자식 노드 사이의 계층 구조로 이루어짐.

동적인 웹페이지를 위해 JS로 DOM을 조작하여 html의 document와 element에 접근함.
HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
1. document.createElement ("만들 element 태그명")
  
  새로운 element를 만들어 .append를 통해 원하는 요소와 연결하여 DOM 트리 반영 가능
2. document.createTextNode ("텍스트 내용")
  
  새로운 텍스트 노드 생성. 마찬가지로 연결 가능하며 텍스트 노드만 생성 가능
저는 1번 방법이 직관적이고 익숙해서인지 1번 방법을 주로 사용했습니다.
다양한 태그에도 적용 가능하여 활용성이 좋다고 생각합니다!
Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?
<header>: 페이지 머리말을 정의 (로고, 제목, 대표 이미지 등)

<nav>: 보통 메뉴바 등에 사용

<main>: 문서의 주요 콘텐츠

<section>: 문서 내의 논리구조 상 분리되는 영역 정의

<article>: 독립적인 컨텐츠 블록으 개별 컨텐츠에 사용

<aside>: 사이드바나 광고와 같은 보조 정보

<footer>: 저작권 정보, 연락처 정보 등을 포함
1. 코드 분석 용이 : 협업할 때 코드의 대략적인 기능 구조를 보다 쉽게 이해 가능
2. 검색 엔진 최적화 : 페이지 색인에 적합, 관련 검색 결과 노출 가능성 높임

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

레이아웃을 배치하기 위해 고안된 기능. 1차원 배치에 적합하며 하나의 행/열과 같은 형태로 이해할 수 있습니다.

css나 스타일 컴포넌트 안에서 display : flex;를 통해 설정할 수 있습니다.

flex-direction을 통해 정렬 방향을, flex-wrap을 통해 줄바꿈 속성을 설정할 수 있습니다.

justify-contents는 메인 축 정렬을, align-items는 메인 축 수직 방향 정렬을 설정합니다.

Flex 전반적인 설명

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

저에게 가장 크게 다가온 장점은... 동적인 웹 페이지를 만들 수 있다는 점입니다.

click, submit 등 특정 이벤트들에 따라 다양한 기능들을 상상할 수 있게 해준다는 점이 제일 좋았어요.

React와 같은 라이브러리가 있다는 점도 큰 장점이라고 생각합니다!

아직 많이 배우지는 못했지만 더 다양한 JS 라이브러리가 있다고 알고 있어요.

활용 범주가 넓고, 그만큼 다양하게 쓰인다는 점도 꼽을 수 있을 것 같습니다.

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

저는 보통 주석을 달 때, 기능 단위로 나눠 표시하는 부분에 가시성 좋게 달려고 합니다.

코드가 길어질수록 유지/보수 시에 어디에 어떤 기능 관련 코드가 있는지를 모르는 경우가 생겨 방지 차원에서요!

또한 복잡한 로직의 함수 구현시 스스로도 협업자도 놓칠 수 있는 부분에 길지 않은 설명으로 사용하는 것입니다.

사실 주석 처리는 특정 함수 구현할 때 이리저리 바꿔보며 많이 쓰게 되는데요,

테스트할 때는 좋지만 PR이나 최종 완성 시에는 꼭 위 용도로 사용한 주석은 삭제하면 좋을 것 같습니다.

필수 요건 설명

배포 링크
CSS의 Flexbox의 경우, ~~grid를 딱... 한 번 쓰긴 했지만...~~ 그 외에는 모두 flex 사용했습니다!
html, css, js로 코드 작성하였습니다.
제 나쁜 습관 중 하나가 commit을 뜸하게 날린다는 것인데요..!

초반에는 노력했으나 후반부 타임어택 이슈로 듬성한 commit을 남기게 되어 조금은 아쉽습니다🥲

기능 설명

(볼륨이 작아서 뺄까 고민했지만 그래도 적어봅니다...)

시작 화면	입력창	실행 화면

처음 화면에 있는 회색 바는 입력창이 아니라 progress bar입니다!
왼쪽의 연필 모양 아이콘을 클릭하시면 입력창이 나타나요.
list item hover하면 색이 바뀌는 동시에 삭제 버튼도 나타납니다.
donelist로 이동하면 progress bar에도 반영이 됩니다! (입력창에서 다시 돌아가주세요.)
progress bar 오른편에는 끝낸 항목 / 전체 항목을 숫자로 나타냈습니다.
중간중간 소소하게 트랜지션을 넣어봤으니 한 번 봐주시면 감사하겠습니다😊

아쉬운 점 + 더 구현하고 싶은 기능

아쉬운점

코드를 더 효율적으로 써야할 것 같습니다.

기능 구현이 최우선이라는 마인드를 버리고 싶었지만... 해당 마인드가 여전히 남아있는 코드들입니다ㅜㅜ

앞으로는 처음 짤 때부터 어떤 방식이 효율적일까 좀 더 고민하고서 써내려가고 싶습니다.

todo, done 파트를 나눠 일일이 함수를 만들었는데, 이를 하나로 묶은 경우를 전 기수 코드에서 보고 많이 반성했습니다..🥺

css 같은 경우도 background img 설정은 한 줄로 묶을 수 있는 게 많았는데 놓쳐서 아쉽습니다.
애매한 반응형... ( 글씨 크기!!)

최대한 px 단위로 지정하지 않으려 노력했지만... 그리고 이런저런 다양한 꼼수들을 써봤지만 반응형은 쉽지 않네요.

특히 글자 크기도 %나 다른 단위를 사용했으면 좋았겠다는 생각이 많이 듭니다.

보신다면 150% 추천, 적어도 100% 이상으로 봐주시면 감사하겠습니다..ㅎㅎ
사용자 편의성?

삭제 버튼을 원래는 hover 시에 뜨는 게 아니라 떠있는 상태로 디자인해서인지 text와 꽤 떨어져있는데요.

정렬되어 있는 깔끔함을 선택할까 편의성을 고려할까 하다가 일단은 원래대로 해놓았습니다.

삭제 버튼 크기를 줄여서 깔끔하게 뜨되 편하게 누를 수 있는 위치에 놓았어도 좋았을 것 같습니다.

더 구현해보고 싶은 기능

progress 상태에 따라 전체 style color 변경

원래 처음 하고 싶었던 것은 progress 에 따라 border, list item 등 전체적인 style color가 그라데이션으로 바뀌는 것을 해보고 싶었어요. 그래서 너무 React만 썼었는지... progress 비율에 따라 색을 지정하는 함수를 만들고, 이를 props ~~(여기부터 vanilla로는 글렀다고 생각하긴 했네요...)~~ 로 전달하면 가능하지 않을까! 싶었습니다. 하지만 가뜩이나 시간도 부족해서 이를 구현할 시간이 택도 없었기에..^^ 정해진 색으로 우선 제출해보았습니다.
날짜 부분 달력 형태로 나타내기
localstorage 값에 날짜에 따른 todolist를 넣어보면 어떨까 싶기도 했는데요. 그러면 날짜별로 list가 달라져서 이용하기가 불편할 것 같다는 생각이 들어... 달력 형태로 하되 드래그 앤 드롭 기능으로 item들 옮길 수 있으면 좋지 않을까 생각만 해봤습니다...ㅎㅎ 그래도 디자인적인 면에서 달력으로도 나타낼 수 있으면 좋을 것 같습니다!

링크 및 참고자료

로컬에서 만든 branch 안 보일 때
Git add, commit, push 취소하기
배경 이미지 관련 CSS

이건 자료는 찾아봤지만 시간과 디자인 감각 부족으로 실패한..^^ 달력 관련 자료입니다!
자바 스크립트를 이용한 달력 만들기

wokbjso · 2023-09-16T13:24:08Z

index.html

@@ -8,7 +8,30 @@
  </head>

  <body>
-    <div class="container"></div>
+    <main>
+      <section class="container">


semantic tag 들 적극 사용하는 습관 아주 좋은 것 같습니다!!

wokbjso · 2023-09-16T13:49:26Z

todoList.js

+  todoItem.appendChild(todoText);
+  document.querySelector(".todo-list").appendChild(todoItem);
+
+  // input 창 초기화


printTodoItem 함수에서 한번 더 input 을 불러와서 value를 비워주는 것 보다는 addTodoItem 함수에서 이미 선언한 input이 있으므로 여기서 printTodoItem 을 호출한 후 value 비움 처리를 하는것이 더 효율적이지 않을까 생각합니다 ㅎㅎ

wokbjso · 2023-09-16T17:01:05Z

todo.css

-.todo-title {
+.top-content {
+  display: flex;
+  flex-direction: row;


display:flex 의 default direction 이 row라 flex-direction 은 생략해줘도 무방할 거 같아요~!!

wokbjso · 2023-09-16T17:03:18Z

todoList.js

+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+  const day = String(today.getDate()).padStart(2, "0");


padStart 함수로 깔끔한 코드 너무 좋은 거 같아요 ㅎㅎ

wokbjso · 2023-09-16T17:14:54Z

index.html

@@ -5,7 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="todo.css" />
    <title>Vanilla Todo</title>
-    <link rel="icon" href="/img/favicon.ico" />
+    <link rel="icon" href="./img/favicon.ico" />
  </head>


파비콘도 설정하는 열정 배워갑니다!! ㅎㅎ

wokbjso · 2023-09-16T17:35:00Z

todo.css

컨테이너 크기를 잡을 때 % 활용하여 반응형을 고려한 부분 너무 좋은 것 같습니다.
폰트사이즈나 버튼 같은 것들의 크기도 잡을 때도 px 도 좋지만 반응형을 고려하여 media-query 및 rem 단위로 작업하는 법도 익히시면 좋을 것 같습니다 ㅎㅎ

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

todoList.js

 const progress = document.querySelector(".progress");

 const displayForm = () => {
  if (form.style.display === "none") {
    form.style.display = "flex";
-    progress.style.display = "none";
+    progressContainer.style.display = "none";


form.style.display 는 해당 요소의 inline style 에만 접근 할 수 있어서 처음에 화면 접속 시 버튼을 클릭하면 처음 css 파일에 설정해 준 대로 form.style.display==="none" 이 trigger 될 거라는 기대와 달리, inline style 에 지정해 준 것이 아니므로 else 문이 실행되게 되어 첫 버튼 클릭 시에는 아무런 변화가 일어나지 않습니다.
인라인 style 로 초기 상태를 세팅해 주거나 window.getComputedStyle 메서드에 대해 알아보면 좋을 거 같아요~!!

wokbjso · 2023-09-16T18:18:47Z

todo.css

@@ -11,6 +32,15 @@

 .todo-title {
  margin: 0;
+  font-family: "Pretendard-Regular";


초기에 요소에 디폴트로 세팅되어있는 margin, padding 등의 값들을 초기화하고 싶다면 reset css 를 검색하여 해당 css를 css 파일 상단에 세팅해준 뒤 작업하는 것도 좋을 것 같아요 ㅎㅎㅎ

wokbjso · 2023-09-16T18:19:27Z

img/plus.png

적극적인 아이콘 사용 한 수 배워갑니다!

moong23

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

progress bar를 포함해서 background도 단순 색이 아닌 예쁜 이미지로 넣어주시고 다양한 icon도 사용해서 예쁘게 잘 구현된 것 같아서 고생 많이 했겠다 싶었습니다 ㅠㅠ

일주일동안 과제 하느라 너무 고생많으셨어요!!! 스터디에서 뵐게요~!!!

moong23 · 2023-09-16T18:34:18Z

todo.css

+@font-face {
+  font-family: "SUITE-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUITE-Regular.woff2")
+    format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
+    format("woff");
+  font-weight: 400;
+  font-style: normal;
+}


font 추가 좋아요~!

moong23 · 2023-09-16T18:40:28Z

todo.css

+.progress-bar {
+  width: 0;
+  height: 20px;
+  border-radius: 5px;
+  background-color: #7adb84;
+  transition: width 0.3s ease-in-out;
+}
+


transition까지 들어간 progress-bar 멋지네요 👍👍👍👍

moong23 · 2023-09-16T18:47:01Z

todoList.js

@@ -0,0 +1,178 @@
+/* Local Storage */
+// Local Storage에 할 일 목록 저장
+const saveTodoListToLocalStorage = () => {


함수를 따로 분리하여서 localStorage에 담는 함수를 제작하신 것 정말 대단한것같아요!
다만, 로직을 볼 때,

하나의 item이 추가 / 삭제될 때 마다 모든 리스트를 다시 가져와야한다는 점에서
-> 4, 5번 줄을 함수 밖으로 뺀 후 전역변수로 선언하여 변수의 재사용성을 높일 수 있을 것 같습니다

추가 / 삭제될 하나의 리스트만 이동하면 된다는 점에서
-> 7, 8번 줄을 전역변수(변경 가능한 let)로 선언하고, 필요할때마다 추가 / 삭제하면서 사용하면 map의 사용을 줄일 수 있을 것같아요

moong23 · 2023-09-16T18:49:00Z

todoList.js

+const addTodoItem = () => {
+  event.preventDefault();
+  // input에 입력한 value를 선택하여 todoContent에 대입
+  const todoContent = document.querySelector(".todo-input").value;


이 부분에서 trim() 함수를 통해 공백 input에 대한 예외 handling이 있어도 좋을 것 같습니다

moong23 · 2023-09-16T18:51:03Z

todoList.js

+  todoItem.appendChild(todoText);
+  todoItem.appendChild(todoDel);


Suggested change

todoItem.appendChild(todoText);

todoItem.appendChild(todoDel);

todoItem.append(todoText, todoDel);

와 같이도 적을 수 있어요~!

moong23 · 2023-09-16T18:52:28Z

todoList.js

+  // li에 item 추가
+  todoItem.appendChild(todoText);
+  todoItem.appendChild(todoDel);
+  document.querySelector(".todo-list").appendChild(todoItem);


아래 현민님께서 잘 적어주셨는데, 코드 전체적으로
`document.querySelector(".todo-list")가 반복되는 것 같아서,
js 코드 내에서 이를 변수에 저장 후 변수로 불러와서 사용해도 좋을 것 같습니다

moong23 · 2023-09-16T18:54:38Z

todoList.js

+const printDoneItem = (text) => {
+  const doneItem = document.createElement("li");
+  const doneText = document.createElement("span");
+  const doneDel = document.createElement("button");
+
+  doneText.innerText = text;
+  doneText.className = "done-item-text";
+  doneText.addEventListener("click", toggleDoneToDo);
+
+  doneDel.className = "delete-button";
+  doneDel.addEventListener("click", deleteDoneItem);
+
+  doneItem.className = "list-item";
+  doneItem.appendChild(doneText);
+  doneItem.appendChild(doneDel);
+
+  document.querySelector(".done-list").appendChild(doneItem);
+};


이 부분은 printTodoItem과 같은 로직으로 작동하는 것 같아서,
은비님의 코드리뷰에 적어놓은 부분 처럼 로직을 합쳐도 괜찮을 것 같아요

moong23 · 2023-09-16T18:57:03Z

todoList.js

+const updateItemCount = () => {
+  const todoCount = document.querySelectorAll(".todo-item-text").length;
+  const doneCount = document.querySelectorAll(".done-item-text").length;
+  const totalCount = todoCount + doneCount;
+  const countText = `${doneCount} / ${totalCount}`;
+  progress.innerText = countText;
+
+  let ratio = 0;
+  if (totalCount !== 0) {
+    ratio = doneCount / totalCount;
+  }
+  progressBar.style.width = `${ratio * 100}%`;
+};


progressBar까지 업데이트 해주시는 부분이 정교하게 잘 작성된것같습니다 🔥🔥🔥

moong23 · 2023-09-16T19:00:28Z

todo.css

+.todo-list,
+.done-list {
+  list-style: none;
+  margin: 0 0 10px;
+  padding: 0px 30px 0px 10px;
+}


이 부분에 height값을 정해준 후(max-height도 좋아요) overflow-y: scroll을 통해 scroll으로 구현을 하면
리스트가 너무 길어져서 화면 밖으로 나가는 문제를 해결할 수 있을 것 같아요!
못생긴 스크롤바를 커스텀하는 부분은 링크 달아놓을게요
스크롤바 커스터마이징

silverain02 · 2023-09-17T05:50:37Z

todoList.js

+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+  const day = String(today.getDate()).padStart(2, "0");


padStart로 날짜 표시할 때 0 붙여주는 거 좋은 것 같아요! 배워갑니다 ㅎㅎ

silverain02 · 2023-09-17T06:05:41Z

index.html

+      <section class="top-content">
+        <h2 class="todo-title">TODOLIST</h2>
+        <span class="date"></span>
+      </section>


저는 거의 div로 처리했는데 semantic tag 다양하게 사용하신게 더 알아보기 좋은 것 같아요!

silverain02 · 2023-09-17T06:13:38Z

todoList.js

+  progressBar.style.width = `${ratio * 100}%`;
+};
+
+const init = () => {


저는 초기 렌더링 시 실행되는 함수를 그냥 하단에 모아놨는데 이렇게 init함수로 따로 모아두는 게 유지보수할 때 좋을 것 같아요!

silverain02 · 2023-09-17T06:43:36Z

todoList.js

+const loadTodoListFromLocalStorage = () => {
+  const todoList = localStorage.getItem("todoList");
+  if (todoList) {
+    const todoItems = JSON.parse(todoList);


todoList, todoItems가 같은 역할을 하는 변수같은데 let으로 선언해서 파싱하고 업데이트 해줘도 좋을 것 같아요~!

mod_siw and others added 14 commits September 14, 2023 22:29

feat : html 작성

a24c871

feat : todo 추가 ( 삭제, 이동 X )

b5d4888

feat : todo 삭제 ( 이동 X )

3b1d31a

feat : todo, done 추가,이동, 삭제 구현

3404435

feat : 입력창 팝업 형태로 변경

815e1f6

style : 항목별 자리 배치 css 설정

4b939a1

feat : 오늘 날짜 띄우기

3b8d1c5

feat : localstorage + progress 구현

2ba446f

feat : progress bar 구현

14ff3b9

style : 전체적인 color, icon 변경

aacdd1c

style : progress font 수정

ac09578

style : favicon 추가

3ad601d

style : 배포페이지 파비콘 에러 수정 시도1

f773b4e

docs : Update README.md

912e0cf

wokbjso reviewed Sep 16, 2023

View reviewed changes

moong23 reviewed Sep 16, 2023

View reviewed changes

silverain02 reviewed Sep 17, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 변지혜 미션 제출합니다. #10

[1주차] 변지혜 미션 제출합니다. #10

mod-siw commented Sep 15, 2023 •

edited

Loading

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

wokbjso Sep 16, 2023

moong23 left a comment

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

moong23 Sep 16, 2023

silverain02 Sep 17, 2023

silverain02 Sep 17, 2023

silverain02 Sep 17, 2023

silverain02 Sep 17, 2023

		todoItem.appendChild(todoText);
		todoItem.appendChild(todoDel);

	todoItem.appendChild(todoText);
	todoItem.appendChild(todoDel);
	todoItem.append(todoText, todoDel);

[1주차] 변지혜 미션 제출합니다. #10

Are you sure you want to change the base?

[1주차] 변지혜 미션 제출합니다. #10

Conversation

mod-siw commented Sep 15, 2023 • edited Loading

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

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

mod-siw commented Sep 15, 2023 •

edited

Loading