* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 이번 리팩토링에서는 기존에 컴포넌트 내에 함께 있던 리액트 쿼리 요청 코드를 커스텀훅으로 분리하는 작업을 했다. 왜 커스텀훅을 만들려고 했나 컴포넌트에 네트워크 처리 코드가 종속된다 컴포넌트 내에 서버 상태를 가져오거나 변경하는 로직이 있어서 종속성이 생기고, 컴포넌트의 재사용성이 떨어졌다. 역할의 분담이라는 측면에서 ui를 표시해주는 컴포넌트와 네트워크 요청을 처리하는 부분의 코드가 분리돼 있는 것이 좋다고 생각했다. 코드 수정이 어렵다 컴포넌트 내에 네트워크 처리 코드가 있을 경우 요청 엔드포인트가 바뀐다든가 응답을 받..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 조잉 프로젝트의 검색 기능에는 자소 단위의 검색어 자동완성 기능이 적용돼 있다. 이처럼 키를 하나 칠 때마다 검색어 자동완성 엔드포인트에 현재까지 입력된 input에 대한 요청을 보내고, 받아온 데이터를 화면에 표시하는 방식이다. 현재까지 입력한 검색어를 통해 어떤 컨텐츠를 검색해 볼 수 있는지 한눈에 볼 수 있어서 편리하지만, 키보드 입력을 한번 할 때마다 하나의 요청과 응답이 오가고 리렌더링이 이뤄지기 때문에 꽤나 많은 리소스를 소모한다고 볼 수도 있다. 이 부분에서 디바운싱을 적용해서 일정 시간 내에 연속적으로 이뤄진..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 왜 버튼 컴포넌트를 만들어야 했나? 기존에 우리 프로젝트에서는 모든 버튼을 필요할 때마다 각자 만들어서 사용했다. 비슷한 모양의 버튼들인데도 색깔과 크기가 다르다는 이유로 매번 만들어서 사용하다 보니 중복된 코드가 많았고, 하나로 통일하면 재사용성을 높일 수 있겠다고 생각했다. 리팩토링을 하면서 일반적인 버튼, 즉 이미지로 이뤄진 독특한 버튼을 제외한 평범한 네모 모양의 버튼들은 재사용 가능한 컴포넌트로 만들고 prop을 내려줘서 각각의 필요에 따라 사용할 수 있도록 만들자고 결정했다. 어떤 컴포넌트를 만들려고 했나? 버튼..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 왜 폴더구조를 바꿔야 했나? 폴더구조를 바꿔야겠다고 생각한 가장 큰 이유는 파일을 찾기가 어려운 것 때문이었다. components 폴더 아래에 페이지별 폴더와 ui에 해당하는 폴더들이 섞여 있어서 어떤 파일을 어디서 찾을 수 있을지 알기가 어려웠다. 어떤 폴더구조를 만들려고 했나? 폴더구조를 개편할 때 두가지 목표를 가지고 시작했다. 도메인별로 폴더가 구분돼 있어 큰 줄기를 잡을 수 있어야 한다. 아토믹 디자인의 개념상 서로 다른 계층에 속하는 컴포넌트끼리 서로 구분돼 있어야 한다. 첫번째 목표에서 사용한 '도메인'이라는..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 메인프로젝트 끝나고 리팩토링을 하면서 제일 먼저 초기 세팅을 몇가지 추가했다. path alias 설정과 ESlint 규칙 추가를 했는데 path alias 설정은 금방 했지만 ESlint는 설정할 때마다 eslintrc의 설정 항목들이 너무 많고 원치 않는 오류가 날 때 어떻게 해결해야 할지 모르겠어서 어렵다. 오늘은 ESlint-plugin-import를 이용해 임포트문 순서 컨벤션을 린팅하는 설정을 하다가 머리가 뽀개지고 말았다😢 ESlint-plugin-import 인스톨하기 우리 프로젝트는 타입스크립트를 사용하고 ..
프로젝트 소개 JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉! 개발 기간: 2023.06.28 ~ 2023.07.24 🔗 배포 링크 📂 깃허브 코드스테이츠 프론트엔드 부트캠프 메인 프로젝트를 마무리하며 KPT 방법론에 따라 프로젝트를 회고해보았습니다. 이 프로젝트에서 담당했던 부분은 다음과 같습니다. 헤더 메인 페이지 슬라이더 멤버 마이페이지 로그인/회원가입 후기 404, 500 오류 페이지 검색어 자동완성 모바일 GNB 액세스, 리프레시 토큰 저장과 후속 처리 top 버튼 keep 스프린트 기반 플래닝 애자일 조직 운영 방법론 중 스프린트에 기반해 프로젝트를 운영했다. 약 4주의 프로젝트 기간을 네 개의 스프린트로 나누고 다음과 같이 각 스프린트의 목표를 정했다. - 스프린트 1: 팀 빌..
마지막 3차 개발자 테스트를 하는데 관리자 권한으로 컨텐츠를 삭제하는 기능을 테스트하다가 이미 삭제한 컨텐츠의 페이지에 들어가니 다음과 같은 이상한 화면을 마주하게 되었다. 저 희미한 동그라미들은 아이템 로딩 중의 스켈레톤 ui인데, 분명 쿼리가 에러로 전환되야 맞을 텐데 저 상태로 정지해 버려서 이상하다는 생각이 들었다. 내가 코드를 짠 부분이 아니라서 그 부분의 코드를 살펴보니 컨텐츠의 상세 정보를 받아와야만 그 컨텐츠와 연관된 다른 컨텐츠들을 받아오도록 다음과 같이 짜여 있었다. const { isLoading: filteredLoading, error: filteredError, data: filteredData, isSuccess: filteredSuccess, } = useQuery({ que..
flex 아이템들이 안에 들어있는 content의 크기와 상관없이 똑같은 너비를 갖기를 원했다. flex: 0 0 25%로 해결! https://stackoverflow.com/questions/40351223/equal-width-flex-items-regardless-of-content-length
