2030 사람들이 원하는 목표를 달성할 수 있도록 도와주는 애플리케이션으로,
이용자가 원하는 목표를 설정하여 하루 하루 정해진 목표를 완수할 수 있도록 도와준다.
자신이 오늘 하루 했던 목표 내용을 사진을 통해 공유하면 사람들이 보고 응원의 메세지를 보내 동기부여를 받게된다.
- 프로젝트명 : 갓생메이커
- 개발 인원 : 프론트(React) 2명, 백엔드(Spring) 3명
- 개발 기간 : 2022.06.24 ~ 2022.08.04
- 개발 환경 : React, React-Redux, React-Query, Springboot 2.6.8, JDK 11, Spring Security, Spring JPA
- 배포 환경 : Gradle, AWS S3, AWS EC2
- 웹 서버 : Tomcat 9.0.63
- 데이터베이스 : MySQL 8.0.29 (AWS RDS)
- 협업 도구 : Git, Slack, Notion, GatherTown, Kakao Talk
| 이름 | 깃허브 주소 | 포지션 |
|---|---|---|
| 김준호 | https://github.com/kevinkim910408 | Frontend |
| 고백재 | https://github.com/baeg-jae | Frontend |
| 고승준 | https://github.com/kokomong2 | Backend |
| 김규관 | https://github.com/kwan97 | Backend |
| 김성영 | https://github.com/sungyoungk | Backend |
| 이지유 | UI & UX |
-
- 프론트엔드:
- 싱글페이지 어플리케이션에서 번들 사이즈가 커지면 로딩속도나 성능면에서 문제가 생길 수고, 모든 페이지를 처음부터 불러올 필요가 있을까 하는 생각이 있었습니다.
- 검색을 통해, 지금 사용하는 코드가 아닌 코드는 나중에 불러와 사용할 수 가 있는 코드 스플리팅이 있다고 해서 도입하여 페이지별 로딩속도를 개선하였습니다.
- 정확히는 페이스북에서 추천하는 Loadable Components를 사용하여 코드 스플리팅을 진행하였습니다.
- 닉네임가입 페이지에서 닉네임 최대길이와, 현재길이를 보여주기위해 div태그 안에 input의 border를 안보이게해서 만들었는데, input을 focusing 했을때 상위 태그인 div에 접근을 하는 방법이 필요했습니다.
- 검색을 통해 &:focus-within 이라는 가상클래스를 찾아내어서 상위태그에 접근하여 스타일링을 적용했습니다.
