Today I Learned
-
에러 핸들링 작업 과정에서 마주친 리팩터링 신호Today I Learned 2022. 11. 26. 22:58
게시글 작성 기능을 구현하고 나니 사용성에 문제가 있는 부분이 발견되었다. 시간을 입력할 때 hour의 경우 1~12 사이의 숫자만을 선택할 수 있도록 했는데, 오전과 오후를 구분할 방법이 없었다. 사용자가 시작 시간과 종료 시간에 대해 오전/오후를 선택할 수 있도록 라디오 버튼을 추가하는 작업을 수행했다. // components/PostForm.jsx 시작 오전 시작 오후 여러 리스트 중 하나를 선택해야 하는 라디오 버튼 input 요소는 'name' 속성으로 자신이 어떤 라디오 버튼 요소와 그룹을 맺는지 결정한다. 버튼을 누르면 onChange 핸들러 함수에 value 속성으로 지정된 값을 포함하는 event를 전달한다. // components/PostForm.jsx const handleChan..
-
테스트 코드가 아무리 많아도 진짜 필요한 것을 테스트하지 않는다면? (게시글 작성하기)Today I Learned 2022. 11. 25. 23:19
게시글 작성 화면에서 내용을 입력하고 제출하기 버튼을 누르면 새로운 게시글이 등록되는 기능을 구현했다. 폼에 종목, 날짜, 시간, 장소, 모집할 인원 수, 상세 내용을 입력하고 작성하기 버튼을 누르면 게시글이 등록된다. 다른 사용자는 해당 게시글에 참가 신청을 할 수 있고, 작성자는 신청자 정보를 확인할 수 있다. API 요청으로 전달되는 날짜와 시간 값을 구분해 저장하기 위해 값 객체 GameDate를 GameDateTime으로 명칭을 변경하고, 필드를 LocalDate 타입의 date, LocalTime 타입의 startTime, endTime으로 분리했다. // GameDateTime.java @Embeddable public class GameDateTime { @Column(name = "dat..
-
React DatePicker 라이브러리를 사용해 날짜 선택하기Today I Learned 2022. 11. 24. 23:42
운동 모집 게시글을 작성하는 폼의 프론트엔드 영역 구현을 진행했다. 날짜 입력란을 클릭하면 달력이 나오고, 달력의 날짜를 선택하면 날짜가 선택된다. 시간 입력창은 시작 시간과 분, 종료 시간과 분을 드롭다운에서 선택할 수 있다. 게시물을 구성하는 게시글 객체와 게임 객체가 생성되기 위해 필요한 데이터를 사용자가 입력해 작성하기 버튼을 누르면, 서버에 POST 요청을 보내는 API까지 구현한 상태이다. 게시글 작성하기 기능을 구성하는 프론트엔드 레이어 구조는 다음과 같다. UI: PostForm, SelectTime Page: PostFormPage Store: PostFormStore Infrastructure: PostApiService 게시물 작성 폼을 만들면서 가장 신경썼던 부분은 날짜와 시간에 관..
-
통과하면 안 되는 테스트인데 자꾸 통과하는 이유는... (await waitFor)Today I Learned 2022. 11. 24. 00:11
다음의 소스코드와 테스트 코드를 보자. 로그인 화면에서 아이디와 비밀번호를 입력한 후 로그인 버튼을 누르면 userStore에서 API를 호출하는 함수인 login 함수를 호출하는지 테스트하는 동작이다. // LoginPage.jsx const login = async (data) => { const { identifier, password } = data; const verifiedAccessToken = await userStore.login({ identifier, password }); if (verifiedAccessToken) { // navigate } }; // LoginPage.test.jsx context('폼을 채우고 로그인 버튼을 누르면', () => { login = jest.fn..
-
이제야 조금은 앱 같다Today I Learned 2022. 11. 22. 23:17
밋밋한 테마에다가 텍스트만 줄줄이 나열되어서 화면만 보고서는 무슨 기능인지 직관적으로 알기 어려웠던 프로젝트 결과 화면에 간단한 CSS를 입혀 정보 전달력을 높이는 작업을 진행했다. 메인 화면에서 '운동 찾기' 메뉴로 들어갈 수 있다. 운동 찾기 메뉴에 들어오면 등록되어 있는 운동 모집 글 리스트를 확인할 수 있다. 현재 접속자는 사용자 3이다. 참가가 확정된 운동 모집 글에서는 참가자 정보에서 자신의 정보를 확인할 수 있다. 게시글 작성자의 계정으로 접속해 자신의 게시글을 확인하면 게시글에 신청한 사람의 정보를 확인할 수 있고, 신청을 수락하거나 거절할 수 있다. 그렇게 복잡한 CSS 작업은 아니었지만, 작업 과정에서 배치에 어려움을 겪었던 부분들이 있었다. 화면의 대부분을 차지하는 회색 화면이 사진처..
-
미신청자/신청자/참가자/작성자 별 컴포넌트 구분하기Today I Learned 2022. 11. 20. 23:59
이번 주 Task 목록에서 남은 작업들 중 오늘 가장 먼저 진행한 작업은 사용자는 각 게시글의 운동에 참가신청/신청취소/참가취소를 할 수 있고, 게시글 작성자는 신청자의 참가를 수락하거나 거절할 수 있는 기능을 구현하는 것이었다. 모델 'Register'의 상태 변화를 촉발시키기 위해서는 먼저 사용자마다 자신의 상태에 맞는 화면과 버튼이 주어져서 해당 동작으로 요청을 진행할 수 있어야 했다. 먼저 사용자별로 각기 다른 요구사항을 세웠다. 특정 게시글에 신청하지 않은 사용자 게시글 리스트 조회 기능에서 해당 게시글에 대해, 혹은 해당 게시글 상세 내용 조회 시 신청 버튼을 확인할 수 있다. 특정 게시글에 신청한 사용자 게시글 리스트 조회, 게시글 상세 내용 조회 시 신청취소 버튼을 확인할 수 있다. 특정 ..
-
하나의 작업이 세 개의 작업으로 분신술을 쓰는 기적Today I Learned 2022. 11. 19. 23:47
프로젝트에 새 모델을 추가하는 작업을 진행했다. 각 게시물에 연결된 경기인 Game 모델의 참가자가 누구인지 알기 위해 사용하던 Member 모델을 신청 상태와 취소, 수락, 거절 상태를 한번에 관리할 수 있는 Register 모델로 변경했다. 기존 Member 모델에는 참여 경기를 식별하는 gameId 필드와 사용자를 식별하는 userId 필드가 존재했는데, 여기에 사용자의 신청 상태를 식별하는 RegisterStatus 값 객체를 필드로 추가했다. RegisterStatus에는 사용할 수 있는 상태들을 static final 타입의 상수로 정의해 Register를 생성할 때 상수 값들을 이용해 데이터를 부여할 수 있도록 했다. 상태의 변경은 RegisterStatus 객체가 직접 자신의 상태를 변경할..
-
'신청' 모델 추가를 위한 객체 설계Today I Learned 2022. 11. 18. 23:58
게시글 상세 내용을 서버에서 가져와 정보를 출력해주는 부분까지 구현했다. 일단은 사용자가 신청한 글의 신청취소 버튼을 누를 시 참가 정보가 즉시 삭제되어 반영된다. 다음으로 구현할 사항은 신청 시 즉시 참가자 목록에 반영되지 않고 '신청' 단계를 거치게 하는 것이다. 다음과 같이 동작하게 하는 것을 계획하고 있다. 1. 운동에 참가를 희망하는 사용자가 신청 버튼을 누르면 게시글 목록과 게시글 상세 정보에 나타나는 신청 버튼은 신청취소 버튼으로 변경된다. (게시글 상세 내용 보기 기능에도 신청/신청취소/참가취소 버튼을 추가할 계획이다.) '신청' 상태는 운동에 참가가 확정된 것이 아니기 때문에 게시글 상세 내용을 확인해도 참가자 정보에 해당 사용자의 정보는 나타나지 않는다. 2. 모집 게시글을 작성한 사용..