미리보기
기본 정보
다양한 기술을 학습하고, 이를 실제 서비스에 적용하며 문제를 해결해 나가는 것을 즐깁니다. 특히 복잡한 문제 상황을 마주했을 때 적절한 기술과 정보를 활용해 해결책을 제시하고, 사용자 경험을 향상시키는 데 중점을 두고 있습니다.
경력
(주)닥터다이어리
프론트엔드 개발자 | 개발팀
2022.03. ~ 2022.11. (9개월)
당뇨병 관리를 중심으로 만성질환 관리를 돕는 디지털 헬스케어 서비스
기술: NextJS, MobX, Node Express, MongoDB, Docker
개발팀에서 프론트엔드 개발을 담당하였습니다.
코칭 대시보드 개발
닥터다이어리는 서버와 네이티브 개발자로 이루어져, 어드민 페이지는 nodejs 서버에서 EJS템플릿으로 개발되고 있었습니다. 템플릿 페이지를 이동할 때마다, 리렌더링과 대량의 정보 요청으로 로딩을 기다리기 힘든 상황이었습니다.
건강관리 구독 서비스인 닥터다이어리 클래스를 출시하면서 1:1 코칭 서비스를 제공하게 되었습니다.
그런 복잡한 상황에서 첫 웹 프론트엔드 개발자로 투입되어, Nextjs로 오래 걸리는 서버 요청을 프론트서버로 분리하였으며, 정보의 Lazy 요청으로 답답하고, 불편한 내부 서비스를 개선하며, 사용자들과 건강관리에 도움을 주는 코치님 사이를 쉽게 소통할 수 있도록 개발하였습니다.
애플리케이션 웹뷰 개발
애플리케이션에서 결제로 이어지는 페이지는 사용자들의 반응에 따라 자주 바꾸어주어야 할 필요가 있습니다.
네이티브 환경에서 이러한 작업을 하기 위해서 디자인과 요소를 변경하고 반영하려면 빌드하고 심사를 받는 과정을 거쳐야 합니다.
사용자들의 반응에 실시간으로 대응하기 위하여, 결제로 이어지는 부분의 웹 뷰 개발을 담당하였습니다.
비회원 체험단 신청
자사몰에서 진행하는 신상품 체험단은 리뷰를 쓰도록 하여 앱의 커뮤니티와 연계되고, 상품의 판매율을 높이는 서비스입니다.
비회원으로도 체험단 신청이 가능하게 하는 페이지를 개발하여, 상품의 홍보를 늘리고, 당첨 시 서비스에 회원가입하도록 하여 기존 체험단 참여자 수를 3배 증가시켰으며, 신규 사용자 유입 경로도 추가하였습니다.
모예
프론트엔드 개발자 | 개발팀
2021.09. ~ 2022.02. (6개월)
불필요한 재고를 없애고 신입 패션 디자이너를 돕는 패션 프리오더 서비스
기술: React Native, React Nextjs, Redux, Styled Components
자사의 프리오더 쇼핑몰, 모예 웹과 앱의 프론트엔드 서비스 개발을 담당하였습니다.
API 중복요청 최적화
스크롤 도중에 중복되는 상품을 보이지 않게 하는 작업에 투입하였습니다.
비즈니스 로직에서 중복되는 상품은 저장하지 않는 로직을 추가하였습니다
Flipper로 네트워크 요청을 분석하던 도중에 API 중복요청 문제를 발견하였고, Hook의 종속성 부분에 문제를 확인하였고 해결하였습니다.
안드로이드 앱 튕김 문제 해결
Google Play Console에서 일부 버전의 OS에서 튕김 문제가 발생함을 인지하였고,
안드로이드 스튜디오의 로그캣으로 정적 중단점 검사로 튕기는 이슈 해결하였습니다.
로그인 방식 개편
보안성이 매우 낮은 고정토큰 방식의 로그인 방식의 문제점을 확인하였습니다.
여러 서비스의 OAuth 2.0 방식을 대응하였으며, 로그인 방식의 개편으로 인하여 기존의 로그인 사용자분들께서 사이트를 접속하였을 때 로그인 상태를 유지하면서, Refresh Token 방식을 안정적으로 적용하였습니다. axios interceptors
비즈니스 로직 유지보수
스타트업은 최소의 인원으로 최대한의 결과를 얻어야 합니다.
OpenAPI Generator로 API 간의 휴먼에러를 최소화하며, API가 개발되지 않은 시점에도 프론트엔드 개발을 정상적으로 수행하였습니다.
Redux Saga 미들웨어 기반의 코어를 운영하며, 서브 모듈로 만들어서 웹과 모바일 환경의 비즈니스 로직을 한 번에 개발하였습니다.
모예 스토어(셀렉트샵) 개발
모예는 디자이너들의 재고관리를 도와주는 프리오더 서비스입니다. 하지만, 팔리지 않아서 쌓여있는 재고 처리를 도와주고,
새로운 경로의 수익 창출을 얻을 수 있는 쇼핑몰 시스템을 개발하였습니다.
모예 디자인 개편
커뮤니티 숏폼 기능 개발
커뮤니티 투표 기능 개발
프로젝트
닥터다이어리 웹 프로젝트
닥터다이어리
2022.09. ~ 2022.11.
웹 커뮤니티 디자인시스템 구축
애플리케이션에서는 오랫동안 사용한 디자인시스템을 가지고 있습니다. 하지만, 이것을 추후 교체될 예정이기 때문에 새로 만드는 서비스에서 똑같이 따라가는 것이 좋지 않다고 판단하였습니다. 그러하여 웹에서는 새로운 디자인시스템을 적용하였습니다.
Styled Components와 BEM 네이밍 기법으로 컴포넌트를 관리하였습니다.
컴파운드 패턴으로 굳이 분리해도 되지 않는 컴포넌트들의 응집도를 높이려고 하였습니다.
타입시스템 구축
기존의 서버에서는 Nodejs기반으로 JavaScript가 사용되었습니다.
웹 프로젝트에서는 TypeScript를 사용하려고 하였기에 다소 고민이 있었습니다.
결국 데이터베이스 테이블 기반으로 타입을 자동 생성하여, 타입 시스템 구축하였습니다.
텍스트 에디터 개발
앱에서만 읽고 쓸 수 있던 자사 독자 규격의 커뮤니티 컴포넌트(사용자의 혈당수치, 식사 칼로리 수치 등) 들을 포함하여 커뮤니티 기능을 개발하여야 하였습니다.
MobX의
Untracked API
를 이용해서Contenteditable
을 이용하는 상황에는 React의 반응을 중단하고 있다가, 백스페이스나 엔터와 같이 데이터 그룹에 영향이 가는 부분은 Store를 업데이트하고 Virtual DOM을 업데이트할 수 있도록 웹의 텍스트 에디터를 구현하였습니다.
빌드 및 배포
AWS의 CodePipeline에서 이미지를 생성하고, Elastic Beanstalk에 배포하는
Docker를 이용한 무중단 가상환경 CI/CD를 구축하였습니다.
문제상황
해결 과정
결과
okdohyuk.dev 개인 프로젝트
개인
2022.06. ~ 진행 중
웹 멀티툴 플랫폼 - 간편하고 쉽게 사용할 수 있는 여러 웹 도구를 제공합니다.
개발 경험에 대한 노력
토이프로젝트 여러 개를 따로 만들기보다, 지속 통합하며 공통 소스를 사용해서 생각한 것을 빠르게 구현하기 위해 프로젝트를 시작하였습니다. 프론트와 서버는 서로 다른 언어를 사용 중입니다. Endpoint와 DTO를 두 번 작성하는 작업은 휴먼에러가 걱정되고, 시간 낭비라고 생각합니다. 동일화를 위해 OpenAPI Generator 기술 채택하여 YAML로 작성한 API 명세서로 자동으로 만들도록 구성하였습니다. Github Action으로 CI/CD 자동화와 버전관리를 하고 있습니다.
UX를 위한 노력
모바일 친화적 UI로 어느 플랫폼에서도 사용할 수 있도록 접근성을 높이었으며, PWA로 어플리케이션의 경험을 할 수 있도록 하였습니다. 국외 접근을 유도하기 위해서 next-i18next
를 사용해 국제화를 이룸과 동시에 JSON형식의 메시지 관리를 하고 있습니다. 자신이 사용하는 디바이스의 테마에 위화감이 생기지 않도록 미디어 쿼리로 라이트와 다크 모드 전환합니다.
포트폴리오
기술 스택
JavaScript, TypeScript, React, Next.js
교육
한양사이버대학교
대학교(학사) | 응용소프트웨어공학부
2022.03. ~ 현재 | 재학 중
한세사이버보안고등학교
고등학교 | 유비쿼터스센서네트워크보안과
2019.03. ~ 2022.02. | 졸업
자격증
정보처리산업기사
산업기사 | 한국산업인력공단
2023.11.