[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #4

Rose-my · 2023-10-27T09:03:05Z

✨ 구현 기능 명세

🐥 웨비의 사진관 기본 과제

이미지(첫번째 섹션만 해당)
- 이미지 호버시 백그라운드가 어둡게 처리, 해당 사진에 대한 제목과 설명 추가
- 이미지에서 벗어나면 사라지도록 구현(한번에 반드시 하나의 이미지의 설명만 나타나게)
top 버튼
- 최상단에서는 보이지 않고, 스크롤을 내림에 따라 점점 선명해지게 구현

🐥 가계부 기본 과제

최초 데이터
- 상수로 INIT_BALANCE, HISTORY_LIST 데이터
  - INIT_BALANCE = 0
  - HISTORY_LIST : 입출금 내역 리스트 (4개)
- 최초 실행시 위 상수 데이터들 이용해 렌더링
  - 나의 자산은 4개의 입출금 내역 리스트를 반영하여 보여줌
총수입/총지출
- 최초 HISTORY_LIST에 있는 수입 내역과 지출 내역을 계산해서 총수입, 총지출 보여줌
수입/지출 필터링
- 수입/지출 선택에 따라 내역 리스트 필터링
리스트 삭제
- 각 리스트의 X 버튼을 누르면 해당 리스트가 삭제
- 리스트 삭제시 나의 자산에 반영
- 리스트 삭제시 총 수입 / 총 지출에 반영
리스트 추가

하단 footer의 + 버튼을 누르면 리스트 추가 모달이 나타남
- 수입 지출 버튼
  - default => 수입
  - 하나 선택하면 다른 항목은 자동으로 선택 풀림
- 카테고리 선택
  - 수입을 선택하면 수입 관련 항목이 지출 을 선택하면 지출 관련 항목 보여줌
  - 카테고리는 수입, 지출 각각 2개 이상 있음
- 금액과 내용 입력 input
- 저장하기 버튼
  - 저장하기 버튼 클릭시 입력한 내용들로 이뤄진 리스크 추가
  - 추가 내역에 따라 나의 자산, 총수입, 총지출 변경됨
  - 저장 성공시 alert 메세지
  - 저장하기 눌러도 모달 닫히지 않음
- 닫기 버튼
  - 클릭하면 모달 사라짐

👑 가계부 심화 과제

리스트 삭제 모달
- delete 버튼 클릭시 삭제 모달 나타남
  - YES 클릭시 삭제 진행
  - NO 클릭시 모달 사라짐
금액
- 모든 금액에 세개 단위로 , 표시

💎 PR Point

🐥 웨비의 사진관 기본 과제

버튼의 투명도 설정 --> 스크롤 비율에 따라 버튼이 어두워질 수 있도록 설정했습니다

   var scrollPercentage = window.scrollY / maxScrollHeight;
   button.style.opacity = scrollPercentage;

마우스 위치에 따라 설명 보이기 --> addeventListener를 두었습니다

   details.addEventListener('mouseover', function()
   details.addEventListener('mouseout', function()

🐥 가계부 과제

HISTORY_LIST 상수 저장 + 리스트 식별위한 id 추가

const INIT_BALANCE = 0;
const HISTORY_LIST = [
  {
    id: 0,
    category: "식비",
    description: "스타벅스",
    price: -10000,
  },
  {
    id: 1,
    category: "서적",
    description: "자구교재",
    price: -500000,
  },
  {
    id: 2,
    category: "식비",
    description: "스타벅스",
    price: -5000,
  },
  {
    id: 3,
    category: "용돈",
    description: "고모부",
    price: +250000,
  },
];
const historyList = HISTORY_LIST;

수입 지출 버튼 필터링

price가 음수이면 income-list 클래스에 저장

  const li = document.createElement("li");
  li.className = price < 0 ? "income-list" : "outcome-list";
  li.appendChild(categorySpan);
  li.appendChild(descriptionSpan);
  li.appendChild(priceSpan);
  li.appendChild(deleteListBtn);

minusChecked 상수 따라 display

let plusChecked = true;
let minusChecked = true;

function handleFilter() {
  const incomeList = document.querySelectorAll(".outcome-list");
  const outcomeList = document.querySelectorAll(".income-list");
  incomeList.forEach((list) => {
    list.style.display = plusChecked ? "flex" : "none";
  });
  outcomeList.forEach((list) => {
    list.style.display = minusChecked ? "flex" : "none";
  });
}
const incomeFilter = document.querySelector('label[for="income-ID"]');
incomeFilter.addEventListener("click", function () {
  minusChecked = !minusChecked;
  handleFilter();
});
const outcomeFilter = document.querySelector('label[for="outcome-ID"]');
outcomeFilter.addEventListener("click", function () {
  plusChecked = !plusChecked;
  handleFilter();
});

selected_idx : 0 수입 1 지출로 설정

price = selected_idx === 1 ? -price : +price; //지출일 경우, 가격 음수처리

삭제 모달 추가

  listDeleteModal.style.display = "flex"; // 모달 띄우기
  const deleteYesBtn = document.querySelectorAll(".delete_yes")[0];
  const deleteNoBtn = document.querySelectorAll(".delete_no")[0];
  //yes no 클릭 시
  deleteYesBtn.onclick = function () {
    historyList.forEach((el, idx) => {
      el.id === id && historyList.splice(idx, 1);
    });
    listDeleteModal.style.display = "none"; //팝업 사라지게 
    render();
  };
  deleteNoBtn.onclick = function () {
    listDeleteModal.style.display = "none"; //팝업 사라지게
  };

모든 금액을 세 개 단위로 , 표시

     price.toLocaleString()

🥺 소요 시간, 어려웠던 점

매일 3시간

웨비의 사진관

image 위로 hover하려고 아래처럼 작성했는데 image에 설명 넣으면서부터 position문제 때문인건지 동작이 안됩니다

   [transform](transform: translateY(-5px);)

새로고침하면 상단에 자꾸 버튼이 default로 보이는 문제가 있었습니다

가계부

리스트 내역에 추가하고 나서 나의 자산에 반영이 안되어 있는 문제가 있었습니다
수입 지출 버튼 핸들링 과정과 리스트 내역 추가하고 난 후 자꾸 결과가 반대로 나와서 해결하기까지 많은 시간을 썼습니다
팝업이 안사라지는 문제가 있었습니다

🌈 구현 결과물

🐥 웨비의 사진관 기본 과제

1-1.mov

1-2.mov

🐥 가계부 과제

2-3.mov

2-4.mov

2-5.mov

href="#body-title" 로 가는걸로 대체

imeureka

🌟시험기간인데 꼼꼼하게 너무 수고 많았어!!

imeureka · 2023-10-30T03:51:48Z

Session02 /gallery/index.js

@@ -0,0 +1,37 @@
+//1-a,b
+var images = document.querySelectorAll('.images-1');


var의 특징 :

재선언이 된다 -> 코드량이 많아질 때 어떻게 사용될지 파악하기 힘들다

호이스팅 -> var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
그래서 이제 내가 읽은 아티클에 의하면 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋대!

imeureka · 2023-10-30T04:25:20Z

Session02 /gallery/index.js

+
+images.forEach(function(details) {
+    details.addEventListener('mouseover', function() {
+        var content = details.querySelector('div');


아하! details와 show-desciption의 차이가 배경색이라면
image.style.filter = "brightness(50%)";이렇게도 더 간편하게 구현 할 수 있어! 근데 찾아보니 이와 같은 방식은 js로 스타일을 변경할 떄 마다 렌더링 엔진이 다시 계산해야돼서 성능 최적화에 많은 주의가 필요하다네..!
민영이가 구현한 방법은 이제 정적으로 add와 remove를 이용해 스타일을 정의한 방법 같은데 이럴 떈 동적 스타일 변경이 필요한 경우에는 한계가 있을 수 있으니 참고.. 저도 배워갑니당 ❤️

imeureka

미뇽이 코드를 보면서 나도 배울 수 있는 좋은 기회였도다 🌟🌟

imeureka · 2023-10-31T07:16:29Z

Session02 /account/account.html

    </footer>
-</body>
+
+    <section class="list-delete-modal">


섹션안에 섹션 구조로 구현한 것은 이제 모달창 팝업을 구현하기 위해서인가?!
간단한 구현을 위해선 display: none; 속성만 추가하는 방법도 있습니당!

imeureka · 2023-10-31T07:33:18Z

Session02 /account/account.js

+    el.price > 0 ? (plus += el.price) : (minus -= el.price);
+  });
+
+  const summary_element_H3 = document.createElement("h3");


아 미뇽이 코드보고 내 코드 리팩토링 할 점 찾았다..
innerHTML을 사용해서 깔끔하고 간편하게 요소를 추가했는데 찾아보니 innerHTML은 DOM을 직접적으로 수정 (Modify)하기 때문에, innerHTML이 실행될 때마다 모든 DOM 요소가 전부 재분석 (reparse)되고 재생성 (recreate)되는 치명적 단점이..!!!

imeureka · 2023-10-31T08:03:21Z

Session02 /account/account.js

+
+//2.5 리스트 추가
+function handleAddFilter(idx) {
+  const filter_button = document.querySelectorAll(".add_filter_btn>button");


하위선택자기호 >까지 야무지게 써줬도다..!!

imeureka · 2023-10-31T08:06:58Z

Session02 /account/account.js

+function handleAddSheet() {
+  let selected_idx = 0; //0:수입 1:지출
+  const addList = document.querySelectorAll(".add_list")[0];
+  addList.innerHTML = `


난 이 부분 같은 경우 index.html에 모달창을 만들어서 display:none;처리를 해줬어!! 그럼 좀 더 가독성이 좋아질지도..!

urjimyu

1주차 코드리뷰도 전부 반영하고 2주차 과제도 세미나 때 배웠던 선택자나 삼항연산자도 적극적으로 활용하고 심화 과제도 도전한 게 보여서 넘 좋았어요! 시험 기간인데 정말 고생 많았어요!!❤️‍🔥

urjimyu · 2023-10-31T13:45:58Z

Session02 /가계부과제/account.html

+
+    <section class="manage">
+      <nav class="manage-date">
+        <button>〈</button>


요거 참고하면 좋을 것 같아! 나도 저번에 코드리뷰 받고 부등호 수정했다ㅎㅎ
HTML 특수문자 리스트

urjimyu · 2023-10-31T13:48:48Z

Session02 /가계부과제/account.html

+      <nav class="manage-date">
+        <button>〈</button>
+        <p>10월 13일</p>
+        <button>〉</button>


버튼은 버튼 타입 명시해주기! 안 그러면 기본적으로 submit 타입으로 지정된다고 해요
button 타입 잊지 않기☺️
MDN - button

urjimyu · 2023-10-31T13:51:12Z

Session02 /가계부과제/account.html

+
+    <section class="list-delete-modal">
+      <section class="modal">
+        <p>정말 삭제하시겠습니까?</p>


삭제 모달도 구현했네요! 최고👍🏻

urjimyu · 2023-10-31T13:52:00Z

Session02 /가계부과제/account.js

@@ -0,0 +1,263 @@
+const INIT_BALANCE = 0;
+const HISTORY_LIST = [


상수 파일을 따로 빼서 쓰면 더 가독성이 좋을 것 같아요!☺️

urjimyu · 2023-10-31T13:55:08Z

Session02 /가계부과제/account.js

+  const plusBtn = document.createElement("i");
+  plusBtn.textContent = "+";
+  const plusSpan = document.createElement("span");
+  plusSpan.textContent = plus.toLocaleString();
+  plusSpan.className = "plus";


클래스네임으로 이렇게 구현하는 방법도 있군요👍 다른 방법도 슬쩍 소개해보자면 상수 폴더에 지출인지 수입인지 분류한 다음 부호를 붙여주는 방법도 가능해요~!

urjimyu · 2023-10-31T14:07:02Z

Session02 /웨비의사진관과제/SUMMARY.js

@@ -0,0 +1,38 @@
+export const SUMMARY =[


상수 파일로 뺀 거 좋아요ㅎㅎ

urjimyu · 2023-10-31T14:11:02Z

Session02 /웨비의사진관과제/album.html

+        <h4 id="category-1">뉴욕은 낭만이 넘치는 도시에요</h4>
+        <div class="images-1-container">
+            <div class="images-1">
+                <img src="wk1/02.png" alt="핑크 건물"/>


alt에서 띄어쓰기는 -으로 해주기!
띄어쓰기를 인식 못하는 검색엔진이 있다고 해요🥲
alt 작성하기

urjimyu · 2023-10-31T14:13:09Z

Session02 /웨비의사진관과제/album.html

+                <img src="wk1/11.png" alt="무지개 베이글"/>
+                <div class="details">
+                    <h2>민영또베이글</h2>
+                    <p>8번가 liberty 베이글에 가서 rainbow with blueberry creamcheese를 말해보세요</p>


맛있겠다,,

urjimyu · 2023-10-31T14:15:11Z

Session02 /웨비의사진관과제/index.js

+});
+
+//2-a
+//새로고침하면 버튼이 보이는 경우 --> 해결


새로고침까지..! 섬세한 처리 좋아요👍🏻

urjimyu · 2023-10-31T14:16:24Z

Session02 /웨비의사진관과제/index.js

+    var button = document.getElementById('button-top');
+
+    // 최대 스크롤 가능한 높이
+    var maxScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;


innerHeight를 활용하면 더 간편하게 구할 수 있을 것 같아요..! 꼭 이 방법만 있는 건 아니니 참고용!
window.innerHeight 관련 설명

Rose-my added 10 commits October 26, 2023 20:46

txt파일 삭제

5340b76

txt파일 삭제

8cde1f2

Update .DS_Store

9613ad3

과제 복원

fe572aa

폴더 이름 변경

aad63e7

갤러리 기본과제 완료

115d87d

button.js삭제

da92a90

href="#body-title" 로 가는걸로 대체

account 리스트 삭제 모달 추가

5c049eb

head>title 변경

fcf9587

scroll height 조정

632b2c6

Rose-my added invalid This doesn't seem right 기본과제 and removed invalid This doesn't seem right labels Oct 27, 2023

Rose-my changed the title ~~[ 1주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부~~ [ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 Oct 27, 2023

Rose-my added 2 commits October 27, 2023 18:10

주석 수정

0cdbf09

Session02 생각과제

32b1784

Rose-my added the 생각과제 label Oct 27, 2023

Rose-my added 5 commits October 27, 2023 18:25

폴더 이름 수정

f2abf3e

사진 파일 title 수정

f15ce65

Update .DS_Store

1188a6b

사진 폴더

d6a2e4f

chore: .gitignore 생성

e960617

imeureka reviewed Oct 30, 2023

View reviewed changes

imeureka reviewed Oct 31, 2023

View reviewed changes

urjimyu approved these changes Oct 31, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #4

[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #4

Rose-my commented Oct 27, 2023 •

edited

Loading

imeureka left a comment

imeureka Oct 30, 2023

imeureka Oct 30, 2023

imeureka left a comment

imeureka Oct 31, 2023

imeureka Oct 31, 2023

imeureka Oct 31, 2023

imeureka Oct 31, 2023

urjimyu left a comment

urjimyu Oct 31, 2023

urjimyu Oct 31, 2023 •

edited

Loading

urjimyu Oct 31, 2023

urjimyu Oct 31, 2023

urjimyu Oct 31, 2023 •

edited

Loading

urjimyu Oct 31, 2023

urjimyu Oct 31, 2023 •

edited

Loading

urjimyu Oct 31, 2023

urjimyu Oct 31, 2023

urjimyu Oct 31, 2023

		@@ -0,0 +1,37 @@
		//1-a,b
		var images = document.querySelectorAll('.images-1');

		@@ -0,0 +1,263 @@
		const INIT_BALANCE = 0;
		const HISTORY_LIST = [

[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #4

Are you sure you want to change the base?

[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 #4

Conversation

Rose-my commented Oct 27, 2023 • edited Loading

✨ 구현 기능 명세

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

imeureka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

imeureka 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

urjimyu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

urjimyu Oct 31, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

urjimyu Oct 31, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

urjimyu Oct 31, 2023 • 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

Rose-my commented Oct 27, 2023 •

edited

Loading

urjimyu Oct 31, 2023 •

edited

Loading

urjimyu Oct 31, 2023 •

edited

Loading

urjimyu Oct 31, 2023 •

edited

Loading