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

aazkgh · 2023-10-27T09:41:56Z

✨ 구현 기능 명세

웨비의 사진관 😋

📌 기본 과제
✅ 1. 이미지 (첫번째 섹션만 해당)

이미지 호버시 백그라운드가 어둡게 처리되고, 해당 사진에 대한 제목과 설명이 나타납니다.
이미지에서 벗어나면 사라집니다.

한번에 반드시 하나의 이미지의 설명만 나타납니다.

✅ 2. top 버튼

최상단에서는 보이지 않고, 스크롤을 내림에 따라 점점 선명해집니다.

📌 심화 과제
✅ 1. 이미지

3줄 이상인 설명은 말줄임표 처리와, 더보기 버튼이 나타납니다.
더보기 클릭시 설명이 모두 보입니다.

✅ 2. preview section

좌우로 화살표 버튼이 있습니다.
오른쪽 버튼 클릭시 가장 오른쪽 이미지로 scroll 됩니다. (왼쪽 버튼도 마찬가지)

가계부💸

📌 기본 과제
✅ 1. 최초 데이터

상수로 INIT_BALANCE, HISTORY_LIST 데이터를 가집니다. (상수명은 자유)

INIT_BALANCE = 0 / HISTORY_LIST : 입출금 내역 리스트 (4개`)
최초 실행시 위 상수 데이터들 이용해 렌더링합니다.
나의 자산은 INIT_BALANCE로부터 4개의 입출금 내역 리스트를 반영하여 보여줍니다

✅ 2. 총수입 / 총지출

마찬가지로 최초에 HISTORY_LIST에 있는 수입 내역과 지출 내역을 계산해서 총수입, 총지출을 보여줍니다.

✅ 3. 수입/지출 필터링

수입, 지출 선택에 따라 내역 리스트가 필터링됩니다.

✅ 4. 리스트 삭제

각 리스트의 X 버튼을 누르면 해당 리스트가 삭제됩니다.
리스트 삭제시 나의 자산에 반영됩니다.
리스트 삭제시 총 수입 / 총 지출에 반영됩니다.

✅ 5. 리스트 추가 (하단 footer의 + 버튼을 누르면 리스트 추가 모달이 나타납니다.)

수입 지출 버튼

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

📌 심화 과제
✅ 1. 리스트 삭제 모달

x 버튼 클릭시 삭제 모달이 나타납니다.

예 클릭시 삭제를 진행합니다.
취소 클릭시 모달이 사라집니다.

✅ 2. 리스트 추가

카테고리, 금액, 내용 중 입력하지 않은 항목이 있는데 저장하기를 누른 경우, alert를 띄워 막습니다.
금액에 숫자가 아닌 문자를 입력시 alert를 띄워 막습니다.

✅ 3. 모달 백그라운드 & 애니메이션 (삭제, 추가)

백그라운드 : 모달 외부 부분을 어둡게 처리합니다.
애니메이션 : + 클릭시 추가 모달이 아래에서 위로 올라옵니다.

✅ 4. 카테고리 추가 (localStorage를 활용합니다.)

상수로 최초 카테고리를 저장한 후, 렌더링시 추가 모달의 드롭다운 option들을 동적으로 렌더링합니다.
우측 하단 버튼을 누르면 <카테고리 관리> 페이지로 이동합니다.
수입 카테고리와 지출 카테고리에 현재 카테고리들이 있습니다.
input 작성 후 Enter키를 누르면 카테고리가 추가됩니다.
다시 home으로 돌아가서 내역 추가 모달을 키면 option에 새로운 카테고리가 추가되어 있습니다.
새로고침을 해도 카테고리는 계속해서 유지됩니다.

✅ 5. 금액

모든 금액에 세개 단위로 , 로 표시됩니다. (나의 자산, 총수입/지출, 내역 리스트, 리스트 추가 input)

📌 생각 과제
✅

💎 PR Point

3가지를 계속 리마인드 하려면서 구현하려고 했습니다!

간결하고 가독성 좋게 코드 작성하기
함수 재활용할 수 있게 (불필요한 함수 생성 ❌)
하나의 함수는 한 가지 역할만!

코드를 짜는데 2번 하고 3번 하고 상충하는 경우가 왕왕 발생해서 아쉽긴 하지만,,,!
나름 고민을 많이 하고 코드를 짰습니다ㅎㅎ

웨비의 사진관 😋

✔ top 버튼 투명도 조절

window에 eventListener를 부착했습니다.
opacity가 0~1에서 조정된다는 점을 고려해 scrollY(페이지 전체의 Y값)로 나누어주어 움직일 때마다 opacity 값이 변화할 수 있도록 설정했습니다!

//scroll이 작동하는 건 window이기 때문!(event 발생하는 곳)
window.addEventListener('scroll', function(){
    //전체 Y스크롤 값으로 나눔
    topBtn.style.opacity = window.scrollY / 3000;
});

✔ 이미지 정보 더보기 버튼과 말줄임표

과제 1번에서 가장 오래 걸렸던 부분입니다.💦
display: -webkit-box가 안 먹어서 새벽 6시에 화면에다가 주먹질 했는데 황당무계하게도 상위 CSS에 묻혔더군요,,,
mouseenter랑 mouseleave`와도 연동해서 마우스가 컨테이너 밖으로 빠져 나갈 때, 초기 상태로 리셋되게 만들었습니다. 그리고 더보기 버튼을 안 누른 상태로 빠져 나가도 CSS와 JS가 적용될 수 있게끔 구현했습니당!

.photo_info {
    width: 80%;
    top: 4rem;

    display: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    
    font-size: 0.8rem;
}

function onHover(e){
    e.target.children[2].style.display ="-webkit-box";
    moreText(e.target.children[2]); //CSS 변화
}

function outHover(e){
    e.target.children[2].style.display ="none";

    if(e.target.lastChild.className === "read_more"){
        e.target.lastChild.remove();
        unloadText(e.target.children[2]); //CSS 변화
    }
}

가계부💸

✔ 리스트 삭제 컨펌 모달

예 버튼을 눌렀을 때, li가 타깃 요소가 아닌데 어떻게 불러와야될 지 고민을 많이 했습니다.
결국 button의 onclick 함수를 modal창 함수에 같이 넣어줬는데 이것이 맞을까요? 의문입니다,,,

function warnModal(element){
    allowBtn.onclick = () => {
        deleteList(element);
    }
    rejectBtn.onclick = () => {        
        document.querySelector(".dark").remove();
        deletModal.style.display = "none";
    };
}

✔ 리스트 추가 모달 입력 제한

숫자가 아닌 문자를 입력 받을 때, 제한 조건을 거는 방식입니다.
다른 함수를 사용해도 콤마가 화면에 출력되어야 하는데 그러면 문자열로 변환이 되기 때문에 데이터 타입을 계속 신경 써서 구현했습니다.

function onlyNum(event){
    let val = event.target.value;
//불러온 금액 문자열에서 천단위 콤마 제거
    val = val.replace(/,/g,"");

//숫자가 아닌 값 입력하면 null 값으로 대체 후 반환
    if(val.match(/[^0-9]/g)){
        val = val.replace(/[^0-9]/g,"");
        alert('숫자만 입력해주세요.');
    }

//만약 빈 input 값에 처음 입력한 값이 숫자가 아니라면 아예 공백 반환(parseInt 때문에 NaN이 출력돼서 조건문을 걸어줌)
    /[0-9]/g.test(event.target.value) === false
    ? event.target.value = ""
    :event.target.value = parseInt(val).toLocaleString();
}
newAmount.addEventListener('input',onlyNum);

처음에 click될 때마다 함수를 불러올 수 있게 코드를 짰는데 한글은 인식이 안된다는 문제가 있다고 해서 keypress로 갈아탔습니다.
근데 이번엔 input 값이 원하는대로 변환이 안되더군요ㄱ-(keyCode 값이 읽기 전용이라), 그래서 input일 때마다 함수가 실행될 수 있도록 수정했습니다.

✔ 리스트 추가 모달 애니메이션 효과

모달창 애니메이션 효과를 처음에는 background filter나 backdrop으로 해결하려고 했습니다.
근데 애니메이션 효과가 적용 되니까 끝부분 테두리가 안 예쁘게 끊기는 것 같아서 모달창을 오픈하면 뒷배경 역할을 하는 div가 생길 수 있도록 바꾸었습니다.
그리고 transition 아직도 어려워요💫

modalBtn.onclick = () => {
    modalWrapper.style.bottom = "0";

    const backgroundElement = document.createElement("div");
    backgroundElement.classList.add("dark");

    modalWrapper.before(backgroundElement);
};

🥺 소요 시간, 어려웠던 점

웨비의 사진관 😋

🗨 10h 정도?

가계부💸

🗨 30h 정도,,? (맨날 이것만 했더니 감이 안 잡힌다며...)

JS를 너무 오랜만에 해서 시작할 때가 가장 힘들었습니다. ㄱ- (함수를 어떻게 구상해야될 지, 언제 함수 불러와야될 지 등등)
오래 걸릴 거라고 생각했던 부분은 오히려 금방 구현하고 금방 할 거라고 생각한 부분은 오히려 오래 걸리더라구요ㅎㅅㅎ
구현해야될 내용이 많아서 일주일동안 하루종일 앉아있는 게 힘들었어요🙄 왕초보의 숙명이랄까,,,
이번에 여유시간이 좀 있어서 그런지 저번보다 깊게 고민할 수 있었던 것 같습니다!
그래도 심화까지 다 구현해서 너무너무 뿌듯합니당ㅎㅎ 재밌었어요(❁´◡`❁)

🌈 구현 결과물

[드라이브 링크]https://drive.google.com/drive/folders/1VlsDnislZKH4zcQf9BchpnYBA7h8hfqD?usp=sharing

SynthiaLee · 2023-10-30T07:54:03Z

jsbank/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}


어라 5500포트로 다른 거 돌아가고 잇나...?

켈록켈록...아마 두 개를 동시에 돌렸나 봄...큼큼큼

SynthiaLee · 2023-10-30T07:55:26Z

jsbank/category-manage.js

+
+inCategory.addEventListener("keypress",createCateogry);
+outCategory.addEventListener("keypress",createCateogry);
+


키햐,,,심화과제 팜미,,,

요기 createCateogry 부분 스펠링 오타 있어.....ㅎ

오우싯~ㅋ;; 민망이슈;;

현재 keypress는 deprecated된 이벤트리스너여서 keydown사용을 권장합니다!

SynthiaLee · 2023-10-30T07:59:06Z

jsbank/index.html

+        <hr>
+        <section id="list_wrapper">
+            <ul>
+            </ul>


요기 빈 ul 안에는 js파일에서 무언가가 들어가는 곳인가여?!

맞슴다!! 렌더링 하면서 리스트 항목이 들어가는 곳!!

SynthiaLee · 2023-10-30T08:00:47Z

jsbank/initial.js

+        type: "output",
+        name: "쇼핑"
+    }
+];


상수파일 따로 뺀거 구웃-!

22!!!!👍🏻👍🏻

SynthiaLee · 2023-10-30T08:40:42Z

jsbank/main.js

+    : list.className = "list_output";
+
+    let amount = element.amount.toLocaleString();
+    amount = element.type === "input" ? `+${amount}` : `-${amount}`;


삼항연산자 활용 굿~

SynthiaLee · 2023-10-30T08:42:39Z

jsbank/modal.js

+    val = val.replace(/,/g,"");
+
+    if(val.match(/[^0-9]/g)){
+        val = val.replace(/[^0-9]/g,"");


이햐 정규표현식까지,,,,🔥

SynthiaLee · 2023-10-30T08:50:50Z

jsbank/modal.js

+    };
+}
+
+loadCategory();


심화과제까지 마친 가형스,,,폼미,,,,

심화과제까지 마친 가형스,,,폼미,,,,

222,,,,, 폼미!!

333..폼미폼미폼미폼미

SynthiaLee · 2023-10-30T08:55:46Z

jsbank/main.js

+let tempOutput = INIT_BALANCE;
+let tempAsset = INIT_BALANCE;
+
+const totalInput = document.querySelector(".total_inout :nth-child(2)");


지난기수에 멘토님들 오셨을 때 들었던 얘기인데, 선택자로 nth-child를 쓰는게 나중에 예상치 못한 문제를 일으키는 경우가 많아서 지양한다고 하셨거든!! 지금은 스케일이 작아서 괜찮지만 코드가 많아지면 이거 찾는것도 은근 일이라,,! 선택하는 다른 방법은 없는지 생각해보면 좋을듯!

지난기수에 멘토님들 오셨을 때 들었던 얘기인데, 선택자로 nth-child를 쓰는게 나중에 예상치 못한 문제를 일으키는 경우가 많아서 지양한다고 하셨거든!! 지금은 스케일이 작아서 괜찮지만 코드가 많아지면 이거 찾는것도 은근 일이라,,! 선택하는 다른 방법은 없는지 생각해보면 좋을듯!

헐 좋은 거 배워가요!!🙏🏻

지난기수에 멘토님들 오셨을 때 들었던 얘기인데, 선택자로 nth-child를 쓰는게 나중에 예상치 못한 문제를 일으키는 경우가 많아서 지양한다고 하셨거든!! 지금은 스케일이 작아서 괜찮지만 코드가 많아지면 이거 찾는것도 은근 일이라,,! 선택하는 다른 방법은 없는지 생각해보면 좋을듯!

음음 맞는 것 같아!! 알려줘서 고맙💕

SynthiaLee · 2023-10-30T08:56:28Z

jsbank/index.html

+        <a href="./category.html"><img src="./category.png" class="btn" id="category_btn"></a>
+    </footer>
+    <script src="main.js" type="module"></script>
+    <script src="modal.js" type="module"></script>


type='module' 굿~!

SynthiaLee

진짜진짜 고생햇다아ㅏ 멋진와비 고.가.형.~!!〰️🔥

jungwoo3490 · 2023-10-31T09:35:43Z

jsbank/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}


어라 5500포트로 다른 거 돌아가고 잇나...?

jungwoo3490 · 2023-10-31T09:37:09Z

jsbank/category-manage.js

+    const list = document.createElement("li");
+
+    list.innerHTML = `
+    <span>${element.name}</span>


템플릿 리터럴 활용 조아요👏🏻👏🏻

jungwoo3490 · 2023-10-31T09:40:33Z

jsbank/category-manage.js

+function addStorage(element){
+    localStorage.setItem(localStorage.length, JSON.stringify(element));
+}


key 값을 현재 로컬스토리지 length로 줘서 아이템 추가될때마다 순차적으로 인덱스 부여받도록 한 건가?? 신박하다😮

엉,,ㅋㅋㅋ key 값을 도저히 뭘로 줘야될 지 모르겠더라고,,!!! 먼가 symbol을 써도 될 것 같기도 하고?! 일단 저 때는 제 최선이었슴다....

보통 key값은 해당 값이 무엇인지를 나타낼 수 있는 값으로 지정해줘요 ! 그래야 각 값의 key가 뭔지 매번 보지 않고, 해당하는 명명값만을 가지고 getItem을 할 수 있으니까용 !

jungwoo3490 · 2023-10-31T09:42:02Z

jsbank/category-manage.js

+
+inCategory.addEventListener("keypress",createCateogry);
+outCategory.addEventListener("keypress",createCateogry);
+


요기 createCateogry 부분 스펠링 오타 있어.....ㅎ

jungwoo3490 · 2023-10-31T09:55:03Z

jsbank/initial.js

+        type: "output",
+        name: "쇼핑"
+    }
+];


22!!!!👍🏻👍🏻

jungwoo3490 · 2023-10-31T12:47:09Z

jsbank/main.js

+let tempOutput = INIT_BALANCE;
+let tempAsset = INIT_BALANCE;
+
+const totalInput = document.querySelector(".total_inout :nth-child(2)");


지난기수에 멘토님들 오셨을 때 들었던 얘기인데, 선택자로 nth-child를 쓰는게 나중에 예상치 못한 문제를 일으키는 경우가 많아서 지양한다고 하셨거든!! 지금은 스케일이 작아서 괜찮지만 코드가 많아지면 이거 찾는것도 은근 일이라,,! 선택하는 다른 방법은 없는지 생각해보면 좋을듯!

헐 좋은 거 배워가요!!🙏🏻

jungwoo3490 · 2023-10-31T12:53:40Z

jsbank/main.js

+
+    tempAsset = tempInput-tempOutput;
+
+    totalInput.innerHTML = `${tempInput.toLocaleString()}`; 


toLocaleString 이거 날짜 포맷팅할때만 사용해봤는데 숫자도 포맷팅해주는구나!!! 처음 알았어😮

나두 검색하다 안 사실,,,,,약간 편법이긴 한데,,,정석인 방법이 나에겐 너무 버거웠,,,,

jungwoo3490 · 2023-10-31T12:56:03Z

jsbank/main.js

+    : element.type = "output";
+
+    let val = list.innerHTML;
+    val = parseInt(val.replace(/[,+-]/g,""));


정규표현식까지,,,,,👍🏻👍🏻 +, - 기호 제거해주는 표현식인가??

웅!! JS 안에서 자산 계산할 때는 숫자 타입으로 돌아다녀야 되니까 amount string에서 특수 기호들만 골라서 빼줬슴당!!

jungwoo3490 · 2023-10-31T12:58:12Z

jsbank/modal.js

+    };
+}
+
+loadCategory();


심화과제까지 마친 가형스,,,폼미,,,,

222,,,,, 폼미!!

jungwoo3490 · 2023-10-31T13:02:13Z

jsgallery/main.js

+function onHover(e){
+    e.target.children[0].style.filter = "brightness(0.5)"
+    e.target.children[1].style.display ="inline";
+    e.target.children[2].style.display ="-webkit-box";


이건 어떻게 동작하는 코드야?? 궁금쓰

기본 과제는 flex로만 하면 되는데 3줄 이상 줄넘김 지정해주려고 display 값을 "-webkit-box"로 지정해줬다!! 크롬이랑 사파리에 내장된 extensions 같은데,,,요즘은 잘 안 쓰는 것 같기는 해 ㅎㅅㅎ (근데 다른 방법을 못 찾아뜸...)
http://dolly77.tistory.com/9<< 요기 참고해바

기본 과제는 flex로만 하면 되는데 3줄 이상 줄넘김 지정해주려고 display 값을 "-webkit-box"로 지정해줬다!! 크롬이랑 사파리에 내장된 extensions 같은데,,,요즘은 잘 안 쓰는 것 같기는 해 ㅎㅅㅎ http://dolly77.tistory.com/9<< 요기 참고해바

너무 신기해... 유익해.......

jungwoo3490 · 2023-10-31T13:03:42Z

심화과제까지 하느라 넘 고생했어!!! 멋지다 가형쓰 👏🏻👏🏻👏🏻 덕분에 많이 배워가 :)
담주에 뒷풀이 꼭꼭 가는걸로...ㅎ

ljh0608

많이 배워 갑니다 :)

ljh0608 · 2023-11-02T05:10:40Z

jsbank/category-manage.js

+
+inCategory.addEventListener("keypress",createCateogry);
+outCategory.addEventListener("keypress",createCateogry);
+


현재 keypress는 deprecated된 이벤트리스너여서 keydown사용을 권장합니다!

ljh0608 · 2023-11-02T05:16:15Z

jsbank/category-manage.js

+    for (let key of keys){
+        let objOption = document.createElement("li");


함수형 프로그래밍을 위해 forEach사용을 권장합니다!
그리고 노드의 element를 만들거나 가져올 때는 const 사용을 해보는게 어떨까요??

ljh0608 · 2023-11-02T05:18:58Z

jsbank/main-style.css

+@import "./reset.css";
+@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
+


@import 방법으로 import 하는 것은 성능 문제가 발생할 수 있어요!
https://webclub.tistory.com/127

ljh0608 · 2023-11-02T05:19:26Z

jsbank/main-style.css

+:root{
+    /*color*/
+    --main-color: #bedaba;
+    --sub-color01: #F6F6F6;
+    --sub-color02: #fdcfcf;
+    --sub-color03: #f7f7e1;
+}


이런 변수 선언 후 코드 가독성 높이는거 너무 좋은 것 같아요

ljh0608 · 2023-11-02T05:22:22Z

jsbank/main.js

+const inputBox = document.getElementById("input_box");
+const outputBox = document.getElementById("output_box");


class 선택자와 id선택자를 섞어서 사용하면 우선순위 때문에 추후 유지보수에 어려움을 가질 수 있어요! id선택자를 쓰신 이유가 있을까요??

id 밖에 안 붙어있었,,따,,!!

ljh0608 · 2023-11-02T05:22:43Z

jsbank/main.js

+    : list.className = "list_output";
+
+    let amount = element.amount.toLocaleString();
+    amount = element.type === "input" ? `+${amount}` : `-${amount}`;


ljh0608 · 2023-11-02T05:23:16Z

jsbank/modal.js

+const modalWrapper =document.querySelector(".modal_wrapper");
+const modalBtn = document.getElementById("add_btn");
+const closeBtn = document.getElementById("close");


변수명 코드컨벤션 맞춘거 아주 좋아요~!

ljh0608 · 2023-11-02T05:24:32Z

jsbank/sub-style.css

+    width: 70%;
+    height: 40%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+
+    background-color: var(--main-color);


필수는 아니지만 css 코드 컨벤션도 있어요!
모질라 css 컨벤션(순서)이나, styleLint를 알아보면 좋을 것 같아요!

금잔디 아닌데 리뷰 해줘서 감쟈합니다 재훈재훈님🙇‍♀️

seobbang

심화과제까지 진짜 진짜 폼미 .. 🔥🔥 고민한 흔적이 가득 보인다 .. 너무 고생 많았어요 ! !

seobbang · 2023-11-09T15:51:56Z

jsbank/category-manage.js

+        element.target.id === "categorypg_input"
+        ? tempVal.type = "input"
+        : tempVal.type = "output";


Suggested change

element.target.id === "categorypg_input"

? tempVal.type = "input"

: tempVal.type = "output";

tempVal.type = element.target.id === "categorypg_input"

? "input" : "output";

요렇게 사용하면 된답니당 ~!

seobbang · 2023-11-09T15:55:07Z

jsbank/category-manage.js

+function createCateogry(element){
+    if(element.keyCode === 13){


Suggested change

function createCateogry(element){

if(element.keyCode === 13){

function createCateogry(event){

if(event.keyCode === 13){

여기는 event 객체를 받아오는거니까, e나 event로 변수명을 지어줘야 event객체를 사용하고 있구나 한 눈에 알아보기 쉽겠죠 ?!

seobbang · 2023-11-09T15:57:25Z

jsbank/category-manage.js

+function addStorage(element){
+    localStorage.setItem(localStorage.length, JSON.stringify(element));
+}


보통 key값은 해당 값이 무엇인지를 나타낼 수 있는 값으로 지정해줘요 ! 그래야 각 값의 key가 뭔지 매번 보지 않고, 해당하는 명명값만을 가지고 getItem을 할 수 있으니까용 !

seobbang · 2023-11-09T16:13:36Z

jsbank/modal.js

+    /[0-9]/g.test(event.target.value) === false
+    ? event.target.value = ""
+    :event.target.value = parseInt(val).toLocaleString();


Suggested change

/[0-9]/g.test(event.target.value) === false

? event.target.value = ""

:event.target.value = parseInt(val).toLocaleString();

const TEXT_EXPRESSION = /[0-9]/g;

event.target.value = TEXT_EXPRESSION.test(event.target.value)

? parseInt(val).toLocaleString() : "" ;

요로코롬 가능하죠! 정규표현식 같은 경우엔 이렇게 상수화해서 빼주는게 좋답니당 ! 추후 유지보수할 때 바뀔 경우 유용하기도 하구요!

seobbang · 2023-11-09T16:17:07Z

jsbank/modal.js

+    let tempAmount = newAmount.value;
+    let tempTitle = newTitle.value;
+
+    if(tempCategory === ''|| tempAmount === ''|| tempTitle === ''){


Suggested change

if(tempCategory === ''|| tempAmount === ''|| tempTitle === ''){

if (!tempCategory || !tempTitle || !tempPrice) {

빈 문자열은 falsy값이라서 이렇게도 가능하답니다!

seobbang · 2023-11-09T16:18:06Z

jsbank/modal.js

+    };
+}
+
+loadCategory();


333..폼미폼미폼미폼미

seobbang · 2023-11-09T16:19:41Z

jsbank/main.js

+    if(inputBox.checked){
+        showList(inputList);
+    }
+    else{
+        hideList(inputList);
+    }


Suggested change

if(inputBox.checked){

showList(inputList);

}

else{

hideList(inputList);

}

inputBox.checked ? showList(inputList) : hideList(inputList);

요로코롬 삼항연산자는 어떤가용?

seobbang · 2023-11-09T16:23:21Z

jsgallery/main.js

+for (var i = 0; i < hoverTarget.length; i++) {
+    hoverTarget[i].addEventListener('mouseenter', onHover);
+    hoverTarget[i].addEventListener('mouseleave', outHover);
+}


선언형 프로그래밍을 위해!

Suggested change

for (var i = 0; i < hoverTarget.length; i++) {

hoverTarget[i].addEventListener('mouseenter', onHover);

hoverTarget[i].addEventListener('mouseleave', outHover);

}

hoverTarget.forEach((target) => {

target.addEventListener('mouseenter', onHover);

target.addEventListener('mouseleave', outHover);

})

그리고 하나 하나 지금 돌아가면서 EventListener를 붙여주고 잇는데 조금 더 심화지만 이벤트 위임을 이용하면 이렇게 하지 않아도 된답니당 ㅎㅎ 참고 ~

유용유용❤ 팟짱의 코리 완전 땡큐💞

seobbang · 2023-11-09T16:24:04Z

jsgallery/main.js

+    if (e.clientHeight < e.scrollHeight){
+        e.parentNode.appendChild(moreBtn);
+    }


와우 이렇게 동적으로 잘해냈다닉

aazkgh added 11 commits October 22, 2023 23:20

gallery 기본 과제 완료 / bank 최초 렌더링

fec2a47

bank 필터링 추가

26327ed

리스트 삭제,추가 함수 구현 및 x 버튼 활성화

b6c0f2e

기본 내역 추가 모달 구현 완료(기본 과제 완료)

78b8f37

금액 가독성 부분 추가 / 모달 리스트 추가 조건 구현

132c19a

로컬 저장소 구현(2번 심화과제 완료)

fcce624

이미지 설명 말줄임표와 더보기 버튼

46c2b02

프리뷰 화살표 추가 (1번 심화 과제 완료)

6730bf3

Merge branch 'main' into week2

3392960

생각과제 추가

9b47c4d

최종 수정 완료(과제 1 mouseout event / 과제 2 input 초기값 NaN 오류 해결)

796f96a

aazkgh added 2주차 기본과제 심화과제 생각과제 labels Oct 27, 2023

aazkgh requested review from jungwoo3490, seobbang and SynthiaLee October 27, 2023 09:41

aazkgh self-assigned this Oct 27, 2023

SynthiaLee reviewed Oct 30, 2023

View reviewed changes

jungwoo3490 reviewed Oct 31, 2023

View reviewed changes

ljh0608 reviewed Nov 2, 2023

View reviewed changes

seobbang reviewed Nov 9, 2023

View reviewed changes


		inCategory.addEventListener("keypress",createCateogry);
		outCategory.addEventListener("keypress",createCateogry);


		tempAsset = tempInput-tempOutput;

		totalInput.innerHTML = `${tempInput.toLocaleString()}`;

		for (let key of keys){
		let objOption = document.createElement("li");

		@import "./reset.css";
		@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

		const inputBox = document.getElementById("input_box");
		const outputBox = document.getElementById("output_box");

		function createCateogry(element){
		if(element.keyCode === 13){

	if(tempCategory === ''\|\| tempAmount === ''\|\| tempTitle === ''){
	if (!tempCategory \|\| !tempTitle \|\| !tempPrice) {

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

Are you sure you want to change the base?

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

Conversation

aazkgh commented Oct 27, 2023 • edited Loading

✨ 구현 기능 명세

웨비의 사진관 😋

가계부💸

💎 PR Point

웨비의 사진관 😋

가계부💸

🥺 소요 시간, 어려웠던 점

웨비의 사진관 😋

가계부💸

🌈 구현 결과물

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

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

SynthiaLee 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

aazkgh Oct 31, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jungwoo3490 commented Oct 31, 2023

ljh0608 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

seobbang 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

aazkgh commented Oct 27, 2023 •

edited

Loading

aazkgh Oct 31, 2023 •

edited

Loading