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

binllionaire · 2023-10-27T14:38:23Z

✨ 구현 기능 명세

웨비의 사진관 📸

기본 과제
이미지 호버시 백그라운드가 어둡게 처리, 해당 사진에 대한 디테일 보여주기
스크롤을 내림에 따라 점점 선명해지는 TOP 버튼

심화 과제
3줄 이상인 설명은 말줄임표 처리와, 더보기 버튼 보여주기
더보기 클릭시 설명이 모두 보여주기
미리보기 섹션 좌우 화살표 버튼을 통해 scroll하기

가계부 💸

기본 과제
최초 자산, 내역리스트 데이터 렌더링
수입, 지출 선택에 따라 내역 리스트가 필터링
리스트 추가/삭제 기능

심화 과제
리스트 삭제 모달
리스트 추가 입력 필드 검증
모달 백그라운드 & 애니메이션
카테고리 추가
금액 단위 표시

생각과제 💭

생각 과제
명령형 프로그래밍과 선언형 프로그래밍

💎 PR Point

웨비의 사진관 📸

cloneNode 로 노드를 복사함으로써 코드를 더 간결하고 쉽게 만들어봤어요!

const detailButton = document.createElement("button");
detailButton.className = "read_more";
detailButton.innerHTML = "더보기";
const details = document.querySelectorAll(".detail p");

detailBox.forEach((box, index) => {
    const clonedDetailButton = detailButton.cloneNode(true);
    box.appendChild(clonedDetailButton);
    });
  }
});

가계부 💸

저는 이번 과제에서 상수화와 모듈화에 신경을 써봤습니다

AssetView.js : 나의 자산을 계산하고 보여주는 함수
- resetMoney(): 잔액 및 수입/지출을 초기화
- calculateMoney(history) : 잔액 및 수입/지출 계산
- setMoney() : 나의 자산을 계산한 값으로 업데이트
- renderAssetData() : 나의 자산 렌더링
CategoryController.js : 카테고리 추가와 저장에 관한 함수
- addToCategoryList(type, name): 카테고리 목록에 추가하는 함수
- appendCategoryTagElement(name, categorySection) : 카테고리 태그 엘리먼트를 추가하는 함수
- saveToLocalStorage(type) : 로컬 스토리지에 카테고리 목록을 저장하는 함수
- handleCategoryInput(type, inputField, categorySection) : 카테고리 입력 필드에 대한 이벤트 핸들러를 설정
CategoryView.js : 내역 추가의 카테고리 셀렉터에 관한 함수
- handleSelectChange() : 수입 및 지출 selector의 변경 이벤트를 처리
- handleCategoryClick() : 각 카테고리 항목을 클릭하는 이벤트를 처리하는 함수
- createCategoryList(type, category) : 카테고리 목록 항목을 생성하고 렌더링
- resetCategory() : 카테고리 목록을 초기화
- renderCategory(type, categoryList) : 선택된 거래 유형을 기반으로 카테고리 목록을 렌더링
HistoryController.js : 내역 삭제에 관한 함수
- findIndexToDelete() : 내역 배열에서 삭제할 값 (클릭된)과 일치하는 항목의 인덱스를 찾는다
- deleteList() : 내역 삭제
- handleConfirmClick() : 확인 버튼을 클릭할 때 이벤트 처리
- handleCancelClick() : 취소 버튼을 클릭할 때 이벤트 처리
- openModal() : 삭제 모달 다이얼로그를 연다
- closeModal() : 모달 다이얼로그를 닫는다
- setDeleteEvent() : 삭제 버튼에 대한 클릭 이벤트 핸들러를 설정
HistoryListTemplate.js : 내역 리스트를 구성하는 요소를 만드는 것과 관련된 함수
- makeCategoryElement(category) : 카테고리에 대한 엘리먼트 생성
- makeNameElement(name): 내역에 대한 엘리먼트를 생성
- makePriceElement(type, price) : 가격 엘리먼트를 생성
- makeDeleteButton(id): 삭제 버튼 생성
HistoryView.js : 내역 리스트 렌더링에 관한 함수
- addList(history): 내역리스트를 추가하는 함수
- resetData(): 렌더링된 히스토리 목록을 모두 지우는 함수
- renderHistoryList(list): 주어진 히스토리 목록을 렌더링
- handleModal(): 모달 다이얼로그에 관련된 이벤트 핸들러를 설정하는 함수
ModalController.js : 내역 추가에 관한 함수
- handleSelectorClick(): 카테고리 selector를 클릭하면 옵션 목록을 표시
- handleAddHistoryButtonClick() : 히스토리 추가 버튼을 클릭하면 내역 추가 모달을 표시
- handleCloseModalButtonClick(): 모달의 닫기 버튼을 클릭하면 모달을 숨긴다
- handleSaveButtonClick(): 저장 버튼을 클릭했을 때의 이벤트를 설정하는 함수
- handlePriceInputFieldInput(e): 가격 입력 필드에서 입력 내용이 숫자가 아닌 경우, 메시지를 표시
- resetField(): 입력 필드를 초기화하는 함수
- handleModal(): 모달 관련된 이벤트 핸들러를 설정하는 함수
TransactionFileter.js : 수입/지출 필터링에 관한 함수
constants.js : 상수
documentElements.js : DOM selector로 불러온 Element
moneyFormatter.js : 금액 단위 표시에 관한 함수

1주차 코드리뷰 반영 👩🏻‍💻

1주차 과제에 팟장님이 달아주신 리뷰는 이번과제에 반영을 했습니다!!
css 속성 순서, 개행은 naver 의 컨벤션을 적용해 보았습니다

폴더구조 📂

[ 웹 심화 스터디 ] 에서 요번주 폴더 구조에 대한 아티클을 작성하였는데 이것도 적용해봤어요!
폴더구조와 스타일세팅 (많관부 🫶🏻)

📦src
┣ 📂assets            
┃ ┣ 🧾font
┃ ┗ 🖼️img
┣ 📂js    
┃ ┣ 📂Asset
┃ ┣ 📂Category
┃ ┣ 📂History
┃ ┗ 📂utils
┣ 📂pages            
┗ 📂styles

🥺 소요 시간, 어려웠던 점

4d
요소를 다시 렌더링할 때 DOM 요소를 다시 가져와야 하는데 그 부분에서 많이 헤맸어요 (보이는게 다가 아니다..)
디자인 패턴에 대해서도 공부해보고 적용해보고 싶었는데 이번주 정말 너무 바빴네요,, 솔직히 제가 한 모듈화가 잘 한건지도 모르겠어요

🌈 구현 결과물

웨비의 사진관 📸

링크 : https://653ba8cfebd8d8365d450a9f--glowing-entremet-0ef61f.netlify.app/

c986302c-42dd-4977-a43e-0cf9e0a529f4.mp4

가계부 💸

링크 : https://653ba3eb8dd33f2ccada4427--cheery-boba-83e3f5.netlify.app/

필터/삭제/추가

filter.delete.add.mov

입력필드검증

checkinput.mov

로컬스토리지

localstorage.mov

doyn511

상수화랑 모듈화.. 수빈이 코드 보고 많이 배워가!! 심화과제까지 지인짜 고생 많았어❤️

doyn511 · 2023-10-29T14:17:15Z

week2/assignment/웨비의 사진관 📸/index.js

+document.addEventListener("scroll", () => {
+  const topButton = document.querySelector("#top div");
+  const opacity = scrollY / (document.body.scrollHeight - window.innerHeight);
+  topButton.style.opacity = Math.min(opacity, 1); //opacity의 최댓값을 1로 설정하기 위함


헉 나는 구한 값이 7까지 나와서 이게 맞나,, 싶었는데 최댓값을 따로 주는 방법이 있었네.. 고마와요~

doyn511 · 2023-10-29T14:22:59Z

week2/assignment/웨비의 사진관 📸/index.js

+/* 스크롤에 따라 탑버튼을 점점 선명하게 만드는 함수 */
+document.addEventListener("scroll", () => {
+  const topButton = document.querySelector("#top div");
+  const opacity = scrollY / (document.body.scrollHeight - window.innerHeight);


와 scrollHeight() 이거 몰라서 가장 header랑 footer의 위치 구해서 빼는 방법으로 구했는데.. 저거 하나면 완전 해결이네!
근데 혹시 innerHeight는 왜 빼준건지 알려줄 수 있나? padding값만큼 빼주려고 그런거야?!
scrollHeight() 참고문서

document.body.scrollHeight - window.innerHeight 값은 스크롤을 최대한 아래로 내렸을 때 까지의 거리를 구하려고 한고야!
window.innerHeight를 안빼면 스크롤을 맨밑으로 내렸을 때 그 화면의 높이 만큼의 처리를 해줄 수 없으니까!!
그걸 고려해서 정확한 비율을 구하려고 넣은 것 입니당 😊

doyn511 · 2023-10-29T15:42:09Z

week2/assignment/웨비의 사진관 📸/style.css

+#day1 .gallery .item:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+
+    transform: translate(0, -10px);
+}


요 부분이 바로 hover했을 때 글자 보여주는 부분 맞아!? 자스 파일에서 찾지 못해 넘어와보았어용

엇 정확히 말하면 여기긴 한데

#day1 .detail:hover { background-color: rgba(0, 0, 0, 0.6); opacity: 1; }

내가 backgroud를 중복으로 줬네 !!! 수정해야겠다 ㅎㅎ

doyn511 · 2023-10-29T15:52:17Z

week2/assignment/웨비의 사진관 📸/index.js

+  const detailHeight = window.getComputedStyle(detail).height.split("px")[0];
+  const fontSize = window.getComputedStyle(detail).fontSize.split("px")[0];


이거 getComputedStyle() 처음 봤다..

getComputedStyle() : 인자로 전달받은 element에 최종적으로 적용된 모든 CSS 속성 값을 담은 객체 반환

나도 이거 어떻게 구현할 지 고민하다가 요소의 높이를 구할 수 있으면 쉽게 구현할 수 있겠다 싶어서 찾아보면서 알게된거 !!! 🖤

doyn511 · 2023-10-29T15:57:01Z

week2/assignment/가계부 💸/index.js

+import { renderHistoryList } from "./js/History/HistoryView.js";
+import { renderAssetData } from "./js/Asset/AssetView.js";
+import { renderCategory } from "./js/Category/CategoryView.js";


와 이렇게 나누니까 지인짜 깔끔하다.. 내꺼에도 적용해볼게용~

이게 다 모듈화인거야..? 대단스..

doyn511 · 2023-10-29T17:12:45Z

week2/assignment/가계부 💸/js/Asset/AssetView.js

+export function renderAssetData(){
+  resetMoney();
+  HISTORY_LIST.forEach((history) => {
+    calculateMoney(history);
+  });
+  setMoney();
+  changeFormat();
+}


함수에 export 붙이는건 다른 파일에서도 사용 해야하는 함수라서 그런거야?

맞아요 ~ !! 🙌🏻

doyn511 · 2023-10-29T17:26:26Z

week2/assignment/가계부 💸/js/utils/constants.js

+export const HISTORY_LIST = [
+  [0, TRANSACTION_TYPE.INCOME, CATEGORY.INCOME[0], "생활비", 1200000],
+  [1, TRANSACTION_TYPE.SPENDING, CATEGORY.SPENDING[0], "티머니", 6200],
+  [2, TRANSACTION_TYPE.SPENDING, CATEGORY.SPENDING[1], "쿠팡환불", 27000],
+  [3, TRANSACTION_TYPE.INCOME, CATEGORY.INCOME[1], "홍길동", 3000],
+];


개인적으로 이렇게 나타내면.. 나중에 무엇을 나타내는지 헷갈릴수도 있겠다 싶어서 배열 대신 객체로 나타내는게 어떨까 싶음..!

마쟈마쟈,, 내가 착각해서 ㅠㅠ 바로 고쳐왔습니다!! 🥹

doyn511 · 2023-10-29T17:28:56Z

week2/assignment/가계부 💸/js/Asset/AssetView.js

+  if (history[1] === TRANSACTION_TYPE.SPENDING) {
+    total -= history[4];
+    spending += history[4];
+  }
+  if (history[1] === TRANSACTION_TYPE.INCOME) {
+    total += history[4];
+    income += history[4];
+  }


constants.js에도 썼지만 index로만 나타내면 index별로 어떤걸 나타내는지를 알고 있어야 한다고 생각해서 배열 대신 객체도 추천..!

doyn511 · 2023-10-29T17:30:48Z

week2/assignment/가계부 💸/js/Asset/AssetView.js

+    calculateMoney(history);
+  });
+  setMoney();
+  changeFormat();


자릿수 변환 따로 빼서 해준거 넘 멋지다.. 생각해보니까 자릿수 변환이 필요한 곳이 많아서 코드 재사용에 완전 효율적인거 같음!

doyn511 · 2023-10-30T02:10:51Z

week2/assignment/가계부 💸/js/History/ModalController.js

+export function handleModal() {
+  SELECTOR.addEventListener("click", handleSelectorClick);
+  ADD_HISTORY_BUTTON.addEventListener("click", handleAddHistoryButtonClick);
+  CLOSE_MODAL_BUTTON.addEventListener("click", handleCloseModalButtonClick);
+  SAVE_BUTTON.addEventListener("click", handleSaveButtonClick);
+  PRICE_INPUT.addEventListener("input", handlePriceInputFieldInput);
+}


함수를 따로 빼주니까 지인짜 깔끔하다..!

hae2ni

수빈이 폴더 구조 나눈 거 보면서 반성도 많ㅇㅣ 하게 되고 하나하나 짚어가면서 코드리뷰 하려고 노력해 봤어! 다음에는 나도 꼼꼼하게 더 연구?해서 잘 짜겠습니다!
폴더 구조도 그렇고 함수도 다 상수로 뺀 것도 정말 고민 많이 했을 것 같다는 생각이 든다!
그냥 일단 시간 없으니까 바로바로 결과만 만들어 내자! 라는 생각으로 코드를 짯기 때문에 내껀 정말 복잡하고 어지러운데, 하나하나 고민한 걸 보니까 더더 부끄럽구 너무 대단한 거 같아!
딱히 바꿀 것도 없어 보이고 해서 궁금한 부분 위주로 코드 리뷰 했어요!
너무 수고했어 화이팅!

hae2ni · 2023-10-28T14:03:29Z

week2/assignment/가계부 💸/index.html

+        <h2 class="subtitle">나의 자산</h2>
+        <b id="money" class="money"></b>
+        <div id="today">
+            <img src="./assets/img/triangle-up.png" alt="위쪽화살표" />


오왕,,,,, ㅇㅣ미지 넣은거 완전 대박ㅠㅠ

이미지를 넣어도 된다는 생각조차 하지 못했다..

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

week2/assignment/가계부 💸/index.js

@@ -0,0 +1,11 @@
+import { renderHistoryList } from "./js/History/HistoryView.js";


나눈거 대박인디,,,?

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

week2/assignment/가계부 💸/js/Asset/AssetView.js

+  TOTAL_MONEY,
+} from "../utils/documentElements.js";
+
+import { changeFormat } from "../utils/moneyFormatter.js";


나두,,, 담에는 폴더 제대로 나눌게요,ㅡ,ㅡ,,

저는 왜 폴더를 나눠야하고 어떤 방법으로 나눠야 하는지 공부할게요..

hae2ni · 2023-10-28T14:05:49Z

week2/assignment/가계부 💸/js/Asset/AssetView.js

+  if (history[1] === TRANSACTION_TYPE.SPENDING) {
+    total -= history[4];
+    spending += history[4];
+  }
+  if (history[1] === TRANSACTION_TYPE.INCOME) {
+    total += history[4];
+    income += history[4];
+  }


Suggested change

if (history[1] === TRANSACTION_TYPE.SPENDING) {

total -= history[4];

spending += history[4];

}

if (history[1] === TRANSACTION_TYPE.INCOME) {

total += history[4];

income += history[4];

}

switch (history[1])

case TRANSACTION_TYPE.SPENDING) :

total -= history[4];

spending += history[4];

break;

case TRANSACTION_TYPE.INCOME :

total += history[4];

income += history[4];

break;

default:

break;

요렇게도 넘 좋을 것 같아요!

이거보고 궁금해져서 찾아봤는데 switch-case문이 가독성 뿐만아니라 성능면에서도 더 유리하군요!!! 🧐

엇 더 찾아봤는데 이거보니까 성능면에서는 큰 차이가 없긴 하지만 그래도 코드의 의미상 switch문이 깔끔하긴하네 ㅎㅎ
https://velog.io/@ahsy92/JaveScript-Switch-If

hae2ni · 2023-10-28T14:06:28Z

week2/assignment/가계부 💸/js/Category/CategoryController.js

+
+function addToCategoryList(type, name) {
+  const categoryList =
+    type === TRANSACTION_TYPE.INCOME ? CATEGORY.INCOME : CATEGORY.SPENDING;


진짜 진짜 잘해써용! 넘 가독성있구 좋다아!

hae2ni · 2023-10-30T14:18:40Z

week2/assignment/가계부 💸/js/History/TransactionFilter.js

+    const selectedTypes = [];
+
+    if (isIncomeChecked) selectedTypes.push(TRANSACTION_TYPE.INCOME);
+    if (isSpendingChecked) selectedTypes.push(TRANSACTION_TYPE.SPENDING);


요기두요!

hae2ni · 2023-10-30T14:19:03Z

week2/assignment/가계부 💸/js/utils/constants.js

+  },
+  STYLE: {
+    DISPLAY: {
+      FLEX: "flex",


마쟈,,, 이렇게 해놓으면 진짜 편할 것 같긴 하다,,,

hae2ni · 2023-10-30T14:19:24Z

week2/assignment/가계부 💸/js/utils/constants.js

+  [0, TRANSACTION_TYPE.INCOME, CATEGORY.INCOME[0], "생활비", 1200000],
+  [1, TRANSACTION_TYPE.SPENDING, CATEGORY.SPENDING[0], "티머니", 6200],
+  [2, TRANSACTION_TYPE.SPENDING, CATEGORY.SPENDING[1], "쿠팡환불", 27000],
+  [3, TRANSACTION_TYPE.INCOME, CATEGORY.INCOME[1], "홍길동", 3000],


혹시 배열로 만든 이유가 따로 있을까용?

흐흐 카톡으로 말했지만 배열로 만들어야 한다는 말 때문에 착각스,, 😓
배열 안 객체로 수정해오겠습니다용

hae2ni · 2023-10-30T14:19:48Z

week2/assignment/가계부 💸/js/utils/moneyFormatter.js

+input.addEventListener("keyup", (e) => {
+  let value = e.target.value;
+  value = Number(value.replaceAll(",", ""));
+  const formatValue = value.toLocaleString("ko-KR");


구우우웃! 진짜 굿굿이야!

hae2ni · 2023-10-30T14:20:55Z

week2/assignment/가계부 💸/js/utils/moneyFormatter.js

+  let value = e.target.value;
+  value = Number(value.replaceAll(",", ""));
+  const formatValue = value.toLocaleString("ko-KR");


요 부분 자세히 설명해줄 수 있을까?

value = Number(value.replaceAll(",", "")); 이걸 왜 하는지 물어본 거 맞지?!
만약 이걸 안하고 value.toLocaleString("ko-KR")을 하게 되면 input field에 12,345이렇게 돼 있을 때
예를 들어 여기서 추가로 6을 입력하면 123,456 이 value가 되는데 이렇게 되면 문자열이 되니까
toLocaleString("ko-KR") 를 적용할 수가 없어서 먼저 쉼표를 빼고 숫자로 만들어서 다시 포맷팅 해주는 코드입니다!! 🤗

ExceptAnyone · 2023-10-31T05:48:27Z

전반적으로 훓어봤는데 코드 퀄리티 개좋네 ㅋㅋㅋㅋ 조만간 자세히 읽어볼게. 글고 추후에 리팩토링할 때 많이 참고하겠슴!!

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

week2/assignment/웨비의 사진관 📸/style.css

+#day1 .gallery .item:nth-child(1) {
+    background: no-repeat center/cover url('./img/biei.jpg');
+}


와.. 이거 hover했을때 어두워지는거랑 사진이랑 어긋나서 맞추느라 고생했는데
너무 간편하게 하니까 진짜 너무 꿀팁입니다.

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

week2/assignment/웨비의 사진관 📸/style.css

+#day1 .gallery .item:nth-child(1) {
+    background: no-repeat center/cover url('./img/biei.jpg');
+}


와.. 이거 hover했을때 어두워지는거랑 사진이랑 어긋나서 맞추느라 고생했는데
너무 간편하게 하니까 진짜 너무 꿀팁입니다.

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

week2/assignment/웨비의 사진관 📸/style.css

+#day1 .gallery .item:nth-child(1) {
+    background: no-repeat center/cover url('./img/biei.jpg');
+}


와.. 이거 hover했을때 어두워지는거랑 사진이랑 어긋나서 맞추느라 고생했는데
너무 간편하게 하니까 진짜 너무 꿀팁입니다.

Jun-min2 · 2023-11-04T17:15:01Z

week2/assignment/생각과제 💭/thinking.md

+프로그래머가 `프로그램 실행 순서`와 `데이터 상태`를 명시적으로 제어한다.
+
+선언형 프로그래밍은 어떤 작업을 어떻게 하는지에 대한 세부 사항을 명시하지 않고, `원하는 결과를 설명`하는 방식,<br/>
+프로그래머는 `무엇(What)`을 얻을 것인지만 명시하며, 시스템은 `어떻게(How)` 이루어져야 하는지 자동으로 결정한다.


명령형은 어떻게 선언형은 무엇이 중점이 된다고 했는데,
어떻게는 뭘 얘기하고 싶은지, 무엇은 뭘 말하는지 이해에 도움이 되었다!

Jun-min2 · 2023-11-04T17:32:44Z

week2/assignment/가계부 💸/js/Asset/AssetView.js

+  TOTAL_MONEY,
+} from "../utils/documentElements.js";
+
+import { changeFormat } from "../utils/moneyFormatter.js";


저는 왜 폴더를 나눠야하고 어떤 방법으로 나눠야 하는지 공부할게요..

Jun-min2 · 2023-11-04T17:33:51Z

week2/assignment/가계부 💸/js/Asset/AssetView.js

+      total -= history.money;
+      spending += history.money;
+      break;
+    case TRANSACTION_TYPE.INCOME:
+      total += history.money;
+      income += history.money;


switch문과 대입연산자를 적재적소에 쓰는거 멋져요

Jun-min2 · 2023-11-04T17:35:46Z

week2/assignment/가계부 💸/js/Category/CategoryController.js

+  const storageKey =
+    type === TRANSACTION_TYPE.INCOME
+      ? LOCAL_STORAGE.INCOME
+      : LOCAL_STORAGE.SPENDING;
+  const categoryList =
+    type === TRANSACTION_TYPE.INCOME ? CATEGORY.INCOME : CATEGORY.SPENDING;


삼항연산자도 진짜 잘쓴다!!
나는 조건하면 if문 밖에 생각이 안나는데 삼항연산자도 쓰려고 노력해야겠어

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

week2/assignment/가계부 💸/index.js

+function render() {
+  renderHistoryList();
+  renderAssetData();
+  renderCategory();
+}


렌더링도 함수로 정의해서 각각 렌더링 해준다는게 파일을 나누어서 했다는 것이라고 생각되는데
고민한 흔적이 너무 보여서 저도 더 노력하겠습니다.

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

week2/assignment/가계부 💸/js/History/HistoryView.js

+import { ELEMENT, HISTORY_LIST } from "../utils/constants.js";
+import { HISTORY_DIV } from "../utils/documentElements.js";
+import { setDeleteEvent } from "./HistoryController.js";
+import { changeFormat } from "../utils/moneyFormatter.js";
+import { makeCategoryElement, makeDeleteButton, makeNameElement, makePriceElement } from "./HistoryListTemplate.js";
+import { handleModal } from "./ModalController.js";
+
+function addList(history) {
+  const list = document.createElement(ELEMENT.HTMLTAG.LIST);
+  list.append(
+    makeCategoryElement(history.category),
+    makeNameElement(history.content),
+    makePriceElement(history.type, history.money),
+    makeDeleteButton(history.id)


진짜 하면서 많은 식별자들이 나와서 되게 헷갈릴 것 같은데
꼼꼼하게 너무 잘했다

Jun-min2 · 2023-11-04T17:49:20Z

week2/assignment/가계부 💸/js/utils/documentElements.js

+
+export const TOTAL_MONEY = document.querySelector("#asset #money");
+export const TODY_TOTAL_INCOME = document.querySelector("#today .income");
+export const TODY_TOTAL_SPENDING = document.querySelector("#today .spending");
+
+export const MODAL_BACKGROUND = document.querySelector("#modal-background");
+export const MODAL_DELETE = document.querySelector("#delete-modal");
+export const CONFIRM_BUTTON = document.querySelector("button#confirm");
+export const CANCEL_BUTTON = document.querySelector("button#cancel");
+
+export const SELECTOR_DIV = document.querySelector(".select-category");
+export const SELECTOR = document.querySelector(".selector");


상수화에 대해서도 고민했다는게 너무나도 잘 드러나네요

Jun-min2 · 2023-11-04T17:50:17Z

week2/assignment/가계부 💸/js/utils/moneyFormatter.js

+  money.forEach((text) => {
+    let changedText = text.innerHTML
+      .toString()
+      .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");


이건 어떤 뜻인지 물어봐도 될까요?

숫자 3자리 마다 콤마를 찍어주는 정규식입니다!

Jun-min2 · 2023-11-04T17:52:35Z

너무나도 깔끔한 코드인것만 같다.. 상수화와 모듈화에 대해서 고민했다는것도 잘 드러나있고 배울점이 너무 많은 코드였다..

binllionaire added 30 commits October 19, 2023 15:20

practice : 👊🏻 2차 세미나 실습

ce8c47b

init : 🎉 2차 과제 시작

59db571

feat : ✨ 이미지 hover 시 설명 추가

3bad2c7

feat : ✨ top 버튼 스크롤에 따라 선명해지는 효과 추가

3e142bd

feat : ✨ 3줄 이상의 설명 더보기 기능 추가

2320d1b

feat : ✨ 좌우로 스크롤하는 버튼 추가

9061c53

design : 💄 heading 태그 굵기 초기화

f7eb819

feat : ✨ 최초 데이터 렌더링

5dcbd1a

design : 💄 내역 리스트 너비 비율 수정

671a9d6

feat : ✨ 총수입/총지출 렌더링

b57e654

refactor : ♻️ 매직넘버 상수화

3245b98

rename : 🚚 초기 데이터 렌더링 js파일 이름 변경

152f60c

rename : 🚚 변수명 오타 수정

ded32d3

refactor : ♻️ 상수 파일 분리

e63e551

refactor : ♻️ 함수 모듈화

de34cf6

feat : ✨ 수입, 지출별 내역리스트 필터링 기능 추가

baa0a38

feat : ✨ 내역 삭제 기능 추가

ac1c057

refactor : ♻️ 함수 모듈화

e382f2c

refactor : ♻️ list 값 순서 변경

c4b14d3

rename : 🚚 파일명 오타 수정

0c668d9

feat : ✨ 내역 추가 모달에 카테고리 선택 기능 추가

376cc12

design : 💄 모달 애니메이션 추가

c8bfcc7

rename : 🚚 파일명 오타 수정

a18ce8b

refactor : ♻️ 1주차 과제 피드백 반영

c942fe9

feat : ✨ 리스트 삭제 모달 추가

38ff1d5

design : 💄 내역 섹션 크기 수정

20ecad4

feat : ✨ 입력 필드 검증

7dbbd92

fix : 🐛 금액 필드에 문자 넣었을 때 오류 수정

cfa53e7

feat : ✨ 금액에 숫자가 아닌 문자 입력 막기

41bbc55

feat : ✨ 카테고리 동적 렌더링

8580cba

binllionaire added 3 commits October 27, 2023 21:08

design : 💄 리스트 스타일 제거

9ee4794

docs : 📝 생각과제 작성

4415ec1

remove : 🔥 콘솔 로그 출력 제거

73294e9

binllionaire added 기본과제 심화과제 생각과제 labels Oct 27, 2023

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

binllionaire self-assigned this Oct 27, 2023

refactor : ♻️ element 상수화

6c2d466

doyn511 reviewed Oct 30, 2023

View reviewed changes

hae2ni reviewed Oct 30, 2023

View reviewed changes

binllionaire and others added 8 commits October 31, 2023 04:08

fix : 🚑 css 중복 제거

98b73f0

refactor : ♻️ checked 속성 간결화

be05ca5

remove : 🔥 불필요한 할당 제거

44a5ca9

refactor : ♻️ if문 이항연산자로 변경

aec31d4

refactor : ♻️ 내역 배열을 객체로 수정

99f2475

remove : 🔥 prettier 설정 파일 삭제

3c21193

add : 🙈 vscode 설정 파일 반영되지 않도록 추가

0830c4f

refactor : ♻️ if문을 switch문으로 변경

5473ca1

Jun-min2 reviewed Nov 4, 2023

View reviewed changes

remove : 🔥 week2 브랜치에서 week1 삭제

2a6277b

binllionaire merged commit 3183dbf into main Nov 17, 2023

		const detailHeight = window.getComputedStyle(detail).height.split("px")[0];
		const fontSize = window.getComputedStyle(detail).fontSize.split("px")[0];

		@@ -0,0 +1,11 @@
		import { renderHistoryList } from "./js/History/HistoryView.js";

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

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

Conversation

binllionaire commented Oct 27, 2023 • edited Loading

✨ 구현 기능 명세

웨비의 사진관 📸

가계부 💸

생각과제 💭

💎 PR Point

웨비의 사진관 📸

가계부 💸

1주차 코드리뷰 반영 👩🏻‍💻

폴더구조 📂

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

웨비의 사진관 📸

가계부 💸

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

doyn511 Oct 29, 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

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

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

ExceptAnyone commented Oct 31, 2023

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

Jun-min2 commented Nov 4, 2023

binllionaire commented Oct 27, 2023 •

edited

Loading

doyn511 Oct 29, 2023 •

edited

Loading