[1주차] 오윤재 미션 제출합니다. #2

jaee55555 · 2024-08-26T16:17:36Z

안녕하세요, 여러분! LG U+ URECA 프론트엔드 대면반 1기 오윤재입니다.

이번 유레카 교육 프로그램을 통해 웹 공부를 처음 시작하다보니 서툰 코딩 실력이 드러나는 것 같아, 제출하는 과정속에서도 긴장이 되네요 .😂
HTML, CSS, JavaScript 그 무엇하나 쉽지 않음을 깨달았던 1주차였던 것같습니다.
그래도 이번 미션을 통해 기본기를 다잡는 복습시간으로 경험삼을 수 있어서 기뻤습니다.🤩
앞으로도 열심히 차근차근 공부해 나갈 수 있도록 최선을 다해보겠습니다.🥹

💡 알게 된 부분

HTML에서의 div 태그와 section 태그의 차이를 배웠습니다.

div: 페이지의 레이아웃을 구성하거나, 단순히 스타일링을 적용하는 용도로 사용. 특정 의미나 주제가 없는 경우에 적합
section: 문서나 웹페이지의 내용을 논리적으로 구분하고, 그 구분이 의미가 있는 경우 사용

DOM 조작 방법을 배웠습니다.

getElementById와 querySelector를 통해 HTML 요소들 접근 및 선택하기
createElement로 HTML 요소 생성하기
appendChild를 사용하여 HTML 구조에 추가하기
addEventListener를 통해 이벤트 처리하기

🔑 KEY QUESTION

1. DOM이란 무엇인가요?
문서 객체 모델(Document Object Model)로, HTML문서의 각 항목을 Tree구조로 표현하여 화면(문서)의 요소를 제어할 수 있습니다.

2. JavaScript로 DOM을 조작하는 방법은 어떤 것이 있나요?
(1) getElementById나 querySelector를 선택
(2) createElement로 요소 생성
(3) appendChild로 HTML 구조에 추가

3. Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?
웹 페이지의 구조를 보다 잘 표현할 수 있는 태그라고 할 수 있습니다. header, footer, section, nav 등이 있습니다.
곤충을 머리, 가슴, 배로 마디 구조화 시킬 수 있듯이,
semantic tag를 사용하면 해당 부분이 문서 속에서 어느 부분에에 위치해 있는지 바로 알 수 있습니다.

4. Flexbox Layout은 무엇이며, 어떻게 사용하나요?
Flexbox는 Flexible Box의 줄임말로, 레이아웃을 보다 직관적으로 관리할 수 있게 해주는 도구라고 할 수 있습니다.
크게 Container와 Items로 나눌 수 있습니다.
(1) Container에는 display, flex-flow, justify-content 등의 속성을 사용 가능
(2) Items에는 order, flex, align-self 등의 속성을 사용 가능

🌟 다음주 각오

가능하다면, 더 작은 기능 단위로 commit 하고 싶습니다.
디자인적 요소를 조금 더 가미하여 CSS을 더 능숙하게 작성하고 싶습니다.
브라우저의 웹 스토리지를 이용하여 데이터 접근하는 방법에 도전하고 싶습니다.

(+)Vercel로 배포하기

Vercel에서 개인 프로젝트를 무료 배포할 수 있습니다.
jaee55555-vanilla-todo에서 이번 1주차 미션의 구현 화면을 확인할 수 있습니다.

corinthionia

안녕하세요 윤재 님!
함수가 기능별로 잘 분리되어 있던 점이 아주 보기 편했습니다 👍🏻 코멘트 몇 개 남겨 두었으니 확인해 보시면 좋을 것 같아요! 과제 하시느라 고생하셨습니다 🙌

corinthionia · 2024-08-28T13:39:17Z

index.html

+      <header>📚 투두리스트</header>
+      <form class="input-box">
+        <input id="todo-input" placeholder="할 일을 입력하세요">
+        <button id="add-todo-btn">➕</button>
+      </form>
+
+      <section class="todo-list-box">
+        <h4 id="todo-list-title"></h4>
+        <ul class="done-list"></ul>
+      </section>
+
+      <section class="done-list-box">
+        <h4 id="done-list-title"></h4>
+        <ul class="done-list"></ul>
+      </section>


Semantic 태그 사용 아주 좋습니다!!

이번에 div 태그와 section 태그의 차이를 알게 되니까 한번 사용해보고자 Semantic 태그를 적용해보았습니다!
감사합니당 ㅎㅎ

corinthionia · 2024-08-28T13:41:49Z

script.js

+            // 항목 삭제 기능
+            event.stopPropagation();
+            li.remove();
+            updateCount(); // 항목 삭제 후 갯수 업데이트
+        });


화살표 함수도 사용해 보시면 좋을 것 같아요 🙂

Suggested change

deleteBtn.addEventListener('click', function(event) {

// 항목 삭제 기능

event.stopPropagation();

li.remove();

updateCount(); // 항목 삭제 후 갯수 업데이트

});

deleteBtn.addEventListener('click', (event) => {

// 항목 삭제 기능

event.stopPropagation();

li.remove();

updateCount(); // 항목 삭제 후 갯수 업데이트

});

화살표 함수가 아직 익숙치 않아서 해당 부분을 놓쳤던 것 같습니다😭
익숙해지도록 연습하고 익혀보겠습니다!

corinthionia · 2024-08-28T13:52:01Z

script.js

+        li.addEventListener('click', function() {
+            // 항목 클릭 시, To Do <=> Done 이동
+            if (li.parentElement === todoListBox) {


parentElement children 등과같이 DOM 트리 내부의 상대적인 관계를 기반으로 요소를 찾는 방식은 DOM 트리 구조에 의존적이기 때문에 주의해서 사용해야 합니다! (HTML 구조가 달라질 경우 부모-자식 관계 또한 변할 수 있고, 이러한 경우 스크립트도 변경해야 하기 때문입니다)

따라서 이러한 방법보다는 querySelector나 getElementById 등을 통해 요소를 선택하는 방식이 더 좋을 수도 있습니다!

DOM트리 내부에서의 상대적 관계라서 그렇군요...!
HTML 구조가 달라질 수도 있는 상황을 생각해보지 못해서 간과했던 것같습니다!

감사합니다!

corinthionia · 2024-08-28T13:53:00Z

script.js

+    function addTodoItem() {
+        // To Do에 항목 추가 및 검사
+        const todoText = todoInput.value.trim();


trim() 사용하신 디테일 👍🏻

corinthionia · 2024-08-28T13:58:11Z

script.js

+        if (todoText !== '') { // 빈 텍스트 처리
+            const todoItem = createTodoItem(todoText);
+            todoListBox.appendChild(todoItem);


append()와 appendChild()의 차이도 알아보시면 좋을 것 같아요! 👀 참고자료

참고자료 첨부해주셔서 감사합니다!
덕분에 바로 이해했습니다.🤩

corinthionia · 2024-08-28T14:11:36Z

script.js

오 DOMContentLoaded 이벤트 리스너를 사용하셨군요!

현재 저희가 사용하는 HTML 파일 내부에서 <script src="script.js"></script> 태그를 <body> 태그의 가장 끝에 위치시키는 것과 비슷하게 동작한다고 하네요 👀 하지만 <script>의 위치가 항상 <body> 태그의 끝에 있을 것이라는 보장이 없으므로 윤재 님 코드처럼 DOMContentLoaded 이벤트 리스너를 사용하는 것이 좋다고 합니다 👍🏻👍🏻

이 부분 나중에 스터디 시간에 공유해 주시면 좋을 것 같아요!

DOMContentLoaded 이벤트 리스너를 이번에 처음 알게 되어서 적용해보았습니다.
설명해주신 대로 DOM의 조작에 필요한 기본적은 안정성을 보장하기 때문에, 요소가 존재하지 않아서 발생되는 오류를 사전 방지할 수 있다고 합니다.

다만 여러 스크립트를 사용해야하는 복잡한 상황에서는 로드 타이밍 제어같은 추가요소가 필요한다고 하네요!
스터디 시간에 해당 내용을 최대한 설명할 수 있도록 하겠습니다!
감사합니다 ☺️

corinthionia · 2024-08-28T14:15:44Z

style.css

폰트 이름이 귀엽군요,, 😌

corinthionia · 2024-08-28T14:17:53Z

style.css

+
+div {
+    unicode-bidi: isolate;


우와 이런 게 있는지 처음 알았어요 👀 윤재 님 이런 거 어디서 알게 되셨나요?!?!

결과화면을 분석하다보니까 해당 항목이 있어서 처음 알게 되었습니다...!
저도 이번에 처음 알게 되어서 한번 익혀보고자 작성해보았습니다 ㅎㅎ

jissssu

윤재님! 주석을 꼼꼼히 달아주셔서 코드 리뷰하기에 편했습니다! 윤재님 코드 보면서 몰랐던 메소드와 단위들도 배워갑니다! 앞으로도 같이 화이팅해봐요오!!!!

jissssu · 2024-08-29T05:03:31Z

index.html

+    <div class="container">
+      <header>📚 투두리스트</header>
+      <form class="input-box">
+        <input id="todo-input" placeholder="할 일을 입력하세요">
+        <button id="add-todo-btn">➕</button>
+      </form>
+
+      <section class="todo-list-box">
+        <h4 id="todo-list-title"></h4>
+        <ul class="done-list"></ul>
+      </section>
+
+      <section class="done-list-box">
+        <h4 id="done-list-title"></h4>
+        <ul class="done-list"></ul>
+      </section>


저도 윤재님 코드보면서 semantic 태그 더 잘 적용해서 코드 수정해보겠습니다!

jissssu · 2024-08-29T05:06:15Z

script.js

+        // + 버튼 클릭 시 항목 추가
+        event.preventDefault();
+        addTodoItem();
+    });
+
+    updateCount(); // 각 목록별 항목 수 업데이트 (페이지 로딩 시)
+});


저도 버튼 클릭시 + 되는 항목을 추가했는데 , Enter 키 입력으로도 추가할 수 있도록 키보드 이벤트 리스너를 추가하면 더 좋을 것 같아요! 저도 이부분 해결하려고 합니다!

앗, 저는 html에서 화면 구성할때
<form>안에 <input>과 <button>을 명시해서,
<button>의 click 이벤트가 마우스 클릭뿐만 아니라 Enter까지 이벤트 발생할 수 있도록 구현했습니다!

하여, Enter 입력시에도 정상적으로 동작하는 것을 확인하실 수 있을 것 같습니다!
주석으로 내용 추가하여 명시하도록 하겠습니다.
감사합니다!

헉 확인했습니다! 알려주셔서 감사합니다!

jissssu · 2024-08-29T05:09:04Z

script.js

+        deleteBtn.addEventListener('click', function(event) {
+            // 항목 삭제 기능
+            event.stopPropagation();


event.stopPropagation()는 제가 몰랐던 부분인데 덕분에 코드 보면서 불필요한 이벤트 실행을 방지하는 메소드 알아갑니다!

저도 이번에 처음 알게 되어서 사용하게 되었습니다! ☺️

jissssu · 2024-08-29T05:13:32Z

style.css

+
+form {
+    margin-top: 0em;


오 em 단위! 덕분에 또 알아갑니다!

ZUITOPIA

어제 코드리뷰를 다 끝내고 집에 갔는데 지금보니 리뷰 완료 버튼을 안 눌렀었네요 🥲 코드리뷰가 늦어져서 죄송합니다,, 궁금한 점이 꽤 있어서 질문 달아두었으니 확인 부탁드립니다!

ZUITOPIA · 2024-08-28T12:13:08Z

script.js

+        deleteBtn.addEventListener('click', function(event) {
+            // 항목 삭제 기능
+            event.stopPropagation();


윤재님 코드 덕분에 stopPropagation이라는 함수는 처음 알게 되었네요! 이벤트가 상위 엘리먼트에 전달되지 않게 막아주는 기능이라니, 좋은 지식 얻어갑니다 👍

혹시 이 함수를 사용하지 않았을 때는 어떤 식으로 작동했기에 꼭 써주어야만 했는지 궁금합니다!

deleteBtn은 항목을 삭제하는 기능을 하는 버튼인데,
event.stopPropagation()을 사용하지 않으면 상위 요소인 li의 클릭 이벤트가 추가적으로 발생할 가능성이 생깁니다.
예시) 항목이 삭제되었음에도 doneListBox로 이동
이를 이벤트 전파라고 하네용

하여, 예기치 않게 상위 요소의 이벤트가 추가적으로 발생하지 않도록 사전 차단하고자 해당 코드를 작성하게 되었습니다.
해당 내용도 제가 주석으로 추가 기입하도록 하겠습니다. 감사합니다!🤩

오호 무척 좋은 경험을 하셨네요~ 저도 이 문제에 대해서 더 공부하고 확실히 알게되는 계기가 될 것 같아요 설명 감사합니다!

ZUITOPIA · 2024-08-28T12:21:36Z

script.js

+    function addTodoItem() {
+        // To Do에 항목 추가 및 검사
+        const todoText = todoInput.value.trim();


trim 함수를 이용해서 양 끝 공백 문자 제거 디테일 좋네요 !!

ZUITOPIA · 2024-08-28T12:34:05Z

style.css

+
+div {
+    unicode-bidi: isolate;


이 부분은 어떤 흐름에서 추가하게 되었는지 궁금합니다!

해당 내용은 이번주 미션의 샘플 화면을 분석하면서 알게 되었는데요,
보통은 한 페이지에서 양방향 텍스트가 있을 때 각 구역별(혹은 언어별) 방향을 지정해줄 때에 사용된다고 합니다.
나라에 따라 문장을 왼쪽에서 오른쪽, 혹은 오른쪽에서 왼쪽으로 읽는 방향이 다르기 때문에 페이지 내에서 지정하여 조절할 때에 사용한다고 합니다.

이번 미션에서는 필요한 부분은 아니지만 혹시 모를 상황에 익혀두기 위해 작성된 부분입니다😂

ZUITOPIA · 2024-08-28T12:36:49Z

style.css

+    margin: 0;
+    background: linear-gradient(to right, #FFB3B3, #FFD9B3, #FFFFB3);
+    font-family: 'RixXladywatermelonR', sans-serif; 


font-family 적용은 *{} 에서 한 번만 하면 전체 적용이 가능하니 참고해주세요!

안그래도 이번에 font-family 적용하면서 직접 입력할 때, 뭔가 더 효율적으로 적용가능할 수 있을 것같아서 찾아보고 있었는데
알려주셔서 감사합니다!😍

ZUITOPIA · 2024-08-28T12:37:51Z

style.css

+}
+
+ul {


내부 요소들끼리의 위 아래 간격을 조금 더 띄워주면 가독성이 조금 더 높아질 것 같습니다!

안그래도 CSS 파일 작성하면서 가독성에 관해 고민했었는데 조언해주셔서 감사합니다!🤩

ZUITOPIA · 2024-08-28T12:38:20Z

style.css

+    border: none;
+    background: none;
+    cursor: pointer;


cursor: pointer 디테일 좋아요 👍

ZUITOPIA · 2024-08-28T12:39:32Z

style.css

+
+form {
+    margin-top: 0em;


단위를 %, em, px 등등 다양하게 사용하시는 것 같은데 윤재님만의 각 단위 사용 기준이 어떻게 다른지 궁금합니다!

아직 CSS에 익숙하지 않은 탓에 이번 미션에서 다양하게 스킬을 익혀보고자 사용해서,
아직까지는 저만의 사용 기준이 잡히진 않은 것 같습니다 😭

저만의 기준이 잡힐 때까지 실력을 갈고 닦아보겠습니다...!

다양한 시도였군요~ 노력하시는게 느껴져요! 👍

jaee55555 added 3 commits August 26, 2024 22:41

feat: 화면 기본 구성

fdc6ff5

feat: 기능 구현

7df151d

design: 눈누 수박양체 폰트 적용

b47d590

corinthionia reviewed Aug 28, 2024

View reviewed changes

jissssu reviewed Aug 29, 2024

View reviewed changes

jaee55555 added 2 commits August 29, 2024 16:29

feat: arrow func 사용

328c251

docs: click 이벤트 관련 주석 추가

2294f9d

ZUITOPIA reviewed Aug 29, 2024

View reviewed changes

jaee55555 added 2 commits August 29, 2024 17:50

design: * 사용하여 폰트 전체 페이지 적용

2150e4c

docs: stopPropagation() 기능 관련 주석 추가

c925797

[1주차] 오윤재 미션 제출합니다. #2

Are you sure you want to change the base?

[1주차] 오윤재 미션 제출합니다. #2

Conversation

jaee55555 commented Aug 26, 2024 • edited Loading

💡 알게 된 부분

🔑 KEY QUESTION

🌟 다음주 각오

(+)Vercel로 배포하기

corinthionia 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

corinthionia Aug 28, 2024 • edited Loading

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

jissssu 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

ZUITOPIA 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

Choose a reason for hiding this comment

jaee55555 commented Aug 26, 2024 •

edited

Loading

corinthionia Aug 28, 2024 •

edited

Loading