전체 글

기능 요구사항 분석 피그마에서 가져왔다. 위에서 알 수 있는 것은 페이지가 최대 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..

입사과제를 받다..! 지인 추천을 통해 작은 스타트업에서 Next.js와 ts로 개발하는 직무에 채용될 기회를 얻었었다. 연락한지 얼마 되지 않아 입사과제를 받게 되었다 일을 키우다 입사과제는 포트폴리오를 만드는 것이었는데 간단한 과제이지만 디자인 시안이 주어지지 않고 평가항목에는 창의성을 강조했기 때문에 대충 만들다가는 눈에 띄지 않을 것 같았다. 그래서 내 나름대로 과제의 스케일을 키워서 진행했다. 과제를 진행하며 처음 써보는 기술들을 (graphql, supabase)를 적용하며 과제를 만드는 중에 일주일로는 무리일 것이라는 생각이 들었다. 또 현재 스프린트라는 부트캠프에 참여하고 있고 회사와 부트캠프의 병행은 힘들기 때문에 과제를 수행하는 주말동안 정말 많은 고민을 했다. 아직 중급 프로젝트와 심..

문제점 요구사항 위처럼 6개의 모달을 만들어야 했다. 내가 모달을 만든 방법 export const Modal = ({ modalRef, openModal, handleModalClose, children, }: Props) => { if (!openModal) { return ; } return ( . {children} ); }; 위의 modal은 여러 모달의 공통 부모 컴포넌트 역할을 하며, 모달의 공통적인 기능들을 넣어놓았다. 모달을 여는 함수(openModal을 true로 바꾸는 함수)의 경우는 모달을 사용하는 쪽에서 만들어줘야 했다. 모달을 닫는 함수 또한 마찬가지였고, 이것들을 모달을 사용하는 쪽에서 일일이 state로 작성하는 것은 비효율적이었기 때문에 커스텀훅을 만들었다. import {..

좋았던 점 React-hook-form에서 제공해주는 커스텀 훅을 이용하면 정말 간편히 폼을 조작할 수 있었다. 단순히 위처럼 적고 이를 input에 넣어준다면 이메일이 비었을 때, 정규식에 맞지 않을때, checkIsDuplicated라는 비동기 함수에서 true가 아닌 에러를 리턴할 때 각각 알맞은 error를 세팅해준다. 코드도 꽤나 깔끔하게 짤 수 있었고 너무 마음에 들었다. 별로 였던점 아무것도 입력하지 않고 제출 버튼을 누르면 react-hook-form에서 제공하는 함수인 handleSubmit을 실행시켜 error가 있을시에 api request를 보내지 않도록 하였다. 문제는 이 handleSubmit을 실행하면 위와 같이 자동으로 focusing이 된다는 것이다.(에러가 보여야 하는데 ..

이미지 이슈 Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. 외부 url에서 받아오는 이미지의 경우는 next/Image를 통해 이미지를 최적화하는 것을 고려하라고 한다. 반면에 외부에서 받아오는 이미지가 아닌 서버 자체, 즉 프로젝트 assets에 있는 이미지의 경우는 Image를 적어주지 않으면 보이지가 않았다. 서버 내에 존재하는 이미지는 Image 컴포넌트를 이용해야 이미지가 제대로 뜨지만 next.config.js 설정을 별도로 해주지 않았기에 link[imageSource] 부분 때문에 Image 컴포넌트를 이용할 ..

회고 작성 이유 위같이 메세지가 왔다 그래서 한 번 정리해보고자 한다 나는 무엇을 잘했는가? 파트2 팀원 중에 열정이 좋고 이해력도 좋으신 분이 있었다. 하지만 아무래도 그 분은 코딩을 시작한지 얼마 안 되었다 보니 도움이 필요하였고 도움을 요청 받았을때 잘 알려드리고 싶었다. 내가 설명을 잘하려고 노력했기도 했지만 그분의 이해력이 좋으셨다. 그분이 헷갈려하시는 걸 도움을 드리면 이해하시고 좋아하는 모습을 볼때 정말 뿌듯했다. 덕분에 설명하는 능력도 조금은 나아진 것 같고, 이런 일을 했다는 거 자체가 팀에 도움이 되었다고 생각한다. 나는 어떤 문제를 겪었는지, 어떻게 해결했는지 나는 늘 마감이 아쉽다. 구현해야 하는 기능이 있으면 이를 빨리 만들고 싶은 나머지 코드 품질이 너무 안 좋아졌고, 그 이후에..