2023.11

**#프론트엔드 개발자 #**charity_finder ****

Charity finder

Library / Framework.

• Frontend: React, TailwindCSS, Axios, localStorage
• Version Control: github
• Deployment: vercel
• Build Tool: vite
• Third-party API: Every.org API

<aside> ✏️

• 컴포넌트 기반의 구조를 가진 React를 사용
• 타입정의를 명확히 하여 오류를 줄이고 추후 유지보수를 위해 TypeScript 사용
• 해외에서 한 첫번째 개인프로젝트 PM(instructor)의 요구사항에 맞게 제작
• 로컬스토리지를 이용해 페이지 저장
• react-router-dom을 이용한 페이지 간 네비게이션 관리
• git을 이용해 코드버전 관리 및 vite를 사용하여 배포
• 이 외 TailwindCSS를 사용하여 UI 작업 시간을 단축
• Request → API → Response </aside>

받은 요구사항.

<aside> 📌

Charity Finder Application

Objective

Create a web application that allows users to search for charities, view detailed information about each charity, and save their favorite charities. This application will be built with React, Typescript (.tsx/ts) & Tailwind CSS and utilize the Every.org API for data fetching.

Required Tech Stack: React, Typescript (.tsx/ts) & Tailwind CSS

Example: https://charity-finder.vitochan.com

사용자가 자선 단체를 검색하고, 각 자선 단체에 대한 자세한 정보를 보고, 좋아하는 자선 단체를 저장할 수 있는 웹 애플리케이션을 만듭니다. 이 애플리케이션은 React, Typescript (.tsx/ts) 및 Tailwind CSS를 사용하여 만들고, Every.org API를 이용해 데이터를 가져옵니다.

필수 기술 스택: React, Typescript (.tsx/ts) 및 Tailwind CSS

</aside>

느낀 점.

• 처음으로 받았던 과제 주어진 기한은 반나절 정도였지만 주어진 요구사항 문서를 읽으며 하나하나 작업한 후 인스트럭터로 부터 코드가 비교적 깔끔하다는 칭찬받아 좋았다.
• useLocation을 이용한 상태 전달 및 접근이 처음에 생각이 나지 않아서 살짝 헤맸지만 사용법을 알고 난 후 쿼리스트링에 포함하지 않고 데이터를 공유할 수 있어서 조금 더 깔끔한 흐름을 가져갈 수 있었다.

• 디자인과 SEO적으로는 신경을 쓰지 못한게 바로 점수로 나타났다.