[220601] TIL

릿·2022년 6월 1일

TIL

목록 보기

23/28

📃 삽질일지

💬 잡소리

어제 맥북에어를 샀고, 그때부터 맥os으로 개발을 시작했다. 그리고 아까까지 맥에 적응하느라 진을 뺐다.

...웃긴건 그거다. 지금까지 맥북프로를 6년 넘게 쓰고 있었는데 실제로 맥os로 뭔가를 한건 한손에 꼽을 정도이다. 내장그래픽에 램 8기가라면 이전에 가지고 있었던 30만원짜리 노트북과 다를 바가 없다. 그냥 고사양의 작업을 하지 않을 땐 빠르고, 간지나고, 많이 무겁고, 비싼 노트북인 것이다. 게다가 나는 앱등이라 맥os로 부팅하지 않으면 그냥 일반 노트북일 뿐... (윈도우를 쓸 땐 에어팟 연결도 잘 안된다.)

얼마 전에 팀프로젝트를 하는데 퍼포먼스 테스트 결과를 공유하다가 대부분 90점대가 나오는데 나 혼자만 20점대 퍼포먼스가 나와서 아, 이건 우리가 만든 웹이 문제가 아니라 내 노트북 문제겠거니 싶어서 맥북을 질렀다. 그리고 다행이도 m1은 부트캠프를 쓸 수 없단다. 그럼 뭐...맥os를 써야지 어쩌겠어ㅠ... 그리고 윈도우를 쓸 수 없다면 게임도 못 한다는 의미와 같으니까 맥북프로 사서 뭐 하겠나 싶어서 맥북에어로 구매했다.

근데 두께는 어마어마하게 얇아졌는데 맥북프로랑 무게가 비슷한건 기분 탓이겠지?

...응, 분명 기분 탓일거야! 😀

📔 개인과제

1. 주제 정하기

개인과제 주제를 정하는 건 생각보다 어렵지 않았다. 누군가에게 필요할지도 모를 그런 걸 만드는 거 보단 나에게 필요한 걸 만드는 게 제일 정답일 것 같았기 때문이다.

이전에 등산을 좋아하지 않는 내가 등산을 해본답시고 제주숙소 주변의 오름, 오르기 쉬운 오름을 찾았는데 생각보다 괜찮은 자료가 나오지 않아서 난이도별, 지역별 오름을 한눈에 볼 수 있는 사이트를 만들기로 결정! API는 공공데이터포털의 오픈API를 쓰기로 한다.

2. 홈페이지 명세

1. 타입

반응형 웹. 최소 300px까지 지원한다.

2. 메인

구글처럼 로고와 검색창을 가운데 위치 시키고 검색창 옆에 드롭다운을 넣어 전체, 지역명, 오름명을 지정하여 검색할 수 있도록 한다. 검색창은 추천검색어를 지원한다.

검색창 아래에 '초보자들이 도전하기 쉬운 오름 찾기' / '지역별로 오름 찾기' / '인기도별로 오름 찾기'를 정사각형 버튼으로 만들어 위치시킨다.

3. 검색 이후

검색창은 상단부분에 크기를 줄여 위치시키고, 검색창 아래에 인기도 탭, 난이도 탭, 지역 탭을 넣는다.

인기도 탭과 난이도 탭은 오름차순, 내림차순 정렬을 지원한다. 지역 탭은 탭을 눌렀을 때 제주 시의 읍/동 드롭다운을 제공하고, 드롭다운을 눌렀을 때 해당 읍의 오름 카드가 나타나게 한다.

오름 카드는 기본 10개만 보여준다. 밑으로 내리면 무한스크롤 기능을 사용하여 다음 10개를 보여주고 로딩 시에는 로딩스피너를 보여준다.

4. 추후 고려사항

올레길도 오름과 마찬가지로 검색할 수 있도록 지원. 올레길을 추가할 경우, GNB를 헤더부분에 fix한다.
그리고 시간이 남는다면 일본어 지원/다크모드도 추가해보자!

5. 사용기술

typescript, react, recoil, axios

3. 개발 시작!

1. API요청

일단 공공데이터포털 사이트 설명을 참고하여 axios로 비짓제주API data를 받아오는 건 성공!

2. 키워드 필터링

그 다음으로 해야할 건 data들 중에 해당 키워드에 맞는 object만 불러오는 거! 휴먼스케이프 코드를 참고하면 되겠거니 싶었는데 휴먼스케이프의 경우 api요청할 때 특정 검색어를 요청할 수 있었기 때문에 좀 다른 케이스인 것 같아서 구글링~!

일단 api자료를 전부 다 요청한다. (1367개)

useEffect(() => {
ˆ  getOreumApi({
    page: 1,
    perPage: 1367,
  }).then((res: any) => {
    setData(res.data.data)
  })
})

handleFilterOreumData함수를 선언하여 filter함수를 써서 콘텐츠명에 오름이 들어가는 object를 다 저장한다.

const handlefilterOreumData = () => {
  setFilterOreumData(data.filter((oreum: IOreumAPIRes) => oreum.콘텐츠명.includes('오름')))
}

map함수를 사용해서 화면에 뿌려준다.

{filterOreumData &&
  filterOreumData.map((oreum: IOreumAPIRes, i) => {
    const index = `oreum-${i}`
    return (
      <li key={index}>
        <p>{i}</p>
        <p>{oreum.콘텐츠명}</p>
      </li>
    )
  })
}

그리고 너무 슬프게도 해당 API의 오름 개수는 166개였는데 난이도가 표시되는 오름은 총 3개 뿐이었다. 난이도 표시 때문에 이 API를 가져왔건만...!!!

결국 처음에 쓰기로 했던 오름API로 바꾸기로 한다.
그럼 난이도 필터링은 어떻게 하지?...ㅠ

3. (다시) API요청

API를 요청할 때마다 console에 찍어보면 계속 4개가 찍히길래 useQuery를 사용해봤다.

const { data, isLoading } = useQuery(
  [`getOreumApi`, page, perPage],
  () => getOreumApi({ page, perPage }).then((res: any) => setOreumData(res.data)),
  {
    refetchOnWindowFocus: true,
    suspense: true,
    useErrorBoundary: true,
    onError(err) {
      if (isAxiosError(err)) {
        // eslint-disable-next-line no-console
        console.log(err)
      }
    },
  }
)

그래도 4개가 찍히네ㅠ...