React를 학습 기록을 담은 개인 레포지토리입니다. 저는 8년 차 웹 개발자로 Vue.js를 주로 사용하고 있습니다. 그러나 최근에는 React에 대한 관심이 높아져 이를 학습하고 있습니다. 이 레포지토리에는 React 학습과정과 프로젝트를 기록하고 있습니다.
프로젝트1: react-router-tutorial
- 기간: 2023. 04. 10 ~ 2023. 04. 11
- 사용 기술: react, vite, eslint, babel, react-router,
- 설명: 리액트 라우터 공식 문서의 튜토리얼을 따라 한 결과물입니다. 이를 통해 리액트 기본 문법을 습득했습니다. IndexedDB를 활용해 CRUD를 구현하는 부분은 쇼핑몰 장바구니 과제에서도 활용해 보기도 했습니다.
프로젝트2: React Staterkit
- 기간: 2023. 05. 26
- 사용 기술: react, vite, eslint, babel
- 설명: 리액트 프로젝트를 시작 시 vite를 사용하여 기본 프로젝트를 생성한 후 매번 추가적인 개발 환경 설정을 반복해야 했습니다. 이러한 반복 작업을 줄이기 위해 ESLint Standard 규칙과 babel 설정을 포함한 개인용 기본 프로젝트 설정을 구성했습니다. 이런 기본 프로젝트 설정은 시기에 따라 유동적으로 변경되며 이를 위한 버전 관리를 진행할 예정입니다.
프로젝트3: react-quiz-app
- 기간: 2023. 12. 06 ~ 2023. 12. 08
- 사용 기술: react, styled-component, msw, typescript
- 설명: Udemy 강의를 듣는 과정에서 퀴즈를 한 번만 풀고 지나가는 것이 아쉬웠고 기본적인 개념을 리마인드 하고 장기 기억으로 유지하기 위해 만들었습니다. 리액트로 퀴즈 앱을 만드는 유튜브 영상과 MSW를 사용해서 API를 모킹하는 영상 2개를 참고해서 진행했습니다. 향후에는 퀴즈 데이터를 정기적으로 업데이트하고 사이트 디자인을 현대적으로 개선하여 개인 학습에 사용률을 높이려고 합니다. 또한 별도의 앱이나 모바일 버전을 지원하는 것이 목표입니다.
프로젝트4: snapgram
- 기간: 2024. 03. 04 ~ 2024. 03. 15
- 사용 기술: react, react-router, vite, eslint, typescript, tailwind, react-query, shadcn-ui, appwrite
- 설명: 유튜브 영상을 보면서 클론 프로젝트를 진행했습니다. 실무에서 사용하지 않는 다양한 라이브러리 사용을 경험해 볼 수 있었습니다. AuthContext.tsx에서 얻은 인사이트는 실무에서 진행 중인 뷰 프로젝트에서 composable 작성에 유용하게 활용되었습니다. appwrite를 활용하여 백엔드를 구성하면서 클라우드화되는 트렌드를 느낄 수 있었으나 이는 신입 개발자들에게는 배경지식을 위한 학습 목적으로는 아쉬울 수 있겠다고 느꼈습니다. 또 실제 비즈니스 환경에서는 다른 클라우드 서비스와의 비교를 통해 각각의 비용과 관리 측면에서의 장단점을 고려해야 됨을 느꼈습니다.
프로젝트5: tiktok-clone-nextjs
- 기간: 2024. 05. 14 ~ (진행중)
- 사용 기술: react, next, vite, typescript, tailwind, zustand
- 설명: 유튜브 영상을 보면서 클론 프로젝트를 진행 중입니다.