달콤커피APP

프로젝트명 : 달콤커피APP

역할 : 프론트개발 *퍼블리싱 제외, apache 셋팅 후 react연결

개발자 : 3명

기여도 : 50%

프로젝트 기간 : 2021년 10월 ~ 2022년 1월 + 현재 시간까지 운영

개발 스택 : Apache, React

소개 : 기존 하이브리드(native 90%+vue 10%)로 개발되어진 앱을 native 10% + react 90%로 리뉴얼하는 프로젝트였습니다. (웹뷰로 react를 감싸는 작업)

다운로드 : 

aos : https://play.google.com/store/search?q=%EB%8B%AC%EC%BD%A4%EC%BB%A4%ED%94%BC&c=apps 

달콤커피 - Google Play

ios : https://apps.apple.com/kr/app/%EB%8B%AC%EC%BD%A4%EC%BB%A4%ED%94%BC/id1097036744

‎달콤커피

느낀 점 : 리뉴얼을 해야하는 프로젝트이기 때문에 기존 프로세스를 파악하는데 많이 시간을 소모했습니다. 

또한 native에서의 퀄리티를 과연 웹으로 보완할 수 있는지에 대해 의문점이 있었습니다. 웹뷰로 감싸는 작업을 처음 경험해보는거라 궁금한 점이 많았으며 웹에서 개발 후 앱에서 테스트 시 다른 동작에 대해 많이 배울 수 있는 프로젝트 였습니다.

 

배운 점 : 

1. 앱에서 호출하는 인터페이스 함수

 -> 이 부분은 react안에서 선언 한 함수는 앱에서 캣치를 못해 index.html에 선언 후 react에서 window.함수() 형식으로 사용했습니다.

2. 웹뷰의 특징, ios는 사파리 환경, aos는 크롬 환경

 -> 운영체제 마다 다른 브라우저를 사용하는 부분을 알게되어 ios에서 강제 이전페이지 호출 시 (왼쪽 긴 스와이프) 사파리에서는 react에서 생성한 마크업을 나타내지 못하는 이슈를 알았습니다. 이 부분으로 우선 ios에서는 왼쪽 긴 스와이프를 막았지만 현재 찾아본 결과 리액트 기술로 해결할 수 있는 부분이였습니다.

3. apache에서 react를 연결함에 있어 url별로 해당 컴포넌트를 불러와야 하지만 그러지 못한 이슈사항이 있어 설정을 해야하는 것을 알게 되었습니다.

4. 전역 데이터 관리

 -> react에서 많이 사용하고 있는 redux를 처음에 생각했지만 제에게 있어서는 조금 간편해 보이지 않아

useContext, useReducer를 이용해서 해당 기능을 구현했습니다. 요즘은 조타이(jotai)를 보고 있긴한데 훨씐 더 간편해 보입니다.

5. react에 대한 것

 -> 이 프로젝트를 하며 react에 대해 자신감이 생기게 되었습니다. 물론 많이 부족하지만 그래도 react안에서의 처리 과정과 router에서 공통으로 처리 할 수 있는 부분(로그인 여부), hook의 활용 등을 좀 더 많이 경험을 했습니다.

 

 

보완이 필요한 점 :

1. 캐싱 처리

 -> 프로젝트를 함에 있어 한 가지 아쉬운게 각 컴포넌트에 접근 시 마다 호출되는 api때문에 로딩화면이라던지 

사용자 경험에 있어 조금은 아쉬운 부분이 있다고 생각이 들었습니다. 그래서 next도 공부하게 되었지만 서버에 대한 개념까지 들어가는 거라 react에서 사용할 수 있는 라이브러리를 찾아보게 되었습니다. 그 결과 swr과 react-query를 접하게 되었습니다. 두 개의 라이브러리를 사용한 결과 제가 원하는 처리를 해줘 다음 프로젝트에선 무조건 사용을 할 계획입니다. 개인적으로는 react-query가 좀 더 사용하기에 좋아 보였습니다.

 

2. 무한 스크롤 기능

 -> 주어진 마크업이 페이지네이션이 없어 스크롤 위치값으로 api를 재호출 해야하는 상황이였습니다.

공개된 소스들이 많았지만 그 당시에는 굳이 이렇게 복잡하게 구현해야하나.. 싶어 직접 만들었지만 useRef를 이용하여 조금 더 효율적으로 개발할 수 있는 것 같아 다음에는 적용을 해 볼 생각입니다.

 

3. seo

 -> 이 프로젝트에서는 의미가 없지만 seo가 필요하며 사용자 경험이 우수한 개발환경을 요구할 시 next js를 사용할 필요성을 느꼈습니다.