[ 2주차 기본/심화/생각 과제 ] 웨비의 사진관과 가계부 by Rose-my · Pull Request #4 · DO-SOPT-WEB/MinyoungKim

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

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

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

Session02 /가계부과제/account.html

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

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

Session02 /가계부과제/account.html

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

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

Session02 /가계부과제/account.js

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

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

Session02 /가계부과제/account.js

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

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

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

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

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

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

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

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

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

맛있겠다,,

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

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

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

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

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

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

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

Conversation

Rose-my commented Oct 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ 구현 기능 명세

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

Uh oh!

imeureka left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

imeureka left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

urjimyu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

urjimyu Oct 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

urjimyu Oct 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

urjimyu Oct 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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