미리보기

• OI Market 서비스 개발 및 유지보수

• alti 서비스 개발 및 유지보수

• 기업용 약사 채용 서비스 개발 및 유지보수

• 구인구직 서비스 UI/UX 리뉴얼 및 유지보수

• 약국하이패스 Desktop App 개발 및 유지보수

  
  

• 제주도 인공지능 민원서식 작성 도우미 SI 프로젝트 참여

프로젝트 소개

• OI Market 서비스의 프론트엔드 개발 및 유지보수

• URL: https://oimarket.kr/

개발 내용

• 인증이 필요한 페이지에 AuthGuard HOC 적용

  • 서버 사이드에서 Refresh token의 유효성을 검증하여, 페이지 진입 전에 사용자의 인증 여부를 확인

  • 인증이 필요한 페이지는 AuthGuard 로 감싸 인증 로직을 선언형 스타일로 적용

• OI 어시스턴트 챗봇 UI 개발

  • OI 어시스턴트 챗봇의 실시간 답변 렌더링 방식을 개선하여 리렌더링을 최소화

  • 채팅창 UI에 디바이스(Desktop, Android, iOS)별로 적절한 대화 리스트 레이아웃을 적용

• Next.js의 Image 컴포넌트에서 sizes 속성을 활용해 viewport 크기에 따라 최적화된 이미지 크기를 불러오도록 구현

사용 기술

• Next.js:

  • 페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.

  • 페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.

• Typescript:

  • 타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.

  • 개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.

• Emotion:

  • Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.

  • props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.

프로젝트 소개

• 기존 NU Angels 서비스를 alti로 리브랜딩 작업을 하면서 전체적인 페이지의 UI/UX 개편, 기존 기능 수정, 기능 추가를 진행했습니다.

개발 내용

• 기존 NU Angels 서비스의 전체적인 페이지에 대한 개편 작업

• TanStack Query를 활용해 데이터 요청에 캐싱을 적용함으로써, 중복 API 호출을 제거하고 네트워크 효율성 향상

• 파편화된 중복 Form Validation 코드를 모듈화하여 재사용성과 유지보수성을 향상

• 정적인 데이터만 포함된 페이지는 SSG 및 ISR 렌더링 방식으로 전환하여, 초기 로딩 속도 개선

사용 기술

• Next.js:

  • 페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.

  • 페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.

• Typescript:

  • 타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.

  • 개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.

• Tanstack Query

  • 서버 state 와 클라이언트 state를 분리하기위해 사용했습니다.

  • 비동기 API 호출을 선언적으로 관리하기위해 사용했습니다.

  • API 캐시를 적용하기 위해 사용했습니다.

• Emotion:

  • Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.

  • props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.

프로젝트 소개

• 2주 동안의 스프린트를 진행하면서 NU Angels (현 alti) 서비스의 전체적인 프론트엔드 개발 및 유지보수를 진행했습니다.

• URL: https://alti.kr/

개발 내용

• 빌드 속도 개선

  • 변경사항이 적음에도 빌드 속도가 동일하게 유지되는 문제를 인지하고, 개인적으로 개선이 필요하다고 판단하여 최적화 작업을 시작

  • buildkit 엔진을 지원하는 docker/build-push-action 으로 변경

  • .next/cache를 캐싱함으로써 Next.js 빌드 시간 단축

  • 약 1분 30초 단축 (5분 30초 > 3분 50초)

• Docker image 경량화

  • 기존 Docker 이미지의 크기가 서비스 규모에 비해 과도하다고 판단하여, 이미지 경량화 작업을 진행

  • node alpine 버전, Multi staging build, Next.js standalone 적용

  • 약 87% 개선 (1280MB > 159MB)

• GA에서 유저 트래킹 이벤트 집계안되는 백로그 이슈 수정

  • 유저들의 패턴을 GA에서 분석하고 싶다는 팀의 니즈가 생겨서 시작한 작업

  • 사내에서 사용 중이던 패키지에서 Google Analytics 연동이 정상 작동하지 않는 문제를 발견하였고, 이후 추적 도구를 통합적으로 관리하기 위해 GA 대신 Google Tag Manager(GTM)로 연동 구조를 전환

• 디자인 파편화 문제 개선을 위한 UI component 고도화 작업

  • 디자인 수정 및 추가 과정에서 개발자, 디자이너 사이의 비효율적인 커뮤니케이션을 해결하기위해 시작한 작업

  • Figma에 설정한 디자인에 의존하도록 수정

  • Storybook을 사용해 컴포넌트 단위 테스트 적용, 문서화된 story를 디자이너에게 공유

사용 기술

• Next.js:

  • 페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.

  • 페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.

• Typescript:

  • 타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.

  • 개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.

• Tanstack Query

  • 서버 state 와 클라이언트 state를 분리하기위해 사용했습니다.

  • 비동기 API 호출을 선언적으로 관리하기위해 사용했습니다.

  • API 캐시를 적용하기 위해 사용했습니다.

• Emotion:

  • Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.

  • props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.

프로젝트 소개

• 서비스 초기 기획 단계부터 참여, 프론트엔드 전체적인 개발 및 유지보수를 진행했습니다.

• URL: https://biz.ymyd.co.kr/

개발 내용

• Tanstack Query를 사용해 서버의 데이터와 클라이언트 데이터 분리

• HOC, axios interceptors를 활용해 페이지 진입, 요청 전에 공통적인 인증 로직 관리

사용 기술

• Next.js:

  • 페이지별 적절한 렌더링 방식을 적용하기위해 사용했습니다.

  • 페이지 진입시 렌더링 이전에 서버사이드에서 처리하면 좋을 로직들을 분리시키기 위해 사용했습니다.

• Typescript:

  • 타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.

  • 개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.

• Tanstack Query

  • 서버 state 와 클라이언트 state를 분리하기위해 사용했습니다.

  • 비동기 API 호출을 선언적으로 관리하기위해 사용했습니다.

  • API 캐시를 적용하기 위해 사용했습니다.

• Styled-components:

  • Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.

  • props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.

프로젝트 소개

• 약문약답 앱 회원만을 위한 약국 구인구직 서비스입니다.

• 기존 서비스의 UI/UX 개선 했습니다.

개발 내용

• 기존 구인구직 기능 관련 레거시 코드 개선

• 레거시에 존재한 any 타입들 전부 엄격한 type 적용

• 중복 UI 공통 컴포넌트로 모듈화

• 무한스크롤 성능 문제 개선

• 클라이언트에서 발생하는 에러로그 수집

사용 기술

• React

  • UI를 Component 단위로 선언적으로 관리하기위해 사용했습니다.

  • 변경해야하는 UI만 변경시키기위해 사용했습니다.

• Typescript:

  • 타입을 정확히 명시하여 프로젝트의 안정성을 높이기 위해 사용했습니다.

  • 개발할 때 타입 추론으로 인한 자동완성을 적용해서 개발 속도를 향상시키기 위해서 사용했습니다.

• Styled-components:

  • Style를 React Component 형태로 선언적으로 관리하기 위해 사용했습니다.

  • props, state 등에 따른 스타일 변경을 편하게 할 수 있어서 사용했습니다.