GDSC Solution Challenge 2024

GDSC Solution Challenge 2024 회고

GDSC 에서 GDSC Solution Challenge 2024 를 blue, chan, Lucy 와 함께 작업했습니다.

 

1. TSX 를 사용한 이유
2. 회의 내용
3. 개발 내용 잡담

 

🥥 프론트엔드에서 TSX 를 사용한 이유

 

 

 

JSX는 JavaScript의 확장 문법으로, 주로 React 라이브러리에서 사용되는데,
이를 TypeScript와 함께 사용할 때는 TSX(또는 TypeScript JSX)라는 확장자를 사용합니다.
타입 안정성(Type Safety): TypeScript는 정적 타입 언어로, 변수, 함수, 객체 등의 타입을 미리 선언하고 체크할 수 있습니다. TSX를 사용하면 JSX 코드에 대한 타입 정보를 추가하여 개발자가 코드를 작성할 때 런타임 에러를 사전에 방지할 수 있습니다.
코드 가독성 및 유지 보수 용이성: TypeScript는 코드에 타입 정보를 명시적으로 제공하므로, 코드를 읽고 이해하기 쉽습니다. 또한, 코드 에디터
풍부한 에러 체킹 기능: TypeScript는 코드를 빌드하기 전에 타입 체크를 수행하므로, 런타임에 발생할 수 있는 에러를 사전에 잡아낼 수 있습니다. 이는 버그를 줄이고 안정성을 높이는 데 도움이 됩니다.

 

 

 

🥥 백엔드에서 JAP, Redis 사용한 이유

 

 

실시간 인기 검색어 순위를 구현하기 위해 Redis Sorted set 을 사용하였다.

Redis 는 메모리 기반의 DB이기 때문에 매우 빠른 성능을 제공하기 때문에 실시간으로 업데이트 되는 인기 검색어 순위 기능을 구현할 때 Redis를 사용하는 것이 적합하다고 생각했다.

또한 다양한 자료구조를 제공하는데 Sorted set 은 점수에 따라 정렬하기 쉽고 중복을 허용하지 않기 때문에 신뢰성있게 유지 및 관리가 용이하다고 생각하였다.

약 관련 정보 조회 및 나의 약 관련 CRUD 는 JPA를 사용하여 구현하였다.

데이터베이스 간의 연관관계 매핑을 통해 엔티티들을 일관성 있게 유지할 수 있으며, 쉽게 객체를 가져오고, 조작하며 재사용성이 향상되기 때문에 JPA를 사용하였다.

 

 

---

😃 1주차 회의 내용

1. 웹 앱 아이디어 결정
   • 17가지 지속 가능한 발전 목표 중 한 가지를 선택하여 웹 앱 아이디어로 채택할 것입니다.
   • 다음 스크럼 회의에서 최종 결정할 예정입니다.
2. Git 저장소 구성 및 분야 나누기
   • 솔루션 챌린지를 위한 Git 저장소를 구성하고, 각자 맡은 분야에 대한 업무를 나누었습니다.
3. 스크럼 회의 일정 설정
   • 매주 월요일과 목요일 저녁 10시에 스크럼 회의를 진행할 예정입니다.
   • 이를 통해 프로젝트의 진행 상황을 점검하고 조율할 계획입니다.
4. 중간에 함께 개발하는 시간을 가질 필요성
   • 개발 과정에서 함께 논의하고 협력하는 시간을 중간에 추가하는 것이 중요하다고 생각합니다.
   • 이에 대한 더 구체적인 계획을 함께 논의하고 확립할 예정입니다.

 

😃 2 ~ 4 주차 회의 내용

1. 약 이름을 입력하면 성분과 성능, 주의사항, 유통기한 알려주기. 폐의약품 처리 방법까지 ✨✨✨✨✨✨✨✨
2. 보통의 약들은 약국 수거함에 처리함
3. 복용 지침 및 주의사항 알려주기 ✨✨✨✨✨✨✨✨
4. 폐의약품 처리 방법에 대한 내용을 담은 페이지 ✨✨✨✨✨
5. 푸시 알림을 통한 유통기한 알림 ✨
6. 로그인, 회원가입 ✨✨✨✨
   1. 회원들끼리 어떤 증상에 이 약을 먹으니 좋아졌다 라는 의견을 공유할 수 있는 게시판 ? ✨
   2. 알약 관련 질문과 답변(FAQ) ✨

편의점에서 쉽게 구매 가능한 약에 한정

1. 증상 입력 시 편의점에서 살 수 있는 약 추천 Ex) 기침, 콧물, 열 → 판피린 ✨✨✨

전체적인 디자인 만들기 ✨✨ (사이트 , 핸드폰)

어떤 도구로 개발할지 정하기

프론트엔드 

react - js, styled-component, vite, yarn, react-router-dom, axios, recoil, eslint - prettier

 

백엔드

spring-boot, jpa, mysql, gcp

 

---

🍎 개발 내용 잡담

 

 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리

 

React-query 를 이용해서 서버에서 데이터를 불러왔는데 문법도 편하고 제일 중요한 부분은 데이터를 캐시한다는 점이다.

입문하기는 어렵지만 배우면 배울수록 가독성도 좋고 문법도 쉬워서 공부해 보시는 걸 추천한다.

 

개발하면서 어려웠던 부분은 API 연결과 외부 라이브러리 적용이다.

초반에 CORS 문제 때문에 API 연결이 되지 않아 개발에 어려움이 있었지만 결국 백엔드 Blue 께서 해결해 주셔서

손쉽게 알약 정보 데이터를 가져와 적용시켰다. 

kakaoMap 라이브러리를 이용해서 전국 알약 수거함 위치 정보를 확인할 수 있게 만들었는데 옛날에 써봤던 코드들이라

다시 공부하고 적용하느라 시간이 많이 걸렸다. 하지만 시간만 투자한다면 못할게 없기 때문에 개발을 완료했다.

PPT 준비도 하면서 많이 힘들었지만 보람을 느낀 건 TMI..

 

개발뿐만 아니라 PPT 준비, 동영상 준비하느라 힘들었던 모든 팀원들에게 감사하며 끝내겠습니다.