Week2/assign2 #4
Conversation
팟팅팟팅!! 코드리뷰 반영하는거 오래걸렸을텐데 벌써 다했네!! 멋지닷 나두 후딱 .. !!| </label> | ||
| </div> | ||
| <div class="modal-inputItem-container"> | ||
| <label for="select-category">종류</label> |
There was a problem hiding this comment.
여기 label의 아이디랑 밑에 select 태그의 id가 같아서 그랬던것같은데 아닌가??
There was a problem hiding this comment.
아닐수도 .. 나는 select 태그 내에 옵션내용 이런식으로 넣어줬는데 잘 동작했어!
| @@ -0,0 +1,219 @@ | |||
| const INIT_BALANCE =0; | |||
| let HISTORY_LIST=[ | |||
| {id:0,type:"income",category:"과외비",content:"10월 월급",amount:50000}, | |||
week2/assign4/index.js
Outdated
| button.classList.add("xbtn"); | ||
| itemContainer.appendChild(button); | ||
| //x버튼 클릭시 이벤트 | ||
| button.addEventListener('click',()=>{ |
There was a problem hiding this comment.
나는 심화과제하다보니 모달띄우는것때문에 코드가 길어져서 따로 함수로 뺐어!
| BALANCE.textContent=balance; | ||
| } | ||
|
|
||
| window.onload = ()=>{ //최초 실행시 렌더링 |
There was a problem hiding this comment.
오 윈도우 내장함수 ~~ 요건 생각못했다!! 조아조아
There was a problem hiding this comment.
캡슐화 해서 최초 실행 시 렌더링 되는 함수 모아둔거 좋다 좋당 !
|
|
||
| //리스트 삭제 | ||
| const deleteItem=(deleteid)=>{ | ||
| HISTORY_LIST = HISTORY_LIST.filter(item => item.id!==deleteid); |
There was a problem hiding this comment.
오앙 나는 그냥 x 버튼 클릭하면 x버튼의 부모요소(=해당 리스트)를 삭제하도록했는데 수연이 방법도 좋다!!
There was a problem hiding this comment.
내가 한 방법은 리스트에 id 필드가 없어도 된닷!!
| HISTORY_LIST.forEach(list=>showList(list)); | ||
| calculateTotal(); | ||
|
|
||
| alert("저장이 완료되었습니다!!"); |
There was a problem hiding this comment.
엇 나 이때까지 window.alert()로 항상 사용했는데 안그래도 됐군 ,, 키키
| let content; | ||
| let amount; | ||
| let nowid=3; | ||
| // let button; |
week2/assign4/index.js
Outdated
| itemContainer.appendChild(button); | ||
| //x버튼 클릭시 이벤트 | ||
| button.addEventListener('click',()=>{ | ||
| console.log(list.id,"삭제 버튼"); |
| totalExpense=0; | ||
| totalIncome=0; |
There was a problem hiding this comment.
위에서 totalExpense, totalIncome을 0으로 초기화 해줬는데 여기서 한 번 더 0으로 초기화 한 이유가 궁금합니댜!
그리고 상수 값처럼 쓰이는 값이니까 대문자로 표기해주면 더 좋을것 같앙!
| totalExpense=0; | |
| totalIncome=0; | |
| let TOTAL_EXPENSE=0; | |
| let TOTAL_INCOME=0; |
| const showIncome = document.getElementById('incomeCheckbox').checked; | ||
| const showExpense = document.getElementById('expenseCheckbox').checked; | ||
|
|
||
| console.log(showIncome,showExpense); |
week2/assign4/index.html
Outdated
| <div id="balanceBox"> | ||
| <p>나의 자산</p> | ||
| <h1 id="balance">234234</h1> | ||
| <ul> | ||
| <li class="income"> | ||
| <span>+</span> | ||
| <span id="totalIncome"></span> | ||
| </li> | ||
| <li class="expense"> | ||
| <span>-</span> | ||
| <span id="totalExpense"></span> |
There was a problem hiding this comment.
수연이두 id와 class를 혼합해서 쓰는것 같아!
유진언니 리뷰에도 남겼던건데..!
css 스타일링 할 때, js로 요소를 가져올 때 일정한 규칙 없이 클래스, id를 사용하면 개발 할 때도 어렵고 유지보수 및 가독성 측면에서도 단점이 될 수 있습니댜!
이전에 알려주었던 bem 방식 등을 참고해서,
id, class 중 어떤 것을 사용해야 할지 / 클래스명이나 id 명을 짓는 일정한 규칙 등에 대해 더 고민해보면 좋을것 같아!!
| HISTORY_LIST.filter(list =>{ | ||
| if(list.type==="income" && showIncome) return true; | ||
| if(list.type==="expense" && showExpense) return true; | ||
| return false; | ||
| }).forEach((list) =>showList(list)); | ||
|
|
||
| }; |
There was a problem hiding this comment.
filter 메서드 활용해서 showList 함수 써준거 좋당 !!
week2/assign4/index.js
Outdated
|
|
||
| /*----------------------------- */ | ||
| //모달 표시하고 닫기 | ||
| document.addEventListener('DOMContentLoaded', function() { |
There was a problem hiding this comment.
화살표 함수 : () => {} 형태랑 function 키워드 함수 : function() {} 형태를 혼합해서 같이 사용하고 있는것 같아용!
가독성을 위해 한 형태로 통일해주는건 어떨까?!
| /*----------------------------- */ | ||
| //모달 표시하고 닫기 | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| const openModalButton = document.querySelector('footer > button'); |
There was a problem hiding this comment.
querySelector로 요소를 가져올 때 이런식으로 자식 태그 선택자를 사용해도 좋지만!
나는 유지 보수 및 가독성을 위해 조작이 필요한 요소는 직접 클래스명을 부여하는걸 더 선호하는 편이얌 ㅎㅎ
이 부분 한 번 고민해보면 좋을것 같습니댜
| options = [ | ||
| { value: '과외비', text: '과외비' }, | ||
| { value: '용돈', text: '용돈' }, | ||
| { value: '기타', text: '기타' } | ||
| ]; | ||
| } else if (type==='expense') { | ||
| options = [ | ||
| { value: '식비', text: '식비' }, | ||
| { value: '교통비', text: '교통비' }, | ||
| { value: '기타', text: '기타' } | ||
| ]; | ||
| } |
There was a problem hiding this comment.
여기 options는 따로 data화 해서 상수로 빼준 다음 가지고 오는 방식으로 해도 좋겠다!
There was a problem hiding this comment.
그리구 select 태그가 모바일 화면으로 보면 레이아웃이 이상해진다고 했는데, 그건 모바일 브라우저에서 상속받는 기본 레이아웃 값이 있어서 그런걸수도 있엉!
이런 경우 모바일 화면에도 적용 가능한 css를 찾아 적용해주면 모바일 화면에서도 내가 원하는 스타일링을 가진 select 태그를 사용할수 있습니당!
| let itemContainer; | ||
| let type='income'; | ||
| let category; | ||
| let content; |
There was a problem hiding this comment.
요 변수들은 상수가 아닌데 최상단에 먼저 선언한 이유가 있는지 궁금합니댜 !!
개인적으로는, 데이터를 나타내는 상수를 제외하고는, 변수가 사용될 부분에서 선언하는 것이 더 가독성 있어 보인다구 생각합니당
✨ 구현 기능 명세
✅ 최초 데이터
상수로
INIT_BALANCE,HISTORY_LIST데이터를 가집니다. (상수명은 자유)INIT_BALANCE= 0HISTORY_LIST: 입출금 내역 리스트 (4개)최초 실행시 위 상수 데이터들 이용해 렌더링합니다. (즉, html에 직접 박아놓는 하드코딩 ❌)
→ 나의 자산은
INIT_BALANCE로부터 4개의 입출금 내역 리스트를 반영하여 보여줍니다.✅ 총수입 / 총지출
HISTORY_LIST에 있는 수입 내역과 지출 내역을 계산해서 총수입, 총지출을 보여줍니다.✅ 수입/지출 필터링
✅ 리스트 삭제
X버튼을 누르면 해당 리스트가 삭제됩니다.✅ 리스트 추가
수입지출버튼카테고리를 선택수입을 선택하면 수입 관련된 항목들이,지출을 선택하면 종류에 지출 관련된 항목들이 나옵니다.금액과내용입력 input저장하기버튼닫기버튼💎 PR Point
js 변수 선언부분
list정보 보여주는 함수
코드를 보면
HISTORY_LIST.forEach(list=>showList(list));이 부분이 함수내에 많이 나타난다. 이것도 하나의 함수로 나타낼 수 있을지...calculateTotal();`
slect태그 사용시 모바일화면으로 변환하면 레이아웃이 이상해지던데 저만 그랬나요..ㅠ 다들 어떻게 하셨는지 궁금해요!
저는 html엔 select태그만, js로 option 추가해주었어요!(수입/지출에 따라)
🥺 소요 시간, 어려웠던 점
4h🌈 구현 결과물
https://www.notion.so/dosopt/2-4f2f881b6ce5414c97ccdfe0d7b54017?pvs=4