HelloCar
차에 대해 흥미가 있고, 시승을 해보고 싶은 사람들을 위한 앱입니다.
- 프로젝트 소개
[기획배경]
어떤차가 출시 되었고 차의 옵션의 선택지가 무엇이 있는지 잘 모르는 사용자가 간편하게 검색해 차의 대한 정보를 얻고, 직접 시승 체험과 연결지어 사용자 조건에 맞는 자동차를 찾을 수 있게 해주면 어떨까? 라는 생각이 들어 프로젝트를 기획하게 되었습니다.
🕰️ 프로젝트 기간
2024-01-11 ~ 2024-02-08
-
프로젝트 구조
frontapp
├── src
│ ├── lib
│ │ ├── axiosEnterceptor
│ │ ├── requestToken
│ │ └── responseToken
│ └── routes
│ │ ├── auth
│ │ ├── car-detail
│ │ ├── car-home
│ │ ├── car-list
│ │ ├── car-start
│ │ ├── car-testdrive
│ │ ├── chat-qna
│ │ ├── footer
│ │ ├── hellocar
│ │ ├── login-search
│ │ ├── model-search
│ │ ├── my-page
│ │ ├── oauth
│ │ ├── password-search
│ │ ├── signup-form
│ │ ├── testdrive-list
│ │ └── wish-list
└── static
└── img
src
├── main
│ ├── generated
│ ├── java
│ │ └── com
│ │ └── example
│ │ └── hellocar
│ │ ├── domain
│ │ │ ├── hellocar
│ │ │ │ ├── controller
│ │ │ │ ├── entity
│ │ │ │ ├── repository
│ │ │ │ └── service
│ │ │ ├── member
│ │ │ │ ├── controller
│ │ │ │ ├── entity
│ │ │ │ ├── repository
│ │ │ │ └── service
│ │ │ ├── qna
│ │ │ │ ├── controller
│ │ │ │ ├── entity
│ │ │ │ ├── repository
│ │ │ │ └── service
│ │ │ ├── testdrive
│ │ │ │ ├── controller
│ │ │ │ ├── entity
│ │ │ │ ├── form
│ │ │ │ ├── repository
│ │ │ │ └── service
│ │ ├── global
│ │ │ ├── baseentity
│ │ │ ├── config
│ │ │ ├── filter
│ │ │ ├── initdata
│ │ │ ├── jwt
│ │ │ ├── mvcconfig
│ │ │ ├── rq
│ │ │ ├── rs
│ │ │ ├── tokenverify
│ │ │ └── utill
│ │ └── board
│ │ ├── controller
│ │ ├── entity
│ │ ├── repository
│ │ └── service
│ └── resources
│ ├── static
│ │ └── img
│ └── templates
└── test
└── java
└── com
└── example
└── hellocar
- 개발환경
💻 Tech Stack 💻
🛠 Tools 🛠
- ERD 설계
- 시연 영상
- 트러블 슈팅
💥 최경현
문제 : JWT 토큰 검증을 구현하면서 axios를 이용하는 도중에 localstorege가 정의되지 않는다는 오류가 계속 발생하였다.
원인 : localStorage는 브라우저에서 제공하는 Web Storage API의 일부이며, 서버 쪽에서는 실행 될 수 없는 이유때문이였다. localStorage를 사용하는 코드를 브라우저 환경에서만 실행되도록 분기 처리하였다.
해결 : if (typeof window !== 'undefined’)이 구문을 통하여 현재 브라우저 및 클라이언트에서 실행되는지 확인해달라는 구문이다. 브라우저에서는 window라는 객체가 존재하지 않는데, 만약 브라우저가 아닌 곳에서 실행하면 undefined구문이 반환된다.
본인이 정리한 jwt와 axios를 이용한 방식
https://velog.io/@gusrudchl12/axios%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-jwt
- 회고록
이번 프로젝트는 한달이 안되는 짧은 시간동안 진행이 되었다. 그러면서 새로운 방식인 rest API와 토큰 검증 방식으로 axios를 활용한 jwt기능을 하게되었다. 동시에 프론트 작업을 svelte kit을 이용하여 작업을 하였다. 이번 프로젝트는 저번 프로젝트와 마찬가지로 새로운 경험 투성이었고, 너무나도 즐겁고 만족스러운 프로젝트였다. 나는 이번 프로젝트를 하면서 jwt를 구현하기 위해 2주일 가까이 되는 시간을 퍼부었고, 마침내 성공하였으며, 희열이 느껴졌다. 팀원들과도 아무런 문제없이 합을 맞추었으며, 막히는 부분이 있었지만 잘 해결되기 마련이였다. 아쉬운 점이 있다면, 더욱 많은 새로운 기능을 시도해보지 못한 점이었다. 다음 프로젝트에는 더욱 많은 기능을 시도해보고 성공할 것이다.
