전체 글

파이썬으로 푼 이유는 갑자기 알고리즘을 풀고 싶어서 풀다가 자바스크립트로 입출력하기 귀찮아서이다. n = int(input()) time = [] for _ in range(n): time.append(tuple(map(int, input().split()))) # print(time) time = sorted(time, key=lambda x: (x[0], x[1])) # print(time) cnt = 0 while len(time) > 0: start = time[0][0] end = time[0][1] del time[0] for i in range(len(time)): if time[i][0] >= end: start = time[i][0] end = time[i][1] del time[i] b..

팀원 분의 헤더 컴포넌트 구현 한 팀원 분께서 위 컴포넌트를 구현하는 것을 맡으셨다. 간단해보이지만 사실 간단하지 않다. 로그인 로그아웃 유무도 그렇고 search 하는 부분도 그렇고 무엇보다 저 notification. 헤더 맨 오른쪽 자그마한 아이콘을 누르면 뜨는 컴포넌트이다. 팀원분이 여기서 어려운 부분이 있으셨는데 아래와 같다. 타입 쪽은 내가 자료를 찾아서 궁금증을 해소시켜드렸고 첫 메시지를 보면 모든 알림을 읽음 처리했을때 자동으로 알림창이 닫히는 문제가 있으셨다고 했다. 뜨거운 토론 현장 이에 대해서 이 팀원 분과 많은 얘기를 나눴다. 나도 코드를 보며 문제점을 찾기 정말 어려웠지만 결국엔 찾아내었는데 처음에는 race condition 이슈인가(?) 하다가 자바스크립트 동작 원리 때문임을 ..

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