프론트엔드 개발

[Web] 보이는 전화주문 ARS (2021.01 - 2021.11) Tech Stack: React, TailwindCSS, Mobx 사용자가 전화를 걸어 자동으로 연결된 url에 접속하여 별도의 앱 설치 없이 브라우저를 통해 매장으로 주문하는 웹 서비스 프로세스 순서: 랜딩페이지 -> 메뉴선택 -> 장바구니 -> 결제하기 -> 결제완료 서비스 이용 프랜차이즈: BBQ, 두찜, 떡참, 깐부, KT_스몰오더 사용자가 접속한 url 에 포함된 매장 Id, 시스템 값을 기준으로 Route를 이용하여 분기 처리 React router params로 url 에 포함된 사용자 번호 추출 및 localStorage 에 저장하여, 재방문 고객 포인트 조회 결제화면에서 상품권 및 금액권 쿠폰 입력 및 사용 처리 프로세스 개발 금액권 : 쿠폰 유효 금액 확인 및 유효 금액으로 최종결제금액을 계산하는 프로세스 개발 교환권: 상품이 장바구니에 담기되 결제 금액에는 미포함 쿠폰 중복 사용 방지 프로세스 개발 BBQ 메뉴 조회 로딩 시간 단축 네이버 클라우드 Object Storage(60GB → 4GB) 용량 축소 (이미 Cloud 에 올라간 데이터를 직접 수정하기에 리스크 있어 로컬 저장소로 옮겨 작업함) Node.js imageCompress를 사용하여 이미지파일(png, jpg) resize, quality 수정 후 Object Storage 로 이동 결과 : 매장 BBQ 메뉴 로딩 시간 단축 : 32Mb 6s → 5MB 2s KT 챗봇 스몰오더 사내카페 재주문 화면 개발 순차적으로 진행해야되는 프로세스를 건너뛰어 장바구니 화면에서 이전 주문한 상품을 자동으로 채움 공공 배달 서비스 통합 어드민 (2021.04 - 2021.11) Tech Stack: React, TailwindCSS 종합관리자 어드민 : 가맹점 정보 조회 및 입력, 주문내역 조회, 상품등록 및 관리, 업무지원, 프로모션 작성, 회원관리로 구성됨 개발 중간부터 참여하여 유지 보수 및 추가 개발을 진행함 가맹점 추가배달요금(거리, 주소) 입력 및 수정 화면 개발 추가 개발 부분은 component 단위로 분리하여 개발 보이는 전화 주문 긴급 운영 중단 플래그를 표시하기 위해 JSP로 간단한 API 개발하였고, 관리자가 원하는 시점에서 즉시 운영에 반영할 수 있는 기능 개발 가맹점 배달대행업체 연동 화면 개발 가맹점주 웹 (2021.01 - 2021.11) Tech Stack: React, TailwindCSS, Mobx 가맹점주용 웹 : 사장님이 직접 매장 정보 수정, 메뉴 등록 수정 및 관리, 품절 및 숨김 처리 기능이 있는 웹 우측 햄버거메뉴, 게시판, 공지사항, 1:1문의 내역, 파일업로드 및 다운로드, Drag and Drop으로 상품순서 변경, 상품관리 화면 개발 담당 및 API 연동 React Native앱 WebView에서 호환될 수 있도록 최적화하였고, 앱을 사용하는 것처럼 최대한 자연스럽게 구현 [App] 불러봄내 사용자 앱 - 춘천시민을 위한 공공 배달 앱 (2020.10 - 2021.11) Tech Stack: React Native, TailwindCSS, Mobx, Async-Storage, react-native-webview, react-native-code-push https://play.google.com/store/apps/details?id=kr.thepay.chuncheon https://itunes.apple.com/app/id1542745538 알림, 주문내역, 주문내역 상세, 단골, 검색, 검색결과, 매장상세, 포인트 내역 조회, 가맹점 별 포인트, 외부앱 연결, 리뷰관리, 내주변 음식점, 1:1문의 내역 개발 및 API 연동. Codepush, App Store Connect, Google Play Console 관리 및 유지 보수 불러봄내 가맹점주 앱 - 춘천시민을 위한 공공 배달 가맹점주 앱 (2020.10 - 2021.11) Tech Stack: React Native, TailwindCSS, Mobx, Async-Storage, react-native-webview, react-native-code-push https://apps.apple.com/kr/app/id1549160630 http://play.google.com/store/apps/details?id=kr.thepay.chuncheon.ceoapp React Native App ←→ webview 사이에서의 데이터 통신 개발 가맹점 정보 전송, 앱과 웹 동시 로그인 개발 일반 가맹점과 프랜차이즈 구분에 따라 다른 화면을 개발하였고, 이에따른 특정 기능 접근을 분리 iOS, Android - webview debugging, 앱에서 웹 화면 이동 제어 Platform OS (iOS, Android) 구분에 따른 react-native-keyboard-spacer 적용 (Input 에 따른 키보드 화면 비율 설정)

더보기

Successfully completed 12-week Full Stack Web Development Program focused on JavaScript. Developed a portfolio of real-world applications and product features in real development environments.

더보기