* 코드스테이츠 메인 프로젝트로 진행한 "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
프로젝트 소개 StackOverflow 클론코딩 개발 기간: 2023.06.14 ~ 2023.06.26 🔗 배포링크 📂 깃허브 코드스테이츠 프론트엔드 부트캠프 프리 프로젝트를 마무리하며 KPT 방법론에 따라 프로젝트를 회고해보았습니다. 이 프로젝트에서 담당했던 부분은 다음과 같습니다. 헤더 로그인(일반, OAuth) 회원가입 질문 태그 기능 질문 수정 페이지 🙋🏻♀️ 제가 팀장하겠습니다 이번 프로젝트를 시작할 때 팀장이 되겠다는 결심을 처음부터 가지고 있었다. 가장 적극적으로 프로젝트에 참여하고, 코드만 작성하는 것이 아니라 프로젝트가 흘러가는 전체 그림을 보면서 협업을 주도적으로 이끄는 경험을 하기를 바랐다. 내가 모르는 것을 솔직하게 인정하고 배울 기회를 찾기 그런 목표에 비춰 보면, 분명 얻은 것..
무엇을 했나 페이지 prev, next 버튼 기능 추가 내가 좋아요한 글 페이지 추가 어려웠던 점 prev, next 로직 짜는 것이 생각보다 어려웠다. startPage와 endPage를 변수로 두고 하는 로직을 참고해서 하니 그 다음 로직들은 비교적 수월하게 짤 수 있었다. 참고한 자료는 https://jithilmt.medium.com/logic-of-building-a-pagination-ui-component-a-thought-process-f057ee2d487e 좀 더 일찍 끝냈어야 하는 것을 너무 질질 끌고 있는 것 같다. 사실 남은 기능들 마음 먹고 하면 금방 할텐데 너무 자잘한 것들이 남아서 능률이 떨어지는 느낌이다.. 이래서 한번 할 때 제대로 해야 하는데 ㅇ
무엇을 했나 어바웃 페이지 새로 알게 된 것 대신 태그를 쓰면 줄바꿈과 띄어쓰기를 보존해서 내용을 보여줄 수 있다. white-spacing: pre-wrap를 써서 래핑을 해준다. 그런데 띄어쓰기 간격이 너무 넓어져서 어떻게 처리해 줘야 할지 고민.. word-spacing으로 마이너스값을 줬는데도 컴마 뒤 공간 같은 곳이 너무 넓다. 남은 것 페이지네이션 prev, next 메인페이지 꾸미기 로고 처리 반응형 css 적용 내브바 기능 추가 광고 만들기 유저 id값 받아올 수 있나? 후원하기
