[2주차 기본/생각 과제] #9

Jun-min2 · 2023-10-27T14:23:45Z

✨ 구현 기능 명세

기본 과제
1. 이미지 (첫번째 섹션만 해당)
2. 이미지 호버시 백그라운드가 어둡게 처리되고, 해당 사진에 대한 제목과 설명이 나타납니다.
3. 이미지에서 벗어나면 사라집니다.
  
  → 한번에 반드시 하나의 이미지의 설명만 나타납니다.

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

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

생각 과제

##💎 PR Point

급박한 시간속에 전체적으로 부족함이 있어요..
특히 JS가 처음이기 때문에 구현에 집중했어요

##🥺 소요 시간, 어려웠던 점

'셀 수 없음'

##🌈 구현 결과물

_2023_10_27_23_00_36_675.mp4

_2023_10_27_22_56_10_8.mp4

hae2ni

학교 시험 기간임에도 불구하고,, 넘넘 수고했습니다!! 👍

hae2ni · 2023-10-28T12:41:50Z

problem4.js

@@ -0,0 +1,212 @@
+let INIT_BALANCE = 0;
+let HISTORY_LIST = [


요런 상수 데이터는 다른 (ex, data.js) 파일에 넣어서 import { HISTORY_LIST } from ~ 이런 포맷으로 불러오면 더 깔끔하겠죠?

js 모듈 내보내고 가져오기
이거 확인해 보시면 좋을 거 같아요!

hae2ni · 2023-10-28T12:44:03Z

problem4.js

+  { category: "쇼핑", detail: "모던자바스크립트", money: -40500 },
+  { category: "식비", detail: "워크샵 1차비용", money: -13700 },
+  { category: "식비", detail: "워크샵 2차비용", money: -2800 },
+  { category: "용돈", detail: "추석용돈", money: 150000 },


이 값이 수입인지 지출인지를 알 수 있는 isIncome : true 와 같은 키와 value 값을 넣어서 확인하는 방법이 더 깔끔할 것 같아요!

저도 이렇게 생각해용 밑에 코드보니까 money에 음수부호 붙여주는 부분이 있던데 수입/지출을 구분하는 키값을 넣으면 더 깔끔하게 짤 수 있을 듯!

hae2ni · 2023-10-28T12:44:53Z

problem4.js

+  { category: "식비", detail: "워크샵 2차비용", money: -2800 },
+  { category: "용돈", detail: "추석용돈", money: 150000 },
+];
+let HISTORY_spend = [


상수 데이터는 모두 대문자 ❗ 로 구성해주시는 걸 추천드립니다. 그렇다면,
HISTORY_SPEND가 되겠네요!

hae2ni · 2023-10-28T12:45:26Z

problem4.js

+let HISTORY_spend = [
+  { category: "쇼핑", detail: "모던자바스크립트", money: -40500 },
+  { category: "식비", detail: "워크샵 1차비용", money: -13700 },
+  { category: "식비", detail: "워크샵 2차비용", money: -2800 },


아니,,,이게 다 사용흔적이냐며,,,, 그런데 요거는 그냥 HISTORY_LIST에서 관리할 수 있지 않을까요? 혹시 나눈 이유가 따로 있으신지?

HISTORY_LIST에서 (만약 이게 수입인지 지출인지 확인하는 변수가 추가되었다면)

const spendList = HISTORY_LIST.filter((list) => { const { isIncome } = list; isIncome ==false; }

현재로서는 수입과 지출에 관한 거를 -가 앞에 붙어있는지 아닌지로 따지니까,

만약 지금 상태라면,

const spendList = HISTORY_LIST.filter((list) => { const {money} = list money[0] == '-' }

로 나눌 수 있겠죠?

그럼 수입은

const incomeList = HISTORY_LIST.filter((list) => { list.money[0] != '-' }

이런 식으로요! 아마제가 그냥 막 임의로 한 거라 에러가 뜰 수 있기는 한데,,, 아무튼 하나의 리스트에서 filter를 이용해서 조건에 따라 분리하는 거를 추천드립니다! 그래야 나중에 심화 과제 할 때도 더 불편한 일이 없을 거에요!

hae2ni · 2023-10-28T12:52:09Z

problem4.js

+  { category: "용돈", detail: "추석용돈", money: 150000 },
+];
+
+const CATEGORIES = {


혹시 카테고리 리스트를 따로 만든 이유가 있을까요?

hae2ni · 2023-10-28T13:28:33Z

week2pb1.html

+        <header class="sticky">
+        <h2 ><a name="1일차">1일차</a></h2></header> 
+    <section class="one">
+            <div class="garden" >


div 보다는 좀더 시멘틱 태그를 이용하는 건 어떨까용?

개인적으로 article 태그 한번 찾아보시는거 추천드려용~

hae2ni · 2023-10-28T13:29:05Z

week2pb1.html

+        </p>
+    </div>
+    </nav>
+        <header class="sticky">


header는 상단에 있으니까 삭제해도 좋을 것 같아요!

hae2ni · 2023-10-28T13:29:56Z

week2pb2.html

+    <!-- 내용 입력 -->
+    <textarea id="descriptionInput" placeholder="내용"></textarea>
+    <!-- 추가 버튼 -->
+    <button id="addEntry">추가하기</button>


button에 type추가하는 거 잊지 말기!

hae2ni · 2023-10-28T13:30:18Z

week2pb2.html

+      <option value="환불">환불액</option>
+    </select>
+    <!-- 금액 입력 -->
+    <input type="number" id="amountInput" placeholder="금액">


요러케 하면 나중에 그 천 단위로 . 하는 거 힘들어져서 저는 그냥 type='text'했습니다!

hae2ni · 2023-10-28T13:31:05Z

week2pb2.html

+<!-- Modal -->
+<div id="entryModal" class="modal">
+  <div class="modal-content">
+    <span class="close">닫기</span>


요거는 닫기 버튼일까요? 그러면 <button type="button" > 닫기 </ button> 이 좀더 시멘틱 할 것 같아요!

binllionaire

고생했네용!! 근데 저번 리뷰에도 남겼던 것 같은데 commit message convention도 한번 적용해보는 습관을 가져보는 것도 좋을 것 같아 😛 네이밍 컨벤션에 대해서도 꼭 한번 정리하고 가길 추천할게!!

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

problem4.js

+  INIT_BALANCE = 0;
+  const balanceElement = document.querySelector(".totalsum strong");
+  const detailsSection = document.querySelector(".details");
+  let AllInputadd = document.querySelector(".incomevalue");


혠언니 말대로 변수의 이름은 lowerCamelCase로 표기하는게 좋을 것 같아요!!! allInputAdd로!!

binllionaire · 2023-10-30T17:59:35Z

problem4.js

+incomeBtn.addEventListener('click', function() {
+  currentType = '수입';
+});
+
+expenseBtn.addEventListener('click', function() {
+  currentType = '지출';
+});


수입 지출 요고 상수화 시켜주는게 더 좋을 것 같아!!!

binllionaire · 2023-10-30T18:09:48Z

problem4.js

+  if (type === '지출') {
+    money = -money;
+  }


하드코딩 관련해서 한번 찾아보면 좋을 것 같아 ~!!

https://tecoble.techcourse.co.kr/post/2020-05-07-avoid-hard-coding/

binllionaire · 2023-10-30T18:15:55Z

problem4.js

+function filtering() {
+  if (inputBox.checked && outputBox.checked) {
+    Showlist(HISTORY_LIST);
+  } else if (inputBox.checked) {
+    Showlist(HISTORY_income);
+  } else if (outputBox.checked) {
+    Showlist(HISTORY_spend);
+  } else {
+    Showlist(emptylist);
+  }
+}


마쟈마쟈 혜인언니 말처럼 switch를 쓰거나 if를 쓰려면 중첩을 더 최소화 할 수 있을 것 같아

Suggested change

function filtering() {

if (inputBox.checked && outputBox.checked) {

Showlist(HISTORY_LIST);

} else if (inputBox.checked) {

Showlist(HISTORY_income);

} else if (outputBox.checked) {

Showlist(HISTORY_spend);

} else {

Showlist(emptylist);

}

}

function filtering() {

if (inputBox.checked) {

if (outputBox.checked) {

Showlist(HISTORY_LIST);

} else {

Showlist(HISTORY_income);

}

} else if (outputBox.checked) {

Showlist(HISTORY_spend);

} else {

Showlist(emptylist);

}

}

binllionaire · 2023-10-30T18:21:07Z

problem4.js

+  // 필요한 경우, HISTORY_income 또는 HISTORY_spend에도 추가
+  if (money > 0) {
+    HISTORY_income.push(newEntry);
+  } else {
+    HISTORY_spend.push(newEntry);
+  }


타입으로 구분하는 것도 좋을 듯!!

binllionaire · 2023-10-30T18:28:02Z

problem4.js

+  { category: "쇼핑", detail: "모던자바스크립트", money: -40500 },
+  { category: "식비", detail: "워크샵 1차비용", money: -13700 },
+  { category: "식비", detail: "워크샵 2차비용", money: -2800 },
+  { category: "용돈", detail: "추석용돈", money: 150000 },


저도 이렇게 생각해용 밑에 코드보니까 money에 음수부호 붙여주는 부분이 있던데 수입/지출을 구분하는 키값을 넣으면 더 깔끔하게 짤 수 있을 듯!

binllionaire · 2023-10-30T18:29:52Z

problem4.js

+      if(historyItem.money>0){
+        AllInput -= historyItem.money;
+        AllInputadd.textContent ="총 수입 "+AllInput;
+      }
+      else{
+        AllOutput -= Math.abs(historyItem.money);
+        AllOutputadd.textContent ="총 지출 "+AllOutput;
+      }


위에서 썼던것과 마찬가지로 수입/지출 타입이 있다면 이부분도 더 깔끔하게 바꿀 수 있을 듯 !

binllionaire · 2023-10-30T18:42:06Z

week2pb2.html

+          <span class="plus-button">+</span>
+            <span class="incomevalue">0</span>
+        </span>
+        <div class="alloutcome">
+          <span class="minus-button">-</span>
+            <span class="outcomevalue">0</span>
+        </div>


네이밍에 있어서 kebab-case, snake_case, camelCase를 여러가지 사용했는데 일관성을 유지하는게 좋을 것 같아 🤓
스스로 네이밍 컨벤션을 한번 정해보는 것도 좋을 듯 ~~

binllionaire · 2023-10-30T18:44:15Z

week2pb2.html

+    <section class="details"></section>
+
+    <footer>
+      <div class="plus_button">


위 리뷰랑 비슷한 맥락이긴 한데, plus-button / plus_button 이거- 랑 _ 를 다른 plus button임을 구분하려고 사용한것이라면 좋지 않은 것 같슘니다

doyn511

시험기간 바쁜 와중에 구현은 다 했네..! 완전 고생 많았어!! 리뷰를 늦게 달았더니 혠언니랑 수빈이가 너무 잘 달아줘서 내가 도움이 될지는 모르겠다만..ㅜ 그리고 한가지 덧붙이자면 프리티어 꼭 깔아보기...!

doyn511 · 2023-11-03T04:57:31Z

week2pb1.html

+    <header class="preview">
+    <h1> &nbsp;&nbsp; 쭌미 싱가폴 일기!</h1></header>


prettier extension 깔아서 사용해보시는거 추천드립니다...!!!!

doyn511 · 2023-11-03T04:58:24Z

week2pb1.html

+        <header class="sticky">
+        <h2 ><a name="1일차">1일차</a></h2></header> 


요기도 뭔가 prettier extenstion으로 좀 더 깔끔하게 정렬할 수 있을듯..!

doyn511 · 2023-11-03T05:02:34Z

week2pb1.html

+        <header class="sticky">
+        <h2 ><a name="1일차">1일차</a></h2></header> 
+    <section class="one">
+            <div class="garden" >


개인적으로 article 태그 한번 찾아보시는거 추천드려용~

doyn511 · 2023-11-03T05:03:13Z

week2pb1.html

+                </div> 
+            </div>
+    </section>
+        <header class="sticky">


요기도 header말고 다른 태그 사용하는거 추천!!

doyn511 · 2023-11-03T05:28:47Z

week2pb2.html

+      <button id="incomeBtn">수입</button>
+      <button id="expenseBtn">지출</button>


버튼에 type을 명시해주는게 좋을거 같아요..! 근데 이거 모달 속에 둘 중 하나만 체크되어야하는거면 input 태그로 주고 type=radio로 주면 좋을듯!!

doyn511 · 2023-11-03T05:30:51Z

week2pb2.html

+    </footer>
+
+
+<!-- Modal -->


모달 속에서 js로 데이터를 넘겨줘야 하는 부분들을 form태그로 묶는다면 어떨까..? 그러면 이제 제출하고 난 뒤에 js에서 요소별로 초기화 시키지 않아도 되고 form을 불러온 다음에 form.reset()으로 한번에 가능하거든!!

Jun-min2 added 11 commits October 22, 2023 15:54

start

801b5be

week2 Q1-1

6185a2d

week2 Q1-2

a8467b8

week2 Q.think

fac796d

week2 Q.Think

6e604de

week2 Q2-2

c5827a5

week2 Q2-3

c8b2696

week2

59e724f

week2 hell

9b8ed12

finish...?

1343008

finish?

f9747c1

Jun-min2 requested review from binllionaire, hae2ni and doyn511 October 27, 2023 14:23

Jun-min2 self-assigned this Oct 27, 2023

hae2ni reviewed Oct 28, 2023

View reviewed changes

binllionaire reviewed Oct 30, 2023

View reviewed changes

doyn511 reviewed Nov 3, 2023

View reviewed changes

Jun-min2 added 2 commits November 15, 2023 00:22

main conflict 해결

247045a

필요없는 파일 삭제

510f9a8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차 기본/생각 과제] #9

[2주차 기본/생각 과제] #9

Jun-min2 commented Oct 27, 2023

hae2ni left a comment

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

binllionaire Oct 30, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

doyn511 Nov 3, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

hae2ni Oct 28, 2023

binllionaire left a comment

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

binllionaire Oct 30, 2023

doyn511 left a comment

doyn511 Nov 3, 2023

doyn511 Nov 3, 2023

doyn511 Nov 3, 2023

doyn511 Nov 3, 2023

doyn511 Nov 3, 2023

doyn511 Nov 3, 2023

		<header class="preview">
		<h1>    쭌미 싱가폴 일기!</h1></header>

		<header class="sticky">
		<h2 ><a name="1일차">1일차</a></h2></header>

		<button id="incomeBtn">수입</button>
		<button id="expenseBtn">지출</button>

[2주차 기본/생각 과제] #9

Are you sure you want to change the base?

[2주차 기본/생각 과제] #9

Conversation

Jun-min2 commented Oct 27, 2023

✨ 구현 기능 명세

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

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

Choose a reason for hiding this comment

doyn511 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