[2주차 기본/생각 과제] 웨비의 사진관 😋, 가계부 💸 #2

doyn511 · 2023-10-27T13:21:40Z

✨ 구현 기능 명세

[ 웨비의 사진관 😋]

기본과제
1. 이미지 (첫번째 섹션만 해당)
1. 이미지 호버시 백그라운드가 어둡게 처리되고, 해당 사진에 대한 제목과 설명이 나타납니다.
2. 이미지에서 벗어나면 사라집니다.
  
  → 한번에 반드시 하나의 이미지의 설명만 나타납니다.
2. top버튼
1. 최상단에서는 보이지 않고, 스크롤을 내림에 따라 점점 선명해집니다.

[가계부 💸]

1. 최초 데이터
1. 상수로 INIT_BALANCE, HISTORY_LIST 데이터를 가집니다. (상수명은 자유)
  - INIT_BALANCE = 0
  - HISTORY_LIST : 입출금 내역 리스트 (4개)
2. 최초 실행시 위 상수 데이터들 이용해 렌더링합니다. (즉, html에 직접 박아놓는 하드코딩 ❌)
  
  → 나의 자산은 INIT_BALANCE로부터 4개의 입출금 내역 리스트를 반영하여 보여줍니다.
2. 총수입 / 총지출
1. 마찬가지로 최초에 HISTORY_LIST에 있는 수입 내역과 지출 내역을 계산해서 총수입, 총지출을 보여줍니다.
3. 수입/지출 필터링
1. 수입, 지출 선택에 따라 내역 리스트가 필터링됩니다.
4. 리스트 삭제
1. 각 리스트의 X 버튼을 누르면 해당 리스트가 삭제됩니다.
2. 리스트 삭제시 나의 자산에 반영됩니다.
3. 리스트 삭제시 총 수입 / 총 지출에 반영됩니다.
5. 리스트 추가

하단 footer의 + 버튼을 누르면 리스트 추가 모달이 나타납니다.
1. 수입 지출 버튼
  - default ⇒ 수입
  - 하나를 선택하면 다른 항목은 자동으로 선택이 풀립니다.
2. 카테고리를 선택
  - 수입을 선택하면 수입 관련된 항목들이, 지출을 선택하면 종류에 지출 관련된 항목들이 나옵니다.
  - 카테고리는 수입, 지출 각각 2개 이상씩 있습니다.
3. 금액과 내용 입력 input
4. 저장하기 버튼
  - 저장하기 버튼 클릭시 입력한 내용들로 이뤄진 리스트가 추가됩니다.
  - 이에 따라 나의 자산(잔액), 총수입, 총지출도 알맞게 변경됩니다.
  - 저장 성공시 alert 메시지를 띄웁니다.
  - 저장하기를 눌러도 모달이 닫히지 않습니다.
5. 닫기 버튼
  - 클릭하면 모달이 사라집니다.
생각 과제

💎 PR Point

웨비의 사진관 - 기본과제 2번 관련(topBtn opacity 조절)

document.addEventListener("scroll", () => {
  const scrollY = document.documentElement.scrollTop; //
  const heightDiff =
    bottomElm.getBoundingClientRect().bottom -
    topElm.getBoundingClientRect().height;

  const opacity = scrollY / heightDiff;
  topBtn.style.opacity = opacity;
});

가장 상단에 위치한 요소와, 가장 하단에 위치한 요소의 차이를 구하면 전체 요소의 height를 구할 수 있다 생각해 heightDiff를 구했습니다. scrollY를 이용해 상단에서 얼마나 scroll이 되었는지 값을 구한 뒤 전체 요소를 구한 값인 scrollY로 나누어 비율을 구하는 방식으로 구현했어요!
이 로직이 맞을지 모르겠지만, 화면 대비 스크롤의 비율을 구하는 방식을 취했는데 다른 분들은 어떻게 하셨나용~?

가게부 - 기본과제 4번 관련

function deleteListElement(delID) {
  HISTORY_LIST.forEach((elm, idx) => {
    if (elm.id === Number(delID)) {
      HISTORY_LIST.splice(idx, 1);
    }
  });
  screenRendering(HISTORY_LIST);
}

삭제 버튼을 눌렀을 때, 리스트를 삭제하는 기능을 하는 함수입니다!
원본 리스트에서 삭제버튼이 눌린 요소를 splice를 통해 삭제하고, 다시 렌더링 하는 기능을 합니다!
사실 처음에는 원본 리스트를 수정하지 않았었는데 그러다보니 새로운 항목을 추가하고 화면을 다시 로딩 할 때 삭제했던 요소까지 나타나는 문제가 생겨 원본 리스트를 수정하는 방법으로 수정하였습니다!

가게부 - 기본과제 5번 관련 (리스트 추가 중 수입 지출 toggle)

function btnToggle() {
  addIncomeBtn.toggleAttribute("checked");
  addExpenseBtn.toggleAttribute("checked");
  if (addIncomeBtn.checked) {
    createSelectOption(HISTORY_LIST, "income");
  } else {
    createSelectOption(HISTORY_LIST, "expense");
  }
}

toggleAttribute()를 사용했는데 생각만큼 잘 돌아가는거 같지 않아.. 다른 방법이 있을지 살짜쿵 여쭤봅니다..

🥺 소요 시간, 어려웠던 점

웨비의 사진관 : 2h
top버튼 투명도 조절하는 과정에서 좀 오래 걸렸습니다.. 구현하긴 했지만 아직 그 로직을 완전히 이해하지는 못해서 다시 공부해볼 생각입니다..
가계부 : 12h
자바스크립트으로 기능을 구현해본 경험이 많이 없어서 제일 처음 html 요소를 불러오는 것부터 많은 시간을 들였던 것 같아요..
기본과제 1,2번을 구현하고 난 뒤부터는 조금 자바스크립트에 대해 감이 잡혔는데 리스트 추가 과제를 만나고 난 뒤.. 엄청나게 헤멨습니다..
특히 리스트를 추가할 때 '수입', '지출' 버튼 toggle을 구현하는 과정과 제출한 form에서 값을 받아와 기존에 있던 리스트에 추가하는 것이 어려웠던거 같습니다.

🌈 구현 결과물

https://six-puppy-7ec.notion.site/2-bcf3839f87874070a92b7cc4867c3f73?pvs=4

hae2ni

진짜 코드 너무 가독성있고 직관적이다!!!!! 나 진짜 반성하구가,,, 리팩토링할 때 많이 참고할게! ❤️

hae2ni · 2023-10-28T13:37:42Z

week2/assignment1/index.js

+  });
+  content.addEventListener("mouseleave", function () {
+    selectedImg.classList.remove("bg_brightness");
+    selectedEx.classList.add("hidden");


완전 깔끔티비!!! 이건 그냥 꿀팁인데 "hidden"과 같이 많이 쓰이는 css는 상수와 시켜서 바로 불러올 수도 있어요!
const HIDDEN_CLASS = "hidden";
이러면 자동완성이 바로 되니까 더 편하더라구요!

헐 완전 꿀팁.. 맨날 hidden 하나씩 다 치고 있던 제 모습이 떠오릅니다 ....

hae2ni · 2023-10-28T13:38:55Z

week2/assignment1/scroll.js

+document.addEventListener("scroll", () => {
+  const scrollY = document.documentElement.scrollTop; //
+  const heightDiff =
+    bottomElm.getBoundingClientRect().bottom -


오와 나 이거 처음봐!!
덕분에 알아간다!!!! 신기신기
덕분에 알아가는

나도나도 진짜 대부분 처음보는거지만
그중에서도 생소해 ♥

hae2ni · 2023-10-28T13:39:07Z

week2/assignment1/scroll.js

+  const heightDiff =
+    bottomElm.getBoundingClientRect().bottom -
+    topElm.getBoundingClientRect().height;
+


더 간단해 진것같아,,, 👍

hae2ni · 2023-10-28T13:39:52Z

week2/assignment1/index.js

+
+contentList.forEach((content) => {
+  const selectedImg = content.querySelector("img");
+  const selectedEx = content.querySelector(".explanation");


혹시 길어지면 생성되는 더보기 버튼은 어디 있나용,,,?

심화과제는 아직 하지 못했답니다..하하........

hae2ni · 2023-10-28T13:40:22Z

week2/assignment2/index.html

+    <!-- 나의 자산 부분 -->
+    <section class="total_budget_section">
+      <div class="total_budget_wrapper">
+        <h1>나의 자산</h1>


h1 태그는 하나만 있는게 좋다고 들어써요!! @seobbang

앗 그러면 html문서 내에 h1태그가 하나만 있는게 좋다고 .. 생각하면 될까용?!

각 페이지는 하나의 H1 태그만 가져야 하며, 이를 무시하고 중복해서 사용하면 SEO에 부정적인 영향을 미칠 수 있다고 한다!!!

오.. SEO 때문이였구나.. 알려줘서 고마워용🫶

hae2ni · 2023-10-28T13:58:36Z

week2/assignment2/index.js

+    if (elm.checked) {
+      inExID = elm.id;
+    }


Suggested change

if (elm.checked) {

inExID = elm.id;

}

if (elm.checked) && inExID = elm.id;

이렇게 변환할 수 있겠죵?

hae2ni · 2023-10-28T13:59:42Z

week2/assignment2/index.js

+});
+
+//초기 렌더링 함수 실행
+screenRendering(HISTORY_LIST);


hae2ni · 2023-10-28T14:00:53Z

week2/assignment1/index.html

+    <title>📸도리의 사진관📸</title>
+  </head>
+  <body>
+    <header id="page_top">📸 ✈️ 도리의 2023 여행기 ✈️ 📸</header>


<header><h1>제목</h1></header> 이 더 좋을 것 같아요!

고쳐보겠습니당!!!!!!

hae2ni · 2023-10-28T14:01:04Z

week2/assignment1/index.html

+          <div class="explanation hidden">
+            <h1 class="img_title">후쿠오카 밤 길거리</h1>
+            <p class="img_exp">
+              분홍색 구름 너무 이쁘지 않나요? 다시 돌아가고 싶습니다


귀여웤ㅋㅋㅋ

hae2ni · 2023-10-28T14:01:21Z

week2/assignment1/index.html

+            </p>
+          </div>
+        </div>
+        <div class="img_hover_wrapper">


요런 거 다 시멘틱으로 바꿔보는 거 추천드려용!

코드리뷰 하면서 다른 태그들도 많이 알게되어서 고것들 반영하면서 바꿔볼게용🫶

binllionaire

너무 고생했어 도윤언니 !! 변수 네이밍이나 주석 같은 디테일이 너무 인상적이였어용 🤓🖤!!

binllionaire · 2023-10-30T17:16:58Z

week2/assignment2/index.html

+    <!-- 수입/지출 내역 -->
+    <section class="budget_list">
+      <ul></ul>
+    </section>
+
+    <!-- 리스트 삭제 모달 -->
+    <section class="modal_background delete_modal_section hidden">
+      <div class="delete_modal modal hidden">
+        <h1>정말 삭제하시겠습니까?</h1>
+        <div class="del_btn_wrap">
+          <button type="button" class="yes_delete">예</button>
+          <button type="button" class="no_delete">아니요</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- 리스트 추가 모달 -->


주석 너무 좋다 보기 너무 편하자나 💖

binllionaire · 2023-10-30T17:21:02Z

week2/assignment2/index.html

+    <!-- 나의 자산 부분 -->
+    <section class="total_budget_section">
+      <div class="total_budget_wrapper">
+        <h1>나의 자산</h1>


각 페이지는 하나의 H1 태그만 가져야 하며, 이를 무시하고 중복해서 사용하면 SEO에 부정적인 영향을 미칠 수 있다고 한다!!!

binllionaire · 2023-10-30T17:22:28Z

week2/assignment1/scroll.js

@@ -0,0 +1,13 @@
+const topBtn = document.getElementById("top_btn");


저도 칭찬스티커 하나 붙이고 갑니다 🙌🏻

binllionaire · 2023-10-30T17:32:24Z

week2/assignment2/style.css

+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 2.9rem;
+  text-align: center;
+  background-color: lightsalmon;


1주차 리뷰에서 팟장님이 얘기해주셨던 부분이긴한데 속성 간 개행이 있으면 가독성이 더 좋을 것 같아 😊

사실 CSS에는 개행을 왜 넣지? 싶었는데 이렇게 보니까 속성들이 빽빽해보이긴 하는구나....... 한번 반영해볼게 고마워!!

binllionaire · 2023-10-30T17:38:49Z

week2/assignment2/index.js

+      });
+    }
+  }
+  return newList.sort((a, b) => a.id - b.id);


정렬까지 야무지구만!

binllionaire · 2023-10-30T17:45:37Z

week2/assignment2/index.js

+    deleteBtn.onclick = () => {
+      detectDelete(deleteBtn.id, LIST);
+    };


addEventLister로 안하고 이렇게 바로 하는 방법도 있구나!!! 대박대박 깔끔하당..

근데 생각해보니까 나머지는 다 addEventListener로 했는데 얘만 왜 onClick으로 했을까..
찾아보니까 onClick은 하나의 콜백을, addEventListener는 여러개의 콜백 이벤트를 줄 수 있다네.. 그래서 중복해서 사용하려면 addEventListener로 해야한대.. 이벤트 캡쳐링이랑 버블링을 할 땐 addEventListener를 사용하는게 좋다는걸 공유해드려요~

Jun-min2

혜인이랑 수빈이가 진짜 너무 잘해줬지만!.. 나도 조금은 도움이 됬으면 좋겠다!

Jun-min2 · 2023-11-04T16:57:19Z

week2/assignment1/index.js

+  content.addEventListener("mouseover", function () {
+    selectedEx.classList.remove("hidden");
+    selectedImg.classList.add("bg_brightness");
+  });


mouseover시에 hidden이 사라지고 brightness를 추가하는 방식으로 하는 아이디어가 좋은 것 같아요!

Jun-min2 · 2023-11-04T17:10:19Z

week2/assignment1/scroll.js

+document.addEventListener("scroll", () => {
+  const scrollY = document.documentElement.scrollTop; //
+  const heightDiff =
+    bottomElm.getBoundingClientRect().bottom -


나도나도 진짜 대부분 처음보는거지만
그중에서도 생소해 ♥

Jun-min2 · 2023-11-04T17:12:39Z

week2/assignment1/scroll.js

@@ -0,0 +1,13 @@
+const topBtn = document.getElementById("top_btn");


나도나도 두개를 분리하니까 처음하는 나도 되게 보기편했오!

Jun-min2 · 2023-11-04T17:55:24Z

week2/assignment2/index.js

+      case "income": {
+        li.classList.add("income_elm");
+        amount.classList.add("add");
+        amount.innerText = `+${elm.amount}`;


템플릿 리터럴로 백틱과 ${}써서 표현한게 좋아요!

Jun-min2 · 2023-11-04T17:57:23Z

week2/assignment2/index.js

+      }
+      case "expense": {
+        initExpense += Number(elm.amount);
+        break;


둘다 아닌경우를 대비해서 있는 거니까 비워둬도 괜찮지 않을까..?
아니면 가계부니까 default를 전부 반영하는 걸로 표시하는건 무리가 있겠지?

Jun-min2 · 2023-11-04T18:06:53Z

week2/assignment2/index.js

+  LIST.forEach((elm) => {
+    switch (elm.InOrExpense) {


단어를 축약했을때 헷갈리지만 않는다면 보기 편할거같아!

Jun-min2 · 2023-11-04T18:17:05Z

week2/assignment2/index.html

+        <form name="list_add_form" action="">
+          <div class="in_ex_btns">


처음보는 form 태그! 덕분에 알게됬어요!

doyn511 added 12 commits October 24, 2023 22:58

[feat] 2주차 실습

a00be6d

[feat] 초기 세팅

e28d7a8

[feat] 과제1 이미지 hover 애니메이션 구현

83c8f9c

[feat] 과제1 top button 투명도 조절

baffab4

[feat] 과제2 초기 데이터 렌더링

7418d65

[feat] 과제2 checkbox filtering 기능

27112d3

[fix] filtering 정렬 오류

c1b7955

[feat] 리스트 삭제 구현

fd8919b

[feat] 과제2 리스트 추가 구현

0837a62

[fix] 삭제, 추가 시 원본 리스트 렌더링 방지

b48bb58

[fix] list 추가시 select option 값 받아오기

61d6d36

[docs] 생각과제

c37ad56

doyn511 added 기본과제 생각과제 2주차 labels Oct 27, 2023

doyn511 requested review from binllionaire, seobbang, hae2ni, imeureka and Jun-min2 October 27, 2023 13:21

doyn511 self-assigned this Oct 27, 2023

[fix] select 중복 렌더링 수정

41e856e

doyn511 changed the title ~~[2주차 기본/생각 과제]~~ [2주차 기본/생각 과제] 웨비의 사진관 😋, 가계부 💸 Oct 27, 2023

hae2ni reviewed Oct 28, 2023

View reviewed changes

binllionaire reviewed Oct 30, 2023

View reviewed changes

Jun-min2 reviewed Nov 4, 2023

View reviewed changes

doyn511 added 4 commits November 14, 2023 16:51

[fix] assignment1 class명 상수화

0eae01a

[fix] assignment1 header h1태그 추가, CSS 개행

9a1ca4c

[fix] assignment2 h1태그 수정, CSS 개행

c64acb1

[fix] assignment2 index.js 이항연산자, switch문 default 추가

b32a84b

		@@ -0,0 +1,13 @@
		const topBtn = document.getElementById("top_btn");

		<form name="list_add_form" action="">
		<div class="in_ex_btns">

[2주차 기본/생각 과제] 웨비의 사진관 😋, 가계부 💸 #2

Are you sure you want to change the base?

[2주차 기본/생각 과제] 웨비의 사진관 😋, 가계부 💸 #2

Conversation

doyn511 commented Oct 27, 2023 • edited Loading

✨ 구현 기능 명세

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

hae2ni 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

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

binllionaire 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

Jun-min2 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

doyn511 commented Oct 27, 2023 •

edited

Loading