미리보기

소셜로그인 로직 변경

• 백엔드에서 처리하던 소셜로그인 로직을 Next.js API Routes를 사용해 처리하도록 수정

사용성 개선

• 기존에 하드코딩되어 있던 여러 항목들의 순서 변경 로직을 react-dnd 라이브러리를 활용하여 동적으로 구현함으로써 하드코딩을 제거하고 사용성을 개선.

• 항목의 수가 많아졌을 경우에도 성능 문제가 발생하지 않도록 LexoRank를 이용하여 항목의 순서를 효율적으로 관리할 수 있도록 개선.

• 이로써 기존에 하드코딩 및 배포까지 특정 항목들을 정리하기 위해서 걸리던 시간을 1~2분 가량에서 10초정도로 단축시켰습니다.

복원플랫폼 개발 및 유지보수

• 기본적으로 모바일에서의 접속을 권장하는 페이지였기에 모바일화면으로 개발(pc에서도 접속 가능)

• 웹페이지에서 수식을 직관적으로 표시할 수 있도록 KaTeX 라이브러리를 사용하여 수식 렌더링 기능을 개발

React → Next.js로 마이그레이션

• useNavigate함수의 state를 이용해 개발 된 부분들을 url query로 변경 후, NextJS에서 api호출

• hydration error 해결

• Vercel 특정 브랜치의 변경사항으로는 build 및 preview url 생성 안되도록 쉘 스크립트 파일 생성

• 개발용 도메인 연결 및 React/NextJS 프로젝트 도메인 분리(old.domain.com)

• 마이그레이션하며 레거시코드는 제거, 필요하다면 재사용 가능한 컴포넌트로 재설계 후 코드 작성

• middleware를 활용하여 페이지 파일이 로드되기 전에 리디렉션을 처리하도록 구현.

• 검색 엔진 상위 노출을 위해 메타 태그 최적화, 동적 페이지 렌더링 개선 등 SEO 적용

온라인 모의고사 마이그레이션 및 유지보수

• 시험과목이 증가하며 변경된 요구사항들을 반영.

• 기존에 사용하던 페이지와 비슷하지만 차별된 기능이 필요하여 최대한 기존컴포넌트를 재사용하며 기능 확장.

추천인 및 할인코드 서비스 개발

• 회원가입시 추천인 코드 기입 로직 추가

• 상품 구매시 할인코드를 기입할 수 있는 로직 추가

• 해당 서비스 도입 후 월 가입자수 10%가량 증가

사용성 및 반복작업 개선

• admin페이지 등에서 매번 비슷한 table 컴포넌트를 생성하다보니, 행과 열의 갯수가 가변적인 컴포넌트를 하나 생성 후 해당 컴포넌트를 재사용.

• 공통 컴포넌트 생성으로 개발 속도 향상

• 불필요한 요청 방지, 사용자 경험 향상을 위한 Optimistic UI 적용

• alert창보다는 Toast message 또는 Modal로 변경하여 사용자 경험 향상

• skeleton component 생성을 하여 페이지 로딩 중 사용자 경험 향상

여행 상품 판매관련 서비스 개발 및 유지보수

• 모바일 웹사이트로 개발

• 프로젝트 초기 단계부터 개발을 주도하며, 디자이너와 협력하여 컴포넌트를 설계하고, 백엔드 개발자와 함께 API 설계 및 데이터 활용 방안을 구체화했으며, 특히 컴포넌트 재사용이 많아 설계의 중요성이 강조된 프로젝트입니다.

• 구글맵 api 연동

• vercel을 활용한 자동 배포 및 관리 경험

• 기본 상품에서 중간 옵션을 변경하여 예약 가능한 서비스 구현

  • 옵션 변경 시, 변경된 가격을 실시간으로 적용

  • 변경된 옵션을 그대로 DB에 저장할 수 있도록 데이터 가공 처리

  • 미리 설정되어있는 최소/최대 인원을 충족하지 못할 시 예외처리

기술스택: React, javascript, recoil, styled-component

프로젝트 주소

프로젝트 개요

• 3학년 2학기 “웹 시스템 설계” 과목에서 진행한 프로젝트

• 일반적인 todoList 웹페이지 주제로 선정했지만,

  프론트엔드/백엔드에서 외부 라이브러리 사용 없이 구현 목표 설정

• chart.js, swiper.js등의 외부 라이브러리를 사용하지 않고, 모든 컴포넌트들을 직접 구현하는 챌린지를 계획 및 달성

• redux, recoil 등의 전역상태관리 라이브러리를 사용하지않고, react 내장기능인 contextApi를 사용하는 챌린지를 계획 및 달성

기술스택: react, javascript

깃허브 주소

• 라이브 스트리밍/채팅 SaaS 플랫폼

• 콘솔페이지 / 어드민페이지 제작

  • 공통 컴포넌트(페이지네이션 등)를 생성해 개발시간 단축 및 코드 가독성 향상

• sdk 제작 및 배포

  • npm패키지 링크

  • 채팅컴포넌트와 스트리밍컴포넌트 제작 및 npm 배포

  • 채팅컴포넌트 구현

    • sse(server sent event)를 이용하여 구현

    • 이유: 단순한 1대1 1대다 채팅이 아닌, 대용량으로 쏟아지는 채팅의 양을 처리하기 위해서는 웹소켓의 실시간 기능보다, redis에 채팅기록을 저장 후 일정한 속도로 채팅을 뿌려주어 렌더링시키는 방법을 채택.

  • 스트리밍 컴포넌트 구현

    • hls프로토콜을 이용하여 m3u8파일을 받아와 video태그에서 스트리밍 영상을 표시.

    • 화질선택을 하기위해 video태그에서 기본적으로 제공하는 컨트롤바를 비활성화하고 직접 커스텀 컨트롤바를 개발.

• vitepress를 이용한 docs 페이지 제작

기술스택: React, scss, typescript, vitepress

깃허브 주소