사용자 입력 처리의 확장성과 가독성을 위한 구조화 방법? 🤔

[pengooseDev]

현재 제 코드 구조에서는 사용자로부터 입력을 받아, 이를 유효성 검사 후, 모델에 이를 반영하는 세 가지 단계를 거치게 됩니다.

입력(view 호출) => 유효성 검증(에러 처리) => 사용(Model 전달)

  #readCarName() {
    this.#view.readCarName((userInput) => this.#validateCarName(userInput));
  }

  #validateCarName(userInput) {
    try {
      const carNames = splitCarNameToArray(userInput);
      carNames.forEach(validateCarName);

      this.#handleCarNameInput(carNames);
    } catch (error) {
      this.#handleError(error, this.#readCarName.bind(this));
    }
  }

  #handleCarNameInput(carNames) {
    this.#model.setCars(carNames);

    this.#다음_단계();
  }

입력 항목이 늘어나면서, 이에 따른 코드의 복잡성이 증가하고, 많은 반복 코드가 생기게 되었습니다. 특히, 입력사항이 단지 하나 늘었을 뿐인데도 불구하고 이를 처리하는 데 추가로 필요한 코드량이 많아져서 고민이 많습니다. 😨

사용자의 입력을 받고 처리하는 부분을 어떻게 구조화하면 확장성과 가독성을 확보할 수 있을지에 대해, 다른 팀원분들도 많은 고민을 하셨을 것 같은데. 의견을 듣고싶습니다!

어떤 접근법을 사용하셔서 이런 문제를 개선하려고 노력하셨나용? 🤔

[jinyoung234]

제 의견이 정답은 아니겠지만 "변경"의 관점에선 아쉬운 코드 라고 느꼈는데 이유는 아래와 같단 생각입니다!

1. validateCarName이 변경된다면(네이밍이든 자체 구현 메커니즘이 바뀌는 경우) controller 에서도, view에서도 변경이 발생할거 같아요..!
2. readCarName의 callback으로 볼 때 결국 런타임에서 validateCarName은 view에서 실행하게 될 거 같아요. callback을 실행하는 건 view니까요.
3. 제 생각에 inputview는 유저가 입력한 데이터를 controller에게 제공해주는 입장이라 "데이터 생산자" 입장에서 보면 검증 처리해서 검증된 데이터를 controller에게 넘겨주는게 나중에 변경이 발생해도 다른 모듈에 최대한 영향을 주지 않고 inputview 내에서 개선할 수 있을거 같단 생각입니다!
4. inputView 내에서 처리하기 때문에 validateCarName이 변경되어도 view에만 영향이 있을거기 때문에 controller 에서의 의존성(결합도)는 줄어들고 inputview 에서의 응집성은 높아질 거라고 생각합니다.
5. 또한, view가 스스로 validator에게 검증하라고 해서 validator가 error를 throw하게 되면 view를 제어하는 controller 입장에서도 try-catch를 통해 제어할 수 있을거란 생각입니다! controller의 역할은 view와 model을 제어하는데 있다고 생각하거든여

그래서 저는 view에서 검증을 하도록 코드를 만들었답니다! 다른 분들 의견도 궁금하네여 🥹

const InputView = (function InputView() {
  const getUserInput = async (message) => {
    const userInput = await createUserInputByQuestion(message);
    Validator.checkByMessage(userInput, message);
    return userInput;
  };

  return {
    async input(message) {
      const userInput = await getUserInput(message);
      // ..
    },
  };

[frankuserconnect]

@jinyoung234

준일님이 공유해주신 글에서 인사이트를 얻고, 진영님의 코드를 보니 준일님이 말씀해주신 부분이 더 와닿는거 같아요. "view에서 먼저 검증 validator를 처리한다."

1. 사용자 input pattern error등 유효성을 view에서 먼저 잡아주고 -> 데이터를 컨트롤러에게 제공한다.
2. view에서 문제는 view에서 해결을 하게하면 컨트롤러와 모델이 오염 될 경우가 줄어든다.
3. 결론, 어떠한 메소드가 변경이 되어도 view에만 영향이 있고, 데이터 및 도메인 로직에 의존성이 적은 관계로 확장성이 좋아진다.

제가 진영님이 설명해주신 내용을 제대로 이해한것이 맞을까요?

---

• "HTML에 보면 input에 pattern 같은걸 정의할 수 있거든요. view에서 자체적으로 검증을 하는거죠. 하지만 그 조차 확실하지 않기 때문에 input에 입력 받은 값을 client layer에서 별도로 검증하기도 하고, 이 조차 믿을 수 없기 때문에 server에서 또 한 번 처리하기도 합니다."

• "model은 controller와 무관하게 독립적으로 쓰일 수 있어야 한다고 생각해서요!
  만약에 model을 만들 때 엉뚱한 input을 넘겨주면 어떻게 해야 좋을지에 대한 고민입니다 ㅎㅎ
  결국 model 자체가 input에 대한 검증이 필요하지 않을까요?
  controller는 controller layer에서 필요한 검증을 하고, model은 model layer에서 필요한 검증을 하는거죠."

[jinyoung234]

@jinyoung234

준일님이 공유해주신 글에서 인사이트를 얻고, 진영님의 코드를 보니 준일님이 말씀해주신 부분이 더 와닿는거 같아요. "view에서 먼저 검증 validator를 처리한다."

1. 사용자 input pattern error등 유효성을 view에서 먼저 잡아주고 -> 데이터를 컨트롤러에게 제공한다.

2. view에서 문제는 view에서 해결을 하게하면 컨트롤러와 모델이 오염 될 경우가 줄어든다.

3. 결론, 어떠한 메소드가 변경이 되어도 view에만 영향이 있고, 데이터 및 도메인 로직에 의존성이 적은 관계로 확장성이 좋아진다.

제가 진영님이 설명해주신 내용을 제대로 이해한것이 맞을까요?

---

• "HTML에 보면 input에 pattern 같은걸 정의할 수 있거든요. view에서 자체적으로 검증을 하는거죠. 하지만 그 조차 확실하지 않기 때문에 input에 입력 받은 값을 client layer에서 별도로 검증하기도 하고, 이 조차 믿을 수 없기 때문에 server에서 또 한 번 처리하기도 합니다."

• "model은 controller와 무관하게 독립적으로 쓰일 수 있어야 한다고 생각해서요!

만약에 model을 만들 때 엉뚱한 input을 넘겨주면 어떻게 해야 좋을지에 대한 고민입니다 ㅎㅎ

결국 model 자체가 input에 대한 검증이 필요하지 않을까요?

controller는 controller layer에서 필요한 검증을 하고, model은 model layer에서 필요한 검증을 하는거죠."

네 어느 정도 레퍼런스를 받아 작성했습니다 ‼️

1. 이게 제 의도긴 했어요.
2. 컨트롤러는 view에게 검증된 데이터를 받거나(..?) error를 제어한다. 가 제 생각이었어요..! callback은 결국 제어의 역전이 발생하다보니 view가 제어하게 되거든요.
3. 확장성이 좋아지는지는 100% 확신은 없지만 변경에 유연한 코드가 될거 같단 생각입니다. 🥰

[pengooseDev]

호오... 그렇군요.. 말씀하신 부분들을 들어보니, 저번에 준일님이 공유해주신 내용과 맞닿아있네요.
진영님이 말씀하신 "변경"이라는 단어를 기준으로 생각해보니까, 명확해지네요.
레이싱 게임이 아니라 다른 model을 꽂더라도 잘 돌아가는 방식으로 구현하는 것이 "변경"이나 "확장성" 관련해서 좋아보입니다.
이 부분 고려해서 코드에 녹여보겠습니다!
좋은 지식 감사합니다! 😉

[cobocho]

저는 Validation을 검증 대상이 Model인지 아닌지에 따라서 Model과 Controller로 분리하여 책임지도록 수정했습니다!
좀 오래된 글이긴 하지만 이 포스트를 보고 수정하기로 결정했는데

Model은 항상 무결성을 유지해야하며 Model에서 유효성 검사를 실시함으로써 무결성을 유지할 수 있다.

라는 말이 타당해보였기 때문이에요.
하지만 동시에 '그렇다면 프로그램의 흐름을 모델에서 제어해도 괜찮은가?' 라는 생각이 들더라구요.

그래서 저는 Validation에서는 Error를 throw 해주는 단계까지만 책임지고 Error를 catch해서 프로그램을 제어하는건 Controller가 담당하는 방향으로 수정했습니다.
하지만 모든 입력값이 Model로서 관리되는건 아니기에 Model로 생성되지 않는 값들은 Controller에서 처리하도록 구현했어요.
저는 현재 자동차 이름들(array), 자동차 이름(string), 라운드(number) 이 3개의 대상에 대한 Validation이 존재하는데 이 중에서 자동차 이름들(array)은 일회성으로 사용되고 이후에는 원소인 자동차 이름(string)으로서만 사용되기에 Model까지 생성하는건 비효율적이라는 생각이 들어서 자동차 이름들(array)에 대한 Validation만 Controller에서 담당하고 나머지는 Model이 생성되면서 Validation을 실행하도록 했습니다.

class App {
  ...
  #checkValidation(target, validator, trigger) {
    try {
      validator(target);
    } catch (err) {
      this.#showError(err, trigger);
    }
  }

  #getModel(trigger, Model, ...args) {
    try {
      return new Model(...args);
    } catch (err) {
      return this.#showError(err, trigger);
    }
  }

  async #getCarNames() {
    const names = await this.#getUserInput(MESSAGES.REQUEST.ENTER_THE_CARS);
    const nameList = splitByStandard(names);

    this.#checkValidation(nameList, Validator.isValidList, this.#getCarNames);
    this.#setCars(nameList);
  }

  #setCars(names) {
    this.#cars = names.map((name) => this.#getModel(this.#getCarNames, Car, name));
    const completed = this.#cars.every((car) => car);

    if (completed) this.#getRound();
  }

  async #getRound() {
    const round = await this.#getUserInput(MESSAGES.REQUEST.ENTER_THE_ROUND);

    this.#setTrack(round);
  }

  #setTrack(round) {
    this.#track = this.#getModel(this.#getRound, Track, round);
    if (this.#track) this.#startRacing();
  }
  ...
}

class Car {
  constructor(name) {
    Validator.isValidName(name);
    this.#name = name;
  }
 ...
}

class Track {
  constructor(name) {
    Validator.isValidRound(round);
    this.#endRound = round;
  }
 ...
}

[pengooseDev]

저도 Validation의 책임이 Model이나 서비스 레이어로 옮겨간다면 에러를 던지는 것과 처리하는 것을 나눠야한다고 생각합니다 :) Model은 무결성을 위한 Validation을 필요로 한다..! 좋은 글 감사합니다 :)
저는 Model 객체 내부에 validation을 추가하기보단 서비스 레이어(도메인)쪽에 Validation을 추가해보는 쪽으로 진행해보겠습니다 후후 감사합니다! 😄

[jinyoung234]

https://www.youtube.com/watch?v=uoVNJkyXX0I&t=175s 이 영상에서 mvc에서 validate의 주 책임은 controller와 model에 있다고 하고 다른 글들에서도 controller, model에서 처리한다고 하고 view에 과도한 책임은 좋지 않다고하네여 참고하시면 좋을거 같습니다 🥲

@pengooseDev @cobocho @frankuserconnect