2022.03.21 2차 세션

1교시

씰

코드를 어떻게 짰는지

• 로그인 페이지에 회원가입이 같이 있어서 페이지를 아예 나누는 게 좋을 것 같아 페이지로 분리했다. 자바스크립트 파일도 분리하고 SPA 식으로 만들어 보고 싶었으나... 그런 고민에 대해 공유하겠다.
• 처음에 MVC로 짜려 했으나 화면 인터랙션이 많지 않아 리액트스럽게 만들어보려고 했다. 상호작용을 고민했다.
• 로그인/회원가입은 거의 있는 그대로. 로직을 분리하면서 하나의 함수는 하나의 책임을 갖도록 쪼개서 작업했다.
• 탭별 뷰가 필요한데 현 로직으론 그렇게 필요하지 않아서... 작업하면서 일관성이 조금 떨어진 아쉬움이 있었다.
• 주요하게 생각한 부분은 "이벤트를 어떻게 할당하는가", 각각의 이벤트를 직접 설정하는 것보다 위임을 하는 걸 고민했었다.
• 처음에 생각했던 건 타입스크립트 스터디므로 클래스로 구분하는 게 좋다고 생각했고, 아쉽게 끝난 부분이 있다.

회고

• 다른 분들이 코드를 어떻게 짰는지에 대해 볼 수 있어서 좋았다.
• 각각의 생각을 자유롭게 나눌 수 있어서 좋았다. 생각의 폭이 넓어진 것 같다.
• 나름 열심히 짰지만 최선의 코드가 있다라는 게 너무 좋았다.
• 아쉬운 점은 PR 단위가 너무 컸다. 조금 더 세분화해서 PR 올렸으면 좋았을 걸이라는 생각을 했다. 리뷰가 많아지니 번잡한 느낌이 들었다. 한 번의 리뷰를 통해 피드백을 받고 해결하는 형태였으면 좋겠다. 이슈를 쪼개서 각 항목에 PR을 반영하도록 하면 어떨까? 설정을 잘못해서 루즈해진 감이 없잖아 있었다.
• 다음에는 분명하게 이슈와 PR을 연결해야겠다는 생각이 들었다.

예츄

코드를 어떻게 짰는지

• 짧은 것 같은데 상관 없겠져?!
• 앱의 규모가 좀 작다보니 잘게 쪼개자라는 생각을 많이 못 했다. 첫 PR때 짧게 작성하고 올린 게 조금 아쉬웠다.
• 디자인 패턴을 써보지 않아서 그렇게 분리하자라는 생각을 하진 않았다.
• 현재 페이지 내에서 나눌 수 있는 것을 나누자라는 생각을 했다.
• API 부분을 정리해서 일관화 되게 작성했고, 화면이 작다보니 나눌 생각을 못 했다. 추후에 앱의 규모가 커지면 나누는 게 좋겠다라는 생각이 들었다.
• 최대한 간편하게 만들어보자라는 취지로 진행했다. 로그인-메인 페이지로 작업을 했다.
• HTML 태그가 너무 많이 들어있어서 어떻게 나눌지 고민했고, 최대한 빼보자라는 생각을 했다. 겹치는 부분을 컴포넌트화 해서 분리했다.

회고

• 좋았던 점은... 코드 리뷰를 처음 받아봐서 집중적으로 많은 사람에게 받을 수 있다는 게 굉장히 좋았다.
• 내가 모르는 게 많구나... 라는 걸 느꼈고 다른 사람들의 다양한 코드를 본 게 매우 좋았다. 레퍼런스도 달아주고, 참고하여 배울 수 있는 게 너무 좋았다.
• 아쉬운 점은... 개인적으로 시간을 많이 할애하지 못해서 다른 사람들의 코드를 보기 쉽지 않았다. 이해하기도 어려웠고, 그 코드를 모르니까...
• 개선해볼 점, 다른 분들의 코드를 더 많이 보고 리뷰를 다는 것

나무

코드를 어떻게 짰는지

• 늦게 참여를 해서...ㅠ
• 간단하게 바꿀 수 있는 것들은 타입스크립트로 바꾸려 시도했고, 리팩토링을 하면서 상수를 분리하고 타입들을 자동완성으로 쉽게 사용할 수 있게 객체화하는 데 신경썼다.
• 고민만 하다가 적용을 못했던 부분이 페이지를 분리한다거나 컴포넌트화를 한다던가... 하면서 평소에 그런 기준이 없거나 너무 리액트에 길들여져 있어서 아찔한 느낌이 있었다.
• 함수 같은 기능적인 부분을 떼는 것을 중점적으로 생각했다.
• 맨 처음 고민한 부분은 "메세지"인데... 분리한다던가 하는 고민만 하다가 적용을 많이 못했던 게 아쉬웠다.
• 구조에 대한 생각을 하게 된 계기가 되었다.

회고

• 좋았던 점... 회사에서 원맨쇼를 하다보니 일단 돌아가는 게 우선이었어서 품질, 컨벤션을 많이 못 지켰었다. 이번에 하면서 무작정 분리를 하는 것보다 보여지는 것에 중점을 둘 수 있었고, 리뷰를 통해 놓친 부분을 확인할 수 있어서 좋았다. 다른 사람의 코드를 볼 수 있어서 좋았으며 바닐라를 상기할 수 있어서 좋았다.
• 클래스형으로 짠 코드가 너무 낯설었다.
• 아쉬웠던 점... 정신을 너무 늦게 차려서...ㅠ 시간을 충분히 할애하지 못했다. 다른 사람들의 코드를 보는 데 너무 집중해서 코멘트를 많이 못 달아봤다. 오늘부터는 조금 더 적극적으로 리뷰 받고 진행하겠다.
• 개선할 점... 시간을 조금 더 들여서 하고, 리뷰도 하고 싶고... PR 목표에도 썼었던 것이 정리를 잘하자는 목적이 있으므로 이를 구체화하고 싶다. 신경을 안 써도 몸에서 나올 수 있도록 충분히 고민해서 좋은 코더가 되고 싶습니다.

민오

코드를 어떻게 짰는지

• 격리 중이라 시간이 너무 많아서... 하루 종일 이것만 했다. 이상한 걸 많이 해봤다. 바닐라로 프레임워크를 만들어보고 싶어서 겸사겸사 진행을 했다. 스터디 방향이랑은 안맞게 진행한 것 같아서 좀 아쉽다.
• 컴포넌트를 만들어서 작성해보려고 했는데, 각 컴포넌트로 분리했고 뷰단도 쪼갤 수 있었다. 각 기능별로 컴포넌트를 분리했고, 몰랐는데 알게된 것은 컴포넌트가 이벤트 공유를 해야 했었는데 만약 네비게이션에서 탭이 여러 개라면 다른 컴포넌트에서 이벤트를 받아야 할 때 이벤트 버스 등을(자바에서) 활용해야 했고, 이벤트 에미터라는 커스텀 이벤트를 작성해 컴포넌트간 공유하는 기능을 작성해볼 수 있었다.
• 분리한 부분은 위에 언급한 게 끝이다.
• 작성하면서 세분화를 하려고 노력했는데, 가령 유저 하위에 북마크 클래스를 두거나, 각 의존성 결합을 어떻게 할지 고민을 해봤다. 모델과 뷰단을 분리하기 위해 코드를 작성했다.

회고

• 스터디 하면서 느낀 점... 스터디를 처음 해보는데, 신기한 경험이었고 코드 리뷰도 처음 해봤고... PR도 처음이었다. 엄청 좋았다.
• 혼자 개발을 하면 아무런 생각 없이 의식의 흐름대로 만드는데, 내가 만드는 것을 생각하게 되는 좋은 경험이 되었다.
• 아쉬운 점... 처음 해보는 거라 어떤 방향, 어떤 흐름인지 몰라서 막 달렸다. 뒤돌아보니까 맞지 않게 진행을 한 느낌이다. 코로나라 집에 있는 시간도 많고... 생각나면 계속 하고 있으니 호흡이 너무 차이가 났던 것 같다. 다른 방향으로 많이 간 것은 아닌가... 리뷰를 남기는 걸 처음 보다 보니 커밋을 막 올리면 안됐던것 같은데 싶었다.
• 다음 주에는 커밋을 잘게 쪼개서 올려보려고 한다. 2주차에는 정리를 잘해서 방향에 맞는 쪽으로 해야겠다고 생각했다.

조이

코드를 어떻게 짰는지

• 기존 코드에서 많이 달라진 것은 없고, 로그인과 회원가입만 나눠 놨다. html 페이지에 맞게 나눠놨다.
• 많이 수정한 부분은 예츄가 말했던 것처럼 컴포넌트 부분으로 나눠보고 싶어서 도전을 했고, 바닐라를 처음하다보니 많이 어려워서 나눠놓는 형태로만 진행했다.
• 코드를 수정하는 것보다 이해하는 게 먼저라고 생각해서 주석에 신경을 많이 썼다.
• 많이 수정되지 않아서 코드 쪽은ㅠ

회고

• 좋았던 점... 바닐라는 잘 사용해보지 않아서 다른 사람의 코드를 보고 리뷰를 받을 수 있다는 것이 좋았다. 이쪽은 이렇게 수정해야겠다는 생각이 들었을 때 좋았다.
• 아쉬웠던 점... 막상 이 프로젝트를 마주하니 어떻게 수정할지 너무 막막했다. 이 부분에 대해 고민을 많이 하느라 시간을 버린 것이 아쉬웠다.
• 개선할 점... 바닐라 코드를 보면서 다른 사람들의 코드를 보며 실력을 키워나가야 겠다는 생각하고 30분 고민하고 그 이후에는 도움을 요청해서 빠르게 해결해야겠다는 생각을 했다.

콘솔

코드를 어떻게 짰는지

• 코드를 사실 아키텍처, 디자인 패턴에 대해 할 수 있다고 생각했는데(리액트의 경우), 실제로 바닐라를 보며 어려운 점이 많았다.
• 크게 분류하는 작업은 하지 못했으나 최대한 작업을 했던 부분들은 파랑이 스파게티로 짠 코드를 리팩토링하자는 생각으로 접근했고, 추상화/중복 코드를 최대한 겹치지 않고 가독성이 좋게끔 포커싱을 맞춰 코드를 수정했다.
• 네비게이션 바 같은 경우도 직관적으로 플로우를 타서 이해할 수 있게 신경써서 main.js 내부로 분리하는 데 초점을 맞췄다.
• 다른 사람들 코드를 보니 클래스 형을 많이 사용한 것 같다. 클래스 형은 처음 써보는 것 같아서 인강도 보고 유틸함수를 클래스형으로 작성해보았다. 리뷰 받으면서 함수 기능만 하는 것이라면... 이라는 취지에서 시도해본 것이다.
• 크게 파일 구조나 모델, 뷰... 이렇게 분리를 하는 작업을 하진 않았다.

회고

• 좋았던 점... 앞에 많은 사람들이 이야기한 것처럼 다른 사람의 코드, 스타일, 의도를 볼 수 있어서 좋았고 리뷰를 하는 입장으로써 "생각하는게 맞나"하면서 배울점이 많았다.
• 아쉬웠던 덤... 예츄가 이야기한 것처럼 실력이 부족하다보니까 어떤 코드에 대해 토론을 하고 생각을 하는 기회가 있으면 좋겠다. 다른 사람의 코드를 보고 온전히 이해할 수 없었기 때문이다.
• 개선하면 좋을 점... 다른 사람의 코드를 이해하기 위해 최선을 다하고, 궁금한 점에 대해 적극적으로 이야기하는 기회가 있었으면 좋겠다.

파랑

코드를 어떻게 짰는지

• js에서 클래스를 안 좋아한다. 상속보단 합성을 위해 함수형을 쓰려 하는데, ts를 적용하게 되면, 객체 지향적이라고 느낄 수 있음.
  • 객체지향 공부하는 겸 공유하면 좋겠다는 취지에 class로 작성함
• 유틸, 페이지, 컴포넌트를 분리했다.
• 코드의 가독성이 떨어졌고, 완벽하지 않다보니 애로사항이 있었음. 작성 자체에 의의를 두는것으로 만족
• 디스코드의 http-client를 통해 영감을 얻어 따라 api관련 코드들을 구현해봤다.
• 상속에 따라 관계를 고민했다.
• 이벤트 바인딩에 대해서 고민을 했음. 최대한 안보이게. 그런데 가독성이 떨어져 아쉬움.
• 일부러 쉬운 코드를 입력하지 않은 이유는 타입스크립트를 다양하게 사용하기 위해서.

회고

• 철학이 다른분들을 같은 그룹 안에서 명확하게 볼 수(리뷰) 있어 좋았다.
• 시간을 많이 할애하지 못해서 아쉬웠다.
• 보다 더 구조화를 해서 스터디의 의도를 분명화 하지 못해 아쉽다.
• 스터디에 재미를 느낄 수 있게 더 좋은 설계를 해보자

---

2교시

페어 프로그래밍 - 1

간단한 함수 구현하기

1팀

씰, 예츄

function watermelon(num: number): string {
  let result = '';
  for (let i = 0; i < num; i += 1) {
    if (i % 2 === 0) {
      result += '수';
    } else {
      result += '박';
    }
  }
  return result;
}

console.log(watermelon(4));

2팀

민오, 나무

function waterMelon(strLength) {
  const WORD = "수박";

  let resultStr = "";

  for (let i = 0; i < strLength; i++) {
    const n = i % 2;

    resultStr += WORD[n];
  }

  return resultStr;
}

function waterMelon2(strLength) {
  const WORD = "수박";

  const numbers = [...Array(strLength).keys()];
  const findWord = (x) => WORD[x % 2];

  //=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  return numbers.map(findWord).join("");
}

3팀

조이, 콘솔, 파랑

const waterMelon = (repeatNumber) => {
  let result = '';
  if (repeatNumber < 0) return '음수 입니다.';
  for (let i = 0; i < repeatNumber; i++) {
    if (i % 2 === 0) {
      result += '수';
    } else {
      result += '박';
    }
  }
  return result;
};

console.log(waterMelon(0));

페어 프로그래밍 - 2

1팀

씰, 예츄

const loginButton = document.querySelector('#loginButton');

loginButton.addEventListener('click', () => {
  const loginName = document.querySelector('#login-name');
  const loginPass = document.querySelector('#login-pass');
  const loginPassCheck = document.querySelector('#login-pass-check');

  if (!loginName.value || !loginPass.value || !loginPassCheck.value) {
    alert('값을 입력해주세요.');
    return;
  }

  if (loginPass.value !== loginPassCheck.value) {
    alert('비밀번호가 일치하지 않습니다.');
    return;
  }

  alert('회원가입이 완료되었습니다.');
  loginName.value = '';
  loginPass.value = '';
  loginPassCheck.value = '';
});

2팀

민오, 나무

declare type JoinArgs = {
  userName: string;
  password: string;
  passwordCheck: string;
};

window.addEventListener("DOMContentLoaded", () => {
  const userNameElement = document.querySelector("#login-name");
  const passwordElement = document.querySelector("#login-pass");
  const passwordCheckElement = document.querySelector("#login-pass-check");

  const joinButton = document.querySelector("#loginButton");

  function join({ userName, password, passwordCheck }: JoinArgs): void {
    if (password !== passwordCheck) {
      return alert("비밀번호가 맞지 않습니다!!");
    }
  }

  joinButton.addEventListener("click", (e) => {
    const { value: userName } = userNameElement as HTMLInputElement;
    const { value: password } = passwordElement as HTMLInputElement;
    const { value: passwordCheck } = passwordCheckElement as HTMLInputElement;

    join({ userName, password, passwordCheck });
  });
});

3팀

조이, 콘솔, 파랑

const form = document.querySelector('.login-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();

  if (!e.target[0].value || !e.target[1].value || !e.target[2].value) {
    alert('값을 입력해주세요.');
    return;
  }

  if (e.target[1].value !== e.target[2].value) {
    alert('비밀번호가 맞지 않습니다.');
    return;
  }

  alert('회원가입이 완료되었습니다!');
  e.target[0].value = '';
  e.target[1].value = '';
  e.target[2].value = '';
});