정보연Software Developer

6년차 프론트엔드 개발자로서, 주로 React와 TypeScript 기반의 앱과 웹 서비스를 개발·배포·운영하며 HTML/CSS와 Web API 등 프론트엔드 기본기를 깊고 단단하게 다져왔습니다.

기술을 단순히 활용하는 것을 넘어 다양한 설계 패턴과 패러다임을 고민하며 사용자와 개발자 모두가 만족할 수 있는 코드 작성에 즐거움과 책임감을 느낍니다. 하나의 기능, 한 줄의 코드에도 고민을 담아 의미 있게 채워가고자 합니다.

Experiences

마플코퍼레이션2024.05~프론트엔드 개발Web3 기반 소셜 플랫폼 CIETY의 Web·WebView 서비스 및 멀티 플랫폼 멤버십/후원 SDK를 개발·운영하였습니다.

멤버십 SDK 개발 및 운영2024.06~멀티 플랫폼에서 사용할 수 있는 멤버십/후원/커미션 SDK를 설계·개발하였습니다.

• 어드민·클라이언트 도메인에서 UI를 쉽게 조립할 수 있도록 멤버십/후원/커미션 SDK를 개발하였습니다.
• Headless UI 패턴 기반 Custom Hook으로 UI 요소를 추상화하여 재사용성과 확장성을 확보하였습니다.
• SDK 형태로 모듈화하여 다양한 플랫폼에서 활용 가능하도록 설계하여 범용성을 높였습니다.
• UI와 비즈니스 로직을 분리하여 개발자 경험(DX)을 향상시켰습니다.
• 여러 서비스에 동일 SDK를 적용하여 유지보수 비용을 절감하였습니다.

React

Typescript

Jotai

Tailwind CSS

Storybook

Sentry

CIETY 솔루션 개발 및 운영(Web, WebView)2024.06~Web3 기반 소셜 플랫폼 서비스 CIETY의 웹·앱(WebView) 솔루션을 개발·운영하였습니다.

• 다국어 동기화로 글로벌 사용자 경험을 개선하였습니다.
• 상태 관리 체계를 단일화하여 유지보수성과 안정성을 높였습니다.
• Fxts를 활용하여 선언적이고 효율적인 코드를 구현하였습니다.
• 온보딩 및 가이드 문서를 작성하여 협업 효율성을 높였습니다.

Next.js(App Router)

Typescript

Jotai

Tailwind CSS

Storybook

React Native

Fxts

WebSocket

CIETY 홈페이지 개발 및 운영2024.05~Web3 소셜 플랫폼 CIETY의 공식 홈페이지를 개발·운영하였습니다.

• GPU 가속(transform, opacity) 최적화를 통해 CPU 병목 현상을 해소하였습니다.
• 다양한 인터랙션을 도입하여 사용자 경험을 강화하였습니다.
• 다국어 자동 감지 및 전환 기능을 제공하여 글로벌 확장성을 확보하였습니다.

React

Framer Motion

react-i18next

파스토2022.11~2023.08프론트팀풀필먼트 사업을 하는 파스토에서 파스토홈페이지, CMS, 파스토셀프 리뉴얼 프로젝트를 수행하였습니다.

파스토 셀프 리뉴얼2023.03~2023.08파스토 셀프는 집에서도, 1인 기업도 재고관리와 택배발송이 가능한 솔루션입니다. 유지보수 및 기능개선(쇼핑몰 통합, 디자인 리뉴얼)을 위해 thymeleaf에서 React로 전환하였습니다.

• Atomic Design Pattern, Compound Component로 디자인 시스템을 개발하여 개발 생산성 향상(코드량 50% 이상 감소)
• 비즈니스 로직(React Query) 코드를 hooks으로 분리 하여 컴포넌트 복잡성을 줄임
• useContext로 주문 페이지, 상세페이지 리랜더링 최적화
• 상세 페이지 이미지, React Table에 스켈레톤(lazy loading)을 적용하여 CLS 개선
• React Table custom hooks에 재네릭 type을 적용하여 코드 안정성 향상
• 해당 솔루션의 핵심 기능인 쇼핑몰 연동 및 주문 페이지(신규주문, 배송, 취소, 반품, 교환 관리)를 개발

Next.js

Typescript

React Query(TanStack Query v4)

Redux Toolkit

React Table(TanStack Table v8)

React Hook Form

CMS 개발2023.01~2023.03사내 정산 관련 백 오피스를 Client와 Server로 분리하고 RESTful한 API로 리뉴얼하였습니다.

• 반복되는 컴포넌트(Modal, SearchContent)를 추상화 및 모듈화 하여 DX를 개선하였습니다.
• Axio interceptor와 react-query의 onError로 일관된 에러처리를 적용하였습니다.
• Redux Toolkit을 활용하여 중앙집중식 데이터 관리 구축(createAsyncThunk, createSlice)
• 올바른 RESTful API 방향에 대하여 백엔드 개발자와 함께 고민하였습니다.
• 정산, 명세서, 기타비 관리를 개발하였습니다.

React

Typescript

React Query((TanStack Query v4)

Redux Toolkit

React Table(TanStack Table v8)

Homepage 리팩토링2021.11~2023.01파스토 홈페이지의 일부를 thymeleaf, jQuery에서 Vue.js로 전환하였습니다.

• Vue3의 Composition API에 코드 작성 방식을 적용하여 좀 더 논리적 관점에서의 개발
• jquery를 vuex로 리팩토링(코드양 50%이상 줄임)
• 중앙집중식 상태관리 위래 Pinia 도입(VueX 대비)
• 공통 Component를 개발하여 코드 중복 줄임
• ASIS 버그 개선을 통한 사용성 향상
• Server와 통신하는 페이지인 고객 문의 페이지 개발하였습니다.

Vue.js

Pinia

Cypress

베스핀 글로벌2020.01~2022.11DevOps팀공채 1기로 입사하여 삼성전자 b.iot 프로젝트와 삼성전자 gatekeeper 프로젝트를 수행하였습니다.

삼성전자 GateKeeper 운영 개발2021.02~2022.11삼성전자의 여러 사업부(생활 가전 사업부, 무선 사업부, 영상 디스플레이 사업부)에서 수집한 개인정보에 대한 정보 주체의 요청을 각 서비스에 전파하고 처리하는 일련의 과정을 중계하는 자동화 어드민 시스템입니다. 해당 프로젝트에서 Admin Portal의 Front-end, Back-end 개발 및 운영을 담당했습니다.

• built-in Directives v-cloak을 통해 Mustache 바인딩을 숨겨 UX 개선
• 사용자 권한에 따른 조건부 랜더링
• Vue.js Component를 적절히 분리하여 재사용성과 유지보수성 높임
• 공통으로 사용하는 데이터들을 코드화하여 안정성을 높임
• Sonarlink 플러그인을 적용하여 코드 품질을 향상

vue.js

javascript

Spring Boot

MySql

MyBatis

Circle CI

Jenkins

Github Action

GitHub Enterprise

삼성전자 b.IoT 신규 개발2020.06~2020.12삼성전자 각 Gateway로부터 데이터를 수집(센서, 운영 현황, 운영 이력 데이터)하여 분석 및 가공한 통계 데이터를 통합 관제할 수 있는 맞춤형 대시보드 어드민 사이트입니다. 해당 프로젝트의 Front-end 개발자를 담당하였습니다

• 신규 서비스 개발에 참여
• 데이터를 차트와 그래프를 사용하여 시각화(vue-chartjs)
• 대시 보드의 Drag&Drop을 통한 Card Drawer 기능의 편집 및 조회 기능을 구현(Vue Grid Layout)
• IE에 대한 크로스 브라우징 이슈를 처리

vue.js

vuex

vue-chartjs

Vue Grid Layout

Personal Projects

정보연 블로그2024.01~Gatsby로 개인 블로그를 개발하였습니다.

• Link API로 prefetch 적용하여 로딩 최적화
• GatsbyImage, StaticImage으로 lazy-loading 및 이미지 최적화
• custom hook을 구현하여 공통 로직 재사용(useInfiniteScroll)
• atomic design pattern 디자인 시스템 구현
• Head API, meta tag, sitemap, robots를 이용하여 검색엔진 최적화 하였습니다.
• useMemo로 메모리 최적화

Gatsby

Typescript

Emotion