0. 프로젝트 주제 선정
- 팀 미니프로젝트의 조건 중에서 API를 받아오는 부분을 보고 https://www.data.go.kr/ (공공 데이터 포털) 에서 국립원예특작과학원 오늘의 꽃 조회 서비스 를 활용하여 꽃을 파는 서비스를 만들면 좋겠다 라고 생각하여 만들게 되었습니다.
- https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15084605
- 무료로 예쁜이미지를 쉽게 찾을수 있는것도 한몫했습니다.
1. figma 로 대략적인 와이어 프레임 셋업

작업하기 조금 편하기 위해서 하고자 하는 프로젝트의 대략적인 레이 아웃을 짰습니다.
일단 필수적으로 구현 할것을 토대로 짰습니다.
2. 프로젝트 셋업
- 개발 환경을 조성하고 제일 기초버전을 setup했습니다.
- 기술 스택
- Figma / VSC
- Next.js / eslint(airbnb) / TypeScript / tailwind CSS / CVA / Zod / react-hooks-form
- git / github
- firebase
3. API CAll
받아 오고자하는 API를 활용 신청 후, 불러오는 작업을 해놨습니다.
axios 를 통해 불러오고 xml 형식의 데이터 파일을 xml2js 라이브러리를 통새 json 형식으로 간간히 파싱해서 사용할수있었습니다.

데이터 형식을 간단히 설명하자면,
현재 달과 현재 날짜를 받아 하루하루 꽃을 다르게 추천해 줍니다 (매일 오는 데이터가 다릅니다)

사실 데이터 불러오기가 힘들지 않을까 고민 많이 했었는데 막상해보니 편한 라이브러리도 알게되고 빨리 해결 할 수 있었습니다!
4. 현재 진행 하고 있는일
- 헤더 (네비게이션) 과 footer를 작업하고 있습니다.
- Next.js 의 layout 기능을 이용하여 전 화면에나오게 할 계획입니다.
- Firebase를 이용한 로그인
- Firebase auth 를 이용해 회원 가입과 로그인을 할 예정입니다.
- 주말에도 진행 예정입니다!!
- 어차피 집이 너무 더워서 다른데 나가서 작업하게되면 무조건 하게되어있더라구요 ㅎ;
5. 느낀점
- 아무래도 혼자하다보니 조금 게을러 지게 되는데 (...) 이거는 꼭 해야 겠다! 라는 마음으로 진행 하고있습니다.
- 저번 토이때 next의 장점을 최대한 못살린게 아쉬웠는데 이번에는 SSR 에 대한 공부를 하며 구현하니, 조금더 공부가 됩니다.
'우당탕탕 국비교육' 카테고리의 다른 글
미니프로젝트 이미지 (0) | 2024.07.08 |
---|