목록Project/AI 웹 서비스 프로젝트 : 구해줘! 지구 (5)
꿈꾸는 개발자의 블로그
시간이 정말 빠르게 지나간 것 같다. 처음에는 언제 5주가 지나나 했는데... 5주차 들어서면서는 '아직 남은 구현도 많고, 다듬어야 할 부분도 많은데! 한 주만 더 주세여...!' 라고 생각하게 되었으니 ㅠㅠ 마지막 날까지 수정한 결과 그대로 처음 기획했던 기능은 다 넣었다. 이번 프로젝트는 익숙치 않은 next.js와 typescript를 사용하면서 속도가 더뎠지만, 나름 많은 것을 배운 기회가 되었다. 다음엔 좀 더 익숙하게 사용할 수 있길 바라며... 공부해야지! 내가 완료한 기능 인트로 페이지 : 이미지 및 레이아웃 수정 퀴즈 페이지 : 퀴즈 도전 횟수 제한, 퀴즈 데이터 적용 ("quizs" 엔드포인트로 get 요청), 포인트 적립 ("points" 엔드포인트로 route=quiz인 쿼리스트링..
내가 완료한 기능 대형폐기물 페이지 : json 파일 추가, select 박스로 데이터 받아와서 좌표 찍기 구현 로그인, 회원가입 페이지 : sessionStorage 토큰 활용, recoil 이용하여 상태값 저장 앞으로 남은 구현 목록 퀴즈 페이지 : 포인트 적립 및 하루 3번 도전 가능하게 구현 결과 화면
나머지 페이지 레이아웃을 거의 다 잡았다. 이제 남은 일은 기능 구현하는 것이다! 제발 잘 되길... 내가 완료한 기능 인트로 페이지 : 동영상이 화면 꽉차게 CSS 수정, 아래 화살표 애니메이션 구현 대형폐기물 페이지 : Kakao map api 좌표-주소 변환 적용 로그인, 회원가입 페이지 : 레이아웃 구현 퀴즈 페이지 : 레이아웃 구현 앞으로 남은 구현 목록 각 페이지 Api 연결 Recoil 사용하여 로그인 구현
저번 주에 기획을 마무리하고, 본격적으로 개발에 들어갔다. 아직 백엔드 코드가 완료되지 않았기 때문에, 프론트엔드에서는 모든 화면의 레이아웃부터 잡기로 했다. 내가 좋아하는 CSS~!! 레이아웃 잡는건 재밌다 ㅋㅋㅋ 그래서 이번 주는 각자 맡은 페이지 별로 레이아웃을 잡고, 간단한 기능을 추가하는 것으로 마무리하였다. 그 중 메인에 동영상을 자동재생하여 보여주기로 했는데, 꽉 찬 화면이 깔끔하고 아주 맘에 든다~! 내가 완료한 기능 인트로 페이지 : 레이아웃 구현, 동영상 적용 우리동네 대형폐기물 페이지 : 레이아웃 구현, kakao map api 적용 앞으로 남은 구현 목록 로그인, 회원가입, 퀴즈 페이지 레이아웃 구현 Api 연결하여 데이터 적용 결과 화면
엘리스 4기 3번째 팀 프로젝트가 또 다시 시작되었다. 이번엔 생활 폐기물 분리수거를 도와주는 웹 서비스를 만들기로 하였다. 2차가 끝난지 얼마 지나지 않은 것 같지만...ㅎ 저번 프로젝트 보다 더 많은 것을 이해하고 개발할 수 있는 내가 되길 바라며 시작! 프로젝트 소개 팀 구성 Frontend - 2명, Backend - 2명, 인공지능 - 2명 프로젝트명 구해줘, 지구! : 분리배출 안내 웹 서비스 프로젝트 기능 설명 이미지 인식을 통한 분리배출 방법 안내, 대형 폐기물 안내 사이트 연결, 퀴즈 및 포인트 적립 등 언어 및 프레임워크 TypeScript, Next.js, Express, PostgreSQL, Python 라이브러리 및 도구 front - mui, react-chartjs-2, rec..