👊🏼 Daily Mission

HTML/CSS

Day 1 나의 하루 문서 만들기

day1mission

👩🏻‍💻 제출한 코드보기

Day 2 프로필 페이지 만들기

day2mission

👩🏻‍💻 제출한 코드보기

Day 3 설문조사 양식 및 회원가입 폼

day3mission

👩🏻‍💻 제출한 코드보기

day3mission

👩🏻‍💻 제출한 코드보기

Day 4 프로필 페이지, 채팅방, 눈사람

day4mission
👩🏻‍💻 제출한 코드보기

Day 5 채팅방 디벨롭, 반응형 웹, 반응형 웹 디벨롭, 클론

day5mission

day5mission

day5mission

day5mission

JavaScript

👩🏻‍💻 StackBlitz Collections

day 6 변수와 타입 개념

👩🏻‍💻 JavaScript 1일차 보물 상자열기

👩🏻‍💻 JavaScript 1일차 동물 출력하기

💡 Node.js 환경에서는 .js 파일을 실행할 때 터미널에서 node main.js처럼 명령어로 직접 호출해야 한다는 것을 이번에 새롭게 알게 되었다.

day 7 타입 개념 및 메서드 활용

👩🏻‍💻 JavaScript 2일차 오류 수정하기

👩🏻‍💻 JavaScript 2일차 주사위 만들기

// min 이상 max 이하의 정수를 만들기 위한 공식
Math.floor(Math.random() * (max - min + 1)) + min;

day 8 조건문과 반복문

👩🏻‍💻 JavaScript 3일차 수열 계산하기

👩🏻‍💻 JavaScript 3일차 배달 주문하기

👩🏻‍💻 JavaScript 3일차 윤년 구하기

👩🏻‍💻 JavaScript 3일차 별 찍기

👩🏻‍💻 JavaScript 3일차 소수 판별하기

day 9 배열 기초 및 배열 반복문

👩🏻‍💻 JavaScript 4일차 주간 독서 이벤트

👩🏻‍💻 JavaScript 4일차 신규 고객 선별하기

👩🏻‍💻 JavaScript 4일차 봄 옷 고르기

day 10 함수 기초

👩🏻‍💻 JavaScript 5일차 주사위 만들기 2

👩🏻‍💻 JavaScript 5일차 윤년 구하기 2

👩🏻‍💻 JavaScript 5일차 카페 주문하기

day 11 객체 기초

👩🏻‍💻 JavaScript 6일차 계산기 만들기

👩🏻‍💻 JavaScript 6일차 할 일 목록 관리하기

👩🏻‍💻 JavaScript 6일차 큐 자료구조 만들기

day 12 배열, 객체 응용

👩🏻‍💻 JavaScript 7일차 직원 관리하기

👩🏻‍💻 JavaScript 7일차 마왕 물리치기

👩🏻‍💻 JavaScript 7일차 스택 자료구조 만들기

day 13 함수 응용, 구조분해할당

👩🏻‍💻 JavaScript 8일차 오류 해결하기 2

👩🏻‍💻 JavaScript 8일차 템플릿 만들기

day 14 DOM 기초, 이벤트 객체

👩🏻‍💻 JavaScript 9일차 햄버거 주문서

👩🏻‍💻 JavaScript 9일차 로또 번호 생성기 기능 추가 구현

👩🏻‍💻 JavaScript 9일차 로또 당첨 번호 및 로또 번호 자동 생성

day 15 비동기

👩🏻‍💻 JavaScript 10일차 순간 포착

👩🏻‍💻 JavaScript 10일차 콜백 탈출

👩🏻‍💻 JavaScript 10일차 반응 속도

day 16 데이터 fetch

👩🏻‍💻 JavaScript 11일차 강아지 페이지 만들기

👩🏻‍💻 JavaScript 11일차 오늘의 날씨

👩🏻‍💻 JavaScript 11일차 오늘 뭐 입지?

day 17 계산기 | DAY 1_HTML로 목업 만들기

👩🏻‍💻 계산기 GitHub

📋 진행 내용 요약

초기 프로젝트 셋업 및 환경 구성
→ npm init으로 프로젝트 초기화, package.json 및 .gitignore 작성
계산기 UI 목업 및 레이아웃 작성
기본 스타일링 및 버튼 그룹 구성
README 작성: 프로젝트 가이드 & 네이밍 규칙 정리

🔨 개선할 점

미션 가이드에 명확한 클래스명 규칙이 없어, 개인적으로 BEM 방식에 따라 네이밍 규칙을 먼저 세워 작업을 진행했다.
하지만 이후 DAY 2 미션지를 확인해보니 필수 클래스명이 추가로 지정되어 있어, 일부 클래스명을 수정해야 할 필요가 생겼다.

index.htmlcss

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link rel="stylesheet" href="./src/style.css" />
  </head>
  <body>
    <main class="calculator">
      <h1 class="a11y-hidden">Calculator</h1>
      <div class="calc-container p-40">
        <!-- calculator window buttons -->
        <div class="calc__window-btns">
          <button
            class="calc__window-btn--close btn-xs"
            aria-label="화면 닫기"
            title="닫기"
          ></button>
          <button
            class="calc__window-btn--min btn-xs"
            aria-label="화면 최소화"
            title="최소화"
          ></button>
          <button
            class="calc__window-btn--max btn-xs"
            aria-label="화면 최대화"
            title="최대화"
          ></button>
        </div>

        <!-- calculator display -->
        <div class="calc__display p-40"></div>

        <!-- calculator keypad -->
        <div class="calc__keypad p-40"></div>
      </div>
    </main>
  </body>
</html>

css

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* color variables */
:root {
  --white: #ffffff;
  --black: #212121;
  --red: #ff5f57;
  --yellow: #ffbd2e;
  --green: #28c840;
}

/* calculator-layout */
.calculator {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calc-container {
  width: 600px;
  height: 800px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 4px solid #2d2f36;
}

/* calculator-inner */
.calc__window-btns {
  display: flex;
  gap: 8px;
}

.calc__window-btn--close {
  background-color: var(--red);
}
.calc__window-btn--min {
  background-color: var(--yellow);
}
.calc__window-btn--max {
  background-color: var(--green);
}

.calc__display {
  height: 120px;
  text-align: right;
  border: 4px solid #9000ff;
}

.calc__keypad {
  flex: 1;
  border: 4px solid #0085f9;
}

/* utils */
.a11y-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn-xs {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.p-40 {
  padding: 40px;
}

day 18 계산기 | DAY 2_HTML로 목업 만들기, Flexbox로 정렬 및 배치하기

👩🏻‍💻 계산기 GitHub

📋 진행 내용 요약

계산기 레이아웃에 Flexbox 적용하여 정렬 및 배치 구현
버튼 종류별 클래스 세분화
Pretendard 웹폰트 적용 및 UI 스타일링 반영
README 작성: 데모 url 및 디자인 시안 반영

🔨 개선할 점

display에 출력되는 글자가 많아졌을 때의 폰트 사이즈 대응은 아직 미구현

index.htmlcss

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/pretendard@1.3.8/dist/web/static/pretendard.css"
    />
    <link rel="stylesheet" href="./src/style.css" />
  </head>
  <body>
    <main class="calculator">
      <h1 class="a11y-hidden">계산기</h1>
      <div class="calc-container">
        <!-- calculator window buttons -->
        <div class="calc__window-btns">
          <button
            type="button"
            class="calc__window-btn close"
            aria-label="화면 닫기"
            title="닫기"
          ></button>
          <button
            type="button"
            class="calc__window-btn min"
            aria-label="화면 최소화"
            title="최소화"
          ></button>
          <button
            type="button"
            class="calc__window-btn max"
            aria-label="화면 최대화"
            title="최대화"
          ></button>
        </div>

        <!-- calculator display -->
        <!-- 
          - 스크린리더 자동 읽기: role="status" + aria-live="polite"
          - 키보드 포커스 가능: tabindex="0"
          - input 대신 div 사용 (직접 입력 없이 버튼 클릭으로만 동작)
        -->
        <div
          class="calc__display"
          role="status"
          aria-live="polite"
          aria-label="계산 결과"
          tabindex="0"
        >
          0
        </div>

        <!-- calculator buttons -->
        <div class="calc__buttons">
          <button type="button" class="button function clear" aria-label="초기화" title="초기화">
            <span class="button__inner">C</span>
          </button>
          <button type="button" class="button function" aria-label="부호 전환" title="부호 전환">
            <span class="button__inner">±</span>
          </button>
          <button type="button" class="button function" aria-label="퍼센트" title="퍼센트">
            <span class="button__inner">%</span>
          </button>
          <button type="button" class="button operator" aria-label="나누기" title="나누기">
            <span class="button__inner">/</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">7</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">8</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">9</span>
          </button>
          <button type="button" class="button operator" aria-label="곱하기" title="곱하기">
            <span class="button__inner">*</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">4</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">5</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">6</span>
          </button>
          <button type="button" class="button operator" aria-label="빼기" title="빼기">
            <span class="button__inner">-</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">1</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">2</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">3</span>
          </button>
          <button type="button" class="button operator" aria-label="더하기" title="더하기">
            <span class="button__inner">+</span>
          </button>
          <button type="button" class="button number zero">
            <span class="button__inner">0</span>
          </button>
          <button type="button" class="button decimal" aria-label="소수점" title="소수점">
            <span class="button__inner">.</span>
          </button>
          <button type="button" class="button equal" aria-label="계산하기" title="계산하기">
            <span class="button__inner">=</span>
          </button>
        </div>
      </div>
      <div class="calc-shadow" aria-hidden="true"></div>
    </main>
    <script src="./src/script.js"></script>
  </body>
</html>

css

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Pretendard", sans-serif;
  background-color: var(--black);
}

button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* color variables */
:root {
  --white: #ffffff;
  --gray-100: #eeeeee;
  --gray-200: #dadada;
  --gray-300: #b8b8b8;
  --gray-400: #444444;
  --gray-600: #666666;
  --gray-700: #777777;
  --gray-800: #8c8c8c;
  --black: #222222;
  /* status color */
  --red: #ff5f57;
  --yellow: #ffbd2e;
  --green: #28c840;
}

/* calculator-layout */
.calculator {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calc-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid var(--white);
  background-color: var(--gray-100);
  z-index: 100;
}

.calc-shadow {
  position: absolute;
  bottom: 136px;
  width: 384px;
  height: 30px;
  background: var(--gray-300);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--gray-400) -20%, var(--gray-700) 90%);
}

/* calculator inner */
/* window buttons */
.calc__window-btns {
  display: flex;
  gap: 8px;
}

.calc__window-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-color: var(--gray-600);
  transition: all 0.2s ease;
}

.calc__window-btn.close:hover {
  background-color: var(--red);
  background-image: url(./images/ico_close.svg);
}

.calc__window-btn.min:hover {
  background-color: var(--yellow);
  background-image: url(./images/ico_min.svg);
}
.calc__window-btn.max:hover {
  background-color: var(--green);
  background-image: url(./images/ico_max.svg);
}

/* display */
.calc__display {
  width: 340px;
  height: 88px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  font-size: 32px;
  border-radius: 8px;
  color: var(--gray-100);
  background-color: var(--black);
}

/* buttons */
.calc__buttons {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-radius: 8px;
  padding: 4px;
  background-color: var(--black);
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--gray-600);
  padding: 20px;
  border-radius: 4px;
  background-color: var(--gray-200);
  transition: all 0.2s ease;
}

.button__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gray-300) 20%, var(--gray-100) 60%);
}

.button.zero {
  flex-grow: 1;
}

.button:hover {
  background-color: var(--gray-300);
}

.button:active {
  transform: scale(0.9);
  background-color: var(--gray-800);
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.4);
}

/* utils */
.a11y-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

day 19 계산기 | DAY 3_버튼 클릭 시 디스플레이에 표시되도록 만들기

👩🏻‍💻 계산기 GitHub

📋 진행 내용 요약

각 버튼을 클릭했을 때 console에 각 버튼의 value 출력
숫자 디스플레이에 표시
소수점 중복 입력 방지 로직 구현
Clear 기능 추가
콘솔에 입력 흐름 시각적으로 디버깅

🔨 개선할 점

btnClick 함수 내부에서 조건문이 많아 복잡하고, console.log(clickedBtnText)가 중복되어 있어서 버튼 타입별 동작을 함수로 분리하거나, switch문 등으로 리팩토링 진행 예정
콘솔에 모든 clickedBtnText를 출력하지만, 실제 동작상 필요 없는 경우가 있어 미션 완료 후 개선 예정
디스플레이 글자 수에 따른 글자 크기 조절은 아직 구현 전
연산자, 기능, 결과 버튼에 대한 동작 구현은 미구현 상태 (day 4)

🧩 forEach()를 사용한 이유 (feat.map() 메서드)

// 제출 코드

// 계산기 버튼에 클릭 이벤트 등록
calcButtons.forEach((button) => {
  button.addEventListener("click", btnClick);
});

// 🔍 디버깅용 출력
console.log(calcButtons);
// 계산기 버튼(.button)을 모두 선택하면 NodeList가 반환됨
// NodeList는 유사 배열 객체지만, forEach() 메서드로 순회 가능

모든 버튼에 클릭 이벤트 리스너를 등록하기 위해 forEach()를 사용했다.
전역에서 const calcButtons = document.querySelectorAll(".button");를 통해 버튼들을 가져오고, 콘솔에 출력해보면 NodeList가 반환된다. NodeList는 배열과 비슷한 구조의 유사 배열 객체이며, forEach() 메서드를 사용할 수 있다.

🧩 map()

map()은 원본 배열을 기반으로 새로운 배열 생성하고 반환하는 경우에 많이 사용되는 메서드이기 때문에 리턴값이 필요없는 경우에는 map()보다는 forEach()가 적합하다.
현 계산기에서는 각 버튼에 이벤트 리스너를 부여하는 작업이므로 forEach()로 구현했다.

🧩 NodeList?

NodeList는 배열과 비슷한 구조의 유사 배열 객체이며, 인덱스로 접근할 수 있고, length 속성도 존재하지만, 진짜 자바스크립트 배열이 아니기 때문에 push(), pop() 등의 배열 메서드는 사용할 수 없다.
하지만, NodeList는 forEach() 메서드를 사용할 수 있는 iterable 객체이다. 배열처럼 요소를 순회하며 각 버튼에 이벤트를 등록할 수 있다.

🧩 iterable 객체?

📎 iterable object
이터러블 객체란? for...of, spread, Array.from() 등에 사용할 수 있는 객체로서, 내부에 Symbol.iterator() 메서드를 가지고 있는 객체이다.
배열, 문자열, NodeList, Set, Map 등은 모두 iterable이고 일반 객체는 기본적으로 iterable이 아니다.
이때 사용되는 Symbol.iterator는 심볼(Symbol) 타입의 값이기 때문에, 그동안 매번 지나쳤던 프리미티브 타입 중 '심볼(Symbol)'에 대해 제대로 이해할 필요성을 느꼈다.. 🔫

reference

[JavaScript 학습콘텐츠 7일차 map]
📎 MDN forEach()
📎 MDN map()

index.htmlcssscript.js

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/pretendard@1.3.8/dist/web/static/pretendard.css"
    />
    <link rel="stylesheet" href="./src/style.css" />
  </head>
  <body>
    <main class="calculator">
      <h1 class="a11y-hidden">계산기</h1>
      <div class="calc-container">
        <!-- calculator window buttons -->
        <div class="calc__window-btns">
          <button
            type="button"
            class="calc__window-btn close"
            aria-label="화면 닫기"
            title="닫기"
          ></button>
          <button
            type="button"
            class="calc__window-btn min"
            aria-label="화면 최소화"
            title="최소화"
          ></button>
          <button
            type="button"
            class="calc__window-btn max"
            aria-label="화면 최대화"
            title="최대화"
          ></button>
        </div>

        <!-- calculator display -->
        <!-- 
          - 스크린리더 자동 읽기: role="status" + aria-live="polite"
          - 키보드 포커스 가능: tabindex="0"
          - input 대신 div 사용 (직접 입력 없이 버튼 클릭으로만 동작)
        -->
        <div
          class="calc__display"
          role="status"
          aria-live="polite"
          aria-label="계산 결과"
          tabindex="0"
        >
          0
        </div>

        <!-- calculator buttons -->
        <div class="calc__buttons">
          <button type="button" class="button function clear" aria-label="초기화" title="초기화">
            <span class="button__inner">C</span>
          </button>
          <button type="button" class="button function" aria-label="부호 전환" title="부호 전환">
            <span class="button__inner">±</span>
          </button>
          <button type="button" class="button function" aria-label="퍼센트" title="퍼센트">
            <span class="button__inner">%</span>
          </button>
          <button type="button" class="button operator" aria-label="나누기" title="나누기">
            <span class="button__inner">/</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">7</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">8</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">9</span>
          </button>
          <button type="button" class="button operator" aria-label="곱하기" title="곱하기">
            <span class="button__inner">*</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">4</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">5</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">6</span>
          </button>
          <button type="button" class="button operator" aria-label="빼기" title="빼기">
            <span class="button__inner">-</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">1</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">2</span>
          </button>
          <button type="button" class="button number">
            <span class="button__inner">3</span>
          </button>
          <button type="button" class="button operator" aria-label="더하기" title="더하기">
            <span class="button__inner">+</span>
          </button>
          <button type="button" class="button number zero">
            <span class="button__inner">0</span>
          </button>
          <button type="button" class="button decimal" aria-label="소수점" title="소수점">
            <span class="button__inner">.</span>
          </button>
          <button type="button" class="button equal" aria-label="계산하기" title="계산하기">
            <span class="button__inner">=</span>
          </button>
        </div>
      </div>
      <div class="calc-shadow" aria-hidden="true"></div>
    </main>
    <script src="./src/script.js"></script>
  </body>
</html>

css

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Pretendard", sans-serif;
  background-color: var(--black);
}

button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* color variables */
:root {
  --white: #ffffff;
  --gray-100: #eeeeee;
  --gray-200: #dadada;
  --gray-300: #b8b8b8;
  --gray-400: #444444;
  --gray-600: #666666;
  --gray-700: #777777;
  --gray-800: #8c8c8c;
  --black: #222222;
  /* status color */
  --red: #ff5f57;
  --yellow: #ffbd2e;
  --green: #28c840;
}

/* calculator-layout */
.calculator {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calc-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid var(--white);
  background-color: var(--gray-100);
  z-index: 100;
}

.calc-shadow {
  position: absolute;
  bottom: 136px;
  width: 384px;
  height: 30px;
  background: var(--gray-300);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--gray-400) -20%, var(--gray-700) 90%);
}

/* calculator inner */
/* window buttons */
.calc__window-btns {
  display: flex;
  gap: 8px;
}

.calc__window-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-color: var(--gray-600);
  transition: all 0.2s ease;
}

.calc__window-btn.close:hover {
  background-color: var(--red);
  background-image: url(./images/ico_close.svg);
}

.calc__window-btn.min:hover {
  background-color: var(--yellow);
  background-image: url(./images/ico_min.svg);
}
.calc__window-btn.max:hover {
  background-color: var(--green);
  background-image: url(./images/ico_max.svg);
}

/* display */
.calc__display {
  width: 340px;
  height: 88px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  font-size: 32px;
  border-radius: 8px;
  color: var(--gray-100);
  background-color: var(--black);
}

/* buttons */
.calc__buttons {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-radius: 8px;
  padding: 4px;
  background-color: var(--black);
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--gray-600);
  padding: 20px;
  border-radius: 4px;
  background-color: var(--gray-200);
  transition: all 0.2s ease;
}

.button__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gray-300) 20%, var(--gray-100) 60%);
}

.button.zero {
  flex-grow: 1;
}

.button:hover {
  background-color: var(--gray-300);
}

.button:active {
  transform: scale(0.9);
  background-color: var(--gray-800);
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.4);
}

/* utils */
.a11y-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

// 계산기 DOM 요소 (전역)
const calcButtons = document.querySelectorAll(".button"); // 계산기 버튼들
const calcDisplay = document.querySelector(".calc__display"); // 계산기 화면

// 버튼 클릭 시 실행
const btnClick = (event) => {
  // 클릭된 버튼 관련 변수 (지역)
  const clickedBtn = event.currentTarget; // 클릭된 버튼 요소
  const clickedBtnText = clickedBtn.querySelector(".button__inner").textContent; // 버튼 안의 텍스트

  // 버튼 종류 확인
  const isNumber = clickedBtn.classList.contains("number"); // 숫자 버튼 여부 확인
  const isDecimal = clickedBtn.classList.contains("decimal"); // 소수점 버튼 여부 확인
  const isClear = clickedBtn.classList.contains("clear"); // 초기화(C) 버튼 여부 확인
  const isFunction = clickedBtn.classList.contains("function"); // 기능 버튼 여부 확인
  const isOperator = clickedBtn.classList.contains("operator"); // 연산자 버튼 여부 확인
  const isEqual = clickedBtn.classList.contains("equal"); // 결과 버튼 여부

  // 현재 display 화면(공백 제거된 문자열)
  const currentDisplay = calcDisplay.textContent.trim();

  // 초기화(C) 버튼 클릭 시: 디스플레이 0으로 초기화
  if (isClear) {
    console.log(clickedBtnText);
    calcDisplay.textContent = 0;
    return; // 종료
  }

  // 결과 버튼
  if (isEqual) {
    console.log(clickedBtnText);
    return;
  }

  // 연산자 버튼 클릭 시: 콘솔 출력
  if (isOperator) {
    console.log(clickedBtnText);
    return;
  }

  // 기능 버튼 클릭 시: 콘솔 출력
  if (isFunction) {
    console.log(clickedBtnText);
    return;
  }

  // 소수점 중복 입력 방지: 디스플레이에 소수점이 없다면 추가
  if (isDecimal) {
    console.log(clickedBtnText);
    if (!currentDisplay.includes(".")) {
      calcDisplay.textContent = currentDisplay + clickedBtnText;
    }
    return; // 이미 포함되어 있다면 리턴(무시)
  }

  // 숫자 클릭 시: 현재 화면이 0이면 클릭된 버튼의 값으로 대체, 아니면 이어 붙이기
  if (isNumber) {
    console.log(clickedBtnText);
    if (currentDisplay === "0") {
      calcDisplay.textContent = clickedBtnText;
    } else {
      calcDisplay.textContent += clickedBtnText;
    }
  }
};

// 계산기 버튼에 클릭 이벤트 등록
calcButtons.forEach((button) => {
  button.addEventListener("click", btnClick);
});

// 🔍 디버깅용 출력
// console.log(calcButtons);
// 계산기 버튼(.button)을 모두 선택하면 NodeList가 반환됨
// NodeList는 유사 배열 객체지만, forEach() 메서드가 있어서 순회 가능

day 20 계산기 | DAY 4_계산 기능 구현하기 & DAY 5_배포

👩🏻‍💻 계산기 GitHub

📋 진행 내용 요약

btnClick 함수에 복잡한 조건문을 각 버튼마다 기능별로 함수 분리
각 버튼에 data-set 속성을 추가해 버튼 안의 텍스트를 직접 읽지 않고 값을 가져오도록 개선
firstOperand, secondOperand, operator 전역 변수 추가 및 상태 저장
= 버튼 클릭 시 연산 결과 출력 및 연속 계산 구현
%, ±, C 기능 버튼 구현
0으로 나누는 상황에서 "정의되지 않음" 메시지 출력 및 상태 초기화를 위해 checkNaN() 추가
화면에 숫자가 길어지면 폰트 크기가 줄어들도록 adjustDisplayFontSize() 함수 추가

🌐 배포 과정

Vercel을 이용해 계산기 프로젝트 배포
- .dev 도메인은 HTTPS가 필수라 Cloudflare를 이용해 보안 인증 처리
- 가비아에서 도메인 구입 → Cloudflare에 등록 후 DNS 설정 (CNAME, A 레코드)
- Vercel 프로젝트 설정에서 Custom Domain 연결 완료
- 프로젝트 구조 정리를 위해 calculator 레포를 hyebin-dev monorepo로 마이그레이션(?)

🔨 개선할 점

전역 변수 firstOperand, operator 같은 상태들을 하나의 state 객체로 묶어서 관리할 예정 → 실시간 세션에서 아이디어를 얻었고, 구조가 훨씬 깔끔해질 것 같아서 꼭 적용해보고 싶다.
js
```
// 예시
const defaultState = {
  firstOperand: null,
  secondOperand: null,
  operator: null,
  shouldResetDisplay: false,
};

const state = { ...defaultState };

Object.assign(state, defaultState);
```
calcDisplay.textContent를 직접 수정하는 코드가 반복돼서, getDisplay(), setDisplay() 같은 함수로 display 관련 코드를 따로 빼서 관리하고 중복을 줄이려 한다.
지금은 한 파일 안에 모든 기능이 섞여 있어서, 기능별로 JS 파일을 나눠보려 한다. (유틸, 기능, 계산, 이벤트 등)

index.htmlcssscript.js

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/pretendard@1.3.8/dist/web/static/pretendard.css"
    />
    <link rel="stylesheet" href="./src/style.css" />
  </head>
  <body>
    <main class="calculator">
      <h1 class="a11y-hidden">계산기</h1>
      <div class="calc-container">
        <!-- calculator window buttons -->
        <div class="calc__window-btns">
          <button
            type="button"
            class="calc__window-btn close"
            aria-label="화면 닫기"
            title="닫기"
          ></button>
          <button
            type="button"
            class="calc__window-btn min"
            aria-label="화면 최소화"
            title="최소화"
          ></button>
          <button
            type="button"
            class="calc__window-btn max"
            aria-label="화면 최대화"
            title="최대화"
          ></button>
        </div>

        <!-- calculator display -->
        <!-- 
          - 스크린리더 자동 읽기: role="status" + aria-live="polite"
          - 키보드 포커스 가능: tabindex="0"
          - input 대신 div 사용 (직접 입력 없이 버튼 클릭으로만 동작)
        -->
        <div
          class="calc__display"
          role="status"
          aria-live="polite"
          aria-label="계산 결과"
          tabindex="0"
        >
          0
        </div>

        <!-- calculator buttons -->
        <div class="calc__buttons">
          <button
            type="button"
            class="button function clear"
            data-set="C"
            aria-label="초기화"
            title="초기화"
          >
            <span class="button__inner">C</span>
          </button>
          <button
            type="button"
            class="button function"
            data-set="±"
            aria-label="부호 전환"
            title="부호 전환"
          >
            <span class="button__inner">±</span>
          </button>
          <button
            type="button"
            class="button function"
            data-set="%"
            aria-label="퍼센트"
            title="퍼센트"
          >
            <span class="button__inner">%</span>
          </button>
          <button
            type="button"
            class="button operator"
            data-set="/"
            aria-label="나누기"
            title="나누기"
          >
            <span class="button__inner">/</span>
          </button>
          <button type="button" class="button number" data-set="7">
            <span class="button__inner">7</span>
          </button>
          <button type="button" class="button number" data-set="8">
            <span class="button__inner">8</span>
          </button>
          <button type="button" class="button number" data-set="9">
            <span class="button__inner">9</span>
          </button>
          <button
            type="button"
            class="button operator"
            data-set="*"
            aria-label="곱하기"
            title="곱하기"
          >
            <span class="button__inner">*</span>
          </button>
          <button type="button" class="button number" data-set="4">
            <span class="button__inner">4</span>
          </button>
          <button type="button" class="button number" data-set="5">
            <span class="button__inner">5</span>
          </button>
          <button type="button" class="button number" data-set="6">
            <span class="button__inner">6</span>
          </button>
          <button type="button" class="button operator" data-set="-" aria-label="빼기" title="빼기">
            <span class="button__inner">-</span>
          </button>
          <button type="button" class="button number" data-set="1">
            <span class="button__inner">1</span>
          </button>
          <button type="button" class="button number" data-set="2">
            <span class="button__inner">2</span>
          </button>
          <button type="button" class="button number" data-set="3">
            <span class="button__inner">3</span>
          </button>
          <button
            type="button"
            class="button operator"
            data-set="+"
            aria-label="더하기"
            title="더하기"
          >
            <span class="button__inner">+</span>
          </button>
          <button type="button" class="button number zero" data-set="0">
            <span class="button__inner">0</span>
          </button>
          <button
            type="button"
            class="button decimal"
            data-set="."
            aria-label="소수점"
            title="소수점"
          >
            <span class="button__inner">.</span>
          </button>
          <button
            type="button"
            class="button equal"
            data-set="="
            aria-label="계산하기"
            title="계산하기"
          >
            <span class="button__inner">=</span>
          </button>
        </div>
      </div>
      <div class="calc-shadow" aria-hidden="true"></div>
    </main>
    <script src="./src/script.js"></script>
  </body>
</html>

css

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Pretendard", sans-serif;
  background-color: var(--black);
}

button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* color variables */
:root {
  --white: #ffffff;
  --gray-100: #eeeeee;
  --gray-200: #dadada;
  --gray-300: #b8b8b8;
  --gray-400: #444444;
  --gray-600: #666666;
  --gray-700: #777777;
  --gray-800: #8c8c8c;
  --black: #222222;
  /* status color */
  --red: #ff5f57;
  --yellow: #ffbd2e;
  --green: #28c840;
}

/* calculator-layout */
.calculator {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calc-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid var(--white);
  background-color: var(--gray-100);
  z-index: 100;
}

.calc-shadow {
  position: absolute;
  bottom: 136px;
  width: 384px;
  height: 30px;
  background: var(--gray-300);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--gray-400) -20%, var(--gray-700) 90%);
}

/* calculator inner */
/* window buttons */
.calc__window-btns {
  display: flex;
  gap: 8px;
}

.calc__window-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  background-color: var(--gray-600);
  transition: all 0.2s ease;
}

.calc__window-btn.close:hover {
  background-color: var(--red);
  background-image: url(./images/ico_close.svg);
}

.calc__window-btn.min:hover {
  background-color: var(--yellow);
  background-image: url(./images/ico_min.svg);
}
.calc__window-btn.max:hover {
  background-color: var(--green);
  background-image: url(./images/ico_max.svg);
}

/* display */
.calc__display {
  width: 340px;
  height: 88px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  font-size: 32px;
  border-radius: 8px;
  color: var(--gray-100);
  background-color: var(--black);
  transition: font-size 0.2s ease;
}

/* buttons */
.calc__buttons {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-radius: 8px;
  padding: 4px;
  background-color: var(--black);
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--gray-600);
  padding: 20px;
  border-radius: 4px;
  background-color: var(--gray-200);
  transition: all 0.2s ease;
}

.button__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gray-300) 20%, var(--gray-100) 60%);
}

.button.zero {
  flex-grow: 1;
}

.button:hover {
  background-color: var(--gray-300);
}

.button:active {
  transform: scale(0.9);
  background-color: var(--gray-800);
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.4);
}

/* utils */
.a11y-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

// DOM 요소 (전역)
const calcButtons = document.querySelectorAll(".button"); // 계산기 버튼들
const calcDisplay = document.querySelector(".calc__display"); // 계산기 화면

// 계산기 상태 변수 (전역)
let firstOperand = null; // 첫 번째 피연산자
let secondOperand = null; // 두 번째 피연산자
let operator = null; // 연산자
let shouldResetDisplay = false; // 새 숫자 입력 시, 디스플레이 초기화 여부

// 에러
const isNotDefined = "정의되지 않음";

// isNotDefined 체크 함수
const checkNaN = () => {
  calcDisplay.textContent = isNotDefined;
  firstOperand = null;
  secondOperand = null;
  operator = null;
  shouldResetDisplay = true;
};

// display의 글자 수에 따라 폰트 크기 줄이는 함수 (단, 입력 제한은 없음)
const adjustDisplayFontSize = () => {
  const displayTextLength = calcDisplay.textContent.length;

  if (displayTextLength <= 14) {
    calcDisplay.style.fontSize = "";
  } else if (displayTextLength <= 20) {
    calcDisplay.style.fontSize = "22px";
  } else if (displayTextLength <= 26) {
    calcDisplay.style.fontSize = "18px";
  } else {
    calcDisplay.style.fontSize = "12px";
  }
};

// 초기화(C) 버튼 클릭 시: 계산기 상태 변수 초기화
const clickClear = () => {
  firstOperand = null;
  secondOperand = null;
  operator = null;
  shouldResetDisplay = false;
  calcDisplay.textContent = "0";
  adjustDisplayFontSize();
};

// 숫자 버튼 클릭 시
const clickNumber = (number) => {
  const currentDisplay = calcDisplay.textContent.trim();

  // 연산자 버튼을 누른 이후거나(true), 현재 디스플레이가 "0"이면 새 숫자로 반영
  if (shouldResetDisplay || currentDisplay === "0") {
    calcDisplay.textContent = number;
    shouldResetDisplay = false;
  } else {
    // 이어서 숫자 입력
    calcDisplay.textContent += number;
  }

  adjustDisplayFontSize();
};

// 소수점 버튼 클릭 시
const clickDecimal = () => {
  const currentDisplay = calcDisplay.textContent.trim();

  if (currentDisplay === isNotDefined) {
    clickClear();
  }

  if (shouldResetDisplay) {
    // 연산자 다음, 새 숫자를 시작하는 경우 "0."부터 시작
    calcDisplay.textContent = "0.";
    shouldResetDisplay = false;
  } else if (!currentDisplay.includes(".")) {
    // 소수점 없으면 추가
    calcDisplay.textContent += ".";
  }

  adjustDisplayFontSize();
};

// 연산자 버튼 클릭 시
const clickOperator = (value) => {
  let currentDisplay = calcDisplay.textContent.trim();

  // 화면에 "정의되지 않음"이면 clickClear() 호출 후 0부터 시작
  if (currentDisplay === isNotDefined) {
    clickClear();
    currentDisplay = "0";
  }

  if (firstOperand === null) {
    firstOperand = currentDisplay; // 첫 번째 피연산자가 null이면 현재 값을 저장
  } else if (operator && !shouldResetDisplay) {
    secondOperand = currentDisplay; // 기존 연산자가 있고, 새 숫자 입력이 있다면 계산 진행

    const result = calculate(firstOperand, operator, secondOperand);

    if (result === isNotDefined) {
      checkNaN();
      return;
    }

    calcDisplay.textContent = String(result); // 화면 출력 시 숫자 -> 문자열로 변경
    firstOperand = result; // 계산 결과 다음 계산의 첫 번째 숫자로 저장
  }

  operator = value; // 클릭한 연산기호 저장
  shouldResetDisplay = true; // 새로운 숫자 입력 -> display 초기화 상태 변경

  console.log(`firstOperand: ${firstOperand}, operator: ${operator}`);
};

// = 버튼 클릭 시
const clickEqual = () => {
  // 첫 번째 피연산자와 연산자가 null이 아니면
  if (firstOperand !== null && operator !== null) {
    secondOperand = calcDisplay.textContent.trim(); // 현재 값을 넣고 calculate() 실행

    const result = calculate(firstOperand, operator, secondOperand);

    // NaN 에러 확인
    if (result === isNotDefined) {
      checkNaN();
      return;
    }

    calcDisplay.textContent = String(result); // 화면 출력 시 숫자 -> 문자열로 변경
    adjustDisplayFontSize();

    // 첫 번째 피연산자에 다음 계산을 이어가도록 결과 저장
    firstOperand = result;
    secondOperand = null;
    shouldResetDisplay = true;
  }
};

// function 버튼 클릭 시
const clickFunction = (funcValue) => {
  const currentDisplay = calcDisplay.textContent.trim();
  let result;

  switch (funcValue) {
    case "C": // 별도 초기화 함수(clickClear) 호출
      return clickClear();
    case "±": // 현재 숫자의 부호 전환
      result = parseFloat(currentDisplay) * -1;
      break;
    case "%":
      const currentNum = parseFloat(currentDisplay);

      // 첫 번째 피연산자와 연산자가 null이 아니면, 즉 피연산자와 연산자가 있으면
      if (firstOperand !== null && operator !== null) {
        const firstNum = parseFloat(firstOperand);

        switch (operator) {
          case "+":
            result = (firstNum * currentNum) / 100;
            break;
          case "-":
            result = (firstNum * currentNum) / 100;
            break;
          case "*":
            result = currentNum / 100;
            break;
          case "/":
            result = currentNum / 100;
            break;
        }

        secondOperand = result;
        calcDisplay.textContent = String(result);
        adjustDisplayFontSize();

        return;
      } else {
        // 연산자 없는 경우
        result = currentNum / 100;
        secondOperand = result;
        calcDisplay.textContent = String(result);
        return;
      }
    default:
      return; // 정의되지 않은 기능 고려
  }

  calcDisplay.textContent = String(result);
  adjustDisplayFontSize();
};

// calculate 함수: 연산자에 따라 계산 결과 반환
const calculate = (firstOperand, operator, secondOperand) => {
  // 문자열을 부동소수점 숫자로 변환
  const firstNum = parseFloat(firstOperand);
  const secondNum = parseFloat(secondOperand);

  // 피 연산자들 중 하나라도 NaN면 "정의되지 않음 처리"
  if (isNaN(firstNum) || isNaN(secondNum)) return isNotDefined;

  // 연산 조건문
  switch (operator) {
    case "+":
      return firstNum + secondNum;
    case "-":
      return firstNum - secondNum;
    case "*":
      return firstNum * secondNum;
    case "/":
      if (secondNum !== 0) {
        return firstNum / secondNum;
      } else {
        // secondNum이 0이면 '정의되지 않음' 출력 (레퍼런스: 맥북 계산기)
        // 이후 연산자, 숫자 입력 시 Nan 반환 이슈로 개선
        return isNotDefined;
      }
    default:
      return secondNum; // 정의되지 않은 연산자 고려
  }
};

// 버튼 클릭 이벤트
const btnClick = (event) => {
  // 클릭된 버튼 요소 및 값
  const clickedBtn = event.currentTarget; // 클릭한 버튼
  const clickedBtnValue = clickedBtn.dataset.set; // 버튼에 설정된 데이터 값 (html data-set)

  // 버튼 클래스에 따라 함수 호출
  if (clickedBtn.classList.contains("clear")) return clickClear();
  if (clickedBtn.classList.contains("number")) return clickNumber(clickedBtnValue);
  if (clickedBtn.classList.contains("decimal")) return clickDecimal();
  if (clickedBtn.classList.contains("operator")) return clickOperator(clickedBtnValue);
  if (clickedBtn.classList.contains("equal")) return clickEqual();
  if (clickedBtn.classList.contains("function")) return clickFunction(clickedBtnValue);
};

// 계산기 버튼에 클릭 이벤트 등록
calcButtons.forEach((button) => {
  button.addEventListener("click", btnClick);
});

// 🔍 디버깅용 출력
// console.log(calcButtons);
// 계산기 버튼(.button)을 모두 선택하면 NodeList가 반환됨
// NodeList는 유사 배열 객체지만, forEach() 메서드가 있어서 순회 가능

Git & GitHub

Day 21 Git & GitHub 1

👩🏻‍💻 Commits on Jul 31, 2025

Day 22 Git & GitHub 2

👩🏻‍💻 Commits on Aug 01, 2025

Day 23 Git & GitHub 3

레포지토리 url 제출

Git & GitHub 블로그 정리

React

👩🏻‍💻 StackBlitz Collections

Day 24 React를 위한 Node.js, nvm, npm, npx

👩🏻‍💻 React 1일차 package.json 수정하기

Day 25

👩🏻‍💻 React 2일차

Day 26

👩🏻‍💻 React 3일차

👊🏼 Daily Mission ​

HTML/CSS ​

JavaScript ​

📋 진행 내용 요약 ​

🔨 개선할 점 ​

📋 진행 내용 요약 ​

🔨 개선할 점 ​

📋 진행 내용 요약 ​

🔨 개선할 점 ​

🧩 forEach()를 사용한 이유 (feat.map() 메서드) ​

reference ​

📋 진행 내용 요약 ​

🌐 배포 과정 ​

🔨 개선할 점 ​

Git & GitHub ​

React ​

👊🏼 Daily Mission

HTML/CSS

JavaScript

📋 진행 내용 요약

🔨 개선할 점

📋 진행 내용 요약

🔨 개선할 점

📋 진행 내용 요약

🔨 개선할 점

🧩 forEach()를 사용한 이유 (feat.map() 메서드)

reference

📋 진행 내용 요약

🌐 배포 과정

🔨 개선할 점

Git & GitHub

React