[1주차] 심여은 미션 제출합니다. #5

ongheong · 2024-08-27T20:19:33Z

미션 소감

안녕하세요, LG U+유레카 1기 프론트엔드 반 심여은입니다.
다른 분들보다 좀 더 늦게 첫 번째 과제를 마쳤습니다 😭 저번 미니 프로젝트 때 투두 리스트를 만들어 본 경험이 있어 이번에도 쉬울 것이라고 생각했는데, localStorage를 이용하는 방식이 익숙치 않아 이 방법이 맞나 하며 여러번 코드를 고쳤던 것 같습니다ㅠㅠ
상태 관리를 보다 쉽게 할 수 있는 리액트가 눈에 아른거렸지만... 이번 과제 덕분에 JS에서 DOM 엘리먼트를 접근하는 방식이 조금 더 익숙해진 것 같아서 자신감이 약간 붙었습니다!

다음 과제는 미리 준비해서 시간에 쫓기지 않도록 하겠습니다...! 또한 작성한 코드에 미숙한 부분이 있다면 마구마구 리뷰 달아주세요!!

미션에서 특별히 신경 쓴 부분들

todo item을 추가하는 로직 : 초기에는 값이 추가/수정/삭제될 때마다 localStorage와 모든 li 태그를 동시에 업데이트하는 방식을 사용했습니다. 하지만 li태그가 늘어날수록 비효율적이라고 판단하여, localStorage를 업데이트하는 set함수와 DOM Element를 생성하는 createTodoElement로 기능을 분리해 필요한 부분만 업데이트되도록 노력했습니다.
기능 분리 : 가독성과 유지보수성을 높이기 위해 각 기능별로 함수를 나눠봤습니다. 하지만 여러 일을 하는 함수도 여전히 존재하여 부족한 부분이 많습니다😭 추후 리팩토링을 통해 더 신경 써 보겠습니다!
디자인 : 아무래도 투두리스트니깐! 노트패드 느낌이 나도록 배경에 이미지를 첨부하고, 손글씨같은 웹폰트로 스타일을 작성해봤습니다. 또한 done 기능을 직관적으로 사용할 수 있도록 할 일 텍스트 앞에 버튼으로 달아두었습니다. 투두 개수가 많아져 일정 높이를 넘어가면 스크롤로 확인할 수 있도록 했습니다.
기능별 커밋 : 기능 추가/수정 시마다 커밋 로그를 나눠 작성하였습니다.
+스터디장님의 예시를 보고 vercel로 배포해봤습니다! https://vanilla-todo-ongheong.vercel.app/

KEY QUESTION

1. DOM이란 무엇인가요?

DOM은 웹페이지의 요소를 트리 형태로 구조화시켜 표현한 것으로, 프로그래밍 언어가 쉽게 접근하여 웹페이지의 요소를 변형할 수 있도록 api를 제공하는 인터페이스입니다. 웹 브라우저에서 DOM을 조작하기 위해서는 JS를 사용해야 합니다.

2. JavaScript로 DOM을 조작하는 방법은 어떤 것이 있나요?

여러 방법들이 있으며, 주로 사용하는(제 프로젝트에서 사용된 것 위주로) 방법은 다음과 같은 것들이 있습니다.

DOM 요소 선택 : getElementById, getElementsByClassName, querySelector 등
DOM 요소 속성 및 내용 변경 : textContent, innerHTML, innerText, setAttribute 등
사용자의 이벤트 처리 : addEventListener, removeEventLisenter 등
DOM 요소 생성 및 추가 : createElement, appendChild 등
스타일 조작

등등...

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

사실 시멘틱 태그는 이번에 처음 사용해봤습니다! 사용해보면서 조금 정리한 내용을 적어보겠습니다.

시멘틱 태그는 태그 안에 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그입니다. 때문에 사용하면 더 명시적이고 직관적인 구조의 설계가 가능해집니다. 태그의 종류는 밑의 사진을 참고해주세요! 참고로 이번 프로젝트에서 저는 header, section 태그를 사용해봤습니다.

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

Flexbox는 웹페이지 레이아웃을 유연하고 효율적으로 관리할 수 있는 도구입니다. 요소를 수직/수평으로 정렬하고, 공간을 분배하고, 컨텐츠의 크기를 동적으로 조절할 수 있게 해줍니다. 주요 속성은 다음과 같은 것들이 있습니다.

display: flex / inline-flex를 설정하여 Flex Container를 정의함
flex-direction: 항목들의 주 축 설정 → 가로 or 세로
- row, column 등
- 주 축을 설정하지 않으면 기본이 row
justify-content: 주 축에 따라 항목들을 어떻게 정렬할지 결정
- flex-start, flex-end, center, space-between, space-around, space-evenly
align-items: 교차 축(주 축 반대의 축)에 따라 항목들을 어떻게 정렬할지 결정
- flex-start, flex-end, center, baseline, stretch
flex-wrap: 항목들이 컨테이너를 넘어갈 때 줄바꿈 여부를 설정
- nowrap, wrap, wrap-reverse

위 속성들을 이용해 다음과 같이 css에 적용해볼 수 있습니다.

.flex-container {
  display: flex; /* Flex Container를 정의 */
  justify-content: center; /* 요소들을 가로축 중앙에 배치 */
  align-items: center; /* 요소들을 세로축 중앙에 배치 */
  height: 100vh; /* 뷰포트 높이의 100% */
}

.flex-item {
  width: 100px; /* 각 항목의 너비 */
  height: 100px; /* 각 항목의 높이 */
  background-color: #f76c6c; /* 배경 색상 */
  margin: 10px; /* 항목 간 여백 */
  text-align: center; /* 텍스트 중앙 정렬 */
  line-height: 100px; /* 텍스트 라인 높이를 항목 높이와 동일하게 설정 */
}

corinthionia

안녕하세요 여은 님!
굉장히 짧은 시간이었음에도 정말 완성도 높은 결과물을 구현하셨네요 🥹 정말 고생 많으셨습니다! 진짜 노트패드 같아요 🗒️🗒️ 코멘트도 간단히 몇 개 달아 봤습니다 👀 (프리티어 설정이 제대로 안 된 것 같은데 확인 한번 부탁드립니다!)

index.html

script.js

corinthionia · 2024-08-28T10:11:37Z

script.js

+function setTodoList(todo) {
+  let newTodoList = getTodoList();
+  //todo done 여부 확인
+  for (let i = 0; i < newTodoList.length; i++) {
+    if (
+      newTodoList[i].content === todo.content &&
+      newTodoList[i].complete !== todo.complete
+    ) {
+      newTodoList.splice(i, 1);
+      break;
+    }
+  }
+  newTodoList.push(todo);


이 부분을 JavaScript의 배열 내장 함수를 사용하여 자바스크립트 답게 작성해 보면 좋을 것 같아요! 또한 JavaScript에서 배열을 사용할 때 splice()나 push()를 사용하는 것보다는 새로운 배열을 만들어 할당하는 방식을 자주 사용합니다 🙂

그 이유가 궁금하시다면,,,

JS의 immutability(불변성) 관련된 문제인데 이 글에 자세히 나와 있어서 참고하시면 좋을 것 같아요!

간단히 설명드리자면, 배열의 값을 직접 변경할 경우 디버깅이 어렵고 의도치 않은 결과를 불러올 수 있기 때문에 배열의 값을 직접 변경하는 방식이 아닌 새로운 배열을 만들어 할당하는 방식을 추천합니다. 따라서 값을 직접 변경하는 push(), splice() 등의 메소드보다 새로운 배열을 반환하는 map(), filter() 혹은 spread 연산자를 사용하는 방식을 권장합니다 👀 또한 나중에 React를 사용하실 때에도 배열 불변성을 지켜 주셔야 상태 변화 감지와 성능 최적화 부분에서 용이하답니다!

저도 주현님께서 말씀해주신 것과 같이 배열 내장 함수를 사용하는 것이 좋을 것 같습니다! 훨씬 간결해질 것 같습니다!

배열 내장 함수 바로 적용해서 자바에서 자바스크립트로 업그레이드 해보겠습니다!
JS의 불변성에 대해서는 잘 몰랐는데, react에서 state 객체에 불변성을 적용하는 것도 같은 맥락이네요! 또 새롭게 알아갑니다😀
splice()를 사용한 코드는 map()을 사용해서 리팩토링해보겠습니다!

script.js

corinthionia · 2024-08-28T11:29:29Z

script.js

여기도 추후에 filter() 메서드를 사용해 보면 좋을 것 같아요!

script.js

style.css

corinthionia · 2024-08-28T11:35:48Z

style.css

+    font-family: RixXladywatermelonR;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-wrap: wrap-reverse;
+}


cursor: pointer 를 추가하면 더 좋을 것 같습니다 😉

오 버튼에 추가해보겠습니다!

index.html

script.js

cabrerainbu · 2024-08-28T11:43:59Z

script.js

+  if (todo.complete) {
+    newDoneBtn.innerText = "v";
+    doneListElement.appendChild(newLi);
+  } else {
+    newDoneBtn.innerHTML = "&nbsp;";
+    todoListElement.appendChild(newLi);
+  }
+
+  newDeleteBtn.textContent = "x";


innerText와 textContent를 구분해서 사용하신 이유가 있으신가요 ?

앗 따로 이유는 없습니다! 코드를 꼼꼼하게 확인하지 못해서 같은 기능에 다른 속성을 사용하고 있었네요ㅠㅠ😮‍💨 확인 감사합니다!🙇🏻‍♀️
button 엘리먼트 하나의 텍스트값만 읽어오니까 innerText로 통일해서 사용하는게 맞겠네요!

style.css

ongheong · 2024-08-29T07:47:47Z

안녕하세요 여은 님! 굉장히 짧은 시간이었음에도 정말 완성도 높은 결과물을 구현하셨네요 🥹 정말 고생 많으셨습니다! 진짜 노트패드 같아요 🗒️🗒️ 코멘트도 간단히 몇 개 달아 봤습니다 👀 (프리티어 설정이 제대로 안 된 것 같은데 확인 한번 부탁드립니다!)

감사합니다🙇🏻‍♀️🙇🏻‍♀️ 디자인에 고민을 많이 했는데 노트패드같다니 정말 다행이에요...!! 프리티어는 vs익스텐션만 설치하면 된다고 생각했는데 설정이 더 있었네요😅 주현님이 주신 노션페이지 참고해서 설정했습니다!!

ZUITOPIA · 2024-08-29T08:08:01Z

코드가 기능 단위로 잘 나누어져 있어서 금방 흐름이 읽혔어요! 고생하셨습니다 ㅎㅎ

ZUITOPIA · 2024-08-28T11:44:23Z

script.js

+function setTodoList(todo) {
+  let newTodoList = getTodoList();
+  //todo done 여부 확인
+  for (let i = 0; i < newTodoList.length; i++) {
+    if (
+      newTodoList[i].content === todo.content &&
+      newTodoList[i].complete !== todo.complete
+    ) {
+      newTodoList.splice(i, 1);
+      break;
+    }
+  }
+  newTodoList.push(todo);


저도 주현님께서 말씀해주신 것과 같이 배열 내장 함수를 사용하는 것이 좋을 것 같습니다! 훨씬 간결해질 것 같습니다!

style.css

script.js

ZUITOPIA · 2024-08-28T11:53:55Z

style.css

+}
+
+li > :nth-child(3) {


css 정석대로 야무지게 잘 사용하시네요 멋집니다!

Co-authored-by: Joohyun Kim <[email protected]>

…ateTime 속성 추가

ongheong added 19 commits August 27, 2024 15:24

✨ Feat : 기본 html 구조 작성

89e77a0

💄 Feat : 웹 폰트 추가

db6fbdf

✨ Feat : 사용자 입력을 localStorage에 저장, 업데이트, 화면 출력 기능 추가

70fcdc8

🐛 Fix : Enter 키 입력 시 화면이 새로고침되는 문제 수정

0ec49be

🔨 Refactor : html에서 onclick 이벤트 제거 -> addEventListener로 바꿈

ce263a0

✨ Feat : todo item의 done, delete 기능 추가

8dec920

🐛 Fix : localStorage의 순서와 화면 출력 순서가 다른 오류 해결

ebf9167

🏗️ Feat : 배경 이미지 업로드

a1d5cdd

💄 Refactor : 버튼의 innerText 수정

5a3602c

💄 Refactor : label 태그 추가, h4 태그 innerText 수정

ca63868

💄 Feat : 각 태그들의 스타일 1차 작성

82d8789

💄 Refactor : 스크롤바 추가

142f541

🐛 Fix : 빈 문자열 입력 -> 유효성 검사 추가

aab51c6

✨ Feat : 하위 li 태그의 개수를 출력하는 기능 추가

32c826e

🐛 Fix : 할 일 완료 시 Done의 개수가 업데이트되지 않는 오류 수정

f43362a

💬 Style : 불필요한 주석 삭제 및 수정

6379d37

🐛 Fix : li가 없을 경우 section title이 없는 오류 해결

0d17840

💄 Refactor : body, container, ul의 높이 수정

0546dc2

💄 Refactor : + 버튼 클릭 시 hover 효과 추가

c46b278

corinthionia reviewed Aug 28, 2024

View reviewed changes

cabrerainbu reviewed Aug 28, 2024

View reviewed changes

index.html Show resolved Hide resolved

cabrerainbu reviewed Aug 28, 2024

View reviewed changes

script.js Outdated Show resolved Hide resolved

cabrerainbu reviewed Aug 28, 2024

View reviewed changes

style.css Show resolved Hide resolved

🔧 Style : .prettier 설정 추가

1f3acc7

ZUITOPIA reviewed Aug 29, 2024

View reviewed changes

ongheong and others added 2 commits August 30, 2024 15:19

Update script.js

61c6b32

Co-authored-by: Joohyun Kim <[email protected]>

changes committed

956b42c

♻️ Refactor: 배열내장함수(filter, foreach 등)와 spread 문법 사용, newTodo 객체에 cre…

0bd49ca

…ateTime 속성 추가

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 심여은 미션 제출합니다. #5

[1주차] 심여은 미션 제출합니다. #5

ongheong commented Aug 27, 2024 •

edited

Loading

corinthionia left a comment •

edited

Loading

corinthionia Aug 28, 2024

ZUITOPIA Aug 28, 2024

ongheong Aug 29, 2024 •

edited

Loading

corinthionia Aug 28, 2024 •

edited

Loading

corinthionia Aug 28, 2024

ongheong Aug 30, 2024 •

edited

Loading

cabrerainbu Aug 28, 2024

ongheong Aug 30, 2024

ongheong commented Aug 29, 2024

ZUITOPIA commented Aug 29, 2024

ZUITOPIA Aug 28, 2024

ZUITOPIA Aug 28, 2024

[1주차] 심여은 미션 제출합니다. #5

Are you sure you want to change the base?

[1주차] 심여은 미션 제출합니다. #5

Conversation

ongheong commented Aug 27, 2024 • edited Loading

미션 소감

미션에서 특별히 신경 쓴 부분들

KEY QUESTION

1. DOM이란 무엇인가요?

2. JavaScript로 DOM을 조작하는 방법은 어떤 것이 있나요?

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

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

corinthionia left a comment • edited Loading

Choose a reason for hiding this comment

corinthionia Aug 28, 2024

Choose a reason for hiding this comment

ZUITOPIA Aug 28, 2024

Choose a reason for hiding this comment

ongheong Aug 29, 2024 • edited Loading

Choose a reason for hiding this comment

corinthionia Aug 28, 2024 • edited Loading

Choose a reason for hiding this comment

corinthionia Aug 28, 2024

Choose a reason for hiding this comment

ongheong Aug 30, 2024 • edited Loading

Choose a reason for hiding this comment

cabrerainbu Aug 28, 2024

Choose a reason for hiding this comment

ongheong Aug 30, 2024

Choose a reason for hiding this comment

ongheong commented Aug 29, 2024

ZUITOPIA commented Aug 29, 2024

ZUITOPIA Aug 28, 2024

Choose a reason for hiding this comment

ZUITOPIA Aug 28, 2024

Choose a reason for hiding this comment

ongheong commented Aug 27, 2024 •

edited

Loading

corinthionia left a comment •

edited

Loading

ongheong Aug 29, 2024 •

edited

Loading

corinthionia Aug 28, 2024 •

edited

Loading

ongheong Aug 30, 2024 •

edited

Loading