• 개요
  • ReactJS 로 API 활용하여 코인들의 시세를 트래킹 하는 웹 서비스 작성
  • 추가로 TypeScript, Styled-Components, React-Query 활용
  • 차트 및 각 코인들의 자세한 정보 제공
  • 차트는 ApexCharts 라이브러리 사용

• 가장 어려웠던 점
  • 배포
    • 이전에도 풀스택 서비스 포함하여 배포 해보았지만 리액트로 작성한 프로젝트를 배포한 것은 처음이라 여러 문제에 부딪혔습니다.
  • 문제였던 점
    • 라우터 사용시 BrowserRouter 컴포넌트 를 사용하였는데 gh-pages 로 배포시 gh-pages 의 특성으로 문제가 생기는 줄 몰랐었습니다.
    • npm gh-pages 라이브러리를 사용하여 배포할때 왜 package.json 에 "homepage" : "https://{유저이름}.github.io/{프로젝트이름}" 을 해줘야하는 지 몰라 설정하지 않고 진행했었습니다.
  • 해결방법
    • BrowserRouter 를 HashRouter 로 변경하여 해결하였습니다.
    • package.json 에 "homepage" : "https://hyeonwooga.github.io/react_typescript--coin_tracker" 추가
  • 문제해결하며 느낀점
    • 로컬에서 서비스 잘 돌아가는 것을 확인하고 배포는 빨리 끝내고 다른 공부하러 가고싶어서 구글링하여 블로그에 써있는 것만 보고 했었는데, 공식문서나 더 많은 정보들을 참고하여 스스로 이해하고 작업해야 문제가 생겨도 잘 대응할 수 있다고 느꼇습니다.
    • 앞으로는 무언가 작성하거나 배포하는 등의 작업을 할때 스스로 무엇을? 왜? 어떻게? 하는지 알고해야 한다고 짧은 시간동안 해맸지만 뼈저리게 느끼게 되었습니다.

• TypeScript 첫 사용 경험 회고
  • 그 전 JavaScript 만 사용하며 느꼈던 점
    • C언어로 프로그래밍을 처음 접했던 저에게 JavaScript 의 유연성과 간편함은 엄청난 매력이기도 했지만(+NodeJS 부터 시작된 범용성은 아직도 너무 멋지기만 합니다)
    • Error 메시지가 너무 추상적이라는 것, 그리고 변수 선언시 Type 을 지정하지 않아서 잘 못된 타입이 들어가도 그냥 대충 잘 못된 타입의 데이터로 처리가 되는 것등에 오히려 조금 난해한 언어라고 생각되었습니다.(그래도 여전히 JS 는 너무 멋집니다)
  • TypeScript 를 사용하며 느꼈던 점
    • Interface 를 사용하여 객체의 각 데이터 타입을 지정해줘야하고, NPM 라이브러리들도 @Types 들을 추가로 인스톨하여 사용해야하는 것이 처음이라 어색했지만
    • Interface 지정 후 삶이 변한 것 같았습니다.
    • 이전 JavaScript 에서는 뭐가 잘 못되었는지도 모르고 열심히 코드 작성을 다 마친 후 에러를 확인 할 수 있기 때문에, 어디서부터 틀렸는지도 찾기 어려운 반면 TypeScript 는 Save 전부터 뭐가 잘 못됬다고 알려주기때문에 하나하나 오히려 더 제대로 공부하면서 작업할 수 있었던 것 같습니다.
  • 결론
    • TypeScript 를 사용함으로써 Critical 한 오류의 발생을 예방하는 데 큰 도움이 될거라고 느꼇습니다.
    • 사실 Interface 를 정의하는 것이 공부하고 있는 저에게는 어려운 부분이지만, 오히려 Interface 를 정의하려고 더 심도깊은 데이터 구조들에 대한 공부가 가능하다고 느꼇습니다.
    • 앞으로 할 프로젝트에 가능하다면 전부 적용해보고 싶습니다. JS 나 React 로만 만들었던 프로젝트도 TypeScript 로 마이그레이션 하며 다시 공부해봐도 좋을 거 같다고 생각했습니다.

• Styled-Components 첫 사용 경험 회고
  • 장점
    • 간편하다, CSS 코드를 더 짧지만 강력하게 작성할 수 있다고 느꼇습니다.
    • Component 단위로 개발하는 구조에 손흥민과 케인같은 호흡 같았습니다.
  • 단점
    • 기본 CSS 외에 스타일스 라이브러리는 SCSS 이후 두번째 사용중인데 단점을 느끼지 못했습니다.
    • 구조나 환경상 CSS 파일을 따로 관리하는 게 유리하다면 SCSS 를 선택하지 않을까 했습니다.(아직 공부와 프로젝트를 더 진행해봐야 이런걸 보는 눈이 생길 것 같습니다.)
  • 결론
    • 너무 편하고 좋았습니다. 🤣, 앞으로 다른 스타일스 라이브러리도 사용해보고 장단점을 더 공부하며 나중에 현업에서 개발시 어떤 것이 유리할지 판단하는 안목이 생기도록 노력하겠습니다.

• React-Query 첫 사용 경험 회고
  • 사용한 이유
    • 코인 목록 페이지에서 코인을 클릭한 후, 다시 코인 목록 페이지로 돌아올때 다시 코인 목록의 데이터를 API 로 넘겨받으며 생기는 로딩을 없애기 위해 사용했습니다.
  • 추가 장점
    • 추가로 API 관련 코드를 작성할 때 React-Query 의 도움을 받아 훨씬 간편하게 작성할 수 있었습니다.
  • 결론
    • 앞으로 더 많이 공부하며 React-Query 를 비롯 다른 라이브러리들도 잘 활용하면 좋겠다고 생각했고 그러기 위해서 기본 React, JS, HTML, 웹 구동방식 등 깊은 공부도 필요하다고 느꼇습니다.

• 마무리
  • 이 회고를 작성하면서도 시간이 지난 것들은 또 조금씩 기억이 잘 안나는 것을 느꼇습니다.
  • 앞으로 공부하는 것들을 바로바로 정리해보면서 제대로 알고 이해하도록 노력하겠습니다.
  • 더 다양한 기술들을 접하면서 재미도 있지만 한편으로는 아직도 안 겪어본 기술이 많기때문에 조바심이 들기도합니다.
  • 하지만 차근차근 진중하고 열정적으로 공부하며 선배님들이 이뻐하고 나중에는 후배님들도 존경할 수 있는 개발자가 되도록 노력하겠습니다.

<깃허브 링크>
https://github.com/HyeonWooGa/react_typescript--coin_tracker
<사이트 링크>
https://hyeonwooga.github.io/react_typescript--coin_tracker/#/