[1주차] 이지인 미션 제출합니다. #12

jinnyleeis · 2024-03-15T14:58:33Z

배포 링크 : https://vanilla-todo-19th-five.vercel.app/

[구현한 기능]

date-picker로 날짜 선택 시
-> 해당 날짜의 투두 리스트를 화면에 로드합니다.
투두 리스트 섹션을 추가할 수 있습니다.
투두 리스트 섹션 내에서 할 일 아이템을 추가합니다.
각각의 섹션별 할 일의 개수를 알 수 있습니다.
삭제하고 싶은 섹션을 삭제 가능합니다.
완료된 할 일을 삭제 가능합니다.
로컬 스토리지에 날짜별 -> 섹션별 -> 할 일 구조로 데이터를 관리하여 삭제하지 않는 이상 브라우저에서 투두리스트 데이터가 유지됩니다.
flex를 통해, 반응형으로 구현하였습니다.

가로축은 원하는대로 뷰포트에 알맞게 반응형으로 작동하나, 세로 반응형 구현은 잘 되지 않아, 투두리스트가 길어질 시에는 overflow-y를 통해 투두리스트 컨테이너가 스크롤 되도록 구현했습니다.

[Key Questions]

Key Questions

DOM은 무엇인가요?
DOM은 document object element로, DOM은 노드들과 객치로 html 문서를 표현한 모델입니다.
DOM은 문서에 접근할 수 있는 구조화된 표현을 제공하므로, 자바스크립트를 통해 DOM 구조에 접근하여 각종 조작을 할 수 있습니다.

document 객체(root document)와 window 객체(브라우저)를 DOM 조작에 가장 많이 사용합니다.
document를 통해 root 문서에 접근해 문서의 노드들을 조작할 수 있습니다.

아래는 root 문서 조작을 가능하게 해주는
document의 메서드들과, Element, Node 인터페이스의 메서드와 속성들입니다.
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)

element.innerHTML
element.style
element.setAttribute
element.getAttribute

element.addEventListener()

HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
createElement 돔 요소 생성 후
appendChild()로 dom에 반영
Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?
Semantic tag는 의미를 가진 태그로, 이를 통해 html 태그를 브라우저가 파악해서 읽을 수 있도록 합니다.
또한, 시맨틱 태그를 잘 사용하면 html 마크업을 잘 파악할 수 있습니다.
Flexbox Layout은 무엇이며, 어떻게 사용하나요?
flex를 통해 1차원적으로 요소들을 배치할 수 있습니다.
flex-direction을 통해 요소들을 배열할 메인축을 설정합니다.
justify-content 속성으로 메인축에 나열된 요소들간의 간격을 설정합니다.
flex-wrap 속성을 통해 아이템이 메인축 한 라인을 넘어가면,wrapping(다음 줄로 아이템을 넘김)할 것인지 한 줄에 표시할 것인지를 설정합니다. 기본값은 nowrap 입니다.

메인축뿐만 아니라, align-items나 align-content 속성을 사용하면, 교차축으로 요소들을 어떻게 배치할 것인지도 설정할 수 있습니다.

JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?
동적 타입의 언어, 웹 프론트앤드 개발에 최적화된 언어라는 점입니다.
코드에서 주석을 다는 바람직한 방법은 무엇일까요?
통일성 있게 주석을 다는 것이 좋습니다.

유일한 요소 -> document.getElementById로 접근

youdame

지인님 고생 많으셨어요!

사용자 경험을 위해 엔터키를 눌러도 섹션이나 할 일 추가가 되도록 만들어준다면 더 좋을 거 같네요 ㅎㅎ 저는 매번 todolist를 배열로 다시 만들어서 로컬스토리지에 저장하는 식으로 구현했는데 지인님은 filter나 splice 사용하신 게 인상 깊었습니다 ! 그런데, 투두나 섹션의 값이 바뀔 때마다 매 번 로컬스토리지에 서 값을 가져와서 그 값을 기준으로 업데이트해야한다는 점이 브라우저 성능 측면에서 아쉬울 수도 있을 거 같네요 ㅠㅠ

개별 토론 세션에서 같이 이야기 나눠봐요~!

youdame · 2024-03-16T12:32:02Z

script.js

+	const datePicker = document.getElementById('datePicker');
+	const addSectionBtn = document.getElementById('addSectionBtn');
+	const sectionInput = document.getElementById('sectionInput');
+	const todoSectionsDiv = document.getElementById('todoSections');
+


주로 getElementById를 사용하셨네요! 찾아보니 querySelector가 getElementById보다 느리다고 하네요.. 몰랐던 사실..!! 저는 주로 querySelector를 사용했는데, 지인님 덕분에 찾아보게 됐습니다 ㅎㅎ

저는 그냥 init 함수를 사용했었는데, 지인님처럼 DOMContentLoaded를 사용해서 dom이 완전히 로드된 다음 접근하는 게 더 좋은 거 같네요!

youdame · 2024-03-16T14:46:37Z

script.js

+
+	function createSectionDiv(section, index) {
+		const sectionDiv = document.createElement('div');
+		sectionDiv.className = 'todo-section';


주로 className 속성으로 접근하셔서 스타일링을 해주셨는데, 이 방법을 사용하면 class 속성 값 전체가 덮어씌워져 버려서 여러 가지 class를 적용하려면 classList.add 메소드를 사용하는 게 좋다고 하네요~

youdame · 2024-03-16T15:11:29Z

style.css

* { font-family: SejonghospitalBold, "sans-serif"; box-sizing: border-box; }

이렇게 적어주시면 중복된 코드 줄일 수 있을 거 같아요!

그리고 보통 box-sizing: border-box; 같은 경우도, global.css로 따로 빼서 설정해주니, * 안으로 들어가면 좋을 거 같네요~

youdame · 2024-03-16T15:31:45Z

style.css

reset.css나 global.css라는 파일을 둬서 브라우저의 stylesheet를 초기화하고 공통적으로 적용할 css를 정의해준다면 좋을 거 같습니다!

youdame · 2024-03-16T15:34:07Z

script.js

div로 element를 많이 만들어주셨는데, 시맨틱 태그로 리팩토링 해주신다면 웹 페이지 접근성에 더 도움이 될 거 같아요~

noeyeyh

지인님, 주석 작성을 꼼꼼히 해주셔서 쉽게 이해할 수 있었던 것 같아요!
할일을 섹션별로 나눠서 작성할 수 있는 기능과 날짜 선택할 수 있는 기능 좋은 것 같아요.
다양한 기능을 작성해주셔서 코드 보면서 배우고 갑니다..!

noeyeyh · 2024-03-17T03:45:52Z

script.js

+			itemDiv.textContent = item;
+
+			const deleteItemBtn = document.createElement('button');
+			deleteItemBtn.textContent = '완료';


할 일 아이템별로 완료 버튼 말고도 삭제 버튼으로 삭제할 수 있는 기능이 있으면 좋을 것 같아요!

noeyeyh · 2024-03-17T03:47:35Z

script.js

+	// ** 함수 기능 : 로컬 스토리지에서 선택된 날의 전체 투두리스트 불러오기 -> html로 띄우기
+	function loadSectionsForDate() {
+		const selectedDate = datePicker.value;
+		todoSectionsDiv.innerHTML = ''; // 특정 날 투두리스트 불러올 준비


오늘 날짜로 작성하는 것뿐만 아니라 날짜를 선택해서 날짜별로 투두리스트를 작성하고 불러오는 기능 너무 좋은 것 같아요!

noeyeyh · 2024-03-17T03:52:21Z

script.js

+		const addItemBtn = document.createElement('button');
+		addItemBtn.textContent = '+';
+		addItemBtn.onclick = () => addTodoItem(index, itemInput.value);
+		sectionDiv.appendChild(addItemBtn);


append 메소드를 이용하면 여러 노드를 한번에 추가할 수 있어 더 간결하게 작성할 수 있어요!

noeyeyh · 2024-03-17T04:21:28Z

script.js

+		const addItemBtn = document.createElement('button');
+		addItemBtn.textContent = '+';
+		addItemBtn.onclick = () => addTodoItem(index, itemInput.value);
+		sectionDiv.appendChild(addItemBtn);


사용자가 입력 필드에서 엔터키를 눌러도 할 일이 추가되도록 itemInput에 이벤트 리스너를 추가해도 좋을 것 같아요!

noeyeyh · 2024-03-17T04:25:19Z

style.css

+	font-family: 'SejonghospitalBold';
+	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SejonghospitalBold.woff2')
+		format('woff2');
+}


저는 HTML에서 요소를 사용하여 외부 폰트를 불러오는 방법을 사용했는데요..!
CSS의 @font-face 규칙을 사용하여 직접 폰트를 정의하고 적용하는 방법도 배우고 갑니다!

leejin-rho

안녕하세요~~ 프론트엔드 운영진 노이진입니다!

로컬스토리지나 trim() 등 여러 요소들을 고려해서 코드 작성해주신 것 같아서 정말 좋았습니다~! 주석도 꼼꼼히 작성해주셔서 읽기 편했어요!
특히 섹션을 나눠서 각각 소제목과 섹션별 리스트를 만들어주신 부분이 사용자 경험을 위해 노력하셨다는 점이 돋보였습니다.
다음 과제는 이번 과제를 리펙토링하는 과제라고 할 수도 있으니 이번에 아쉬웠던 부분이 있다면 추가해보시면 좋을 것 같습니다!
이번주 과제 수고하셨고 스터디 때 만나요~

leejin-rho · 2024-03-17T06:31:11Z

script.js

+
+		const sectionTitle = document.createElement('h3');
+
+		// 섹션 타이틀 업데이트 함수 호출해서 섹션 별 할일 개수 타이틀에 반영


알아보기 쉽게 코드에 주석 작성해주신 점 좋습니다~!

leejin-rho · 2024-03-17T06:32:39Z

index.html

+	</head>
+	<body>
+		<div id="app">
+			<div class="calendar-section">


캘린더까지 구현해주신 점 정말 좋습니다!

leejin-rho · 2024-03-17T06:33:31Z

style.css

+	margin: 30px auto;
+
+	padding: 20px auto;
+	overflow-y: auto;


Overflow 되는 경우까지 꼼꼼히 처리해주셨네용👍

leejin-rho · 2024-03-17T06:36:38Z

script.js

+		const sectionDiv = document.createElement('div');
+		sectionDiv.className = 'todo-section';
+
+		const sectionTitle = document.createElement('h3');


섹션까지 나눠서 그냥 투두리스트가 아니라 각각 필요한 부분의 투두리스트를 분리할 수 있게 하신 부분에서 사용자 경험을 더 고민하고 기능구현해주신 것 같아서 좋아요..!!

leejin-rho · 2024-03-17T06:41:12Z

style.css

+	flex-direction: column;
+	justify-content: flex-start;
+	align-content: space-around;
+	width: 80%;


%를 활용해 좀 더 반응형이 되도록 신경써주신 점도 좋습니다~!

leejin-rho · 2024-03-17T06:42:01Z

style.css

+.todo-section h3 {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;


👍👍👍

leejin-rho · 2024-03-17T07:32:17Z

script.js

+	const todoSectionsDiv = document.getElementById('todoSections');
+
+	// dom 로딩 완료 후, -> 날짜 선택-> 해당 날짜의 투두리스트 화면에 로드
+	datePicker.addEventListener('change', loadSectionsForDate);


default값으로 dataPicker의 value 값을 당일 날짜로 해주면 사용하기에 더 좋을 것 같습니다~!

leejin-rho · 2024-03-17T07:37:27Z

script.js

+		// 로컬 스토리지에서 존재하는 섹션들 파악
+		const sections = getSectionsForDate(selectedDate);
+
+		sections.forEach((section, index) => {


자바스크립트 고차함수 사용까지 해주신 점 좋습니다~!

jinnyleeis added 7 commits March 15, 2024 23:07

feat : html 뼈대

19ea084

feat : js에서 조작할 돔 요소 접근

efa9783

유일한 요소 -> document.getElementById로 접근

feat : 로컬 스토리지에서 set /get하는 함수

60d33b6

feat : 특정 투두리스트의 섹션, 아이템 추가/삭제/화면 표시 기능

6c038d0

feat : 남은 할 일의 수 섹션 타이틀에 반영

d1f6521

style : css 코드

99ad41a

docs : 배포 링크 업로드

3c19bcc

youdame reviewed Mar 16, 2024

View reviewed changes

noeyeyh reviewed Mar 17, 2024

View reviewed changes

leejin-rho reviewed Mar 17, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 이지인 미션 제출합니다. #12

[1주차] 이지인 미션 제출합니다. #12

jinnyleeis commented Mar 15, 2024 •

edited

Loading

youdame left a comment

youdame Mar 16, 2024

youdame Mar 16, 2024

youdame Mar 16, 2024

youdame Mar 16, 2024

youdame Mar 16, 2024

noeyeyh left a comment

noeyeyh Mar 17, 2024

noeyeyh Mar 17, 2024

noeyeyh Mar 17, 2024

noeyeyh Mar 17, 2024

noeyeyh Mar 17, 2024

leejin-rho left a comment

leejin-rho Mar 17, 2024

leejin-rho Mar 17, 2024

leejin-rho Mar 17, 2024

leejin-rho Mar 17, 2024

leejin-rho Mar 17, 2024

leejin-rho Mar 17, 2024

leejin-rho Mar 17, 2024

leejin-rho Mar 17, 2024


		const sectionTitle = document.createElement('h3');

		// 섹션 타이틀 업데이트 함수 호출해서 섹션 별 할일 개수 타이틀에 반영

[1주차] 이지인 미션 제출합니다. #12

Are you sure you want to change the base?

[1주차] 이지인 미션 제출합니다. #12

Conversation

jinnyleeis commented Mar 15, 2024 • edited Loading

Key Questions

youdame 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

noeyeyh 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

leejin-rho 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

jinnyleeis commented Mar 15, 2024 •

edited

Loading