이번 회고록은..
공부했던 내용 정리와 2주간 프리코스를 진행하면서 마인드셋을 재정비한 과정을 담았다. 미래의 내가 봤을 때 용기를 얻고 가면 좋겠다!
자동차 경주 PR
리뷰해 주시면 반드시 맞리뷰로 보답 드립니다..!
1. 디자인 패턴
이번 미션에서 초점을 둔 부분은 '이 코드를 협업하는 사람들이 보는 거라 생각하고 쉽게 작성하자'였다. 그러다 보니 자연스럽게 이런 저런 시도를 해 보게 되었는데, 가장 첫 단계가 디자인 패턴의 사용이었다.
굳이 디자인 패턴을 도입해야 하나? 라는 의견이 많은 건 알고 있다. 나도 1주차엔 디자인 패턴 없이 로직이 잘 보이는 코드를 만들겠다는 생각으로 짰는데,
함수 네이밍만으로 객체가 가지고 있는 책임이 다 표현되기가 힘들다는 한계가 있었고, 무엇보다 직접 경험해야 좋은지 나쁜지 판단할 수 있으니까 그냥 실행에 옮겼다. (진행시켜)
🌟 MVC 패턴
Model: 데이터와 관련된 부분
View: 사용자한테 보여지는 부분
Controller: Model과 View를 이어주는 부분
개념은 참 간단하다. 간단하지만 이걸 사용해서 프로그램을 만들려니 어디서부터 건드려야 할지 막막했다. 그러던 중 MVC 모델을 다룬 테코톡을 발견했다.
⚠️ 주의사항
- 모델은 컨트롤러와 뷰에 의존하지 않아야 한다. 즉, 모델 내부에 컨트롤러와 뷰에 관련된 코드가 있으면 안된다.
- 뷰는 모델에만 의존해야 하고, 컨트롤러에는 의존하면 안된다.
- 뷰가 모델로부터 데이터를 받을 때는 사용자마다 다르게 보여줘야 하는 데이터만 받아야 한다.
View = UI(레이아웃) + Model로부터 받은 데이터- 컨트롤러 내부에는 모델과 뷰의 코드가 있을 수 있다.
- 뷰가 모델로부터 데이터를 받을 때, 반드시 컨트롤러에서 받아야 한다.
위에서 언급한 주의사항을 짚어 보면서 가장 의존성이 낮은 Model부터 접근해서 개발했다.
Model을 만들고 나니 Model의 데이터를 받는 View를 개발할 수 있었고, 부품들을 먼저 만들고 나니 이를 조립하는 Controller 개발은 수월하게 할 수 있었다.
🤔 고민들
MVC 모델을 처음 써보는 만큼 올바르게 설계했는지에 대한 고민이 많았다.
[고민 1] View 에서 유효성 검사를 해도 되는가?
유효성 검사를 하는 부분을 View에 넣을까, Controller에 넣을까 고민하다가 컨트롤러에 데이터를 가공하는 로직까지 들어가면 데이터 흐름이 명확하게 보이지 않을 것 같아 뷰에 넣어 추상화하는 방법을 택했다.
[고민 2] DTO라는 개념을 맞게 사용했나?
이건 MVC와는 조금 떨어진 이야기인데, 자동차의 이름과 위치를 저장하는 CarModel이라는 클래스 인스턴스의 데이터를 Controller와 다른 Model에 전달하기 위해 DTO라는 개념을 차용했다.
class CarModel {
constructor(name) {
this.name = name;
this.position = 0;
}
/**
* 자동차의 정보를 DTO로 반환
* @returns {{name:string; position: number;}} CarModelDTO
*/
getCarModelDTO() {
return { name: this.name, position: this.position };
}
}2. JSDoc
위 코드에서 getCarModelDTO() 선언부 위에 반환값의 type을 명시해주는 특별한 주석이 JSDoc이다.
CarModel 인스턴스와 CarModel의 정보만 담고 있는 객체(나중에 DTO로 명명한)을 같은 클래스 안에서 사용할 일이 생겼는데, DTO로 명명하기 전이라 함수에서 사용해야 하는 게 인스턴스인지, 객체인지 헷갈리는 상황이 발생했다.
타입 스크립트라면 타입을 명시할 수 있어서 좋을 텐데..라는 생각을 하다가 코드 리뷰를 할 때 본 특이한 형태의 주석이 머릿속에 스쳐 지나갔다. 구글링을 해보니 그런 스타일의 주석을 JSDoc이라고 하는 것을 알게 됐고, 모든 함수에 매개변수와 반환값의 타입을 달아주기 시작했다.
그러다가 최종적으로 과제를 제출하기 전, 내가 놓친 게 있을까 공통 피드백을 살펴봤는데
변수 이름, 함수(메서드) 이름을 통해 어떤 의도인지가 드러난다면 굳이 주석을 달지 않는다.
라는 내용이 눈에 확 들어와서 타입을 쉽게 추론하기 힘든 부분만 남기고 싹 지웠다.(ㅋㅋ)
참고로, JSDoc을 작성하면 VSCode에서 아래와 같이 표시된다!
3. Validator
1주 차 미션에서 남한테 보여주기 제일 창피한 코드를 고르라면 Validator였다(ㅠㅠ). 먼저 코드를 보고 시작하자.
🤔 고민들
[고민 1] 위치
보통 프로젝트를 하면 utils 디렉토리 아래에 Validator.js를 만들어 모듈을 임포트 하는 방식으로 사용했는데, 문득 '저렇게 조건이 모인 함수는 범용적으로 쓰이는 코드라고 보기 어렵지 않나..?' 하는 의문이 생겼다.
그래서 이번엔 MVC 중 하나를 사용해 만들어야겠다는 생각을 했고, View에서 유효성 검사를 해야 하는 상황이었기 때문에 주의사항을 리마인드해서 Model 컴포넌트로 만들어 봤다.
[고민 2] 가독성
위 코드를 보면 알겠지만 가독성이 매우.. 안 좋다. 내가 찾아낸 이유는 크게 두 가지인데, 첫 번째로 if-else if 구조가 쉽게 읽히지 않고, 두 번째로 조건문 안 표현식이 명확하지 않다는 것이었다.
덧붙여서 테스트를 모두 통과한 문자열을 반환하고 있어 하나의 책임만 담당하고 있다고 보기 어려웠다.
그래서 고친 코드에서는 if만을 사용해서 케이스를 구성하고, 조건문엔 문자열 유틸 모듈을 호출하는 식으로 가독성을 높였다.
이전 버전보다 훨씬 깔끔하긴 하지만, 잘만 하면 객체를 만들어서 가독성 좋고 유지 보수성 높게 만들 수 있을 것 같다는 생각이 든다. 다음 미션에서 좀 더 연구해 보기로!
4. Object.freeze()
마지막으로 소소하지만 작은 변화인 Object.freeze()에 대한 내용이다.
상수를 선언할 때 const로 선언하고 대문자로 적어줬지만 우린 다 안다. JS에서 객체는 그렇게 선언해도 프로퍼티 안 값을 바꿀 수 있다는 것을..
그래서 언제나 '이게 진정한 의미의 상수가 맞나?'라는 생각이 있었는데, 코드리뷰를 하면서 Object.freeze() 함수를 많이 사용하시는 걸 보고 저런 것도 있구나! 싶어서 바로 적용했다.
📒 일기장
여기서부터는 2주동안 미션을 진행하면서 겪은 생각을 기록합니다.
비교
1주차 프리코스가 끝나고 코드리뷰가 열렸다.
미션 중에 최선을 다해 리팩토링을 했기 때문에 깔끔하게 작성했다는 나름의 자부심이 있었는데, 코드리뷰를 통해 잘 하는 분들의 코드를 보고 안주해 버린 나 자신에 부끄러웠다.😂
하지만 그것도 한두 명이지, 더 많은 코드를 보면서 '살면서 한 프로그램의 700개의 버전을 볼 기회가 흔할까?'라는 생각이 들기 시작했다. 그리고 이 기회를 제대로 활용해야겠다는 각오가 섰다. 내가 본 코드 중 잘 짰다고 생각한 코드의 어떤 부분이 특별한 건지 고민하면서 이걸 적용해보자는 마인드로 정리하다 보니 목표가 생기고 열심히 참여할 에너지가 생겼다.
그렇게 2주차 미션을 제출하면서 내 코드가 나도 모르게 발전했다는 사실을 발견할 수 있었다. 어쩌면 비교.. 나쁘지 않을 지도?
잘 쉬자
프리코스도 어느새 절반이 지났다. 그동안 졸업 전시조차 신경 쓸 새 없이 머릿속에 '우테코' 세 글자만 박혀서 지냈는데, 문득 이렇게 했는데 탈락하면 어떡하지..?라는 생각이 스쳐 지나갔다. 문제는 이 상상이 꽤나 무섭게 다가왔다는 것이다.
프리코스라는 지원 과정이 워낙 시스템이 잘 되어 있고, 커뮤니티도 활발하기 때문에 원한다면 푹 빠질 수 있는 환경이다. 실제로 나도 더 나은 방법이 있을까 누워서도 고민하다 3시는 우습게 넘겨버리고, 혹시나 중요한 정보를 놓치진 않았을까 커뮤니티만 보면서 쉬는 시간을 채우는 하루를 반복하며 2주를 보냈다.
몰입하면서 성장하는 경험은 참 좋은 거지만, 건강한 정신 상태로 남은 프리코스를 슬기롭게 마무리해야 돌아봤을 때 자랑스러운 과거가 될 거란 생각이 들었다.
관심을 기울일 채널을 늘리기 위해 한 달 동안 쉬던 요가 수업을 다시 등록했고, 딥 다이브 스터디에 참여했다. 이것도 우테코 커뮤니티에서 구한 거긴 하지만🤭
마무리
아무튼 2주 차도 이렇게 마무리됐다! 오늘 전달된 미션을 보니 1주일이 또 훅 지나갈 것 같은 예감이 들었지만 지금까지 해왔던 것처럼 차근차근 성장하는 방법을 찾아가면서 임할 예정이다.
조금만 더 힘내자~
