Skip to content

README.md

Latest commit

 

History

History
149 lines (108 loc) · 6.19 KB

README.md

File metadata and controls

149 lines (108 loc) · 6.19 KB
Raw

Mission 1. 숫자 야구 게임 - MVC 패턴 적용

미션 개요

  • 핵심 키워드: MVC, ES6 클래스

구현 결과

강예령 남유성
브랜치 cactus hippo
PR PR #2 PR #1

스터디 세션 기록

날짜: 2026.05.27 ~ 2026.05.29

공통으로 어려웠던 점

Model, View, Controller 역할 분리

  • 컴퓨터 숫자(정답) 로직의 선언과 호출 위치

    논의 전

    • 강예령: 선언 - Model, 호출 - Controller
    • 남유성: 선언 - Model, 호출 - Model

    논의 후 결과

    • 선언(Model): 난수 생성 범위, 자릿수, 중복 여부 등 정답을 생성하는 조건은 숫자 야구 게임의 핵심 도메인 규칙이므로 Model이 소유한다.
    • 호출(Controller): Controller는 애플리케이션의 전체적인 제어 흐름과 라이프사이클을 관장한다. 따라서 게임의 시작 및 재시작 시점을 판단하여 Model에게 정답 생성을 요청하고, 반환된 데이터를 관리하는 제어권은 Controller가 갖는 것이 적절하다고 판단했다.

  • 사용자 입력값 검증 및 가공 로직 선언 위치

    논의 전

    • 강예령: 검증 - Model, 가공 - Controller
    • 남유성: 검증 - Model, 가공 - Model

    논의 후 결과

    • 검증(Model): 데이터가 시스템의 요구 조건에 부합하는지 확인하여 데이터의 무결성을 보호하는 것은 도메인의 핵심 규칙이므로 Model이 수행한다.
    • 가공(Controller): View에서 유입된 원시 문자열 데이터를 Model이 연산할 수 있는 숫자 배열 형태로 변환하는 것은 도메인 규칙이 아닌 '형식 변환'의 영역이다. 외부 환경의 입력 인터페이스를 격리해 Model이 유입 경로를 모른 채 순수한 데이터 타입만 안전하게 처리할 수 있도록 중재하는 것은 Controller의 책임이기 때문이다.

  • Controller 내부에 DOM 종속성을 없애는 방식

    논의 후 결과

    • Controller가 HTML 구조(id, class 등)나 DOM 객체에 직접 접근하면 MVC의 분리 원칙이 깨진다. 이를 해결하기 위해 View가 외부로 이벤트 바인딩 인터페이스(메서드)만 노출하고, Controller는 내부에서 실행할 비즈니스 로직을 콜백 함수(Handler) 형태로 View에 주입하는 디자인 패턴을 적용하여 결합도를 느슨하게 유지했다.

서로 다르게 접근한 부분

1. getElementById vs querySelector

기본 동작

document.getElementById("submit")       // id만 가능
document.querySelector("#submit")        // CSS 선택자 전부 가능
// querySelector만 가능한 것들
document.querySelector(".class-name")
document.querySelector("input[type='text']")
document.querySelector("#app > button:first-child")

언제 뭘 쓸까?

  • id 하나만 찾는 거라면 getElementById를 사용하는 것이 의도가 명확하고 빠르다.
  • 클래스, 속성, 복합 선택이 필요하면 querySelector을 사용하자.
  • 팀/프로젝트 내 일관성이 제일 중요하기 때문에 getElementById, querySelector을 섞어 사용하지 말자.

2. hidden 속성 vs style.display = "none"

기본 동작

<!-- HTML 속성 -->
<button hidden>재시작</button>
 
<!-- 인라인 스타일 -->
<button style="display: none">재시작</button>

둘 다 화면에서 숨기고 공간을 차지하지 않는다는 공통점을 갖는다.

  • hidden 속성
    • HTML 태그 자체에 부여하는 표준 속성이다.
    • CSS 우선순위가 매우 낮다. 만약 CSS 파일에 해당 요소를 display: flex;나 display: block;으로 지정해 두었다면, hidden 속성을 주어도 무시되고 화면에 나타나는 버그가 발생하기 쉽다.
  • style.display = "none"
    • 요소의 인라인 스타일을 직접 조작한다.
    • CSS 속성이므로 우선순위가 높다.

가장 권장되는 방식: CSS 클래스로 제어하기

button.classList.add("hidden");
button.classList.remove("hidden");
.hidden { display: none; }

3. e.preventDefault() vs <button type="button">

<form> 안의 <button>은 기본값이 type="submit"이다. 그 이유는 원래 폼은 데이터를 서버로 제출하기 위해 만든 것이기 때문이다. 따라서, 버튼 클릭 시 form이 submit되면서 페이지가 새로고침되는 기본 동작이 발생한다.

<form> 태그 안에서 버튼을 누를 때 페이지가 새로고침되는 것을 막기 위한 방법으로 두 가지가 있다.

  • e.preventDefault()
    • 자바스크립트 이벤트 핸들러 안에서 기본 동작을 강제로 취소시키는 메서드이다.
    • 이벤트 발생 후에 차단하는 것이다.
  • <button type="button">
    • HTML 마크업 단계에서 이 버튼은 단순한 '클릭용 버튼'이 되어 폼 전송(새로고침)을 아예 시도하지 않는다.

인상 깊었던 코드

강예령

  • 사용자 중심의 에러 핸들링: 입력창 초기화, 오토 포커스를 통한 UX 향상 및 재입력 유도
this.renderError = function (errMessage) {
  alert(errMessage);
  this.$userInput.value = "";
  this.$userInput.focus();
};

남유성

  • 매직 넘버 상수화: 하드코딩 값 분리를 통한 의미 부여 및 재사용성 확보
const DIGIT_COUNT = 3;
const MIN_NUMBER = 1;
const MAX_NUMBER = 9;
export const ERROR_MESSAGE = "1~9 사이 서로 다른 숫자 3개를 입력하세요.";
  • 유효성 검증 로직: 문자열 특성과 정규식을 활용한 간결한 검증 조건 구성
isValidUserInputString(input) {
    if (input.length !== DIGIT_COUNT) return false;
    if (!/^[1-9]+$/.test(input)) return false;
    return new Set(input.split("")).size === DIGIT_COUNT;
  }