[React] 토이 프로젝트 - 사용자 맞춤 음주 솔루션 제공 웹서비스

23.02.06 ~ 23.02.20 동안 진행한 리액트 토이 프로젝트에 대해 정리하려고 한다.

 

주제는 자유 주제였는데, 짧은 기간동안 구현할 수 있으면서

참신한 아이디어가 뭐가 있을까 생각을 하다가

갑자기 술과 관련한 아이디어가 떠올라서 관련한 주제를 잡게되었다.

 

사실 주제보다는 공부했던 React에 대해 더 집중을 하려고 한다.

광고는 아니고, 리액트에 대한 내용은 이 책으로 공부를 했다.

책이 약 한달전에 나온 책이라 최신 업데이트된 내용을 토대로 배워 볼 수 있어서 매우 좋은 것 같다.

 

특히나 리액트는 업데이트가 굉장히 빠르고, 버전별로 문법차이도 심한것으로 알고 있기 때문에 출시된 지 오래된 책으로

공부를 하면, 현재 버전의 리액트와 호환되지않을 수도 있다.

 

 

여기서는 간단하게 구현한 결과물을 정리하고

자세한 구현부는 따로 글을 작성하려고 한다.

 

먼저 서버를 실행 시켰을 때 처음 나오는 화면이다.

라우팅을 사용해서 메인페이지와 시작 페이지를 나눴고

시작하기 버튼을 누르면 메인페이지로 이동하게 설계했다.

 

저 UI는 chat GPT가 만들어줬다.

 

그런 다음 메인페이지다.

메인페이지에서는 다음과 같이 사용자의 정보를 입력받게 하고,

입력받은 정보를 토대로 결과보기를 누르면

예상 혈중 알코올농도, 예상 알콜분해 시간, 현재 상태 등을 보여준다.

 

원래는 맞춤 숙취해소 솔루션도 제공하려고 했는데 시간이 부족해서 구현하지 못했다.

 

입력 예시로, 70kg인 남자가 소주를 1잔 마실 예정이라면,

다음과 같은 결과가 나오게된다.

혈중 알코올 농도와 예상 해독시간은 위드마크 공식을 참고했고,

그 아래 상태메시지는 우리나라 음주 단속 기준에 따라 3단계로 분류하였다.

문제없음, 면허 100일 정지, 면허 취소 3단계이다.

 

이렇게 2주간 리액트를 공부해서 간단한 웹 서비스를 구현했다.

나중에 리액트 네이티브도 공부해서 어플로도 구현을 해보고 싶다.

 

리액트는 자바스크립트의 프론트엔드 프레임워크인데,

문제는 내가 이걸 하기 전까지 자바스크립트를 전혀 몰랐다.

그리고 심지어 책에서는 타입스크립트로 가르쳐줬다.

 

그래서 실질적인 웹서비스 구현은 2일동안 했고 나머지는 리액트와 타입스크립트 공부를 한 것 같다.

리액트는 몰라도 최소한 자바스크립트에 대한 사전 지식이 있었더라면,

조금 더 발전된 웹서비스를 만들 수 있었지 않을까 싶다. 

 

나중에 더 프로젝트 볼륨을 키워보고 싶다.