전체 글
-
테스트 코드가 아무리 많아도 진짜 필요한 것을 테스트하지 않는다면? (게시글 작성하기)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 작업은 아니었지만, 작업 과정에서 배치에 어려움을 겪었던 부분들이 있었다. 화면의 대부분을 차지하는 회색 화면이 사진처..
-
명료하게 할 수 있는 건 명료하게카테고리 없음 2022. 11. 21. 21:50
아직까지는 작업을 진행하면서 디자인적인 배치를 해주는 작업을 거의 하고 있지 않았다. 앱을 실행하면 아직까지는 흰 바탕에 회색빛깔의 촌스러운 버튼, 줄줄이 나열된 텍스트가 사용자를 반겨주고 있다. 오늘 노아 프로젝트 매니저님께 주간 스프린트 경과를 점검하고 이번 주에 어떤 작업 계획을 세워 진행할지 이야기를 해야 했다. 지금은 사실상 매 주 사용자 스토리와 작업 목록이 확장되고 있었기 때문에, 이번 주 작업 목록을 세우기 위해서는 어떤 가치에 중점을 두고 기능을 확장하거나 기능을 추가할지 결정을 내려야 했다. 동료분께 주간 결과를 보여드리면서 방향성을 어느 기준으로 잡는 게 좋을지 여쭤보았다. 동료분의 조언을 들을 수 있었는데, 이번에도 역시나 예상 밖의 놓치고 있던 부분에 대한 것이었다. 애플리케이션이..
-
메가테라 웹 개발자 과정 21주차 주간 회고주간 회고 2022. 11. 21. 15:31
4주차 스프린트 주간 작업 목표 주간 작업 목표 : 운동 모집 글을 게시하면 신청을 받을 수 있는 게시판을 완성한다. 상세 목표 - '핵심 가치'를 사용성에 반영 - '모집'을 하기 위해 가장 필요한 내용을 찾아 모델에 반영 - 기능 구현 - 게시글 상세 정보 보기 - 운동 참가 신청 수락 - 운동 참가 신청 거절 - 게시글 작성 - 게시글 삭제 - 게시글 수정 최소한의 기능만을 제공하던 앱에 가장 핵심적인 기능을 추가해 앱의 사용성을 한 단계 확장시키는 스프린트 주간을 진행했다. 지난 주까지는 이미 등록되어 있는 게시물에만 접속한 사용자가 신청하면 참가자로 추가되고, 신청을 취소하면 참가자에서 삭제되는 단순한 구조였다. 이번 주에는 사용자가 인원을 모집하는 글을 올리면 다른 사용자가 해당 글을 보고 참..
-
미신청자/신청자/참가자/작성자 별 컴포넌트 구분하기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 객체가 직접 자신의 상태를 변경할..