다노샵 쇼핑몰의 FE를 React와 Typescript로 구현한 페이지입니다. 먼저 Javascript로 구현한 후 Typescript로 마이그레이션을 통해 Javascript 언어 자체의 버그를 15% 가량 줄였습니다. 다노샵의 첫 메인페이지와 상품에 따른 상세페이지, 그리고 장바구니 페이지와 로그인 페이지를 만들었습니다. 상품별 데이터는 다차원 배열 Json으로 만들었으며 페이지 이동은 Router의 파라미터를 통해 구현했고, 장바구니는 상태관리 라이브러리 Redux를 활용하여 구현하였습니다.

React와 Typescript로 게시판의 메인, 글쓰기 페이지, 수정 및 삭제가 가능한 게시글 조회 페이지를 만들었습니다. MySQL로 데이터베이스 테이블을 제작한 후 게시판의 글쓰기, 읽기, 수정, 삭제 기능인 데이터베이스의 CRUD 기능을 구현하였습니다. Node.js를 통해 서버를 만들고 리액트와 연동하여 데이터를 처리하였습니다. 게시판의 프론트, 백엔드를 혼자 직접 구현해보며 시스템의 전반적인 로직을 이해했습니다.

도서 사이트 예스24를 kakao의 Open API를 사용하여 구현한 페이지입니다. Rest API 키를 발급받아 Ajax로 책 검색을 통해 나온 Json 데이터를 HTML, CSS로 만든 UI의 항목에 맞게 보여줬습니다. 메인페이지와 도서의 상세정보를 보여주는 서브페이지도 함께 제작하였습니다. Javascript와 jQuery만을 이용해서 슬라이드 배너, 마우스 오버 이벤트, 탭 클릭 등 다양한 인터렉션 요소를 배치하여 더 많은 정보를 제공하고자 했습니다.

수면 최적화 기기를 선보이는 SleepEyes 사이트를 Media Query를 사용하여 pc, 태블릿, 모바일 사용자에게 맞게 반응형으로 만든 페이지입니다. pc화면에서 보이는 상단의 전체 탭을 태블릿과 모바일 화면에서는 햄버거 메뉴로 볼 수 있습니다. 화면 비율에 맞게 사용자가 보기 편하도록 폰트나 페이지 레이아웃이 변경됩니다. jQuery를 사용하여 상단의 전체 탭 마우스 오버 이벤트와 햄버거 메뉴 클릭 이벤트를 구현하였습니다.

"AuViS" 프로젝트는 게시물의 제목과 일정을 추출하여 캘린더에 자동으로 저장해 주는 앱 입니다. Expo, React-Native와 Django를 사용하여 프론트엔드와 백엔드를 개발, Tibero DBMS를 통해 사용자 정보를 CRUD 할 수 있게 했습니다. 딥러닝 모델로는 YOLOv5를 활용하여 게시물의 제목을 감지했고, OCR을 활용하여 제목 및 일정을 추출했습니다. 이 프로젝트를 통해 뛰어난 사용자 경험을 제공하는 것이 얼마나 중요한지 깨달았고, 팀 내외에서의 협업과 소통의 중요성을 체감했습니다.