정보연Software Developer

안녕하세요.
Software Developer 정보연입니다.

React와 Typescript를 중심으로 개발합니다.
생산성을 위한 클린한 코드와 사용자 경험을 위한 최적화에 관심이 많습니다.

BespinGlobal 에서 2년 11개월, Fasto에서 9개월
총 3년 8개월 Software Developer 경력이 있습니다.

Experiences

파스토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