2026/03/10 - 9, 10일째

어제 적으려고 했는데 침대에 눕자마자 잠에 들어버려서 오늘 두 개를 작성한다.

 

어제 한 일

1. 깃허브 피드백 받은거 수정하기

2. 원정대 활동 시작하기

 

오늘 한 일

1. 프론트엔드 강의 듣기

2. 2차 미션 어떻게 할지 구상하기

3. 알고리즘 팀 맺기

 

오늘 해야할 일

1. 알고리즘 1문제 풀기

2. 프로토체인과 class 공부하기

 

9일째

9일째는 짧게 작성하겠다. 사실 멘토님 리뷰에 따른 코드를 수정하느라 정신 없게 보냈다.

오전 10시에 도착해서 오후 6시까지 코드 수정만 했다.

내일까지 merge를 해야하다 보니 저녁 전에는 재요청을 보내야 해서 바빴다.

대부분의 시간을 여기에 보냈고, 원정대 활동을 시작했다.

원정대는 자신이 원하는 주제에 들어가 팀과 함께 번개처럼 깊게 파보는 활동이다.

팀활동을 하고 후에 진행을 발표한다.

내가 정한 주제는 프로토타입 체인 이해 — class 문법 뒤에서 일어나는 일을 설명하고 객체 동작 예측하기 이다.

class와 객체가 아직 약하다고 생각해서 정했다.

다른 주제는 다음과 같다.

 

다른 주제를 보면 무언가를 말 할 수 있지만 프로토타입 체인은 말을 할 수 없어서 선택한 이유도 있다.

첫 날은 조를 4명씩 나누고 각 조마다 어떻게 진행할지 합의를 하는 시간이다.

아직 프로토타입 체인에 대해 잘 모르기 때문에 각자 모던 자바스크립트 deep dive를 읽고 배운점, 느낀점, 앞으로 어떻게 진행하면 좋을지 수요일까지 생각하기로 했다.

집가서 프로토체인에 대해 번개처럼 깊게 파볼 생각이다. 여기서 책을 읽으려니 잠이 와서 집중이 안된다.

10일째

오전에 프론트엔드 강의를 했다.

콘솔로 만든 로또 시스템에 DOM 기능을 붙여 웹에 띄우는 단계이다.

오랜만에 html과 JS로 웹을 만드려니 DOM과 이벤트 처리 부분에서 막막하다. 공부를 다시 해야겠다.

수업 시간에는 1단계에서 만든것으로 어떻게 하면 2단계를 쉽게 할 수 있을지 생각하는 수업이다.

1단계 코드에서 수정해야할 부분은 input 처리 부분이라고 생각한다. 콘솔로 받는 것을 화면으로 띄워야 하니 이 부분이 바뀌어야될 것이다.

페어와 함께 코드랩으로 step1 코드를 어떻게 하면 좋을지도 정리했다.

결과는 다음과 같다.

# 관심사 분리 Lab - 토론 정리

## STEP 1 · 관찰: 도메인과 UI가 섞여 있는 코드
> Q1. 각 메서드를 "데이터를 다루는 것"과 "결과를 보여주는 것"으로 나눠보세요.
> Q2. printNumbers()와 matchCount()의 차이는 무엇인가요? 하나를 제거하면 나머지에 영향이 있을까요?
> Q3. 만약 콘솔이 아니라 웹 화면에 결과를 보여줘야 한다면, 어떤 메서드를 바꿔야 할까요?

## Q1. 메서드 나누기
"데이터를 다루는 것": matchCount(), validate()
"결과를 보여주는 것": printNumbers(), printMatchResult()

validate()가 "데이터를 다루는 것"인 이유는 해당 함수가 오류를 던지고 다른 함수가 오류 메시지를 출력하는 형태로 가져오기 때문이다.

## Q2. printNumbers()와 matchCount() 차이점
matchCount()는 데이터를 가공하는 함수이지만, printNumbers()는 있는 데이터를 가져와 출력하는 함수이다.
둘 중 하나를 제거해도 나머지에 영향이 없다. matchCount()에서 반환하는 값이 printNumbers()에 사용하지 않기 때문이다.

## Q3. UI에 보여주기 위해 수정해야 하는 함수.
printNumbers()와 printMatchResult().
console.log()로 값을 보내야 하기보다는 UI 로직에 값을 보내야한다.


## STEP 2 · 문제 발견: UI를 바꾸면 테스트가 깨집니다
> Q1. 깨진 테스트를 살펴보세요. 이 테스트가 검증하는 건 "도메인 로직"인가요, "출력 방식"인가요?
> Q2. 깨진 테스트와 깨지지 않은 테스트를 비교해보세요. 무엇이 다른가요?
> Q3. 그렇다면, 이 문제를 어떻게 해결할 수 있을까요?

## Q1. 테스트 검증 방식.
출력 방식이라고 생각한다. 출력이 배열인지 확인하기 때문이다.

## Q2. 테스트 차이 비교.
깨지지 않는 테스트는 반환값을 테스트하지만,
깨지는 테스트는 출력 형식을 테스트한다.

## Q3. 문제 해결법.
깨지지 않는 문제 해결법은 return 값을 console.log("[" + this.#numbers.join(", ") + "]"); 전체로 반환한다.


## STEP 3 · 리팩터링: 도메인에서 UI를 분리하세요
> Q1. getNumbers()가 복사본을 반환해야 하는 이유는 무엇인가요? 원본 배열을 반환하면 어떤 문제가 생길까요?
> Q2. printNumbers()를 제거한 후, 테스트 코드에서 달라진 점은 무엇인가요?
> Q3. 이제 Lotto 클래스는 "어떻게 보여줄지"에 대해 알고 있나요?

## Q1. get 복사본 반환 이유
원본 배열을 수정하면 안되기 때문이다.
전체 데이터가 수정될 수 있다.

## Q2. 달라진 점
출력값을 테스트하지 않고 메서드의 반환값을 테스트한다.

## Q3. 어떻게 보여주지
네.

## STEP 4 · 완성: 도메인은 그대로, UI만 새로 붙이기
> Q1. Lotto.js 탭을 확인해보세요. Step 3에서 완성한 코드가 한 줄도 바뀌지 않았습니다. 왜 가능할까요?
> Q2. renderLottoToHTML은 Lotto 클래스 안에 있어야 할까요, 밖에 있어야 할까요? 그 이유는?
> Q3. 만약 "모바일 앱용 렌더링"이 추가된다면, 어떤 파일만 추가하면 될까요?

## Q1.
도메인 객체가 어떻게 보여줄지를 모르게 만들었기 때문이다.

## Q2.
밖에 있어야 합니다. 도메인 객체가 어떻게 보여줄지 모르게 만들어야 하기 때문입니다.

## Q3.
모바일 전용 html 파일을 만든다.


---
작성일: 2026. 3. 10.

 

가장 기억에 남는 것은

도메인 객체가 어떻게 보여지는지를 모르게 해라는 말이다.

즉, 관심사 분리를 잘해라는 말이다.

도메인에 내가 띄우고 싶은 말을 작성하면 안된다는 뜻이다.

이를 유념하면서 만들어 보아야 겠다.

 

llm 사용에 관해서도 이야기를 해주셨다.

llm을 전문가로 만들어서 의미있는 작업 순서를 만들어라는 내용이다.

결과만 뽑지말고 프롬프트를 순서대로 작성해서 생각하면서 사용해라는 의미로 보인다.

탐색·발산이 필요할 때 
"이 문제를 다양한 각도로 보여줘. 정답을 찾는 게 아니라 아직 생각 못한 관점이 있는지 확인하고 싶어." 이럴 땐 AI가 틀려도 괜찮아요. 아이디어 자극이 목적이니까요.

구현·검증이 필요할 때
의도를 최대한 명확하게 정의하고, 결과를 반드시 직접 검증해요. 테스트 케이스나 체크리스트로 확인해요.

학습할 때
AI한테 답을 먼저 묻지 않아요. 내 생각을 먼저 정리하고, AI의 설명과 비교해요. "내가 이해한 게 맞나?"를 확인하는 용도로 씁니다.

 

그리고 이번에는 ui 테스트를 tdd로 설계하기로 했다.

보통 bdd로 하는데 tdd를 배우는 만큼 tdd를 적용하기로 했다.

playwright를 이용해 ui 로직 테스트를 작성할 생각이다. playwright는 잘 몰라서 사용법을 찾아보고 작성하는데 쉬운 것 같으면서도 아직 익숙하지 않다. 계속 써봐야겠다.

 

연극 조원과 함께 알고리즘 공부를 시작하기로 했다.

1일 1알고리즘을 목표로 정해진 문제를 풀기로 했다. 처음 시작이니 이번 주는 몸풀기 문제를 풀어보자고 합의했다.

Two Sum - LeetCode

Two Sum - LeetCode

첫 문제는 LeetCode의 첫 관문인 Two Sum이다.

익숙한 문제이지만 알고리즘이 오랜만이어서 감각을 깨워야겠다.

문제를 풀고 서로 푼 방식에 대해 이야기도 나누는 스터디니 열심히 해야겠다.

 

이제 어느정도 적응이 되었다. 다른 분하고도 약간씩 대화를 한다.

열심히 해야겠다.