**ReactNative React Next.js TypeScript HTML CSS JavaScript**(ES6) Recoil
2년차 프론트엔드 개발자 김승원입니다. 스타트업 초기 맴버로 경험을 쌓았습니다.
한국방송통신대학 (3학년 2학기 휴학)
| 컴퓨터과학과
SQLD (SQL개발자)
ADsP (데이터분석준전문가)
| 데이터산업진흥원 - 2020.06
| 데이터산업진흥원 - 2020.08
스타트업 초기 멤버로 저장소 생성부터 함께하였습니다. React-Native 크로스 플랫폼 모바일 서비스 기획 및 제작에 참여하였습니다. 게시판, 인앱 결제, 알림, 채팅, 프로필, 웹뷰, 네비게이션 등을 맡아 작업하였습니다. 서비스 전체 흐름과 조금 더 나은 사용자 경험을 위해 노력하고, 주도적으로 문제를 찾아 해결하였습니다. 디자이너와는 Figam 로, 백엔드와는 Swagger 로 소통하였습니다.
Front-End Develpoer
22.08 ~ 24.01 (1년 6월)
네비게이션
React Navigation 을 이용하여 기획 내 페이지의 기능과 상호작용을 고려하여 10개 이상의 4중첩 네비게이션을 설계 및 구현하였습니다. 사용자 편의성을 고려하여 기획을 수정 및 추가, 서비스 전체 흐름을 고려하여 작업하였습니다.
게시판
게시판 속성에 따라 리스트에 ScrollView 와 FlatList 를 구별하여 최대 30% 성능을 개선하였습니다. ReactNative 써트파티 텍스트 에디터의 한계를 느껴 WebVIew 를 통해 글 작성 페이지를 구현, React 라이브러리를 사용하였습니다.
모달
결제페이지, 공지, 사용자 프로필, 회원가입 및 로그인 등에 사용되는 모달들을 추상화하여 Layout스타일로 로 작성하였습니다. 3개 이상의 중첩 모달의 경우 사용자 편의를 고려하여 내부에서 조건부 렌더링을 사용하거나 네비게이션을 통해 페이지로 변경하여 작업하였습니다. 실수로 페이지 이동을 한 경우에도 기존 작성하던 데이터가 유지되도록 작업하였습니다.
API 호출 최적화
API 호출 최적화로 게시물 작성 및 수정 작업 시 약 80% 의 API 호출을 줄였습니다. 관습적으로 버튼에 쓰로틀링과 디바운싱을 적용하기보다 조금 더 효율적인 방법을 찾고자 했습니다. 모든 작성 및 수정 호출이 모달 내에 적용되는 것을 고려하여 변경되는 데이터를 state 로 관리 후 모달 닫기 버튼에 API 호출을 적용, 마지막 결정된 상태만을 보낼 수 있도록 했습니다. 요청에 실패한 경우 alert 메시지를 띄운 후 확인 시 모달이 닫히도록 구현하여 서비스 이용 흐름을 막지 않도록 하였습니다. 작성 완료 버튼 사용을 막지 않아 사용자는 게시물을 빠르게 여러번 수정하여도 대기하는 불편함을 느끼지 않고, API 호출 비용을 아낄 수 있을 것을 기대했습니다.
채팅 Socket.IO 를 이용하여 Websocket 실시간 채팅을 구현하였습니다. Room 을 이용해 사용자별 채팅방을 만들고 다수의 사용자가 참여할 수 있도록 구현하였습니다.