Hoops 2

[TIL] React Datepicker 시간 선택 커스텀

스터디룸 예약 서비스인 'hoops' 개발을 진행하던 중, 예약 시간 선택을 프론트에서 일부 제어할 수 있겠냐는 요청을 받았다 베타테스트는 우선 당일 예약만 진행하기로 했기에, 나는 '사전에 날짜 선택을 위해 구축했던 React Datepicker 라이브러리를 개조해서 시간 선택 알고리즘을 적용할 수 있지 않을까?' 라고 생각해 바로 작업에 들어갔다 조건은 다음과 같다 - 예약 시간은 9:30-5:30 사이에 결정 (임시) - 사용 시간은 최소 30분에서 최대 2시간 * 즉, 5:00 시작이라면 5:30까지 사용 가능 정리하면, 종료 시간의 최대값은 시작 시간의 2시간 이후로 하되, 5:30을 넘어가면 안된다 React Datepicker crafted by HackerOne reactdatepicker..

Front-end/React 2021.12.23

[TIL] 첫 React 백엔드 연동

해당 글은 hoops 프로젝트 테스팅을 위해 클라이언트를 서버와 연동하는 과정을 기록했습니다. 프론트엔드 React/Apollo GraphQL, 백엔드 Node.js/Express/PostgreSQL을 활용하는 프로젝트로, 변수가 많은 연동 작업인 만큼 해당 글의 방식은 참고만 하되, 항상 옳은 방법이 아님을 미리 알려드립니다. DB 생성 1. pgAdmin4(PostgreSQL)를 실행하고 비밀번호 입력 후, Servers > Databases 우클릭 2. Create > Database > 아무 이름 입력 > Save해서 DB 생성 백엔드 Repository 연동 1. 백엔드 repository를 최신 상태로 git clone 해주고 IDE로 열어준다 2. 가장 상위 폴더에 .env 파일 생성하고 다..

Front-end/React 2021.12.06