Today I Learned
-
프론트엔드 단위 테스트에 하루종일 고통받다 (레벨 테스트 3일차 작업 회고)Today I Learned 2022. 10. 5. 23:59
오늘 구현하려 했던 목표는? 상품 목록 조회, 상품 상세 목록 조회 단위 테스트, 인수 테스트 코드 작성 마치고 통과시키기 선물하기 로직 구현을 위한 사전 준비로 로그인 개념 구현, 선물하기 구현 진행 프론트엔드 테스트 중 인수 테스트를 제외한 Component, Store에 대한 단위 테스트는 지난 14주차를 진행하면서 제대로 완성하지 못했었던 옥의 티였다. 일단 오전 시간 동안 상품 목록 조회, 상품 상세 목록 조회 부분의 동작은 로그인과 관련된 것을 제외하면 모두 동작하게 만들었지만, 단위 테스트 구현은 거의 되어있지 않았다. 사실 월요일에 단위 테스트를 위해 Mocking을 무엇을, 어떻게 하는 것이 좋을지 고민했지만 답이 잘 나오지 않아 미뤄두고 있었다. 결국 언젠가는 해야 한다면 지금 확실하게..
-
실험의, 실험에 의한, 실험을 위한 하루 (레벨 테스트 2일차 작업 회고)Today I Learned 2022. 10. 4. 23:59
오늘 구현하려 했던 목표는? 프론트엔드에서 상품 목록 중 하나를 선택했을 때 상품 상세 정보 페이지로 이동되도록 한다. 상품 목록, 상품 상세 목록과 관련된 인수 테스트를 로그인과 관련된 부분을 제외하고 모두 달성한다. 이 과정에서 필요한 백도어 API를 작성한다. 상품 목록 페이지에서 상품을 페이지별로 나타나게 하는 페이징을 구현한다. 음... 모두 강의에서 큰 개념들을 다루기는 했었는데, 강의에서 봤던 내용만으로 하기에는 약간 부족하고, 스스로 찾아서 그 약간의 간극을 채워줘야 하는 부분들이 생각보다 많았다. 예를 들면 각 상품의 아이디마다 주소가 바뀌는데, 그 바뀌는 주소에 대해서도 컴포넌트를 생성해야 하는데 어떻게 할 것인가, 그 주소의 컴포넌트에서 상품 아이디를 어떻게 꺼내서 요청할 것인가, 백..
-
찍어보는데 안되고... 범위는 갑자기 넓어지고... (레벨 테스트 1일차 작업 회고)Today I Learned 2022. 10. 3. 23:59
오늘의 레벨 테스트 작업 목표는 상품 내역 조회 페이지의 인터페이스와 해당 API 처리 백엔드 로직을 구현하는 것이었다. 작업은 아직 진행 중이고, 구현 과정에서 2가지 이슈가 있었다. 먼저 인수 테스트에 작성한 내용을 나타내는 작업을 Store의 동작으로 나타내려고 했다. 그 과정에서 테스트 코드를 같이 작성하려 했는데, 인수 테스트의 케이스들을 단위 테스트에서 작성하다 보니 같은 테스트 내 동일한 동작의 결과로 다른 값을 반환하게 해주는 과정이 필요하겠다는 생각이 들었다. 예를 들면 Store에서 ApiService에 상품 목록을 요청하는 단일한 메서드로 어떨 때는 리스트에 상품 목록이 없는 경우를, 어떨 때는 상품 목록이 3개 있는 경우를, 또 어떨 때는 상품 목록이 40개를 반환하는 경우가 필요한..
-
도메인의 컨셉, 그리고 구체적인 동작 (테스트 주도 개발 스터디 2회차 참여 소고)Today I Learned 2022. 10. 2. 21:30
테스트 주도 개발 스터디 2회차에서 배운 내용들 중 뜻깊게 느낀 내용들을 정리했다. 프로그래밍적인 요소가 아닌 도메인의 컨셉에 집중하기 위한 리팩터링 다중 통화를 지원하는 Money 객체를 구현하는 과정에서, Money 객체를 상속받는 구현체인 Dollar 객체와 Franc 객체의 중복을 제거하면서 최종적으로는 Money 객체만을 남기도록 하는 과정이 있다. 그 중 Franc(10, 'CHF')과 Money(10, 'CHF')가 서로 동등함을 나타내기를 기대하는 테스트 코드를 통과시키기 위해 equals() 메서드를 다음과 같이 수정하는 과정이 있다. class Money { private String currency; // ... // 수정 전 @Override public boolean equals(..
-
React 웹 애플리케이션 Github에 배포하기Today I Learned 2022. 10. 1. 22:00
BrowserRouter를 이용하여 Single Page 내에서 주소를 전환하는 React 웹 애플리케이션을 Github에 배포하기 위해 프로젝트에 추가해야 하는 내용을 정리했다. 다음의 내용은 bundler로 parcel을 사용하는 경우에 한함을 밝힌다. 1. 루트 디렉터리에 .github/workflows/ci.yml 을 생성하고 다음의 내용을 추가한다. name: CI on: push: branches: - main pull_request: types: [opened, synchronize, reopened] jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Set up Node.j..
-
고통의 트러블슈팅Today I Learned 2022. 9. 30. 23:59
복습 오늘 오후 2시 코딩 인터뷰 전까지 마카오뱅크 백엔드 및 프론트엔드 로직 구현을 마무리하고 CSS를 작성하고 있다. CSS의 속성이 손에 익지 않다 보니 속성을 하나하나 건드려보다가 지금은 지난 주차에 제공되어 있던 정답 소스코드를 참고하고 있다. 자주 쓰이는 표현이나 요소들의 구조는 거의 패턴을 외운다는 생각으로 기본적인 패턴을 작성하는 데 쓰는 시간을 축약해야 할 것 같다. 옆에서 지켜본 트러블슈팅 동료분이 저녁 시간부터 도전하고 있던 배포 과정을 옆에서 지켜보고 있었다. 10주차 강의에서 제공된 가이드 강의를 따라 백엔드 배포는 거의 즉시 되었지만, 프론트엔드를 배포하는 데 어려움을 겪고 계셨다. 마침 트레이너님께서 젭에 접속하셔서 그런 문제를 겪고 있는 우리를 보시고 배포하는 과정에서 발생하..
-
백엔드로부터 DTO로 배열 전달받기Today I Learned 2022. 9. 29. 23:59
풀 스택 마카오뱅크 구현 과제 요구사항 중 강의에는 없던 내용으로 회원가입을 추가로 구현하는 부분이 있다. 물론 이전 주차에 배운 내용이었기에 기억을 되돌려보고 이전에는 어떻게 했었나 슬쩍슬쩍 들여다보면서 구현을 진행하고 있다. 회원가입의 세부 요구사항에는 그림과 같이 입력란에 정보를 넣고 회원가입 버튼을 눌렀을 때, 조건과 맞지 않는 입력사항에 대해 에러 메시지를 출력하도록 하는 내용이 있다. 이때 조건과 맞지 않는 입력사항이 여러 개일 경우, 모든 오류들에 대해 에러 메시지를 출력하도록 하고 있다. 입력을 처리하는 과정은 먼저 프론트엔드에서 입력 데이터들을 담아 백엔드에 요청을 전송하면, 백엔드에서 입력 데이터들을 검증하고 처리를 진행하는 방식이다. 프론트엔드와 백엔드 간의 데이터 통신은 DTO(Da..
-
숫자는 거짓말을 하지 않는다.Today I Learned 2022. 9. 28. 19:28
내가 코딩한 시간이 얼마나 되는지 기록을 확인할 수 있는 Wakatime이라는 웹 애플리케이션이 있다. 최근 우리 메가테라 동료분들이 순위표 상위를 자주 차지하는 모습을 보고, 나의 현주소가 궁금했다. 순위표를 쭉 둘러보았고, 익숙한 이름들을 많이 발견할 수 있었다. 평균 시간만큼이나 내 눈길을 끌었던 것은 측정 이후 기록된 총 코딩 시간이었다. 내 기록은 지난 주 평균 56시간 3분, 일 평균 8시간이었다. 그리고 가입 이후 총 코딩 시간은 715시간으로 측정되었다. 그리고 내가 확인할 수 있었던 동료들의 총 코딩 시간은 913시간, 그리고 938시간이었다. 숫자를 직접적으로 앞에 놓고 보니, 실감이 나기 시작했다. 200시간의 차이는, 하루나 이틀, 몇 주 더 열심히 했다고 해서 날 수 있는 차이는 ..