[Toy project] Weekly Vocabulary

링크: Weekly Vocabulary

토이프로젝트를 만들게 된 이유

Udemy, NomadCoders를 통하여 React강의를 듣고 해당 강의에서 알려주는 프로젝트만 따라 만들어 보았기 때문에 혼자서 기본적인거라도 만들어보자는 생각에 리액트를 배우고 처음에 많이 만들어 본다는 TodoList나 Vocabulary중 단어장을 선택하여 만들게 되었다.

기술 선정

React

리액트를 배웠기 때문에 리액트로 간단한거라도 직접 만들어봐야 된다고 생각했다.

Styled Components

module css로 일반적인 CSS만 써보았는데 CSS파일을 만들지 않고 프로젝트를 만들어보자는 생각에 선택하게 되었다.

React Router DOM V6

SPA지만 실제 페이지가 이동되는것 처럼 보여주고 싶었고, 강의로 V5버전을 배웠지만 V6를 사용해봐야 될것 같아서 V6 버전으로 도입하게 되었다.

Advice Slip JSON API (참고: AdviceSlip)

메인 페이지에 보여줄것을 고민하다 영어 공부도 하고, 재미를 줄겸 랜덤한 명언을 영어로 보내주는 API를 찾게되어 사용했다.

Github Pages

리액트 앱의 경우 SPA로 몇 가지 제한이 있지만, 404페이지를 index.html파일과 똑같이 만들어서 원하는 동작을 수행하게 만드는 트릭이 있다는것을 알게되어 사용하게 되었다.

만들면서 생각한 것

1. 정말 간단한 앱도 혼자서 뼈대부터 디자인까지 구성하는것은 생각보다 쉬운게 아니라고 느꼈다.
2. styled components에 props를 이용하는것을 보고, 왜 사용하는지 알게된 것 같다.
3. Github, Medium등에서 각종 프로젝트와 글을 보며 최신 트렌드를 자주 찾아 봐야겠다.

📌 한 줄 회고

강의를 본 뒤 혼자서 간단한거라도 직접 만들어 보는게 정말 중요한 경험인 것 같다. 🦙