코드스테이츠 부트캠프에서 프로젝트를 진행할 때에 저는 전체적인 틀을 못보고 컴포넌트 하나하나를 자세히 보는 습관이 있다는 것을 알았습니다. 그래서 이번에 전체적으로 폴더정리를 했습니다.

폴더 정리

저는 컴포넌트 별로 분리를 시켜야 보기가 편해서 폴더를 컴포넌트 별로 다 만들었습니다. 차후에 추가될 폴더들은 아직은 없을 걸로 예상되며, 각각의 폴더 안에 파일만 추가할 계획입니다.

메인 페이지

메인 페이지 입니다. 구글지도를 mapView를 사용하여 불러왔고, 현재 위치는 맥북을 구해야 설정할 수 있기 때문에 일단은 변수가 아닌 특정 값을 넣어놓은 상태입니다.

구글 지도 관련 코드

(맥북으로 코딩하고 싶읍니다...)

공지사항 기능

저는 기업협업 프로젝트에서 웹크롤링을 했던 경험이 있습니다. 이 경험을 살려 위에 보이는 공지란에 누비자 웹사이트를 크롤링해서 사이트의 공지사항을 넣을 계획입니다. 지금은 하드코딩으로 값을 넣어놓았습니다.

에러 수정

공지사항이 5초마다 바뀌게 만들고 싶었습니다. 처음에는 setInterval로 5초마다 idx값을 1씩 증가시켜 값을 할당해보았는데 값이 불안정하게 튀는 것을 발견했습니다. 1,3,2,4,3...이런식으로 값이 2증가하고 1줄어드는 방식으로 에러가 발생했습니다. 이를 조정하기 위해 검색을 해보았는데 useInterval를 사용해보라는 페이지를 발견했습니다.
(참고: https://bit.ly/3pOzATg)

useInterval

이를 참고해서 보면 리액트는 기본적으로 매 렌더링 이후에 효과들을 재적용한다고 합니다. 이 때문에 setInterval를 사용할 때 값이 튀었다고 생각할수도 있겠습니다. 이를 방지하기 위해 변경 가능한 최근의 interval callback을 가리키는 savedCallback이라는 변수를 만들어서 값을 보호해주는 겁니다. 그리고 그 역할을 해주는 것이 useRef()이라고 합니다.
useRef란 특정 DOM을 선택할 수 있도록 하는 기능을 가지고 있습니다. 리액트를 사용할 때 간혹 DOM을 직접 선택해서 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야하던지 다양한 상황이 있습니다. 이럴 땐 리액트에서 ref라는 것을 사용한다고 합니다.

useInterval의 코드입니다. useRef로 값을 설정하고, callback함수가 변경되면 savedCallback에 값을 저장합니다. 그리고 delay가 설정되면 해당 delay만큼 내부에서 setInterval를 실행하고 clearInterval로 값을 초기화 합니다. 값을 savedCallback에 저장하고 나머지는 clear함으로써 렌더링 될 때 setInterval를 방지하고 값이 재적용 되는 것을 막아주는 함수로 보입니다.

나머지 페이지

반납안내 페이지

아직 틀도 못 잡았지만 반납 안내 페이지 입니다. 여기에는 반납하는 방법을 이미지로 보여줄 계획입니다. 지금 생각해보면 대여하는 방법과 반납하는 방법 두 가지를 알려주어도 될 것 같습니다.

favorite 페이지

favorite 페이지는 내가 자주 사용하는 터미널을 즐겨찾기하고, 이를 확인할 수 있게 해주는 페이지 입니다. 아직 표시되지 않지만 메인 페이지에 터미널의 위치를 표시하고, 터미널을 클릭했을 때 해당 터미널의 잔여 자전거 대수와 주차공간 현황을 표시할 계획입니다. 그리고 즐겨찾기 버튼을 누르면 favorite 페이지에서 확인이 가능하도록 만들려고 합니다.
하지만 이전에 로그인을 해야 이 기능이 활성화 되도록 만들 계획입니다. 로그인은 구글과 카카오 로그인 2개를 계획하고 있습니다. 이전에 oauth를 시도했었는데 실패했던 기억이 있어서 이번에는 성공하고 싶습니다..!