[1주차] 김선영 미션 제출합니다. #2

seondal · 2022-09-15T18:25:00Z

배포링크

https://vanilla-todo-16th.vercel.app/

Key Questions

1. DOM은 무엇인가요?

문서객체 모델 (Document Object Model)

HTML, XML 문서의 프로그래밍 인터페이스로, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조나 스타일이나 내용등을 변경할 수 있게 돕는다. 브라우저 문서에서 요소에 접근할 때 사용된다.

const title = document.querySelector(".hello h1");

const title1 = document.querySelector("#hello");
const title2 = document.getElementById("hello");

console.log(title);

body, header 등은 document.body.style 처럼 접근가능
그 외에는 getElement 나 queyrySelector 로 찾아와야함
- querySelector 은 첫번째꺼 하나만 반환
- 나머지(getElementsBy어쩌구) 는 배열로 반환

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

본 프로젝트에서는 ul 에 li를 계속 추가하는 방식이였기 때문에 2번 createElement 방식을 사용하였습니다.

insertAdjacentHTML
```
element.insertAdjacentHTML(position, text);
```
가독성이 좋으나 script 태그를 파싱하기 때문에 XSS 공격 및 보안에 취약하다

createElement
```
let element = document.createElement(tagName)
```
element를 생성해서 append를 하기 때문에 node만 삽입 가능하지만 가독성이 안좋다

Document Fragment

HTML Element를 생성하는 것이 아닌 복사하는 방식

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

Semantic tag 는 의미를 명확하게 알 수 있는 form, table, article 등의 태그를 의미한다.
header, nav, aside, section, footer 등이 있다.
일반 div만을 사용했을 때보다 가독성도 좋고 검색엔진 최적화 등의 부문에서 효율적이다

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

뷰포트나 요소의 크기가 불명확하거나 동적으로 변하더라도 요소를 효율적으로 배치, 정렬, 분산할 수 있게 하는 레이아웃 방식
요소의 크기나 순서를 유연하게 배치할 수 있다.
display: flex 속성을 선언하여 사용가능

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

https://velog.io/@nittre/Pros-and-Cons-of-JavaScript-자바스크립트의-장단점

속도 (Speed)
단순함 (Simplicity)
인기 (Popularity)
정보에 대한 상호운용성(Interoperability)
서버 로딩 (Server Load)
풍부한 인터페이스 (Rich Interfaces)

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

https://velog.io/@kwj1270/클린코드-주석#법적인-주석

법적인 주석

→ 소스파일 첫머리에 저작권 정보 및 소유권 정보, 라이선스, 외부문서
정보를 제공하는 주석

→ 코드에서 사용한 표현식등을 설명
의도를 설명하는 주석

→ 문제를 해결하거나 구현한 것에 대한 의도 설명
의미를 명료하게 밝히는 주석

→ 인수나 반환값
결과를 경고하는 주석

→ 다른 프로그래머에게 결과를 경고할 목적
TODO 주석

→ 앞으로 시작 될 이벤트에 대한 설명
중요성을 강조하는 주석
공개 API에서 JavaDoc

필수 요건

결과 화면의 기능을 그대로 구현합니다.
결과 링크의 화면 디자인 그대로 구현해도 좋고, 자신만의 디자인을 적용해도 좋습니다.
CSS의 Flexbox를 이용하여 레이아웃을 구성합니다.
JQuery, React, Bootstrap 등 외부 라이브러리를 사용하지 않습니다.
함수와 변수의 이름은 lowerCamelCase로 짓습니다.
코딩의 단위를 기능별로 나누어 Commit 메세지를 작성합니다.

선택 요건

외부 폰트(눈누 상업용 무료폰트](https://noonnu.cc/)로 입맛에 맞게 꾸밉니다.
브라우저의 localStorage 혹은 sessionStorage를 이용하여 다음 번 접속 시에 기존의 투두 데이터를 불러옵니다.

1주차 - Vanilla Todo

jhj2713

안녕하세요! 프론트 파트장 주효정입니다👏

우선 너무 수고많으셨어요! 깃 로그도 정확하게 적어주시고, 전반적으로 코드가 너무 깔끔하게 구성되어있어서 리뷰가 수월했던 것 같아요. React나 다른 프레임워크를 사용하시는 경우에는 어떤 방식으로 구조를 설계하고 구현하실지 기대가 됩니다~!!

Key Question에서 HTML Element를 생성하는 방법에 대해 다양하게 공부해보셨네요! 여기에서 더 나아가 Element를 DOM에 삽입하려 했을 때 어떤 방법이 더 효율적인지도 생각해볼 수 있을 것 같아요. createElement()를 사용해서 생성하면 append()가 계속 발생하게 될텐데 이 방법은 효율적일지, 그렇다면 Document Fragment로 가상 노드를 만들게 되는 방법이 효율적일지 한번 생각해보면 더 좋을 것 같아요~!

한 주 동안 수고 많으셨고 그럼 스터디시간에 봬요🥳

jhj2713 · 2022-09-16T16:31:54Z

index.html

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

  <body>
-    <div class="container"></div>
+    <div class="container">
+      <div class="box">


Semantic Tag에 대해 공부한 만큼 여기서도 div말고 적절한 Semantic Tag를 사용해보는 것은 어떨까요~?

jhj2713 · 2022-09-16T16:33:31Z

index.html

+      </div>
+      <div class="box">
+        <h2>📝 할 일 목록 📝</h2>
+        <ul class="list" id="todo-list"></ul>


공통적인 부분은 class로 묶고 고유한 속성은 id로 따로 정의해서 재사용성을 높인 부분 너무 좋은 것 같아요!

jhj2713 · 2022-09-16T16:34:53Z

script.js

+/* 
+코드 방식 어떤게 좋을까요.?.?
+createTodo() 처럼 변수를 생성하고 해당 변수에 대해 작업을 작성하는게 좋을지,
+completeTodo() 처럼 변수 생성을 한번에 하고 작업을 한번에 하는게 좋을지
+궁금해서 올려요!
+*/


이미 아시겠지만 코드에는 정답이 없습니다! 자기만의 기준을 명확하게 세우고 코드를 구성한다면 그게 바로 좋은 방법 아닐까요☺️ 다만 제 생각을 조금 덧붙이자면 개인적으로는 createTodo()와 같이 변수를 선언하고 바로 작업을 진행하는 방법이 기능을 명확하게 표현하는 느낌이라 더 많이 사용하게 되는 것 같아요. 하지만 선언하게되는 변수가 일정 개수 이상 넘어가게되면 기능을 더 세분화해서 로직을 다른 함수로 빼는게 가장 깔끔할 것 같네요~!

@jhj2713 오오.. 사실 질문하면서도 많이 애매한 부분이라 소심하게 주석으로 질문했는데 이렇게 좋은 답변 주셔서 너무 감사합니다 💙

script.js

jhj2713 · 2022-09-16T16:37:34Z

script.js

+function returnTodo(e) {
+  const value = e.target.parentElement.querySelector("span").innerText;
+  createTodo(value);
+
+  deleteTodo(e);
+}


returnTodo()에서 중복된 로직인 createTodo()와 deleteTodo()를 재사용하신 점 깔끔한 것 같아요👍

jhj2713 · 2022-09-16T16:39:36Z

script.js

+  const todoLi = document.createElement("li");
+  todoLi.appendChild(todoSpan);
+  todoLi.appendChild(completeBtn);
+
+  todoList.append(todoLi);


todoLi는 li Element를 가리키고, todoList는 todo-list Element를 가리키는데, 이름이 유사해서 헷갈릴 수 있을 것 같아요. todoLi는 새로 생성된 list라는 점을 명시하는 네이밍이 더 적절하고 헷갈리지 않을 것 같아요~!

style.css

ch9eri · 2022-09-18T01:38:09Z

script.js

+  deleteTodo(e);
+  createTodo(value);
+}
+
 function deleteTodo(e) {
  e.target.parentElement.remove();
 }


deleteTodo 함수를 이렇게 깔끔하게 적는 방법도 있군요! 저는 고민을 많이해서 쓸데없는 코드도 많이 적었는데 ... 배워갑니다!

ch9eri · 2022-09-18T01:40:14Z

script.js

+createTodo() 처럼 변수를 생성하고 해당 변수에 대해 작업을 작성하는게 좋을지,
+completeTodo() 처럼 변수 생성을 한번에 하고 작업을 한번에 하는게 좋을지
+궁금해서 올려요!
+*/


저도 이 점 굉장히 궁금했는데 선영님이 고민하시고 효정님이 답변해주신 글 보니까 고민이 해결되었습니다! 앞으로도 좀 더 명확하고 좋은 코드를 위해 고민하겠습니다!

ch9eri · 2022-09-18T01:41:52Z

script.js

  returnBtn.innerText = "🆙";
+  returnBtn.addEventListener("click", returnTodo);
+


저는 span을 클릭해서 todo 리스트로 옮기는 방식으로 했는데 returnBtn을 넣는게 사용자 입장에서는 더 명확한 기능일 것 같네요! 너무 좋은 방식 같습니다 🥰

seondal · 2022-09-18T05:33:39Z

@jhj2713 @ch9eri 52a1efa 코드리뷰 반영완료했습니다! 친절한 리뷰들 너무 감사드려요 :)

chaeyeonan · 2022-09-18T06:05:30Z

script.js

+  const doneBtn = document.createElement("button");
+  const returnBtn = document.createElement("button");
+
+  doneSpan.innerText = target.querySelector("span").innerText;


저는 span 태그가 아직 익숙하지 않아서 다른 방법을 사용했는데, 선영님처럼 span 을 사용하면 조금 더 깔끔하게 코드를 작성할 수 있어 좋은 것 같습니다!

chaeyeonan · 2022-09-18T06:06:55Z

script.js

+  target.remove();
+}
+
+function returnTodo(e) {


추가, 삭제하는 함수가 중복되는 부분이 없어 깔끔해 좋은 것 같습니다. e.target을 사용하여 깔끔하게 코드 작성할 수 있는 점 배우고 갑니다 ㅎㅎ 감사합니다

seondal added 12 commits September 15, 2022 17:05

Update index.html

0e5fc47

[Feat] submitTodo()

e8f1e88

[Feat] deleteTodo()

1ff10fd

[Style] 스타일 속성 적용

f2b41ba

[Feat] 글자수 제한

ffb2f3a

[Feat] completeTodo()

bfaea76

[Style] 눈누 폰트 적용

bba2e11

[Feat] returnTodo()

73a6c43

[Style] List height 수정

d218dca

[Refactor] 두가지 방식으로 함수 선언

62ac982

Merge pull request #1 from seondal/feat

786d267

1주차 - Vanilla Todo

[Fix] input 값 자동으로 사라지게 하기

9bfc4f2

jhj2713 reviewed Sep 16, 2022

View reviewed changes

ch9eri reviewed Sep 18, 2022

View reviewed changes

[Edit] 코드리뷰 반영 (0918)

52a1efa

chaeyeonan reviewed Sep 18, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 김선영 미션 제출합니다. #2

[1주차] 김선영 미션 제출합니다. #2

seondal commented Sep 15, 2022 •

edited

Loading

jhj2713 left a comment

jhj2713 Sep 16, 2022

jhj2713 Sep 16, 2022

jhj2713 Sep 16, 2022

seondal Sep 18, 2022

jhj2713 Sep 16, 2022

jhj2713 Sep 16, 2022

ch9eri Sep 18, 2022

ch9eri Sep 18, 2022

ch9eri Sep 18, 2022

seondal commented Sep 18, 2022

chaeyeonan Sep 18, 2022

chaeyeonan Sep 18, 2022

		returnBtn.innerText = "🆙";
		returnBtn.addEventListener("click", returnTodo);

[1주차] 김선영 미션 제출합니다. #2

Are you sure you want to change the base?

[1주차] 김선영 미션 제출합니다. #2

Conversation

seondal commented Sep 15, 2022 • edited Loading

배포링크

Key Questions

1. DOM은 무엇인가요?

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

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

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

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

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

필수 요건

선택 요건

jhj2713 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

seondal commented Sep 18, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seondal commented Sep 15, 2022 •

edited

Loading