미리보기

SooJiBee V2

[서비스 개요]

사내 인프라 변경 및 사용자 요구사항을 반영하여 SooJiBee V1을 마이그레이션 한 프로젝트입니다. 마이그레이션 과정에서 React 기반의 프로젝트를 Next로 변경했습니다.

[기술 스택]

Next.Js TypeScript Tailwind CSS Jotai Storybook

[맡은 업무]

• 기존 node.js 기반의 BFF 서버를 nextjs의 API Route로 역할을 대신하기 위해 마이그레이션 작업을 진행했습니다.

• 사전 렌더링을 통해 V1에서의 긴 로딩 시간을 20%이상 단축시켰습니다.

• 서버사이드 패칭을 위해 middleware에서 사용자 인증을 진행했습니다.

• 컴포넌트 재사용성을 위해 Render Delegation 패턴을 적용하여 컴포넌트를 개발했습니다.

• next-intl 라이브러리를 활용하여 다국어 처리를 했습니다.

• 구글 스프레드시트와 json을 연동하여 다국어 목록을 관리했습니다.

SooJiBee V1

[서비스 개요]
ASM(공격표면관리) B2B 서비스입니다.

[기술 스택]
React.js TypeScript styled-components Jotai msw ApexChart

[맡은 업무]

• yarn berry 도입과 zero install 환경을 구축했습니다.

• API 개발 속도와 프론트엔드 개발 속도가 상이해 스프린트 진행에 블로킹이 걸렸습니다. 이를 해결하기 위해 msw를 도입, mock API를 구축하여 블로킹을 해소했습니다.

• framer-motion을 활용해 컴포넌트에 간단한 애니메이션을 추가했습니다.

• 30~3000장 이상의 PDF 형식 보고서 다운로드를 구현했습니다. 구현 과정에서 메인 UI 스레드 작동이 중지하는 상황이 있었고, 이를 해결하기 위해 webworker를 통해 200% 이상의 성능 개선을 했습니다.

XDR

[서비스 개요]
여러 보안장비에서 수집되는 취약점 분석 및 악성 의심 데이터들을 관리한 곳에서 관리하여 취약점 분석가들의 휴먼 에러를 줄이기 위한 통합 서비스입니다.

[기술 스택]
React.js TypeScript styled-components redux-toolkit tanstack-query ApexChart

[맡은 업무]

• tanstack-query를 이용해 데이터를 캐싱하여 불필요한 네트워크 요청을 방지했습니다.

• Error Boundary와 Suspense를 합성한 AsyncBoundary를 구현해 선언적으로 에러와 로딩 상태를 관리했습니다.

• 디자인 인력이 존재하지 않아 figma를 이용해 UI/UX를 직접 디자인했습니다.

Altava Admin

[서비스 개요]
메타버스 서비스의 NFT 아이템 및 유저 관리를 위한 백오피스 입니다.

[기술 스택]
React.js styled-components redux-toolkit React Metamask

[맡은 업무]

• React Metamask를 이용해 web3 지갑 연동 기능을 구현했습니다.

• 실제 서비스 사용자의 국가가 상이하기 때문에 i18next를 적극 활용하여 다국어 처리를 했습니다.

IMeta Admin

[서비스 개요]
메타버스 게임 서비스의 유저, 어드민, 아이템을 관리하기 위한 대쉬보드 제작에 참여했습니다.

[기술 스택]
React.js styled-components redux-toolkit Firebase

[맡은 업무]

• 프로덕트 번들링 속도를 향상시키기 위해 webpack -> vite 마이그레이션 진행했습니다. 이후 CI/CD 과정에서 60% 가량 향상된 속도를 확인할 수 있었습니다.

• React.lazy를 통한 번들 사이즈 개선을 통해 페이지 로드시간을 약 25% 감소시켰습니다.

• Suspense를 이용해 로딩 상태를 보여주어 사용자 친화적인 UI를 구현했습니다.

• Axios의 인터셉터 기능을 이용해 매 요청마다 인증을 위한 토큰 삽입, 에러 핸들링을 진행했습니다.

[서비스 개요]

지역 소상공인을 위해 저비용으로 소비자 체험단을 연결하는 마케팅 플랫폼입니다.

교내 캡스톤 디자인 수업 프로젝트로 진행했습니다.

[기술 스택]

Next.js TypeScript Tailwind CSS Tanstack Query Jotai ShadcnUI

[맡은 역할]

[서비스 개요]
술과 이야기를 좋아하는 사람들을 위한 술추천&술모임(온/오프라인) 서비스입니다.

[기술 스택]
React.js TypeScript styled-components react-query Jotai ApexChart
Next.js Tailwind CSS

[맡은 역할]

• Turbo repo를 이용하여 모노레포를 구성했고 vercel을 통해 배포했습니다.

• 마크업 언어에 대한 지식이 없는 관리자들이 데이터를 관리하기 용이하도록 이지윅 에디터를 이용했습니다.

• 술 추천 및 검색과 블로그 영역을 웹뷰로 구현했습니다.

• 서비스 인스타그램을 운영했습니다.

[서비스 개요]
Discord 서버에서 임베드 형식으로 로스트아크 유저 정보를 제공해주는 크롤링 봇입니다.

[기술 스택]
Node.js discord.js cheerio axios

[맡은 역할]

• 게임 서비스에서 자체 API를 제공해주지 않아서 유저 데이터를 얻기 위해 cheerio를 이용하여 HTML 파싱을 진행했습니다.

• 파싱한 데이터를 discord.js를 이용해 임베드 형식으로 시각화 하여 유저들에게 제공했습니다.

교내 동아리 목록 및 정보를 제공하는 정적 웹페이지를 개발습니다. 다음해인 2019년 신입생 환영회에서 소개되었으며, 이후 1년간 페이스북을 통해 사용자 피드백을 수집하고, 지속적인 유지보수를 진행했습니다.

[기술 스택]
HTML CSS JS

서라벌길라잡이 페이스북