👩🏻‍💻 요즘 스트레스가 너무 많아서 잠시 고민거리를 접어두기 위해 찍어본 별찍기⭐️ 처음 배울 땐 너무 어려웠는데, 규칙을 알고 나니까 나름 수월해진 별찍기..ㅎㅎ

✅ 1. 왼쪽정렬 별

for (let i = 0; i < 5; i++) {   // i는 줄 개수를 의미
  let star = "";                 // 별을 담을 빈 문자열 준비
  for (let j = 0; j < i + 1; j++) {  //  j는 별의 개수
    star += "*";                //  별 추가
  }
  console.log(star);            // 완성된 별 출력
}

*
**
***
****
*****

✅ 2. 왼쪽정렬(역) 별

for (let i = 0; i < 5; i++) {
  let str = "";

  for (let j = 0; j < 5 - i; j++) {
    str += "*";
  }

  console.log(str);
}

*****
****
***
**
*

✅ 3. 오른쪽정렬 별

for (let i = 0; i < 5; i++) {
  let str = "";

  for (let j = 0; j < 5 - i - 1; j++) {
    str += " ";
  }
  for (let k = 0; k < i + 1; k++) {
    str += "*";
  }

  console.log(str);
}

    *
   **
  ***
 ****
*****

✅ 4. 오른쪽정렬(역)별

for (let i = 0; i < 5; i++) {
  let str = "";

  for (let j = 0; j < i; j++) {
    str += " ";
  }
  for (let k = 0; k < 5 - i; k++) {
    str += "*";
  }

  console.log(str);
}

*****
 ****
  ***
   **
    *

✅ 5. 정삼각형 별

for (let i = 0; i < 5; i++) {
  let str = "";

  for (let j = 0; j < 5 - i - 1; j++) {
    str += " ";
  }
  for (let k = 0; k < i * 2 + 1; k++) {
    str += "*";
  }

  console.log(str);
}

    *
   ***
  *****
 *******
*********

✅ 6. 역삼각형 별

for (let i = 0; i < 5; i++) {
  let str = "";

  for (let j = 0; j < i; j++) {
    str += " ";
  }
  for (let k = 0; k < (5 - i) * 2 - 1; k++) {
    str += "*";
  }

  console.log(str);
}

*********
 *******
  *****
   ***
    *

✅ 7. 다이아몬드 패턴 (정삼각형 + 역삼각형)

let a = 5; // 높이

// 정삼각형
for (let i = 0; i < a; i++) {
  let str = "";

  for (let j = 0; j < a - i - 1; j++) {
    str += " ";
  }
  for (let k = 0; k < i * 2 + 1; k++) {
    str += "*";
  }

  console.log(str);
}

// 역삼각형
for (let i = a - 2; i >= 0; i--) {
  let str = "";

  for (let j = 0; j < a - i - 1; j++) {
    str += " ";
  }
  for (let k = 0; k < i * 2 + 1; k++) {
    str += "*";
  }

  console.log(str);
}

    *
   ***
  *****
 *******
*********
 *******
  *****
   ***
    *

✅ 8.모래시계 패턴 (역삼각형 + 정삼각형)

let n = 5;

// 역삼각형
for (let i = 0; i < n; i++) {
  let str = "";

  for (let j = 0; j < i; j++) {
    str += " ";
  }
  for (let k = 0; k < (n - i) * 2 - 1; k++) {
    str += "*";
  }

  console.log(str);
}

// 정삼각형
for (let i = 1; i < n; i++) {
  let str = "";

  for (let j = 0; j < n - i - 1; j++) {
    str += " ";
  }
  for (let k = 0; k < i * 2 + 1; k++) {
    str += "*";
  }

  console.log(str);
}

*********
 *******
  *****
   ***
    *
   ***
  *****
 *******
*********

👩🏻‍💻 리엑트 공부하면서 vite로 프로젝트 생성법을 알게되었다. 기존에 많이 사용되던 create-react-app은 더 이상 권장되지 않으며, 대신 Vite를 이용해 더 빠르고 효율적으로 프로젝트를 생성할 수 있다.🚀

1️⃣ 프로젝트 폴더 생성 & Vite 설치

** 📂 프로젝트를 저장할 폴더를 만든 후, 터미널을 열고 아래 명령어를 입력**

npm create vite@latest

2️⃣ 프로젝트 이름 입력 & 프레임워크 선택

✅ 프로젝트 이름을 입력한 후 React를 선택

3️⃣ 언어선택

✅ 원하는 옵션을 선택하여 언어 정하기

4️⃣ 프로젝트 생성 완료 & 실행 준비

✅ 선택을 마치면 아래 화면처럼 설치가 진행

✅ 이제 프로젝트 폴더로 이동하고 npm install을 실행

cd 프로젝트이름
npm install

5️⃣ 프로젝트 폴더 확인

📁 설치가 완료되면 폴더 안에 React 프로젝트가 생성된 걸 확인할 수 있다

6️⃣ 프로젝트 실행

✅ 터미널을 열고 아래 명령어를 입력해 프로젝트를 실행

npm run dev

7️⃣ 로컬 서버에서 확인 🌐

✅ 실행 후 터미널에 표시된 Local 주소로 접속하면 React 프로젝트를 볼 수 있다

👩🏻‍💻 테스트 삼아 진행한 미니 프로젝트, 진행하면서 어려웠던 부분을 정리해봤다!

🔎 검색바 & 검색한 내용에 배경 컬러 입히기

• 검색바 구현인데 검색한 상품만 나오게 구현하였다
• 단! 기존 방식과 다르게, 검색한 내용에 배경색을 추가해보았다

📌 HTML

<!-- 상품 검색 -->
<div>
  <input type="text" id="search" placeholder="검색어 입력" />
  <button id="searchBtn">검색</button>
</div>

📌 Javascript

• 검색기능까지는 손쉽게 구현하였지만 배경컬러 입히는 부분에서 살짝 시간을 잡아먹었다.
• 찾아보니 정규표현식을 이용한 검색어 하이라이트 적용방법이 있어서 이 방법을 적용하였다

// 검색 기능
function searchProducts() {
  const searchText = document.querySelector("#search").value.toLowerCase().trim();
  const filteredProducts = allProducts.filter((item) => item.title.toLowerCase().includes(searchText));
  productList(filteredProducts); // 검색된 상품 리스트 보여주기

  // 검색된 텍스트에 배경 컬러 입히기
  if (searchText) {
    const productTitles = document.querySelectorAll(".card-title");
    productTitles.forEach((title) => {
      const originalText = title.textContent;
      const regex = new RegExp(`(${searchText})`, "gi");
      title.innerHTML = originalText.replace(regex, `<span style="background-color: yellow;">$1</span>`);
    });
  }
}

💡 정규표현식을 이용한 검색어 하이라이트 적용_코드설명

1️⃣ new RegExp(\(${searchText})`, "gi")

- 사용자가 입력한 searchText 를 포함하는 동적 정규표현식을 생성
- (${searchText}) : 검색어 부분을 그룹화 (괄호로 감싼 부분이 $1 로 참조됨)
- "g" : 전체 텍스트에서 모든 검색어 찾기 (전역 검색)
- "i" : 대소문자 구분 없이 찾기

2️⃣ originalText.replace(regex, \<span style="background-color: yellow;">$1</span>`)

- originalText(상품 제목)에서 정규표현식(regex)에 매칭되는 부분을 <span> 태그로 감싸 배경 색을 입힘
$1 : 정규표현식에서 첫 번째 그룹(검색어 부분) 을 의미

🔍 결과 : 검색한 상품 제목에 하이라이트 배경색이 적용

📦 상품을 장바구니에 담기 (드래그 앤 드롭 + 버튼 클릭)

📌 HTML

<!-- 상품 리스트 -->
<div id="product-list" class="product-list product"></div>

<!-- 장바구니 -->
<div class="cart-container">
  <div class="carttext">장바구니(드래그 가능)</div>
  <div id="cart1" class="cart" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p>여기로 드래그 해주세요</p>
  </div>
  <div class="total">
    <p>최종가격</p>
    <div class="totalprice">합계 : 0</div>
    <button class="totalBtn">구매하기</button>
  </div>
</div>

📌 Javascript

• 제일 오래 걸린 부분이었다.. 😅 드래그하여 상품을 끌어오기는 처음 접해보았다... 배울 게 아직 많구나? 🤔

/**
 * ✅ 드래그 앤 드롭 으로 장바구니에 상품 추가
 * ✅ 상품 담기 버튼 클릭 시 장바구니에 상품 추가
 * ✅ 장바구니에 추가된 상품 수량 보이기
 */

// 장바구니 컨테이터 선택
const cartContainer = document.querySelector("#cart1");
let cartItems = {}; // 장바구니에 담긴 상품들을 저장할 객체

// 📌 상품 드래그 앤 드롭 관련 함수
function allowDrop(event) {
  event.preventDefault(); // 드롭 이벤트 허용
}

function drag(event) {
  // 드래그한 상품의 이름을 데이터로 저장
  event.dataTransfer.setData(
    "text",
    event.target.querySelector(".card-title").textContent
  );
}

function drop(event) {
  event.preventDefault(); // 드롭 이벤트 허용
  const productName = event.dataTransfer.getData("text"); // 드래그한 상품 이름 가져오기
  addToCart(productName); // 장바구니에 상품 추가
}

// 📌 담기 버튼 클릭 시 상품 추가
const productContainer = document.querySelector("#product-list"); // 상품 목록 컨테이너 선택
productContainer.addEventListener("click", function (event) {
  if (event.target.classList.contains("btn-primary")) {
    const productName = event.target
      .closest(".card")
      .querySelector(".card-title").textContent;
    addToCart(productName);
  }
});

// 📌 장바구니에 상품 추가하는 함수
function addToCart(productName) {
  // 상품 이름을 받아와서 장바구니에 추가
  const product = allProducts.find((item) => item.title === productName); // 상품 목록에서 상품 찾기
  if (!product) return; // 상품이 없으면 함수 종료

  // 이미 장바구니에 담긴 상품이면 수량만 증가
  if (cartItems[productName]) {
    cartItems[productName].quantity += 1;
  } else {
    // 장바구니에 없는 상품이면 수량을 1로 해서 추가
    cartItems[productName] = { ...product, quantity: 1 };
  }
  updateCartUI(); // 장바구니 UI 업데이트
}

// 📌 장바구니 UI 업데이트 + 합계 가격 업데이트
function updateCartUI() {
  cartContainer.innerHTML = ""; // 기존 장바구니 내용 비우기
  let totalPrice = 0; // 총 가격을 저장할 변수

  Object.values(cartItems).forEach((item) => {
    const cartCard = document.createElement("div");
    cartCard.classList.add("cart-card");
    cartCard.innerHTML = `
    <div class="card" style="width: 18rem; padding: 20px; margin: 10px;">
      <img src="../img/${item.photo}" class="card-img-top">
      <div class="card-body">
        <h5 class="card-title">${item.title}</h5>
        <p class="card-text">${item.brand}</p>
        <p class="card-text">${item.price}원</p>
        <input type="number" class="cart-quantity" value="${item.quantity}" min="1" data-title="${item.title}">
      </div>
    </div>ㅎ
  `;
    cartContainer.appendChild(cartCard);

    // 📌 상품 가격 * 수량을 누적하여 총 가격 계산
    totalPrice += item.price * item.quantity;
  });
  // 📌 총 가격 업데이트
  document.querySelector(".totalprice").innerText = `합계 : ${totalPrice}원`;
}

🔍 결과 : 상품을 드래그하거나 담기 버튼을 클릭하면 장바구니에 추가되고, 가격이 자동으로 업데이트

• 상품 수량 부분에 커서를 놓고 delete key 를 누르면 상품이 삭제됨! ❌

🧾 영수증 모달 만들기

• canvas 태그를 처음 알았다...ㅎㅎ 부끄럽다아..ㅎㅎㅎ
• canvas 태그를 사용하여 간단하게 영수증 을 만들어보았다ㅎㅎ

📌 HTML

<!-- 구매하기 모달 -->
<div class="modal1">
  <div class="white-bg">
    <form>
      <div class="my-3">성함 <input type="text" class="form-control" id="name" placeholder="성함을 입력하세요" /></div>
      <div class="my-3">연락처 <input type="tel" class="form-control" id="phone" placeholder="연락처를 입력하세요" /></div>
      <button type="submit" class="btn btn-primary">입력완료</button>
      <button type="button" class="btn btn-danger" id="close">닫기</button>
    </form>
  </div>
</div>

<!-- 영수증 모달 -->
<div class="modal2">
  <div class="white-bg">
    <h4>영수증</h4>
    <canvas id="canvas" width="350" height="350"></canvas>
    <div><button id="close">닫기</button></div>
  </div>
</div>

📌 Javascript

// 영수증 그리기
function drawReceipt(name, phone) {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 초기화
  ctx.fillStyle = "#f0f0f0";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "#000";
  ctx.font = "20px Arial";
  ctx.textAlign = "left";
  const currentDate = new Date().toLocaleString();
  ctx.fillText(`날짜: ${currentDate}`, 20, 30);
  ctx.fillText(`성함: ${name}`, 20, 60);
  ctx.fillText(`연락처: ${phone}`, 20, 90);
}

🔍 결과 : 사용자가 입력한 성함과 연락처가 포함된 영수증을 캔버스에 그려서 출력할 수 있다

👩🏻‍💻 지금까지는 혼자 또는 소규모 프로젝트를 진행해서 기본적인 commit, push만 사용해도 충분했다. 하지만 회사에서 협업을 하게 되면 여러 사람이 동시에 작업하게 되고, 무분별한 커밋과 푸시는 큰 문제가 될 수 있다. 그래서 커밋 개념을 다시 한번 훑어보고 정리해 보았다!

🌿 브랜치 생성 및 전환

브랜치를 사용하면 메인 코드에 영향을 주지 않고 독립적인 작업이 가능하다

🔹 브랜치 생성: git branch 브랜치명 🔹 브랜치 전환: git switch 브랜치명 🔹 현재 브랜치 상태 확인: git status 🔹 메인 브랜치로 돌아가기: git switch main

🔀 브랜치 병합 (Merge)

기능 개발이 끝나면 브랜치를 메인 브랜치에 병합해야한다

1️⃣ 메인 브랜치로 이동: git switch main 2️⃣ 브랜치 병합: git merge 브랜치명

⚠️ 충돌 발생 시

✔️ 원하는 코드만 남기고 수정 ✔️ git add . 후 git commit

🗑 작업이 끝난 브랜치 삭제

✔️ 병합된 브랜치 삭제: git branch -d 브랜치명 ✔️** 병합되지 않은 브랜치 강제 삭제:** git branch -D 브랜치명

🔄 Rebase (리베이스)

Rebase는 브랜치의 시작점을 메인 브랜치의 최신 커밋으로 옮겨서 깔끔한 히스토리를 유지하는 방법

1️⃣ 작업 브랜치로 이동: git switch 브랜치명 2️⃣ 최신 커밋으로 브랜치 이동: git rebase main 3️⃣ 메인 브랜치로 이동: git switch main 4️⃣ 병합 수행: git merge 브랜치명

*⚠️ Rebase 중 충돌 발생 시 하나씩 해결해야 하므로 브랜치 차이가 많을 경우 주의! *

📌 Squash and Merge

여러 개의 커밋을 하나로 합쳐서 메인 브랜치에 병합할 때 사용

1️⃣ 메인 브랜치로 이동: git switch main 2️⃣ 커밋을 하나로 합침: git merge --squash 브랜치명 3️⃣ 하나의 커밋으로 저장: git commit -m "브랜치 합침"

🔙 커밋 되돌리기

✔️ 특정 파일 복구: git revert 파일명 ✔️ 특정 커밋 취소: git reset 커밋아이디 ✔️ 최근 커밋 취소: git revert HEAD ✔️ 개별 파일 변경 취소: git restore 파일명

☁️ 원격 저장소에 브랜치 올리기

팀원과 공유하기 위해 로컬 브랜치를 원격 저장소로 올릴 수 있다

1️⃣ 브랜치 생성 및 작업

git branch 브랜치명  
git switch 브랜치명  
git add .  
git commit -m "커밋 메시지"

2️⃣ 원격 저장소에 브랜치 업로드

git push origin 브랜치명

📩 Pull Request (PR)

팀원들과 코드 리뷰를 진행한 후 병합하기 위해 PR을 생성

1️⃣ **GitHub에서 Pull Request 생성

• 팀원들이 코드 리뷰 후 병합 가능

2️⃣ Merge 방법 선택

** 📝 Create a merge commit: 모든 커밋 기록 유지**

• 새로운 merge commit을 하나 생성해주는 3-way merge를 실행
• main 브랜치 조회시 합쳐진 브랜치의 commit 내역도 전부 나옴
• 단점 : commit 내역이 많으면 복잡하고 더러워 보일수 있다

🔄 Rebase and merge: 브랜치를 최신 상태로 맞춘 후 병합

• squash and merge와 비슷한데 합쳐질 브랜치의 commit 내역이 전부 보존

📦 Squash and merge: 여러 커밋을 하나로 합쳐 병합 (히스토리 단순화)

• 합쳐질 브랜치의 commit 내역을 하나로 합쳐서 main 브랜치에 신규 commit을 생성
• 깔끔함

💡 추가로 알아두면 좋은것!!!!

🔄 Git Stash (임시 저장)

작업 도중에 변경한 파일을 임시로 저장하고, 다른 작업을 해야 할 때 유용 즉!! 임시보관장소 라고 생각하면 쉽다

🔹 변경 사항 임시 저장:

• 변경된 모든 파일을 임시로 저장

  git stash

🔹 변경 사항 임시 저장 시 메모 남기고싶으면? :

git stash save '어쩌구저쩌구~'

🔹 저장된 변경 사항 확인: git stash 는 여러번 할수있다

• 현재 stash 되어있는 코드 목록을 전부 출력해주는명령어

  git stash list

🔹 보관했던 코드 다시 불러오기

• git stash 했던 코드가 여러개 있으면 가장 최근에 보관했던 코드부터 먼저 불러온다

  git stash pop

• 🔹 stash 삭제*
• 특정스태시 삭제
• 삭제할id 는 git stash list하면 0,1,2 식으로 숫자가 보임!!

  git stash drop 삭제할id

• 전체 스태시 삭제

  git stash clear

  👩🏻‍💻 git stash는 주석처리나 브랜치 만들어서 따로 보관하는게 더 효율적이긴하다..ㅎㅎ^^그래도 알아두면 좋으니까~

👩🏻‍💻 프로젝트 하면서 자꾸 의도한대로 동작이 되지않길래 찾아보니 이벤트 버블링현상.. 간단한걸 까먹고 원인이 뭐지?? 하면서 다른곳에서 찾고있었다....ㅎ 어이없는 실수!!!ㅠㅠㅠ

🎈 이벤트 버블링

이벤트는 자식에서 발생해서 부모를 거쳐 조상으로 전파

.child 클릭 → "자식 클릭!" → "부모 클릭!" 출력

🚨이벤트 버블링 주의!!!

• 버블링으로 인해 부모나 조상에게까지 이벤트가 전달되기 때문에, 의도한 동작 외에도 다른 동작이 일어나면서 에러가 발생할 수 있다. 이런 문제는 이벤트 위임을 사용하여 해결할 수 있다

🚀 이벤트 위임 (Event Delegation)

부모 요소에 이벤트를 등록하고, 그 이벤트가 실제로 클릭된 자식 요소를 e.target으로 확인

• 동적으로 추가된 요소도 이벤트를 처리할 수 있다

✅ EX) 
document.querySelector(".parent").addEventListener("click", function (e) {
  if (e.target.matches(".child")) { // 클릭된 요소가 .child인지 확인
    console.log("자식 버튼 클릭됨!");
  }
});

** 💡 왜 유용한가?** 성능 향상: 부모에 한 번만 이벤트를 등록하면, 여러 자식 요소에 개별적으로 이벤트를 달 필요 없이 효율적으로 처리할 수 있다 동적 요소 처리: 페이지가 동적으로 변경되더라도, 추가된 자식 요소들도 자동으로 이벤트를 처리할수 있다

🎯 this vs e.target vs e.currentTarget

🔥 정리

이벤트 버블링: 자식 → 부모 → 조상으로 전파됨 this / e.currentTarget: 이벤트가 걸린 부모 요소 e.target: 실제 클릭된 요소 이벤트 위임: 부모에 이벤트 걸고 e.target.matches()로 자식 확인

👩🏻‍💻 간단한 탭 기능을 하드코드 방식과 반복문을 활용한 방식으로 구현하여 비교해보았다

🏗️ HTML 코드

    <div class="container mt-5">
      <ul class="list">
        <li class="tab-button">Products</li>
        <li class="tab-button orange">Information</li>
        <li class="tab-button">Shipping</li>
      </ul>
      <div class="tab-content">
        <p>상품설명입니다. Product</p>
      </div>
      <div class="tab-content show">
        <p>스펙설명입니다. Information</p>
      </div>
      <div class="tab-content">
        <p>배송정보입니다. Shipping</p>
      </div>
    </div> 

📌 설명 ✅ 3개의 탭화면 코드를 만들어준다 ✅ 각 탭을 클릭하면 해당 내용이 보여진다

✍️ 하드코드 방식 (비효율적인 코드 😵)

// 각각의 탭에 변수정의
const buttons = document.querySelectorAll(".tab-button"); // 모든 탭 버튼을 선택
const productsButton = buttons[0]; // 첫 번째 탭 버튼 (제품)
const informationButton = buttons[1]; // 두 번째 탭 버튼 (정보)
const shippingButton = buttons[2]; // 세 번째 탭 버튼 (배송)
const contents = document.querySelectorAll(".tab-content"); // 모든 탭 내용을 선택
const productsContent = contents[0]; // 첫 번째 탭 내용 (제품)
const informationContent = contents[1]; // 두 번째 탭 내용 (정보)
const shippingContent = contents[2]; // 세 번째 탭 내용 (배송)

// 버튼 1, 2, 3에 이벤트리스너 부착
productsButton.addEventListener("click", productsHandle); // 첫 번째 버튼 클릭 시 productsHandle 함수 실행
informationButton.addEventListener("click", informationHandle); // 두 번째 버튼 클릭 시 informationHandle 함수 실행
shippingButton.addEventListener("click", shippingHandle); // 세 번째 버튼 클릭 시 shippingHandle 함수 실행

// 버튼을 누르면 해당 탭으로 이동되는 각 함수 실행
function productsHandle() {
  // 다른 버튼에서 'orange' 클래스를 제거하고, 첫 번째 버튼에 추가
  informationButton.classList.remove("orange");
  shippingButton.classList.remove("orange");
  productsButton.classList.add("orange");

  // 다른 탭 내용을 숨기고, 첫 번째 탭 내용을 표시
  informationContent.classList.remove("show");
  shippingContent.classList.remove("show");
  productsContent.classList.add("show");
}

function informationHandle() {
  // 다른 버튼에서 'orange' 클래스를 제거하고, 두 번째 버튼에 추가
  productsButton.classList.remove("orange");
  shippingButton.classList.remove("orange");
  informationButton.classList.add("orange");

  // 다른 탭 내용을 숨기고, 두 번째 탭 내용을 표시
  productsContent.classList.remove("show");
  shippingContent.classList.remove("show");
  informationContent.classList.add("show");
}

function shippingHandle() {
  // 다른 버튼에서 'orange' 클래스를 제거하고, 세 번째 버튼에 추가
  productsButton.classList.remove("orange");
  informationButton.classList.remove("orange");
  shippingButton.classList.add("orange");

  // 다른 탭 내용을 숨기고, 세 번째 탭 내용을 표시
  productsContent.classList.remove("show");
  informationContent.classList.remove("show");
  shippingContent.classList.add("show");
}

🏆 반복문을 사용한 코드 (깔끔한 코드 ✨)

// 각각의 탭에 변수정의
const buttons = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".tab-content");

// 모든 버튼에 클릭 이벤트리스너 부착
buttons.forEach((button, index) => {
  button.addEventListener("click", () => handleTab(index));
});

function handleTab(index) {
  // 모든 버튼에서 'orange' 클래스 제거하고 클릭한 버튼에 추가
  buttons.forEach((button) => button.classList.remove("orange"));
  buttons[index].classList.add("orange");

  // 모든 탭 내용을 숨기고 클릭한 탭 내용만 표시
  contents.forEach((content) => content.classList.remove("show"));
  contents[index].classList.add("show");
}

🎨 구현 화면

📌 초기 화면 📌 탭 클릭 시 변경된 화면

👩🏻‍💻 개발자라면 개인 깃허브는 필수! 기본적인 모습도 좋지만, 취향에 맞게 꾸미면 볼 때마다 뿌듯하고 기분이 좋아진다고!!! 그래서 꾸며본 깃허브😛

1️⃣ Repository 포크하기 🔗

먼저 아래의 레포지토리를 포크합니다. 👉 Productive-Box Repository

2️⃣ 포크한 레포지토리에서 schedule.yml 수정하기 ✏️

포크한 레포지토리로 이동한 후 .github/workflows/schedule.yml 파일을 찾아 수정합니다 📌 위치: .github/workflows/schedule.yml

• GitHub ID 값을 내 것으로 변경
• Time Zone 설정 확인 (기본 UTC → 한국 시간 Asia/Seoul 권장)

3️⃣ 새로운 public gist 생성하기 📜

1. GitHub 우측 상단 프로필 옆 + 아이콘 클릭
2. New gist 선택
3. gist의 이름과 내용은 아무거나 입력 (이름 생략 가능)
4. Create Public gist 클릭하여 저장

✅ 생성된 gist의 URL 끝 부분 (username 뒤에 오는 숫자) 을 복사하여 메모장에 저장

4️⃣ Personal Access Token 발급하기 🔑

1. GitHub Settings → Developer settings → Personal access tokens → Tokens(classic) 이동
2. Create new token 클릭 → Create new token (classic) 선택
3. Note: GH_TOKEN 입력
4. ✅ repo, gist 권한 체크 후 생성

⚠️ 생성된 토큰 값은 다시 볼 수 없으므로 메모장에 저장!

5️⃣ GitHub Secrets 설정하기 🔒

포크 해온 나의 레파지스토리 productive-box 설정 진입

1. Repository의 Settings → Secrets and variables → Actions → New repository secret 클릭

2. 아래 값 추가

• Name: GH_TOKEN / Secret: 발급받은 Personal Access Token 값

• Name: GIST_ID / Secret: 생성한 gist의 ID 값

⚠️ 환경 변수 이름이 틀리면 안 됩니다! 반드시 GIST_ID, GH_TOKEN 으로 입력

6️⃣ Actions 활성화하기 ✅

포크한 레파지스토리의 Actions 탭에서 활성화 필요!

1.초록색 버튼 I understand my workflows, go ahead and enable them클릭

2. Update gist에서 Enable workflow를 클릭하여 활성화 시켜주기

7️⃣ schedule.yml 코드 수정하기 🛠

** 🚨 아이디 값이 정확히 들어가야 하고, 시간대 설정 실수 주의!**

포크 해 온 productive-box→ .github → workflows → schedule.yml 코드확인!!

• 아이디값 과 지역존 바꾸기

8️⃣ productive-box의 README.md 수정 ✍️

업데이트가 정상적으로 동작하는지 확인하기 위해 README.md 파일을 수정하고 커밋합니다.

• 공백 추가/삭제, 한 글자 수정 등 아무거나 수정 후 커밋

🔄 이후, 깃 뱃지는 정각마다 자동 업데이트 됩니다.

9️⃣ GitHub Profile에 Pin 고정 📌

1. 내 GitHub 프로필로 이동

2. Customize your pins 클릭

3. 생성한 Gist 선택 후 Save Pins

4. 깃 꾸미기 완숑 🚀

👩🏻‍💻 indexOf() 만 알고있다가 .includes()를 새로 알게되었다... 나만 지금 알게된거냐구...ㅎㅎㅎ 알면 알수록 새로운거 투성이다!!!

1️⃣ 배열에서 .includes()

✔ 배열에 특정 요소가 있는지 확인할 때 사용

const fruits = ["사과", "바나나", "포도"];

console.log(fruits.includes("바나나")); // true
console.log(fruits.includes("복숭아")); // false

✅ 대소문자를 구분하지 않는다 ✅ true 또는 false를 반환 ✅ ES6(ECMAScript 2016)부터 사용 가능

2️⃣ 문자열에서 .includes()

✔ 문자열 안에 특정 단어가 포함되어 있는지 확인할 때 사용

const text = "JavaScript는 재미있다.";

console.log(text.includes("JavaScript")); // true
console.log(text.includes("Python")); // false

✅ 대소문자를 구분한다 ("Hello"와 "hello"는 다르게 인식됨) ✅ 공백도 포함해서 찾는다 ✅ indexOf()보다 가독성이 좋다

3️⃣ 두 번째 매개변수 (검색 시작 위치)

✔ .includes(value, startIndex) 형식으로 특정 위치부터 검색할 수 있다

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.includes(20, 2)); // false (2번 인덱스부터 찾음)
console.log(numbers.includes(30, 2)); // true

4️⃣ .includes() vs .indexOf()

💡 존재 여부만 확인할 땐 .includes()가 더 직관적

5️⃣ 활용 예시

✔ 배열에서 중복 값 체크

const selectedColors = ["red", "yellow", "green"];
const newColor = "blue";

if (!selectedColors.includes(newColor)) {
  selectedColors.push(newColor);
}

console.log(selectedColors); // ["red", "yellow", "green", "blue"]

✔ 검색 기능 구현

const products = ["아이폰", "갤럭시", "맥북", "아이패드"];

const search = "아이폰";
console.log(products.some((p) => p.includes(search))); // true

🔹 정리

✔ .includes()는 배열과 문자열에서 특정 값이 존재하는지 확인하는 메서드 ✔ true 또는 false를 반환해 간결하게 조건문에서 활용가능 ✔ 검색, 중복 체크, 필터링 등에 유용

🏗️ 1. HTML 코드

    <div class="alert alert-danger">
      <span>5</span>초 이내 구매시 사은품 증정!
    </div>

📌 설명 ✅ 먼저, 화면에 카운트다운 메시지를 표시할 <div> 태그 만들기 ✅ <span> 태그 안의 숫자(5)가 1초마다 줄어든다 ✅ 5초 후에는 메시지가 자동으로 사라짐

⚡ 2. JavaScript 구현

// 5초 이내 구매시 사은품 증정 알림창 (1초씩 줄어들다가 사라짐)
let countNum = 5;

let interval = setInterval(function () {
  countNum--;

  if (countNum >= 1) {
    document.querySelector(".alert span").innerHTML = countNum; // 숫자 변경
  }
  if (countNum < 1) {
    clearInterval(interval); // 타이머 중지
    document.querySelector(".alert").style.display = "none"; // 메시지 숨기기
  }
}, 1000);

📌 설명 ✅ setInterval()을 사용해 1초마다 숫자감소 ✅ countNum이 0이 되면 clearInterval()을 사용해 타이머 중지 & 메시지 숨김

🎬 3. 실행 결과

✅ 숫자가 줄어들면서 0이되면 팝업창이 사라진걸 확인할수있다

👩🏻‍💻 웹사이트 배너 만들기에 아주 유~용한 간단 코드!!

👩🏻‍💻 간단한 버튼 클릭 이벤트로 다크 모드와 라이트 모드를 전환하는 기능을 구현해보았다

🏗 HTML 코드

 <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">Navbar</span>
        <span class="badge bg-dark">Dark🔁</span>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>

✅ badge(뱃지) 요소를 클릭하면 다크 모드 ↔ 라이트 모드로 변경 ✅ 기본적으로 "Dark🔁" 상태에서 시작

⚡️ JavaScript 코드

       /**
       * Dark mode 버튼
       * badge 클릭횟수가 홀수면 내부 글자를 light로 변경
       * badge 클릭횟수가 짝수면 내부 글자를 dark로 변경
       */

      // 1. 클릭횟수 담을 변수 정의
      let count = 0;

      // 2. badge 클릭횟수가 홀수면 내부 글자를 클릭하면 횟수 증가
      document.querySelector(".badge").addEventListener("click", function () {
        count++;

        console.log(count);

        // 3. badge 클릭횟수가 짝수면 내부 글자가 다크모드
        if (count % 2 == 0) {
          document.querySelector(".badge").innerHTML = "Dark🔁";

          // 4. badge 클릭횟수가 홀수면 내부 글자가 라이트모드
        } else {
          document.querySelector(".badge").innerHTML = "Light🔁";
        }
      });

🎨 실행 화면

🔆 홀수 클릭 (Light 모드)

🌙 짝수 클릭 (Dark 모드)

🔥 정리

1️⃣ badge 요소 클릭 시 count 값 증가 2️⃣ 짝수면 "Dark🔁", 홀수면 "Light🔁"로 변경 3️⃣ 콘솔에서 클릭 횟수를 확인할 수 있음

👩🏻‍💻 지금은 버튼만 변환하지만, 다음엔 전체적인 스타일까지 다크 모드로 변경할 예정! 하지만... 지금은 시간이 없뎌요...🥲

🔍 문제_피자 나눠 먹기(1)

🎯 풀이

✅ 첫 번째 풀이 (parseInt 사용)

1️⃣ n / 7을 정수로 변환하여 필요한 피자 판 수 계산 2️⃣ 나머지가 있다면(n % 7 > 0), 한 판 추가

function solution(n) {
    return parseInt(n / 7) + (n % 7 > 0 ? 1 : 0);
}

✅ 더 간단한 풀이 (Math.ceil 사용)

• 찾아보니 더 간단한 방법이 있었다! 🎉
• 다른 사람들은 이렇게 풀었구나....ㅎㅎ

function solution(n) {
    return Math.ceil(n / 7)
}

💡 Math.ceil : 올림처리하여 가장 가까운 정수 반환 (소수점이 있으면 무조건 올림)

🔥 parseInt() vs Math.ceil() 차이점

👉 Math.ceil(n / 7)을 사용하면 더 간단하고 직관적! 🚀✨

👩🏻‍💻 이 문제 풀면서 다시한번 생각했다..ㅎㅎ 아는게 힘이다 🥲

🧐 문제 설명

• 철수는 3의 배수를 구별하기 힘들어 프로그래밍으로 해결하려 한다
• 3의 배수일 때 박수를 치며, 9의 배수일 경우 박수를 2번 친다

📝 코드 구현
function game369(number) {
  if ((number % 3 === 0) && number % 9 !== 0) {
    console.log('👏🏻'); // 3의 배수 (9의 배수 제외)
  } else if (number % 9 === 0) {
    console.log('👏🏻👏🏻'); // 9의 배수
  } else {
    console.log('통과'); // 그 외 숫자
  }
}

✅ 테스트 케이스
game369(3);   // 👏🏻
game369(9);   // 👏🏻👏🏻
game369(11);  // 통과
game369(18);  // 👏🏻👏🏻
game369(21);  // 👏🏻

📌 끝자리 3,6,9 게임

🧐 문제 설명

• 숫자의 끝자리가 3, 6, 9일때 '박수'를 출력하는 프로그램을 만들기

📝 코드 구현
function game369(number) {
  const lastnumber = number.toString().slice(-1); // 숫자의 마지막 자리 확인
  if (lastnumber === '3' || lastnumber === '6' || lastnumber === '9') {
    console.log('👏🏻');
  } else {
    console.log('통과');
  }
}

✅ 테스트 케이스
game369(3);   // 👏🏻
game369(9);   // 👏🏻
game369(18);  // 통과
game369(23);  // 👏🏻
game369(26);  // 👏🏻
game369(29);  // 👏🏻
game369(40);  // 통과

📌 공인중개사 1차 시험 합격 판독기 🎓

🧐 문제 설명

• 두 과목 점수 합이 120점 이상이면 합격
• 한 과목이라도 40점 미만이면 불합격
• 점수가 0~100이 아닌 경우, 경고 메시지 출력

📝 코드 구현
function testScore(score1, score2) {
  if (score1 < 0 || score1 > 100 || score2 < 0 || score2 > 100) {
    console.log('🚨 장난치지 말고 0에서 100 사이 숫자입력해 🤬');
  } else if (score1 < 40 || score2 < 40) {
    console.log('❌ 불합격 (과락)');
  } else if (score1 + score2 >= 120) {
    console.log('🎉 합격');
  } else {
    console.log('❌ 불합격');
  }
}


✅ 테스트 케이스
testScore(70, 70);  // 🎉 합격
testScore(30, 100); // ❌ 불합격 (과락)
testScore(50, 50);  // ❌ 불합격
testScore(110, 50); // 🚨 장난치지 말고 0에서 100 사이 숫자를 입력해주세요 🤬

👩🏻‍💻 복습 차원에서 오랜만에 조건문 문제를 풀어봤다 빠르게 풀 수 있을 줄 알았는데, 생각보다 오래 걸림...ㅎㅎ 그래도 처음 풀 때보다는 훨~씬 수월하게 해결! 이번엔 구글링 없이 풀었다! 🎉

💎 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>서브메뉴_classList다루기</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./css/06_서브메뉴_classList다루기.css" />
  </head>
  <body>
    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">Navbar</span>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>

    <ul class="list-group">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>

    <!-- login modal -->
    <div class="black-bg">
      <div class="white-bg">
        <h4>please login</h4>
        <button class="btn btn-danger" id="close">Close</button>
      </div>
    </div>

    <button id="loginButton">login</button>

    <!-- 부트스트랩 라이브러리 -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>

    <!-- 제이쿼리 라이브러리 -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>

    <script>

      /**
      * 네비게이션바
      *  ✅ toggle() 메서드는 클래스가 없으면 추가하고, 있으면 제거한다.
      */

      $(".navbar-toggler").on("click", function () {
        $(".list-group").toggleClass("show");
      });


      /**
       * login 모달창
       * login click 하면 모달창 띄우기
       * 
       */
      document
        .querySelector("#loginButton")
        .addEventListener("click", function () {
          document.querySelector(".black-bg").classList.add("show");
        });

      // 띄어진 모달창 close누르면 닫기
      document.querySelector("#close").addEventListener("click", function () {
        document.querySelector(".black-bg").classList.remove("show");
      });
    </script>
  </body>
</html>

✅ add("show") → 모달 무조건 열기
 ✅ remove("show") → 모달 무조건 닫기

🔄 toggle()은 언제?

✅ toggle("show") → 버튼 하나로 열고 닫을 때 ❌ 하지만 모달에는 닫기 버튼이 따로 있어 add/remove가 더 적절

🎨 CSS

/* 서브메뉴 기본 스타일: 숨김 상태 */
.list-group {
  max-height: 0; /* 서브메뉴의 최대 높이를 0으로 설정하여 숨김 */
  overflow: hidden; /* 내용이 넘치지 않도록 숨김 */
  transition: max-height 0.5s ease-out; /* max-height 변화에 애니메이션 효과 추가 */
}

/* 서브메뉴가 보이는 상태 */
.list-group.show {
  max-height: 400px; /* 서브메뉴의 최대 높이를 400px로 설정하여 보이게 함 */
}

/* 모달 배경 기본 스타일: 숨김 상태 */
.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  visibility: hidden; /* 애니메이션을 위한 시작 스타일 */
  opacity: 0; /* 애니메이션을 위한 시작 스타일 */
  transition: all 1s; /* 모든 변화에 애니메이션 효과 추가 */
}

/* 모달 내용 스타일 */
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

/* 모달이 보이는 상태 */
.show {
  visibility: visible; /* 애니메이션을 위한 끝 스타일 */
  opacity: 1; /* 애니메이션을 위한 끝 스타일 */
}

✅ 결과

✔️ 모달에는 add() / remove()가 더 명확
 ✔️ 토글 버튼(예: 햄버거 메뉴)에는 toggle()이 적절

👩🏻‍💻 예전에 끊어놓고 시간이 없어서 미뤄둔 강의를 복습 차원에서 빠르게 듣는 중이다~! 아주아주 쉬운 알럿창 만들기!!! 쉽지만 파라미터 이해는 중요한 개념이다!! 이거 이해 못하면 JS 어려움! 😆

📌 간단한 알럿 창 만들기

• 버튼을 클릭하면 알럿 창이 보이고, 닫기 버튼(❎)을 누르면 닫히기

💎 HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/02_AlertBox.css">
</head>
<body>
<!-- 알럿박스 -->
<div class="alert-box" id="alert">Hello~Javascript Alert box!!
  <button class="closebutton" onclick="alertButton('none')">❎</button>
</div>

<!-- 알럿 열기 버튼 -->
<button class="clickbutton" onclick="alertButton('block')">Click</button>

<script>
  // displayState를 파라미터(인자)로 받아서 alertBox를 보여주거나 숨겨주는 함수
  function alertButton(displayState){ 
    document.getElementById('alert').style.display=displayState;
  }
</script>

</body>
</html>

🎨 CSS

.alert-box {
  background-color: rgb(255, 255, 137);
  padding: 20px;
  color: rgb(49, 152, 35);
  border-radius: 5px;
  display: none;
  font-weight: bold;
  margin-bottom: 5px;
}

.clickbutton{
  cursor: pointer;
  background: rgb(172, 237, 163);
  border: none;
  padding: 5px;
  font-size: 20px;
  border-radius: 10px;
}

.closebutton{
  float: right;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

🔹 정리

• Click 버튼 → 알럿 창 보이기
• ❎ 버튼 → 알럿 창 닫기
• alertButton(displayState) 함수를 활용해 display 속성을 변경
• css 는 취향껏 코드짜기~😎

✅ 결과

🔍 문제_최빈값 구하기

🎯 풀이

1️⃣ 등장횟수 카운트

• 객체 counts 랄 사용해 숫자의 등장 횟수를 기록
• array.forEach()를 활용해서 숫자가 등장할때마다 개수 증가

2️⃣ 최빈값 구하기

• Object.values(counts)를 사용해 등장 횟수들 중 최대값(maxCoutn)을 구한다
• Object.keys(counts)로 counts 객체의 키(숫자들)를 가져온 후, filter()를 사용해 maxCount와 같은 값을 가지는 숫자들을 modes 배열에 저장

3️⃣ 최빈값이 여러개면 -1반환, 아니면 최빈값 반환

• modes 배열의 길이가 1보다 크면 최빈값이 여러 개이므로 -1을 반환
• 그렇지 않으면 modes[0]을 숫자로 변환하여 반환

function solution(array) {
    let counts = {};

    // 1. 등장 횟수 카운트
    array.forEach(num => counts[num] = (counts[num] || 0) + 1);

    // 2. 최빈값 찾기
    let maxCount = Math.max(...Object.values(counts));
    let modes = Object.keys(counts).filter(num => counts[num] === maxCount);

    // 3. 최빈값이 여러 개면 -1 반환, 아니면 최빈값 반환
    return modes.length > 1 ? -1 : Number(modes[0]);
}

👩🏻‍💻 이건 진짜 구글링으로 찾아보고 GPT한테도 물어봐서 풀은 문제이다... 나의 문제해결 능력은 10% 정도..?ㅎㅎ 찾아보고, 물어보면 바로 답을 알려줘서 답 안보고 참고만 하려고 엄청 흐린눈을 했다....코드가 길어질것같으면 바~로 막혀버리는 나.. 문제있다잉?!🥲

🔍 문제_중앙값 구하기

🎯 풀이

1️⃣ 배열을 오름차순으로 정렬 2️⃣ 배열의 길이가 홀수이므로 중앙값은 (길이 // 2) 번째 요소

function solution(array) {
    // 숫자 배열을 오름차순으로 정렬
    array.sort((a, b) => a - b);

    // 배열 길이의 절반을 내림한 값이 중앙 인덱스
    return array[Math.floor(array.length / 2)];
}

💡 Math.floor() 은 소수점 이하를 버리고, 가장 가까운 작은 정수로 내림하는 함수이다! 배열의 길이를 2로 나눈 값이 소수점이 있을 수 있는데, 소수점 이하를 버리고 정수로 내리기 위해 사용하였다. Math.floor() 사용하면 중앙값을 정확하게 찾을 수 있다!!!!

✅ ex)
console.log(Math.floor(3.9)); // 3
console.log(Math.floor(7.1)); // 7
console.log(Math.floor(5.9999)); // 5
console.log(Math.floor(2.0)); // 2

🔍 문제_배열 두배 만들기

✅ 방법 1

1️⃣ reduce 를 사용해서 배열을 순회하면서 새로운 배열 만들어주기 2️⃣ a는 누적된 배열, b는 현재 순회중인 요소 3️⃣ ...a를 사용해 기존 배열의 요소를 그대로 유지 ➡️ b * 2를 새로운 요소로 추가 4️⃣ 초기값을 []로 설정하여 빈 배열에서 시작

function solution(numbers) {
    return numbers.reduce((a, b) => [...a, b * 2], []);
}

✅ 방법 2

1️⃣ map 함수를 사용하여 배열의 각 요소를 변환 2️⃣ number는 현재 순회중인 요소 3️⃣ number * 2를 새로운 배열의 요소로 추가

function solution(numbers) {
    return numbers.map(number => number * 2);
}

👩🏻‍💻 처음에 힘들게 힘들게~~ 방법1인 reduce 사용을했는데 찾아보니까** map함수가 더 배열의 각 요소를 변환하는 데 더 적합**하다고 해서 다시 한번 풀어보았다!! 물론 다른 글들의 도움을 받으면서,,, 언제쯤 혼자 해결할수있을까..?!?!?

🔍 문제_각도기

🎯 풀이

각도(0 < angle ≤ 180)가 주어지면, ✅ 예각(1) → 0° ~ 90° 미만 ✅ 직각(2) → 90° ✅ 둔각(3) → 90° 초과 ~ 180° 미만 ✅ 평각(4) → 180°

이렇게 네 가지 중 하나를 반환🚀

✅ 방법 1 : if문 사용(직관적)

function solution(angle) {
    if (angle > 0 && angle < 90) {
        return 1; // 예각
    } else if (angle === 90) {
        return 2; // 직각
    } else if (angle > 90 && angle < 180) {
        return 3; // 둔각
    } else if (angle === 180) {
        return 4; // 평각
    }
}

• if문을 사용해서 조건을 차례대로 검사하면서 해당하는 값을 반환해준다

✅ 방법 2 : Math 함수 활용

function solution(angle) {
    return angle === 180 ? 4 : angle > 90 ? 3 : angle === 90 ? 2 : 1;
}

• 삼항연산자를 활용해서 간단하게 풀이할수 있다!

🚀 결론

• 쉽고 직관적인 방법은 if문을 사용!!
• 한줄로 깔끔하게 하고싶다면? 삼항연산자 활용!!!

  👩🏻‍💻 처음풀이는 if문을 사용했는데 코드가 너무 길고 더 쉬운 방법이 있을듯하여 찾아보았다!!! 결과 삼항연산자로 간단하게 풀어보았다!!!

🔍 문제_배열의 평균값

🎯 풀이

1️⃣ numbers 에 있는 모든 숫자를 더한다 2️⃣ 요소의 개수로 나누어 평균을 계산한다 3️⃣ 계산된 평균값을 반환!

function solution(numbers) {
     // 1) numbers 배열의 합을 구한다
    const sum = numbers.reduce((acc, num) => acc + num, 0);

     // 2) 합계를 요소 개수로 나누어 평균을 계산
    const average = sum / numbers.length;

    // 3) 계산된 평균값을 반환
    return average;
}

👩🏻‍💻 문제를 풀이하면서 reduce 메서드를 사용하였다!!! reduce는 초기값을 설정한 뒤 배열을 순회하며 계산된 누적 값을 저장한다 즉!! 배열의 모든 요소를 간단히 합산하거나 원하는 값으로 처리할 때 유용한 메서드다~~!!

👩🏻‍💻 생각보다 손쉽게 풀었던 문제였다!!!알고리즘 병아리인 나는 스스로 풀고 놀랐지 모야,,!??!?!?! 🐣

💻 프로그래머스 코딩테스트 연습LV0

🔍 문제_문자열 뒤집기

🎯 문제 해결 방법

1️⃣ 문자열을 배열로 변환

• my_string을 한 글자씩 잘라 배열로 만들기
  • 방법: split('') 또는 [...my_string] 사용

2️⃣ 배열 뒤집기

• 배열의 순서를 뒤집기 위해 reverse() 메서드를 사용

3️⃣ 문자열로 다시 합치기

• 뒤집어진 배열을 문자열로 변환하기 위해 join('') 메서드를 사용

🛠 두 가지 풀이 방법

✅ 방법 1: split() 사용

function solution(my_string) {
    var answer = my_string.split('').reverse().join('');
    return answer;
}

✅ 방법 2: 스프레드 연산자 사용

function solution(my_string) {
    var answer = [...my_string].reverse().join("");
    return answer;
}

🚀 결론

• 성능적으로 비교해보아도 실제 실행 시간에서는 큰 차이가 없다!! 다만, split('')은 메서드 호출을 사용하므로 미미하게 느릴 수 있다.. 하지만 차이는 거의 무시해도 되는 수준이다

• 개인적으로 방법 2가 코드가 더 간결하고 스프레드 문법이 최신 문법이라 그런지 가독성이 더 좋게 느껴진다ㅎㅎㅎㅎㅎㅎ😝