프로젝트

좋았던점좋은 동료와 함께하다실력이 좋은 동료와 함께해서 좋았다 나는 다른사람의 장점을 흡수하여 발전시키는데에 정말 능하기 때문에 같이 코드에 대해 고민하고 얘기하며 실력이 많이 성장했음을 느꼈다. 기초 프로젝트인 롤링때는 좋은 코드에 대한 고민보다는 내가 어떤 기능이든 빠른 시간 내에 구현할 수 있구나를 느꼈다면 이번에는 좋은 동료들과 어떻게 협업을 하면 좋은지 배운 것 같다. 롤링때 아쉬웠던 점 해소롤링때 아쉬웠던 것은 에러처리 및 로딩처리에 대한 신경을 덜 쓴 것이었는데 이번 프로젝트에서는 아예 에러처리에 대한 회의까지 하면서 에러처리에 대한 신경을 많이 썼다. 로딩 처리의 경우 SSR일 때 적용을 해주지 않았다. Link 태그 덕분이고, 걱정됐던 부분은 Link 로 페이지 이동시 딜레이가 생기는 부..

문제점1 - 해결위 테이블 컴포넌트는 공통 컴포넌트로 구현해야 한다. 이 테이블을 공통화를 하게 되면 테이블은 그저 데이터를 받아와서 보여주는 역할만을 수행하는게 옳다고 판단했다. (가게, 일자, 시급, 상태)와 같은 타이틀과 내용을 그저 string 배열 데이터로 넘겨주면 되지만 객체로 데이터를 넘기자는 팀원들의 의견이 있었다. 나도 그저 string 배열로 하지 않고 타입을 좀 더 좁히고 강제해서 사용하는게 좋다고 생각했다.  결론적으로 같이 코딩하며 위와 같이 코딩을 하였다. 뭐.. 나름 괜찮은 것 같다.  문제점2 - 해결페이지네이션을 공통 테이블 컴포넌트 안에 넣는다면 데이터를 테이블에서 가져오지 않으면 테이블을 이용하는 상위 컴포넌트에서 페이지에 대한 정보를 가지고 있고 이것을 테이블에 넘겨주..

기능 요구사항 분석 피그마에서 가져왔다. 위에서 알 수 있는 것은 페이지가 최대 7개만 보여져야 한다는 것이고, 선택된 페이지를 가운데에 오도록 해주어야 한다는 것이다. 구현 export default function Pagination({ currentPage, setCurrentPage, allDataCount, perPageDataCount }: Props) { const pageCount = Math.ceil(allDataCount / perPageDataCount); const pageNumberList = createPageNumberList(currentPage, pageCount); return ( {pageCount > PAGE_LIMIT && ( setCurrentPage(current..

코딩 컨벤션 조율 프로젝트를 진행하며 코딩 컨벤션을 제대로 맞추어 본 적이 없었다. 이번에 스프린트에서 중급 프로젝트를 시작하며 코딩 컨벤션을 확실하게 정하게 되었다. 이를 잘 지키려고 노력만 하면 된다. 대충 이정도로 정했는데 사용하고 있는 airbnb 룰에서 어느정도 컨벤션을 통일시켜주고 처음부터 세세하게 잡고 가기에는 시간이 없으므로 나머지 컨벤션은 추후 개발을 진행해나가면서 하기로 했다. 역할분배 이전에 공통 컴포넌트 작업 분배 나는 추후에 이 프로젝트에서 공고 리스트 데이터를 불러와서 캐싱하는 작업(페이지네이션 이용)을 수행하고 싶었기 때문에 공통 컴포넌트에서 pagination을 만들고 싶다고 팀원들에게 어필을 하였다. 다행히도 내 의견을 받아들여주셔서 pagination 컴포넌트를 만들게 되..

eslint 설정 airbnb룰을 따르기로 했다. yarn add -D eslint-config-airbnb eslint-config-airbnb-typescript yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin yarn add -D @typescript-eslint/parser yarn add -D prettier eslint-config-prettier eslint-plugin-prettier 위 같이 설치를 진행후, { "env": { "browser": true, "es6": true }, "extends..

위는 스프린트 1기 팀원들의 프로젝트를 보다가 발견한 코드인데 우리 팀이 진행중인 방식보다 더 맘에 들었다. 스타일드 컴포넌트는 앞에 S를 붙여주는 게 좋았다 컴포넌트랑 스타일드 컴포넌트가 구분이 안되었는데 이것을 활용하면 너무 좋을 것이다. 아니 왜 이걸 생각을 못했을까... 그리고 스타일드 컴포넌트에 prop을 넘겨줄때 $를 붙이는 것도 까먹어서 콘솔창에 에러를 봐야 했다.... 이런 부분도 신경쓰면 좋을 것이다. 이제 1주일 동안 리팩토링을 진행하니 이 부분을 팀원들에게 말해줘야 겠다. 리팩토링할 부분은 아래와 같다. 1. 컴포넌트 별로 파일 형식이 너무 통일이 안되어 있다. -> 예시) 어떤 컴포넌트는 index.js가 있고 어떤 컴포넌트는 없다. 컴포넌트간 이름 중복이 있는데 폴더 구조가 이들의..

프로젝트 진행중에 popOver를 만들었는데 absolute를 주었음에도 불구하고 popOver가 나타날때 레이아웃이 깨지는 문제가 있었다. 개발자도구로 스타일을 보아도 아무런 변화가 없는데 왜 레이아웃이 밀려나는 걸까? 이 문제는 검색하기에는 어떤 키워드로 해야할지 애매하기 때문에 내가 이것저것 만져보며 해결했다 Relative 된 요소: Contents의 직계자식으로 Popover를 넣었더니 해결됐다!

프로젝트 시작! 왓츠핫이라는 맛집 숙박 여행지 리뷰앱 프로젝트 진행에서 프론트엔드 팀의 리더를 맡게 되었다. 팀에는 백엔드 6명과 나를 포함하여 프론트엔드 2명이 있다. 프로젝트를 주도하시는 분의 권유로 프론트엔드 팀의 리더를 맡게 되었다. 막막했던 부분 + 해결 막막했던 부분은 디자이너가 없다는 것이다. 다른 프론트엔드 팀원과 개발을 진행해야 하기 때문에 와이어프레임과 디자인이 반드시 필요하다고 생각했다. 여러 웹사이트를 뒤지면서 여행 리뷰와 어울릴만한 디자인 템플릿을 찾았다. 피그마는 이전 프로젝트에서 한 번 써본 적이 있어서 직접 디자인을 하였다. 내가 이 프로젝트를 통해 얻게 될 것들 1. 이번에는 AWS에 프론트를 배포할 것이고, CI/CD 파이프라인을 구축할 것이다. 2. Daisy UI와 T..