분류 전체보기
-
핵심 가치에 집중하니 크기는 줄어도 내용은 견고해졌다Today I Learned 2022. 11. 11. 23:51
20주차 금요일 성수 코딩 도장 일과를 진행하면서 느꼈던 점을 정리했다. 오늘의 최소 기능 구현: 참가 신청하기 오늘은 게시물 리스트를 보고 사용자가 신청 버튼을 누를 경우 참가자 수가 증가하고, 버튼이 신청취소로 바뀌는 기능을 구현했다. 이전에 작성했던 화면과 작업 계획은 잠시 내려놓고, 핵심 가치에 집중해서 기능을 설계하고 구현을 진행하면서 느낀 점이 몇 가지 있다. 소스코드는 설계를 보면서 작성하고 있다 지난 주까지는 소스코드를 작성할 때 작업 Task 목록에서 잠깐 구현 방식을 고민한 다음에 소스코드를 작성했는데, 중간중간 멈칫할 때가 많았다. 기능 자체가 너무 크다는 점과 시너지를 일으키면서 인지 부하가 계속해서 일어났다. 반면 설계 문서에서 작성한 API의 내용을 보면서 구현을 진행했을 때는 ..
-
최소한의 기능으로 다시 시작하기Today I Learned 2022. 11. 10. 10:54
어제 저녁, 게시글 목록을 불러오는 프로세스를 리팩터링하고 있었다. 게시물 썸네일 하나를 구성하는 여러 리소스의 내용들을 프론트엔드에서 리소스 각각에 맞는 API를 호출해 내용을 따로따로 가져오고, UI 컴포넌트에서 출력하기 전 각자의 게시물에 맞는 내용으로 조합시키려 했다. 아래와 같이 게시물, 이미지, 운동 경기, 운동 장소, 포지션에 해당되는 리소스를 호출하는 API를 불러오는 페이지 컴포넌트가 만들어졌다. xport default function PostsPage() { const postStore = usePostStore(); useEffect(() => { postStore.fetchPosts(); postStore.fetchImages(); postStore.fetchGames(); pos..
-
마카오 기프트에서는 되던 게 왜 프로젝트에서는 안돼? - 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..
-
메가테라 웹 개발자 과정 19주차 주간 회고주간 회고 2022. 11. 7. 23:58
2주차 스프린트 주간 작업 목표 및 성과 분석 2주차 스프린트 주간에는 지난 주간에 구현하지 못했던 게시글 목록 조회를 마저 구현하고, 상세 내용 조회까지 마치는 것을 목표로 했다. 상세 내용 조회 구현 시에는 다음의 조건을 만족할 수 있도록 했다. 참가자 관점: 인원이 부족한 포지션에 등록을 신청하거나, 등록된 경우 등록을 취소할 수 있음 신청 가능한 포지션에는 신청하기를 누를 수 있음 인원이 마감된 포지션은 신청할 수 없음 자신이 신청한 포지션은 신청취소가 나타나고 다른 포지션에는 신청할 수 없음 작성자 관점: 신청 목록을 확인해 신청자의 신청을 수락하거나 거절 가능 각 포지션마다 신청자 목록을 확인할 수 있음 신청자의 신청을 수락하거나 거절할 수 있음 거절당한 신청자는 거절 리스트에 추가되어 작성자..
-
프로젝트 설계 문서 공개 리팩터링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..