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

hae2ni · 2023-10-26T12:24:32Z

✨ 구현 기능 명세

기본 과제

웨비의 사진관 😋

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

가계부 💸

최초 데이터
1. 상수로 INIT_BALANCE, HISTORY_LIST 데이터를 가집니다. (상수명은 자유)
  - INIT_BALANCE = 0
  - HISTORY_LIST : 입출금 내역 리스트 (4개)
2. 최초 실행시 위 상수 데이터들 이용해 렌더링합니다. (즉, html에 직접 박아놓는 하드코딩 ❌)
  
  → 나의 자산은 INIT_BALANCE로부터 4개의 입출금 내역 리스트를 반영하여 보여줍니다.
총수입 / 총지출
1. 마찬가지로 최초에 HISTORY_LIST에 있는 수입 내역과 지출 내역을 계산해서 총수입, 총지출을 보여줍니다.
수입/지출 필터링
1. 수입, 지출 선택에 따라 내역 리스트가 필터링됩니다.
리스트 삭제
1. 각 리스트의 X 버튼을 누르면 해당 리스트가 삭제됩니다.
2. 리스트 삭제시 나의 자산에 반영됩니다.
3. 리스트 삭제시 총 수입 / 총 지출에 반영됩니다.
리스트 추가

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

심화 과제

웨비의 사진관 😋

이미지
1. 3줄 이상인 설명은 말줄임표 처리와, 더보기 버튼이 나타납니다.
2. 더보기 클릭시 설명이 모두 보입니다.
  
  → 설명은 넘치지 않도록 넣어주세요!
preview section
1. 좌우로 화살표 버튼이 있습니다.
2. 오른쪽 버튼 클릭시 가장 오른쪽 이미지로 scroll 됩니다. (왼쪽 버튼도 마찬가지)

가계부 💸

리스트 삭제 모달
1. x 버튼 클릭시 삭제 모달이 나타납니다.
  
  → 예 클릭시 삭제를 진행합니다.
  
  → 취소 클릭시 모달이 사라집니다.
리스트 추가
1. 카테고리, 금액, 내용 중 입력하지 않은 항목이 있는데 저장하기를 누른 경우, alert를 띄워 막습니다.
2. 금액에 숫자가 아닌 문자를 입력시 alert를 띄워 막습니다.
모달 백그라운드 & 애니메이션 (삭제, 추가)
1. 백그라운드 : 모달 외부 부분을 어둡게 처리합니다.
2. 애니메이션 : + 클릭시 추가 모달이 아래에서 위로 올라옵니다.
카테고리 추가

**localStorage**를 활용합니다.
1. 상수로 최초 카테고리를 저장한 후, 렌더링시 추가 모달의 드롭다운 option들을 동적으로 렌더링합니다.
2. 우측 하단 버튼을 누르면 <카테고리 관리> 페이지로 이동합니다.
3. 수입 카테고리와 지출 카테고리에 현재 카테고리들이 있습니다.
4. input 작성 후 Enter키를 누르면 카테고리가 추가됩니다.
5. 다시 home으로 돌아가서 내역 추가 모달을 키면 option에 새로운 카테고리가 추가되어 있습니다.
6. 새로고침을 해도 카테고리는 계속해서 유지됩니다.
금액
1. 모든 금액에 세개 단위로 , 로 표시됩니다. (나의 자산, 총수입/지출, 내역 리스트, 리스트 추가 input)

생각 과제

명령형 프로그래밍과 선언형 프로그래밍에 대하여 여러분의 생각을 마음껏 작성해주세요

명령형 프로그래밍과 선언형 프로그래밍은 무엇일까?
각각의 방식을 따르는 언어는 무엇이 있을까?
각각의 방식은 어떤 상황/유형에 쓰는 것이 적합할까?
JavaScript 에서는 어떤 방식을 선택하는 것이 좋을까?

💎 PR Point

웨비의 사진관 😋

a,b

const firstImages = document.querySelectorAll(".first_section_pic");

//더보기 버튼 생성
const moreBtn = document.createElement("button");
moreBtn.classList.add("more_button");
moreBtn.innerText = "더보기";

firstImages.forEach((pic, index) => {
  const h2 = document.createElement("h2");
  h2.classList.add("title");
  const p = document.createElement("p");
  p.classList.add("summary");
  const { title, summary } = DATA[index];

  let moreBtnClicked = false;

  pic.addEventListener("mouseover", function () {
    pic.childNodes[1].classList.add("addTitle");
    pic.classList.add("addTitle");
    h2.innerText = title;

    const div = document.createElement("div");
    div.classList.add("title_summary_wrapper");
    div.appendChild(h2);
    p.innerText = summary;
    div.appendChild(p);
    pic.appendChild(div);

=> 각 이미지들을 querySelectorAll 로 받아와서, forEach 에서 각 제목과 설명을 삽입하였습니다.

심화 1번

 const pHeight = p.clientHeight;
    const summaryHeight = p.scrollHeight;

    if (pHeight < summaryHeight) {
      div.appendChild(moreBtn);
      moreBtn.addEventListener("click", () => {
        p.classList.replace("summary", "summaryAll");
        moreBtn.style.display = "none";
        moreBtnClicked = true;
      });
    }
    moreBtn.addEventListener("click", () => {
      p.classList.replace("summary", "summaryAll");

      moreBtn.style.display = "none";
    });
  });

  pic.addEventListener("mouseleave", function () {
    pic.classList.remove("addTitle");
    h2.innerText = "";
    p.innerText = "";
    p.classList.replace("summaryAll", "summary");
    moreBtn.style.display = "initial";
    moreBtnClicked = false;
  });
});

=> 각 콘텐츠의 height를 측정하여, 설명의 높이가 더 크면 더보기 버튼을 넣었고, 버튼을 클릭하면 버튼이 사라지고 (style.display = "none") 설명이 보이도록 구현하였습니다.

기본 2번, 심화2번은 pr point 생략

가계부 💸
기본 pr point 생략

심화 2번 (b)

howMuchInput.addEventListener("input", (e) => {
  if (isNaN(e.target.value.charAt(0))) {
    alert("숫자만 입력 가능합니다");
    howMuchInput.value = null;
    return;
  } else {
    let value = howMuchInput.value.replace(/,/g, "");
    value = addThousnadsSeparator(value);
    howMuchInput.value = value;
    return;
  }
});

-> 간단할 줄 알았는데,,, 이렇게 하는 게 맞나요,,?ㅠ

심화 1번 + 기본 4번

const deleteButton = document.querySelectorAll(".money_and_btn > button");

const deleteModal = document.getElementById("delte_modal_wrapper");
const deleteListButton = document.getElementById("delete_confirm");
const closeDeleteModalButton = document.getElementById("not_delete_confirm");

deleteButton.forEach((button) => {
  button.addEventListener("click", (e) => {
    deleteModal.classList.replace(HIDDEN_CLASS, "delete_modal");
    const deleteConfirmList = e.target.classList[0];
    deleteListButton.addEventListener("click", () => {
      deleteList(deleteConfirmList);
    });
  });
});

function deleteList(deletedId) {
  const lists = document.querySelectorAll(".list_wrapper");
  lists.forEach((list) => {
    const plusMoney = document.getElementById("plus_money");
    const minusMoney = document.getElementById("minus_money");

    if (list.classList.contains(deletedId)) {
      const h3 = list.querySelector("h3");
      const deletedMoney = parseInt(h3.innerText.replace(/,/g, ""), 10);

      if (h3.classList.contains("plus")) {
        plusMoney.innerText = (
          parseInt(plusMoney.innerText.replace(/,/g, ""), 10) - deletedMoney
        ).toLocaleString();

        totalMoney.innerText = (
          parseInt(totalMoney.innerText.replace(/,/g, ""), 10) - deletedMoney
        ).toLocaleString();
      } else if (h3.classList.contains("minus")) {
        minusMoney.innerText = (
          parseInt(minusMoney.innerText.replace(/,/g, ""), 10) + deletedMoney
        ).toLocaleString();

        totalMoney.innerText = (
          parseInt(totalMoney.innerText.replace(/,/g, ""), 10) - deletedMoney
        ).toLocaleString();
      }
      list.remove();
      deleteModal.classList.replace("delete_modal", HIDDEN_CLASS);
    }
  });
}

closeDeleteModalButton.addEventListener("click", () => {
  deleteModal.classList.replace("delete_modal", HIDDEN_CLASS);
});

const goToManageCategory = document.getElementById("manage_category");
goToManageCategory.addEventListener("click", () => {
  location.href = "category.html";
});

-> 진짜,,, 그 더하고 빼고 반영해야 하는 것 때문에 구글링 많이 하고 애먹었습니다..

심화 4번(일부)

function isEntered(e, isPlus) {
  if (e.keyCode === 13) {
    const h3 = document.createElement("h3");
    h3.innerText = e.target.value;

    if (isPlus) {
      plusCategory.appendChild(h3);
      category.push({ category: e.target.value, isPlus: true });
    } else {
      minusCategory.appendChild(h3);
      category.push({
        category: e.target.value,
        isPlus: false,
      });
    }

-> 이 함수 구현한 게 제일 뿌듯해영 ><

🥺 소요 시간, 어려웠던 점

8h~9h
기본은 후딱 끝냈는데, 심화 부분에서 생각보다 시간을 많이 썻습니다. 특히 2번 과제 심화들,,,,, 진짜 디테일하게 신경써야 하는 부분이 정말정말 많아서 (리스트 삭제되면 막 반영되고 이런거) 이런 거 생각하면서 하느라 시간 많이 썻구 가장 많이 쓴건 목욜에 2번 심화 1번, 4번, 5번(qa) 하는데 3시간 가까이 썼습니다ㅠ

🌈 구현 결과물

웨비의 사진관 😋
https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/0a589986-146d-491b-955d-042b178abea4
기본1+심화1,2
https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/9a0cbcdc-e0f9-492e-9b60-9b719cae85dd
기본2 (top 버튼이 동영상 재생 버튼에 가려져 있어서,,, 마우스 치워주시구(?) 봐주시면 감사하겠습니다요,,)

가계부 💸

기본 1, 2 최초 화면

https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/b02d03f8-e3cb-46ad-a079-db37c4aa6b17
기본 3 (수입, 지출 필터링)

https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/74e3767d-26a3-484f-b036-01081976575b
기본 4 + 심화 1 (리스트 삭제)

https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/c4d196c6-d73c-47ee-8ca2-6d9f839aac86
심화 3 + 심화 4

https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/9e95d8c2-f733-48a2-a376-a56b2c31edf9
기본5 + 심화2 + 심화5

… week2

…week2

binllionaire

심화까지 너무 너무 고생했어 언니 !! 전체적으로 코드가 이해하기 쉬웠어용 역시 귯귯!! 👍🏻💖

binllionaire · 2023-10-30T15:43:48Z

assign2/category.js

+function isEntered(e, isPlus) {
+  if (e.keyCode === 13) {
+    const h3 = document.createElement("h3");
+    h3.innerText = e.target.value;


13이 무엇을 의미하는지 모를 수도 있으니까

Suggested change

function isEntered(e, isPlus) {

if (e.keyCode === 13) {

const h3 = document.createElement("h3");

h3.innerText = e.target.value;

function isEntered(e, isPlus) {

if (event.key === "Enter") {

const h3 = document.createElement("h3");

h3.innerText = e.target.value;

요런식이나 13을 상수화해서 표현하는 것도 가독성 측면에서 좋을 것 같아!!!

아 그러네 모를수도 있겠다....

binllionaire · 2023-10-30T15:46:57Z

assign1/index.js

+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);


코드에서 $ 를 쓴게 안보이는데 따로 의미가 있을까?? 내가 못찾은 거라면 미안해..,.😓

원래 쓰려고 하다가 첨에 잘 안되기두 했구 오히려 더더 헷갈려서ㅠ 일단 보류해 두었으,,,,, 너무 헷갈리게 id나 class이름을 지은 것 같아ㅠ

binllionaire · 2023-10-30T15:48:31Z

assign1/index.js

+// 1.a , b
+const firstImages = document.querySelectorAll(".first_section_pic");
+


위랑 같은 맥락으로 요기를 그럼 $$로 쓸 수 있었던 것 아닌가?!!

우웅 마자요!!! 근데 쓰다 안 쓰다보다 일단 안 쓰는게 나을 것 같아서 일차적으로는 안 썻으

binllionaire · 2023-10-30T15:55:58Z

assign1/index.js

+    //심화 1번
+    const pHeight = p.clientHeight;
+    const summaryHeight = p.scrollHeight;
+
+    if (pHeight < summaryHeight) {


오옹 나는 p태그의 높이를 getComputedStyle(detail).height로 받아와서 구현했는데 이렇게도 할 수 있구나

binllionaire · 2023-10-30T16:09:55Z

assign2/index.html

+        >
+      </fieldset>
+      <h2>종류</h2>
+      <select class="modal_select" id="income_select" name="모할래"></select>


아니 모할래 라니 너무 귀여운거 아님?!!! 😤

아 사랑해ㅠ 😍

binllionaire · 2023-10-30T16:31:51Z

assign2/index.js

+    if (list.classList.contains(deletedId)) {
+      const h3 = list.querySelector("h3");
+      const deletedMoney = parseInt(h3.innerText.replace(/,/g, ""), 10);
+
+      if (h3.classList.contains("plus")) {
+        plusMoney.innerText = (
+          parseInt(plusMoney.innerText.replace(/,/g, ""), 10) - deletedMoney
+        ).toLocaleString();
+
+        totalMoney.innerText = (
+          parseInt(totalMoney.innerText.replace(/,/g, ""), 10) - deletedMoney
+        ).toLocaleString();
+      } else if (h3.classList.contains("minus")) {
+        minusMoney.innerText = (
+          parseInt(minusMoney.innerText.replace(/,/g, ""), 10) + deletedMoney
+        ).toLocaleString();
+
+        totalMoney.innerText = (
+          parseInt(totalMoney.innerText.replace(/,/g, ""), 10) - deletedMoney
+        ).toLocaleString();
+      }
+      list.remove();
+      deleteModal.classList.replace("delete_modal", HIDDEN_CLASS);
+    }


같은 부분이 여러 번 반복되고 있어서 함수화 시키면 코드 중복을 줄일 수도 있고 가독성이 좋아질 것 같아!!!

Suggested change

if (list.classList.contains(deletedId)) {

const h3 = list.querySelector("h3");

const deletedMoney = parseInt(h3.innerText.replace(/,/g, ""), 10);

if (h3.classList.contains("plus")) {

plusMoney.innerText = (

parseInt(plusMoney.innerText.replace(/,/g, ""), 10) - deletedMoney

).toLocaleString();

totalMoney.innerText = (

parseInt(totalMoney.innerText.replace(/,/g, ""), 10) - deletedMoney

).toLocaleString();

} else if (h3.classList.contains("minus")) {

minusMoney.innerText = (

parseInt(minusMoney.innerText.replace(/,/g, ""), 10) + deletedMoney

).toLocaleString();

totalMoney.innerText = (

parseInt(totalMoney.innerText.replace(/,/g, ""), 10) - deletedMoney

).toLocaleString();

}

list.remove();

deleteModal.classList.replace("delete_modal", HIDDEN_CLASS);

}

function updateMoney(element, moneyChange) {

const moneyValue = parseInt(element.innerText.replace(/,/g, ""), 10);

const newMoneyValue = moneyValue + moneyChange;

element.innerText = newMoneyValue.toLocaleString();

}

if (h3.classList.contains("plus")) {

updateMoney(plusMoney, -deletedMoney);

updateMoney(totalMoney, -deletedMoney);

} else if (h3.classList.contains("minus")) {

updateMoney(minusMoney, deletedMoney);

updateMoney(totalMoney, -deletedMoney);

}

이런식으로 ㅎㅎ

binllionaire · 2023-10-30T16:45:41Z

assign2/index.js

+    const h5 = document.createElement("h5");
+    h5.innerText = title;
+
+    const h4 = document.createElement("h4");
+    h4.innerText = summary;
+
+    const h3 = document.createElement("h3");
+    h3.innerText = getto


혹시 여기서 heading 태그를 사용한 이유가 있을까요??
생각하기 나름이겠지만 데이터 항목의 세부 정보라 <p>태그가 더 어울리지 않을까 생각이 드는데!!

마쟈!! 그러네!! 나는 약간 하나하나 subHeading느낌으로 다가왔어가지구,,!

binllionaire · 2023-10-30T16:51:50Z

assign2/index.js

+  });
+
+  //심화 2.a
+  if (howMuchSummaried.length == 0 || summarySummarized.length == 0) {


Suggested change

if (howMuchSummaried.length == 0 || summarySummarized.length == 0) {

if (!howMuchSummaried || !summarySummarized) {

이렇게 더 간단하게 표현할 수도 있겠다!

binllionaire · 2023-10-30T17:00:05Z

assign1/DATA.js

+const DATA = [
+  { title: "꽃속의 웰코", summary: "이뿌지!!" },
+  { title: "멀보니웰코", summary: "날씨 조타!" },
+  { title: "눈웃음웰코", summary: "모야! 햇빛 죠아!" },


오오 이거 객체로 빼쥰거 좋은 것 같아 넘굿굿!!!!!

binllionaire · 2023-10-30T17:04:31Z

assign2/index.js

+  } else {
+    makeList(newList, list);
+    alert("저장되었습니다.");
+  }


사실 이건 코드보단 UX적인 측면이긴 하지만 저장한 후에는 입력필드를 초기화해주는게 어떨까?!! ㅎㅎ

어머,,,당신은,,,

doyn511

심화과제까지 완전 고생 많았땅!!!!! 주석 잘 달아줘서 너무 편하게 볼 수 있었어!! 코드 보면서 많이 배워가 고마워🫶

doyn511 · 2023-11-02T14:55:47Z

assign1/index.js

+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);


나두 이게 어떤 의미인지 궁금해!!

요거 선택자 중복이라 함수로 따로 빼준거!

중복된 선택자들에게 다 적용하는 함수를 만들어주려면 함수명으로 $를 쓴다는 말인가?!

doyn511 · 2023-11-03T00:48:26Z

assign1/index.js

+  h2.classList.add("title");
+  const p = document.createElement("p");
+  p.classList.add("summary");
+  const { title, summary } = DATA[index];


이런게 바로 구조분해 할당이군요.. 지인짜 깔끔하다 ...

doyn511 · 2023-11-03T00:52:43Z

assign1/index.js

+
+    if (pHeight < summaryHeight) {
+      div.appendChild(moreBtn);
+      !moreBtnClicked ? (moreBtn.style.display = "flex") : null;


삼항연산자 쓰니까 되게 깔끔하네용.. 저기서 null은 아무런 동작을 하지 않는거야?
나는 if else가 아니라 if만 써야하는 상황에서 else에는 어떤 동작을 넣어줘야 하는건지를 몰라서 삼항연산자를 못 쓰고 있었거든...!

우웅!! 사실 if만 사용하는 부분에선 이항 연산자 사용해도 되긴 해용! 아니면 저렇게 null로?

오.. 조금 더 공부해봐야겠다! 또 하나 배워가용🫶

doyn511 · 2023-11-03T01:06:27Z

assign2/category.html

+    <header>
+      <h1>카테고리 관리</h1>
+    </header>
+    <main class="category_page">


헉 main 태그도 있구나...! 알아가용..히히

main 태그는 해당 문서의 요소의 주 콘텐츠(main content)를 정의할 때 사용!!!!

main태그

doyn511 · 2023-11-03T01:10:38Z

assign2/category.js

+const getCategory = JSON.parse(getItem);
+
+getCategory.forEach((ele) => {
+  const { category, isPlus } = ele;


여기도 구조분해 할당 완전 최고당,,

doyn511 · 2023-11-03T02:47:25Z

assign2/index.js

+HISTORY_LIST.forEach((element) => {
+  const { money, getto } = element;
+  getto ? (IN_MONEY += money) : (OUT_MONEY += money);
+  plusMoney.innerText = IN_MONEY.toLocaleString();
+  minusMoney.innerText = OUT_MONEY.toLocaleString();
+});


IN_MONEY랑 OUT_MONEY를 먼저 구한 다음에 이 둘을 이용해 INIT_BALANCE를 구하면 forEach문을 한번만 돌려도 되지 않을까 하는 생각이 들었습니당 ..

doyn511 · 2023-11-03T02:48:48Z

assign2/index.js

+//버튼 불러오기
+const inputPlus = document.getElementById("input_plus");
+const inputMinus = document.getElementById("input_minus");
+const HIDDEN_CLASS = "hidden";


따로 상수화 시켜준거 좋아용! 내꺼에도 적용해볼게!!!!

doyn511 · 2023-11-03T02:55:56Z

assign2/index.js

+inputPlus.addEventListener("change", () => filterList());
+inputMinus.addEventListener("change", () => filterList());


Suggested change

inputPlus.addEventListener("change", () => filterList());

inputMinus.addEventListener("change", () => filterList());

inputPlus.addEventListener("change", filterList);

inputMinus.addEventListener("change", filterList);

혹시 화살표 함수를 써준 다른 이유가 있을까?! 매개변수로 넘겨줘야 하는게 없는데도 저렇게 쓴 이유가 궁금해!

정신없음이슈,,,ㅎ

doyn511 · 2023-11-03T02:57:19Z

assign2/index.js

+incomeCheck.addEventListener("change", () => selectCheck());
+expenditureCheck.addEventListener("change", () => selectCheck());


요기도 비슷하게 화살표 함수로 써준 이유가 궁금하당..!

이렇게 습관이 무섭습니다...^^;;

doyn511 · 2023-11-03T02:58:16Z

assign2/index.js

+      title: selectedOption,
+      summary: summarySummarized,
+      money: howMuchSummaried,
+      getto: incomeCheck.checked ? true : false,


객체 안에서도 조건문을 쓸 수 있는거 처음 알았어 고마워🫶

Jun-min2

진짜 처음하는 나라서 부족한 부분이 너무 많은 것 같다..

Jun-min2 · 2023-11-04T16:20:07Z

assign1/index.js

+    moreBtn.addEventListener("click", () => {
+      p.classList.replace("summary", "summaryAll");
+      moreBtnClicked = true;
+      moreBtn.style.display = "none";
+    });
+  });


심화과제는 못했지만
클릭하는 이벤트가 발생했을 때 summary가 summaryAll로 바뀌고
display가 none으로 더보기 창이 없어지는 건 이해가 되는데
moreBtnClicked = true; 라는 불린값은 어째서 들어가는 것인가요?

아 요고 더보기 버튼이 눌렸었는지 안 눌렸는지 확인하려고 넣어둔 친구입니다!
그러니까 더보기 버튼을 addEventListener 로 click 이벤트를 줬을 때 더보기 버튼이 눌렸다! 라는 걸 표현해서 이후에 더보기 버튼이 처음처럼 사진에 마우스를 올리면 나타날 수 있도록 하려고 주었어요!

Jun-min2 · 2023-11-04T16:20:39Z

assign1/DATA.js

+
+export default DATA;


나나 모듈에 대해서 잘 몰랐는데
export default DATA; 이렇게 하면 import로 해서 다른 JS와 연결한 후에
DATA안에 상수 값을 따로 넣어주니까 잘 구분되서 가독성을 올리려는거지?

네 맞습니다!

Jun-min2 · 2023-11-04T16:21:45Z

assign1/index.js

+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);


중복된 선택자들에게 다 적용하는 함수를 만들어주려면 함수명으로 $를 쓴다는 말인가?!

Jun-min2 · 2023-11-04T16:22:37Z

assign1/index.js

+
+toLeft.addEventListener("click", () => {
+  const articleWidth = article.scrollLeft;


화살표 함수 되게 잘쓴다..

이건 무슨 칭찬이야 너무 고맙군

Jun-min2 · 2023-11-04T16:25:51Z

assign1/style.css

+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;


이렇게 세로 줄 단위로 표시할 수 있는 방법이 있구나
좋은 속성 알아갑니당!

Jun-min2 · 2023-11-04T16:28:01Z

assign2/DATA.js

+//1.a
+export const HISTORY_LIST = [
+  {


처음에 봤던 export default DATA는 마지막에 export가 있었는데
처음에 export 하고 넣어주는 것의 차이가 있을까요?

아뇨 없슈!

Jun-min2 · 2023-11-04T16:29:58Z

assign2/category.html

+          height="100"
+          viewBox="0 0 48 48">
+          <path
+            d="M 23.951172 4 A 1.50015 1.50015 0 0 0 23.072266 4.3222656 L 8.859375 15.519531 C 7.0554772 16.941163 6 19.113506 6 21.410156 L 6 40.5 C 6 41.863594 7.1364058 43 8.5 43 L 18.5 43 C 19.863594 43 21 41.863594 21 40.5 L 21 30.5 C 21 30.204955 21.204955 30 21.5 30 L 26.5 30 C 26.795045 30 27 30.204955 27 30.5 L 27 40.5 C 27 41.863594 28.136406 43 29.5 43 L 39.5 43 C 40.863594 43 42 41.863594 42 40.5 L 42 21.410156 C 42 19.113506 40.944523 16.941163 39.140625 15.519531 L 24.927734 4.3222656 A 1.50015 1.50015 0 0 0 23.951172 4 z M 24 7.4101562 L 37.285156 17.876953 C 38.369258 18.731322 39 20.030807 39 21.410156 L 39 40 L 30 40 L 30 30.5 C 30 28.585045 28.414955 27 26.5 27 L 21.5 27 C 19.585045 27 18 28.585045 18 30.5 L 18 40 L 9 40 L 9 21.410156 C 9 20.030807 9.6307412 18.731322 10.714844 17.876953 L 24 7.4101562 z"></path>


혹시 이런 코드를 처음봐서 어떤 코드인지 물어봐도 괜찮을까?

이거 그냥 svg 파일 넣다보니까!
여기 참고!

Jun-min2 · 2023-11-04T16:33:38Z

assign2/category.html

+          <path
+            d="M 23.951172 4 A 1.50015 1.50015 0 0 0 23.072266 4.3222656 L 8.859375 15.519531 C 7.0554772 16.941163 6 19.113506 6 21.410156 L 6 40.5 C 6 41.863594 7.1364058 43 8.5 43 L 18.5 43 C 19.863594 43 21 41.863594 21 40.5 L 21 30.5 C 21 30.204955 21.204955 30 21.5 30 L 26.5 30 C 26.795045 30 27 30.204955 27 30.5 L 27 40.5 C 27 41.863594 28.136406 43 29.5 43 L 39.5 43 C 40.863594 43 42 41.863594 42 40.5 L 42 21.410156 C 42 19.113506 40.944523 16.941163 39.140625 15.519531 L 24.927734 4.3222656 A 1.50015 1.50015 0 0 0 23.951172 4 z M 24 7.4101562 L 37.285156 17.876953 C 38.369258 18.731322 39 20.030807 39 21.410156 L 39 40 L 30 40 L 30 30.5 C 30 28.585045 28.414955 27 26.5 27 L 21.5 27 C 19.585045 27 18 28.585045 18 30.5 L 18 40 L 9 40 L 9 21.410156 C 9 20.030807 9.6307412 18.731322 10.714844 17.876953 L 24 7.4101562 z"></path>


이게 어떤 코드인지 처음봐가지구 잘 모르겠어서 물어봐도 괜찮을까요?

위에 설명 추가했어요!

Jun-min2 · 2023-11-04T16:35:00Z

assign2/DATA.js

+    getto: true,
+  },
+  {
+    title: "의류",
+    summary: "지그재그",
+    money: 20000,
+    getto: false,


getto의 값을 boolean값으로 줘서 차별화를 둔다는 생각 되게 기발한 것 같아

Jun-min2 · 2023-11-04T16:47:34Z

week2thinking.md

+
+1. 올림픽공원역 3번 출구에서~~...
+
+-> `선언형 프로그래밍`
+어떤 방법으로 나타낼지 보다는 무엇과 같은지를 설명하는 경우
+
+```
+function addOne(arr){
+    return arr.map((i) => i+1);
+}
+```
+
+약간,,, 첨에 보면 친절하진 않은데 짠! 이런 느낌 무엇을 하냐! 이런 느낌이다..
+
+필요한 무엇을 알려줌
+그냥,,, 주소를 알려준다 느낌이다


잘 와닿지 않는 느낌이였는데
주소에 대한 예시로 설명해주니까 한번에 이해됌!

hae2ni added 30 commits October 17, 2023 22:51

🎨 실습

dce3223

Merge branch 'week1' of https://github.com/DO-SOPT-WEB/HyeinKwon into…

df5d69e

… week2

🍱 data.js 추가

c1c28cc

🎨 index.js 추가

5f4973f

✨ 1.a 이미지 호버시 어둡게 처리되며 제목 사진 나타남 구현

fe862b1

💄 title, summary 꾸미기

7a89d46

✨ 스크롤에 따라 투명도 다르게

c90b73f

⚡️ 코드 깔끔하게 정리

84b6da4

🍱 상수 데이터 추가

5d223ce

🎨 index.js 연결

22646ca

📝 주석 수정

971f235

🔥 불필요 코드 삭제

778df50

🔥 불필요 코드 삭제

b91b555

✨ 과제 2 1, 2 번 마무리

e3b8eab

🎨 chckbox checked 표시 지우기

df26c1e

🎨 3,4번 기본

19e6012

💄 hidden 요소 추가

d7ce397

🎨 modal 일단 html에 박아놓기

73dacb3

💄 modal 꾸미기

7e8630c

🎨 modal radio 버튼으로 변경 id 추가

8f3e1b1

✨ 5번 a,b,c,e 구현

e66a1c8

💄 css 추가

03c93b8

✨ 모달 금액 TOTAL 반영

448be92

✨ 5.d 완료

8239ecd

🎨 코드 줄 바꿈

71f8e55

🍱 Data 추가

32dbb97

💄 제목 설명 가운데 정렬

bcdee23

🎨 1번과제 심화 1번

86673a6

✨ preview 버튼 추가

e6342ec

🥅 심화 1번 자잘한 에러 제거

65a1171

hae2ni added 15 commits October 26, 2023 00:41

💄 심화 3.b 모달 아래에서 위로 올라오기

0ba969e

✨ 심화 5번

3f7860f

💄 모달 이쁘게 꾸미기

2016021

💄 삭제 모달 추가

fb51280

💄 리스트 삭제 모달

5b78f1d

✨ 심화 1번 완료

26b2f87

💄 카테고리 관리로 이동하는 버튼 추가

6a65a53

💄 카테고리 페이지 꾸미기

f5ba2b8

💄 카테고리 페이지 꾸미기

75718ac

✨ 심화 4번 2,3,4,6

4a93378

✨ 심화 4번 완료

3eca375

♻️ 시멘틱 태그 추가

15ebba8

Merge branch 'main' of https://github.com/DO-SOPT-WEB/HyeinKwon into …

784dd85

…week2

📝 생각과제

86d78e9

🚑 오류 고침

63b2840

hae2ni requested review from binllionaire, seobbang, doyn511 and Jun-min2 October 26, 2023 13:45

hae2ni self-assigned this Oct 26, 2023

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

🚑 오류 수정

1013308

binllionaire reviewed Oct 30, 2023

View reviewed changes

♻️ 중복되는 코드 지우고 필여한 부분 넣기

06896e1

doyn511 reviewed Nov 3, 2023

View reviewed changes

♻️ 코드리뷰 반영

cd65a5a

Jun-min2 reviewed Nov 4, 2023

View reviewed changes

		const $ = (selector) => document.querySelector(selector);
		const $$ = (selector) => document.querySelectorAll(selector);

		// 1.a , b
		const firstImages = document.querySelectorAll(".first_section_pic");

	if (howMuchSummaried.length == 0 \|\| summarySummarized.length == 0) {
	if (!howMuchSummaried \|\| !summarySummarized) {

		inputPlus.addEventListener("change", () => filterList());
		inputMinus.addEventListener("change", () => filterList());

		incomeCheck.addEventListener("change", () => selectCheck());
		expenditureCheck.addEventListener("change", () => selectCheck());


		toLeft.addEventListener("click", () => {
		const articleWidth = article.scrollLeft;

		<path
		d="M 23.951172 4 A 1.50015 1.50015 0 0 0 23.072266 4.3222656 L 8.859375 15.519531 C 7.0554772 16.941163 6 19.113506 6 21.410156 L 6 40.5 C 6 41.863594 7.1364058 43 8.5 43 L 18.5 43 C 19.863594 43 21 41.863594 21 40.5 L 21 30.5 C 21 30.204955 21.204955 30 21.5 30 L 26.5 30 C 26.795045 30 27 30.204955 27 30.5 L 27 40.5 C 27 41.863594 28.136406 43 29.5 43 L 39.5 43 C 40.863594 43 42 41.863594 42 40.5 L 42 21.410156 C 42 19.113506 40.944523 16.941163 39.140625 15.519531 L 24.927734 4.3222656 A 1.50015 1.50015 0 0 0 23.951172 4 z M 24 7.4101562 L 37.285156 17.876953 C 38.369258 18.731322 39 20.030807 39 21.410156 L 39 40 L 30 40 L 30 30.5 C 30 28.585045 28.414955 27 26.5 27 L 21.5 27 C 19.585045 27 18 28.585045 18 30.5 L 18 40 L 9 40 L 9 21.410156 C 9 20.030807 9.6307412 18.731322 10.714844 17.876953 L 24 7.4101562 z"></path>

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

Are you sure you want to change the base?

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

Conversation

hae2ni commented Oct 26, 2023 • edited Loading

✨ 구현 기능 명세

기본 과제

심화 과제

생각 과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

binllionaire 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

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

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 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

hae2ni commented Oct 26, 2023 •

edited

Loading