[1주차] 신동현 미션 제출합니다 #9

dhshin98 · 2023-09-15T13:34:48Z

배포링크:

https://to-do-list-flax-nine-59.vercel.app/

🙇‍♀️느낀점

1주차 미션을 수행하면서 부족한 부분에 대해 많이 느낄 수 있었습니다. 앞으로 코드나 주석을 더 예쁘고 효율적으로 작성하는 법 & 커밋을 하는 법에 대해 더 노력해야 할 것같습니다. todo, done으로 나누어서 구현을 하니 코드가 너무 지저분해진것 같기도 합니다. 다음 과제부터는 코드를 효율적으로 짜는 법에 대한 고민을 해야할 것 같습니다! 따끔한 피드백 해주세요...

❓Key Questions

1. DOM은 무엇인가요?

→ “웹 페이지에 대한 프로그래밍 인터페이스”

Dom 은 Document Object model 로 html 로 구성되어진 웹페이지의 문서 라고 할 수 있습니다. (Dom 은 웹페이지의 객체지향적 표현)

<DOM 이 나온 이유>
웹페이지는 HTML 로 구성되어있는데, HTML 만을 사용하면 웹페이지는 정적인 웹페이지가 되고 사용자들간에 interecting 이없습니다. 웹페이지가 사용자들과 함께 소통을 하기 위해서 개발자들은 상황에따라 HTML 이 변경이 되도록 개발을 해야하고, HTML 을 직접 접근하여 변경하기 위해서는 HTML 을 문서화하고 객체지향적 표현이 된 ‘DOM’ 을 사용해야합니다. DOM의 다양한 API 를 활용하여 HTML 을 직접 추가,삭제,수정 을 할 수 있습니다.

DOM-API
- document.getElementById(id)
- document.getElementsByTagName (en-US)(name)
- document.createElement(name)
- parentNode.appendChild (en-US)(node)
- element.innerHTML (en-US)
- element.style (en-US).left
- element.setAttribute (en-US)
- element.getAttribute
- element.addEventListener (en-US)
- window.content (en-US)
- window.onload (en-US)
- window.dump (en-US)
- window.scrollTo (en-US)

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

1. createElement() 메서드

let element = document.createElement(tagName);

가장 기본적인 방법은 document 객체의 createElement() 메서드를 사용하는 것입니다.

2. insertAdjacentHTML

element.insertAdjacentHTML(position, text);

target HTML Element의 특정 위치에 원하는 node를 추가 할 수 있는 메서드입니다. position에는 target HTML Element의 앞(beforebegin), 뒤(afterend), 첫번째 자식(afterbegin), 마지막자식(beforeend)의 위치를 지정할 수 있고 text는 HTML 또는 XML로 파싱 가능한 String을 받습니다.

→ 간단한 동적 요소를 생성할 때는 document.createElement() 메서드를 사용하는 것이 간단하고 효과적일 것 같습니다.

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

정의

시맨틱 태그란 의미가 있는 태그로- header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그등 이 있습니다.

header: 헤더 영역에 사용하는 태그
nav: 네비게이션 바(메뉴) 영역에 사용하는 태그.
section: article 보다 큰 영역을 나타낼 때 사용하는 태그.
article: 보통 제목 태그와 문단 태그를 포함하며, 개별 콘텐츠에 사용하는 태그.
aside: 사이드 영역에 사용하는 태그. 보통 top버튼이나 본문 영역과 별개의 내용을 포함한다.
footer: 풋터 영역에 사용하는 태그. 회사의 정보 등이 들어있다

사용하는 이유

검색엔진 최적화(SEO)

검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석할때, 의미있는 태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있습니다

쉬운 소스코드 구조화

브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있다는 장점이 있습니다.

코드 가독성 향상

여러 사람과 함께 작업을 할 때, 굳이 클래스를 지정하지 않아도 쉽게 어느 부분이 헤더 영역이고, 본문 영역인지 쉽게 알 수 있습니다

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

Flexbox Layout 이란,

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다.

flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있습니다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다는 장점이 있습니다.

사용단계

부모 컨테이너 설정: flex 레이아웃을 적용하고 싶은 요소의 부모 요소에 flex로 지정합니다.(display: flex; )
Flex 방향 설정 : Flexbox는 기본적으로 수평 방향으로 아이템을 배치합니다. 수직 방향으로 배치하려면 다음과 같이 설정합니다. flex-direction 속성은 row (수평), column (수직), row-reverse, column-reverse 등으로 설정할 수 있습니다.
아이템 정렬: 아이템을 정렬하려면 justify-content (수평 정렬) 및 align-items (수직 정렬) 속성을 사용합니다. 일반적인 값으로는 flex-start, flex-end, center, space-between, space-around 등이 있습니다.
아이템 간 간격 조절: 아이템 간의 간격을 조절하려면 gap 또는 margin 속성을 사용합니다.

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

동적 타입 언어로 변수의 데이터 유형을 런타임에 결정하고, 자유롭다는 것이 장점이고, 프론트엔드 개발을 위한 다양한 프레임워크가 개발되어 있다는 장점이 있습니다.

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

가장 좋은 주석은 의도를 명료하게 전달하는 주석이라고 생각합니다. 중복을 최대한 피하고, 의미 없는 주석을 남발하지 말아야 할 것 같습니다. (앞으로 바람직한 주석을 달 수 있도록 노력해야할 것 같습니다)

https://velog.io/@hangem422/clean-code-comment

oooppq · 2023-09-15T18:41:56Z

script.js

+let todoArr = [];
+let doneArr = [];
+const TODODATA = "todoData";
+const DONEDATA = "doneData";


TODODATA와 DONEDATA를 const 변수 형태로 저장하고 localStorage의 key로 사용하면 추후에 혹시 key name이 바뀌었을 때 쉽게 변경할 수 있을 것 같아 좋은 방식인 것 같습니다~~

oooppq · 2023-09-15T18:46:42Z

script.js

+//LocalStorage에 저장하는 함수
+function saveDATA() {
+  localStorage.setItem(TODODATA, JSON.stringify(todoArr));
+  localStorage.setItem(DONEDATA, JSON.stringify(doneArr));


local storage에 데이터를 저장하는 부분은 있는데, 처음에 페이지가 로딩될 때 local storage에 저장된 데이터를 받아오는 부분을 잠깐 잊으신 것 같아요! 가끔 코딩하다보면 그런 사소한 실수를 할 때가 있는데, 한 기능을 구현할 때 세트가 되는 기능들은 연달아서 바로 구현한다면 좀 도움이 될 수 있을 거에요~~(ex. localstorage 에 setting하는 기능 구현 => localstorage에서 .getItem 하는 기능 구현 순서로)

아아아 그렇네요 저장하는 기능만 구현했었네요ㅠ!!! 말씀주신 부분 고려해서 수정해봐야겠어요 찾아주셔서 감사합니다ㅎㅎ

oooppq · 2023-09-15T18:53:22Z

script.js

+  deleteItem();
+
+  //doneBtn 누르면 todo -> done으로
+  todoToDone();


현재 플로우가, 새로운 아이템을 추가하는 순간에 delete 버튼과 done 버튼에 event handler를 전달해주는 방식을 사용하신 것 같아요! 좋은 방법이긴 한데, 현재 deleteItem 함수와 todoToDone 함수에서는 지금 당장 추가하려는 항목의 버튼에만 event handler를 할당하는게 아니라, 각각의 class를 가진 모든 항목에 event handler를 할당고 있는 것 같아요, 그렇게 되면 각각의 버튼들에 event handler들이 쌓이게 되는 것 같아요!

위 사진을 보면, 총 3개의 todo를 추가했을 때, 가장 먼저 추가한 todo의 버튼들에 3개의 동일한 listener들이 할당되어 있는 것을 알 수 있어요!
그래서, 저는 새로운 항목을 추가할 때 해당 항목의 버튼에만 listener을 등록하는 방식을 사용했어요 한 번 생각해보시면 좋을 것 같아요~~

oooppq · 2023-09-15T18:58:05Z

style.css

+
+}
+.doneBtn,
+.deleteBtn{


이건 스타일적인 부분이긴 한데, 만약 todo에 긴 문자열이 들어가게 되면, done, delete 버튼과 겹치게 되는데, 해당 버튼들을 absolute로 위치를 지정해주어서 그런 것 같아요! 만약, absolute로 지정하고 싶으면 그 옆에 있는 element에 최대 width를 설정해 주어서 겹치지 않게 하거나, 아니면 todoItem에 flex box를 적용했으니 absolute 말고 그냥 일반적으로 나열시키는 것도 좋을 것 같아요!
아마, 해당 버튼들을 오른쪽 끝에 배치하고 싶으셔서 absolute로 지정하신 것 같은데,

text가 들어가는 부분을 div로 감싸고 flex-grow: 1; 속성을 준다.

done button에 margin-left: auto; 속성을 준다.
이 두 가지 방법으로 원하는 스타일링을 할 수 있을 거에요!

아 버튼을 오른쪽 끝에 어떻게 나열하나 고민했었는데, 저런 방법도 있었군요!! 덕분에 배웠습니당 👏

oooppq · 2023-09-15T19:00:37Z

index.html

+      <h3 id ="date">2022년 9월 15일</h3>
+      <div class ="todoInput">
+        <input type = "text"  id="inputTodo" placeholder="📍 Enter your to-do">
+        <div class ="addBtn"> ➕ </div>


div로 버튼을 표현해도 아무런 문제가 없지만, 나중에 SEO(Search Engine Optimization)을 위해, 혹은 여러 사람들과의 협업을 위해 태그를 사용해보는 것도 좋을 것 같아요~~

오 협업시에는 그렇겠네요! 앞으로 태그를 더 활용해봐야겠어요! 꿀팁 감사합니다 😆

oooppq · 2023-09-15T19:04:40Z

script.js

+const DONEDATA = "doneData";
+
+function todayDate() {
+  var todayDate = document.getElementById("date");


todayDate()이라는 함수 안에서만 사용되는 것이라면 변수를 지정할 때 var과 let의 의미 차이는 없어요! 아마, var이 더 옛날에 나왔고 let이 최근에 나온 것으로 알고 있어요~ var은 블럭과 상관없이 전역적으로 참조할 수 있는데, 그러한 의도로 사용한게 아니라면 통일성을 위해 let으로 맞춰보는게 좋을 것 같습니다~~ 아래 링크 참고해보시면 될 것 같아요!

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

오 네네 링크 정독했습니다~! 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 통일해서 사용해야겠네요!

oooppq · 2023-09-15T19:07:05Z

style.css

+    background-color: #43C645;
+}
+
+.todoInput  {


class를 비롯해서, 네이밍을 할 때에는 의도나 역할이 확실히 드러나게 하는 것이 좋을 것 같아요! 저도 알고는 있지만 잘 지키고 있진 않지만요ㅎㅎ.. todoInput의 기능을 보면 input 과 버튼을 감싸고 있는 역할인 듯 한데, inputContainer와 같이 네이밍해보는 것도 좋을 것 같아요~~

네이밍 하는것도 정말 어려운것같아요.. ㅎㅎ 말씀해 주신대로 앞으로 네이밍 할때 규칙성 있게 지어야겠어요!!

대균님 코멘트에 더해서, 클래스 네이밍의 경우에는 kebab-case 가 일반적으로 많이 사용되는 것 같아요!
css 방법론 중 하나인 BEM 방식도 참고해보시면 도움 될 것 같습니다. 😄

oooppq · 2023-09-15T19:09:29Z

style.css

+    height: 700px;
+    border-radius: 10px;
+}
+.todoContainer,


스타일을 위해서 이상적인 높이를 지정하는 것은 좋은 것이라고 생각해요~~
다만, todo가 여러 개 들어갔을 때, 높이가 고정되어 있어 컨테이너 밖으로 내용이 넘치는 것을 볼 수 있어요! 이를 해결하려면,

overflow-y: auto; 속성을 주어 자동으로 스크롤이 될 수 있도록 한다.

min-height: 200px; 로 바꾸어 최소 높이를 지정하고 그 이후에는 맞춰서 자라도록 한다.
정도의 방법이 있을 것 같아요~

저는 컨테이너 내용이 넘치는 부분은 생각하지 못했는데,, 꼼꼼한 코드리뷰 감사합니다.. 🙇‍♀️ 대균님 덕분에 좋은 정보 많이 얻고 많이 배웠어요!! ☺️

sujinRo

안녕하세요! 프론트 운영진 노수진입니다😊

선택 구현 요소까지 열심히 구현하신 것 같아 과제 잘 보았습니다~!
디자인도 귀엽게 잘 만드신 것 같아요! 이번 과제 정말 수고하셨고, 앞으로 과제도 화이팅입니다~~~!!!!!!

sujinRo · 2023-09-16T11:56:16Z

script.js

+    alert("Please Enter Todo.");
+    return;
+  }
+


input에 스페이스바를 누르고, + 버튼을 누르면 위 사진처럼 입력이 그대로 들어가요!
trim()을 사용해서 입력값의 양쪽 공백을 없앤 뒤, ""이면 alert 창이 나오도록 바꾸면 좋을 것 같아요!

스페이스바 예외처리는 생각하지 못했는데, 예외처리를 추가해야겠네요~! 오류 찾아주셔서 감사합니다

sujinRo · 2023-09-16T12:04:34Z

style.css

@@ -0,0 +1,37 @@
+body{


body에 기본적으로 margin이 들어가 있는데, margin: 0을 따로 주지 않아서, 스크롤이 생기는 것 같아요!!
margin:0을 해주면 디자인적으로 더 좋을 것 같아요~

오호, 그렇군요! 앞으로 코드 짤때도 참고하겠습니다!! 😁 커멘트 감사합니다아 :)

sujinRo · 2023-09-16T12:17:07Z

script.js

+}
+
+function init() {
+  addBtn.addEventListener("click", newTodo);


버튼 눌렀을 때만 todo에 추가되도록 해주셨는데, enter 눌렀을 때도 되게 해주시면 더 편할 것 같아요~!

이 부분은 form 태그를 사용하는 걸로 해결해볼 수 있을 것 같아요 😄

Gaeun-Kwon

동현님 안녕하세요, 프론트엔드 운영진 권가은입니다 🙌
이번 과제 하시느라 수고 많으셨습니다~!! 적절한 로직 분리와 주석 덕분에 코드리뷰 하기 편했던 것 같습니다. ㅎㅎ

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

Gaeun-Kwon · 2023-09-17T04:00:31Z

script.js

+}
+
+function init() {
+  addBtn.addEventListener("click", newTodo);


이 부분은 form 태그를 사용하는 걸로 해결해볼 수 있을 것 같아요 😄

Gaeun-Kwon · 2023-09-17T04:13:11Z

style.css

+    background-color: #43C645;
+}
+
+.todoInput  {


대균님 코멘트에 더해서, 클래스 네이밍의 경우에는 kebab-case 가 일반적으로 많이 사용되는 것 같아요!
css 방법론 중 하나인 BEM 방식도 참고해보시면 도움 될 것 같습니다. 😄

Gaeun-Kwon · 2023-09-17T04:16:00Z

script.js

+//버튼 생성하는 함수
+function createBtn(className, text) {


createBtn, deleteData 와 같이 역할에 따른 함수를 따로 빼두고 필요 시 사용하는 방식으로 구현하셨네요.ㅎㅎ
가독성도 높일 수 있고, 추후에 기능이 추가되거나 복잡해지는 경우에 대비하기 좋을 것 같아요 👍

geeoneee · 2023-09-17T05:25:05Z

index.html

      <h1>Todo List</h1>
-      <div class ="todo_input">
+      <div class ="todoInput">
        <input type = "text"  id="inputTodo" placeholder="📍 Enter your to-do">


엔터를 쳤을 때, todolist에 반영이 안되어서 해당 input의 placeholder 텍스트를 바꾸어도 좋을 것 같아요!

geeoneee · 2023-09-17T05:29:49Z

style.css

+    height: 650px;
+    border-radius: 10px;
+}
+.todoContainer,


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

앞으로 REM 에 익숙해지도록 해야겠어요 :) 링크 감사합니당!!ㅎㅎ

geeoneee · 2023-09-17T05:50:51Z

script.js

+  if (index !== -1) {
+    arr.splice(index, 1);
+  }
+}


delete 함수 if문과 index 사용하셔서 깔끔하게 작성하신 것 같아요! 배워갑니당:)

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

과제 수고 많으셨습니다:)

moong23 · 2023-09-19T18:41:05Z

index.html

+          <div class = "round Red" ></div>
+          <div class = "round Yellow" ></div>
+          <div class = "round Green " ></div>


어디서 많이 보던 코드인데.....

dhshin98 added 10 commits September 12, 2023 22:10

기본적 html 구조

f9d344d

feat: todo list add, delete 기본 틀

eed56d2

feat: 추가, 삭제 버튼 구체화

7786bda

feat: 리스트 개수 세는 함수

877d2e2

feat: local storage 저장

89faf89

feat: 오늘 날짜 추가

7e12519

feat: input null 예외처리

5889c51

fix: css 수정

9352968

fix: css 수정

43a6a30

fix: css 수정2

d36548e

oooppq reviewed Sep 15, 2023

View reviewed changes

sujinRo reviewed Sep 16, 2023

View reviewed changes

Gaeun-Kwon reviewed Sep 17, 2023

View reviewed changes

geeoneee reviewed Sep 17, 2023

View reviewed changes

moong23 reviewed Sep 19, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 신동현 미션 제출합니다 #9

[1주차] 신동현 미션 제출합니다 #9

dhshin98 commented Sep 15, 2023

oooppq Sep 15, 2023

oooppq Sep 15, 2023

dhshin98 Sep 16, 2023

oooppq Sep 15, 2023

oooppq Sep 15, 2023

dhshin98 Sep 16, 2023

oooppq Sep 15, 2023

dhshin98 Sep 16, 2023

oooppq Sep 15, 2023

dhshin98 Sep 16, 2023

oooppq Sep 15, 2023

dhshin98 Sep 16, 2023

Gaeun-Kwon Sep 17, 2023

oooppq Sep 15, 2023

dhshin98 Sep 16, 2023

sujinRo left a comment

sujinRo Sep 16, 2023

dhshin98 Sep 16, 2023

sujinRo Sep 16, 2023

dhshin98 Sep 16, 2023

sujinRo Sep 16, 2023

Gaeun-Kwon Sep 17, 2023

Gaeun-Kwon left a comment

Gaeun-Kwon Sep 17, 2023

Gaeun-Kwon Sep 17, 2023

Gaeun-Kwon Sep 17, 2023

geeoneee Sep 17, 2023

geeoneee Sep 17, 2023

dhshin98 Sep 17, 2023

geeoneee Sep 17, 2023

geeoneee commented Sep 17, 2023

moong23 Sep 19, 2023

		//버튼 생성하는 함수
		function createBtn(className, text) {

[1주차] 신동현 미션 제출합니다 #9

Are you sure you want to change the base?

[1주차] 신동현 미션 제출합니다 #9

Conversation

dhshin98 commented Sep 15, 2023

배포링크:

🙇‍♀️느낀점

❓Key Questions

1. DOM은 무엇인가요?

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

1. createElement() 메서드

2. insertAdjacentHTML

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

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

sujinRo 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

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

geeoneee commented Sep 17, 2023

Choose a reason for hiding this comment