Today I Learned
-
마카오 기프트에서는 되던 게 왜 프로젝트에서는 안돼? - useEffect, Guard ClauseToday I Learned 2022. 11. 9. 15:48
풀리지 않는 문제가 있다면 문제의 범위를 좁혀보자 다음의 소스코드를 보자. 사용자가 게시물 리스트에서 특정 썸네일을 클릭하거나 URI와 path variable로 게시글의 id를 직접 입력할 경우 게시물을 상세 정보를 화면에 출력하는 동작을 수행하는 로 innu3368.tistory.com 지난 주에 UI 컴포넌트에서 fetch해온 상태가 왜 정상적으로 값을 갖고 있지 않고 undefined 상태를 가졌었는지 오전에 있었던 이슈를 통해 알 수 있었다. 이슈를 살펴보기 전에 먼저. React에서는 데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 등의 부수 효과들을 Effect Hook 내부에서 수행하도록 하게 할 수 있다. 이때 Effect Hook은 컴포넌트들이 먼저 렌..
-
돌돌설 (돌고 돌아 설계 문서 작성부터 다시)Today I Learned 2022. 11. 8. 20:34
돌고 돌아 설계 문서 작성부터 다시 현재 테스트 코드 없이 애플리케이션이 동작하고 있는 상태이다. 이런 상황에서는 기존에 있던 작업 Task에서 어떤 작업을 빼와서 스프린트 계획을 세우고, 스프린트를 진행해도 안정적인 애플리케이션을 만들었다는 확신을 줄 수 없겠다는 생각이 들었다. 작업 Task도 마찬가지였다. 하나의 작업 Task를 꺼내와서 작업을 진행할 때마다 거의 항상 서브 작업이 생성되었다. 작업 단위의 수준이 올바르지 못하다는 지점으로 생각이 이동했다. 작업 단위는 사용자 스토리를 기반으로 작성되었었다. 작업 단위를 수행 가능한 수준으로 나누기 위해서는 사용자 스토리를 다시 잡고 가는 것부터 시작되어야 할 것 같다는 필요성이 느껴졌다. 사용자 스토리를 고치고, 이를 바탕으로 인수 테스트, URI..
-
프로젝트 설계 문서 공개 리팩터링Today I Learned 2022. 11. 7. 21:36
아샬님께서 오후에 진행한 내 프로젝트 설계 문서 공개처형 리팩터링 월요지식회를 바로 옆에서 듣고 기록한 내용을 정리했다. 내 사용자 스토리의 문제점 메인 화면: 사용자는 주요 기능으로 이동할 수 있는 메인 화면을 볼 수 있다. 헤더 확인하기: 사용자는 운동을 선택하거나 사이드바를 보기 위해 헤더를 항상 확인할 수 있다. 화면 하단 네비게이터 확인하기: 사용자는 홈, 운동 모집 게시글 보기, 클럽 리스트 보기, 채팅 목록 보기로 이동하기 위해 푸터를 항상 확인할 수 있다. ... 일단 요구사항은 화면이 아니어야 한다. (ex. 화면을 볼 수 있다.) 기능은 영원하지만, 화면은 일시적이다. 기능과 화면이 강하게 결합되면 기능을 개선하는 과정이 필요 이상으로 커질 수 있다. 화면이 있으면 설계나 요구사항에 활..
-
하나의 메서드를 두 개 이상의 기능이 공유하면 발생할 수 있는 문제Today I Learned 2022. 11. 6. 23:00
하나의 운동 모집 게시글에 대해 작성자, 게시글에 참가를 신청하지 않은 사용자, 참가를 신청한 사용자에 대해 각기 다른 포지션 신청 UI를 보여주는 기능을 구현하고 있다. 우선 참가를 신청하지 않은 사람은 사진 왼쪽처럼 빈 자리가 있는 포지션에 신청하기 버튼이 출력되고, 참가를 신청한 사람은 오른쪽처럼 신청한 포지션에 신청취소 버튼이 출력되고, 다른 포지션의 신청하기 버튼은 출력되지 않도록 하는 것이 목표이다. 게시물의 상세 정보를 보여주는 기능을 수행하기 위한 모델들 간의 관계는 다음과 같다. 두 개 이상 존재하는 모델들은 상위 모델 하나 당 여러 개가 존재할 수 있다. REST API 요청을 받아 게시글 정보를 조합해 반환하는 Service 로직은 다음과 같다. public PostDto post(L..
-
풀리지 않는 문제가 있다면 문제의 범위를 좁혀보자Today I Learned 2022. 11. 5. 23:00
다음의 소스코드를 보자. 사용자가 게시물 리스트에서 특정 썸네일을 클릭하거나 URI와 path variable로 게시글의 id를 직접 입력할 경우 게시물을 상세 정보를 화면에 출력하는 동작을 수행하는 로직의 일부로 PostPage 컴포넌트를 정의했다. PostPage 컴포넌트는 전달받은 postId에 해당하는 게시물의 정보를 백엔드 서버로부터 가져와 postStore의 상태에 저장한 뒤, 상태를 가져와 UI 컴포넌트에 전달하는 컴포넌트이다. export default function PostPage() { const location = useLocation(); const postId = location.state !== null ? location.state.postId : Number(location..
-
테스트가 너무 크고 복잡하면 로직을 다시 돌아볼 필요가 있다Today I Learned 2022. 11. 4. 23:55
게시글 상세 페이지 조회 REST API 요청 시 백엔드 요청을 처리할 Controller와 테스트 코드를 작성하고 있었다. 홀맨님이 도장을 돌아보는 동안 내가 작성하고 있던 소스코드를 확인하셨고, 소스코드에 문제가 있음을 확인할 수 있었다. 다음은 내가 작성하고 있던 게시물 목록을 조회하는 Controller의 요청을 처리하는 과정을 검증하는 테스트 코드이다. 테스트 코드를 작성할 때에도 이 영역이 어떤 동작을 테스트하려는 영역인지 중간중간 멈칫하는 느낌이 있었다. 일단 기능을 완성시켜야 한다는 생각에 작업을 무리해서 진행했는데, 다시 살펴보니 테스트 코드를 읽는 것만으로 어떤 테스트를 하려는 것인지 나도 이해하기 어려웠다. 다음은 테스트 코드를 통해 검증하는 Controller의 로직이다. 이 로직의..
-
스프린트 주간 2주차 중간점검Today I Learned 2022. 11. 3. 22:54
스프린트 2주차 주간의 중간 분기점을 맞이한 기념으로 중간 점검을 수행했다. 주간 목표, 스토리 포인트 사용량, 지금까지 수행한 작업 내역, 느낀 점에 대해 정리했다. 주간 목표 스프린트 2주차 주간 동안 기본적으로 달성하고자 하는 목표는 다음과 같다. 운동 모집 게시글 목록 조회 구현 운동 모집 게시글 상세 목록 조회 구현 참가자 관점: 인원이 부족한 포지션에 등록 신청 가능 글 작성자 관점: 신청 목록을 확인해 신청자의 신청을 수락하거나 거절 가능 사용 스토리 포인트 및 작업 내역 1 스토리 포인트는 1 뽀모도로를 기준으로 했다. (40분) 요일 사용 스토리 포인트 이행한 작업 화 7 - 운동 모집 게시글 목록 조회에 사용되는 모델에 데이터 추가 (다른 모델에 독립적인 데이터들) - 프론트엔드 프로세..
-
양방향 연관관계를 갖는 객체를 테스트하는 어려움Today I Learned 2022. 11. 2. 23:59
게시글 목록과 관련된 백엔드 구조를 작성하는 과정에서 먼저 구성한 모델들을 Controller가 Service로부터 데이터를 전달받았을 때 DTO를 정상적으로 반환하는 과정을 수행하는지 검증하는 테스트를 작성하고 있었다. 테스트 코드를 작성하면서 동작 검증에 사용할 테스트 데이터들을 정의하던 중, 양방향 연관관계를 갖는 Entity 인스턴스를 생성자로 정의해 마련하는 과정이 너무 어렵게 느껴졌다. 기록해놓는 것을 잊은 관계로 다음의 예시 코드들을 통해 문제 상황을 살펴보도록 하자. 다음의 코드는 특정 사용자의 id를 받아 게시글을 찾는 Service의 메서드를 호출해 결과를 DTO로 반환하는 Controller의 메서드이다. 다음의 사용자, 게시글 Entity 객체들을 테스트에 활용하려 했다. 사용자와 ..