🪙 blecoin
노마드 코더 - React.js 마스터 클래스 강의 들으면서 따라하는 클론 프로젝트입니다.
시작은 CRA를 사용하진 않고 react + typescript boiler plate를 사용했습니다.
직접 webpack, typescript, eslint, prettier 등을 세팅했으며,
기본 폴더들, 라우팅, 페이콘, 아이콘 등을 기본적으로 제공해줍니다.
- 제로초 강의와 구글링, 공식문서를 참고해서 세팅을 만들었습니다.
👉 공부한 것
1. styled-components
기존에 styled-components를 사용해 본 적이 있었지만, 공식 문서를 읽어본 적이 없어서 ThemeProvider같은 기능이 있는지조차 몰랐습니다.
styled-components의 ThemeProvider를 사용하면 쉽게 테마를 지정할 수 있는데 이 부분은 아직 제대로 공부해 보지 않아서 따로 정리는 하지 않고 넘어가겠습니다.
2. react-query
클라이언트와 서버의 비동기 처리를 쉽게 할 수 있도록 도와주는 라이브러리입니다.
현 프로젝트에서는 코인 파프리카 API를 이용해서 코인의 정보들을 가져옵니다.
코인의 정보를 가져올 때 react-query를 가져오지 않고 그냥 fetch나 axios를 사용해서 가져오면 데이터를 사용하는 컴포넌트에서 직접 비동기 요청 로직을 작성해야 하며, loading, error처리, 일정 시간이 지난 후 재요청하는 로직 같은 부분도 직접 만들어줘야 합니다.
제가 생각할 때는 컴포넌트에서는 화면을 표현하기 위한 처리만 하고, 데이터를 처리하는 로직은 분리하는 것이 좋다고 생각하기 때문에 컴포넌트에서 직접적으로 비동기 요청을 보내는 것은 좋지 않다고 생각합니다.
위와 같은 문제와 로딩, 에러 같은 반복적이고 당연히 필요한 부분을 쉽게 처리하도록 도와주는 라이브러리라고 생각이 들어서 추후에 시간 나면 더 공부해 볼 생각입니다.
( SWR이랑 비슷한 것 같음 )
3. recoil
상태 관리 라이브러리이며, redux에 비해 매우 쉽고 간단하게 사용이 가능했습니다.
아직 학습이 부족해서 감히 두 개를 비교할 수는 없겠지만, 코드량이 휠씬 적어서 바로 공식 문서 읽어보고 공부할 생각입니다.
현 프로젝트에서는 theme의 상태를 관리하는데 사용했습니다.
4. etc
- 차트:
react-apexcharts apexcharts <head>처리:react-helmettypescriptgh-pages
👉 격었던 문제
1. GitHub pages 배포 문제
CRA를 이용해서 만들면 자동으로 처리해주는 부분들을 직접 webpack설정하고 플러그인, 로더 붙이고 하는 작업들을 해주는 과정에서 많은 문제가 발생했습니다.
-
첫 번째로
html파일의 부재입니다.
React프로젝트를GitHub pages로 배포해보는 것이 처음이었기 때문에 어떤 방식으로 배포되는지 모르고 헷갈려서 겪었던 문제입니다.
당연히 배포할 때는index.html파일이 있어야 하는데 초기에HtmlWebpackPlugin을 등록하지 않고 빌드한 파일을 깃헙에 올려서 배포를 시켰기 때문에 빈화면만 보이는 문제가 있었습니다.
지금보면 정말 어이없는 실수였는데 이거를 못찾고 몇 시간 삽질을 했던 문제였습니다. -
두 번째로
react-router-dom처리입니다. (SPA)
이 부분은 구글링해보면 많이 찾아볼 수 있는 부분입니다.
<BrowserRouter>와 깃헙 페이지를 이용해서 배포하게 되면기본url이 달라서 문제가 발생합니다.
예를 들어서https://github.com/1-blue/react-clone-project에서 배포를 했다면<BrowserRouter>에서 인지하는기본url이https://github.com/1-blue으로 인지됩니다.
하지만 실제로는/react-clone-project가 붙은 채로 인지해줘야 하기 때문에<BrowserRouter>에basename으로/react-clone-project를 넣어줘야<BrowserRouter>가기본url을https://github.com/1-blue/react-clone-project로 인지해서 문제없이 라우팅 처리를 해주게 됩니다.
하지만 여기서 또 겪었던 문제가CRA로 프로젝트 생성 시package.json에서"homepage"부분을 보고 자동으로process.env.PUBLIC_URL의 값을 지정해 주는데 이 부분을 몰라서 한참 헤매다가webpack에서 직접 환경 변수를 등록해 주도록 처리해서 해결했습니다. -
세 번째로 새고로침 문제
GitHib Pages로 배포하면 기본적으로SPA를 제공해주지 않기 때문에 기본 페이지 외 다른 페이지에서 새로고침시 알 수 없는url로 처리되기 때문에 404에러가 발생하게 됩니다.
404.html을 이용해서 이 문제를 해결했습니다. ( 편법임 )
기본적으로 404에러 발생 시404.html을 보여주고 없으면 깃헙에서 제공해주는 html을 보여주게 됩니다.
이 원리를 이용해서404.html을index.html과 똑같이 만들어서 해결합니다.
404에러 발생 ->404.html보여줌 ->404.html이랑index.html이 같기 때문에404.html에서react-router-dom코드를 이용해서 라우팅 처리 성공
마무리
react-query, recoil, GitHub 배포, styled-components 등 많은 지식을 얻었는데 아직 제대로 활용도 못해봤고 공부도 안 했으니 이후에 공부하면 될 것 같음
원래 공부할 땐 처음부터 제대로 이해하고 활용하는 것을 바라기보단 처음에는 이것에 대한 전반적인 흐름과 어떤 역할을 하는지에 대해서만 이해하고 추후에 필요시 공부하고 적용하는 것이라고 생각합니다. ( 그냥 내 생각을 적고 싶었음 )
- blecoin >> 프로젝트 만들 때마다 하나의 레포지토리를 공유할 생각이라서 이후에 다른 페이지로 바뀔 수 있음
