안녕하세요 프론트엔드 개발자 이소진입니다.

📚 Tech Stack

JavaScript

ES6 기반의 문법을 활용하여 프로젝트를 개발했습니다.

함수형 프로그래밍의 개념에 대해 이해하고 있습니다.

React

React를 활용하여 프로젝트를 개발했습니다.

Redux-Toolkit을 활용하여 프로젝트 상태관리 환경을 구축했습니다.

Redux-Toolkit의 Thunk를 활용하여 비동기 데이터 상태관리를 구축했습니다.

React Query + Zustand 상태관리 라이브러리를 프로젝트에 적용했습니다.

Storybook을 사용한 컴포넌트 단위 구현을 프로젝트에 적용했습니다.

Css-in-JS 툴인 Emotion, Styled-Component를 프로젝트에 적용했습니다.

Chart.js를 통한 데이터 차트를 프로젝트에 구현했습니다.

프로젝트에 필요한 커스텀 훅 및 유틸 함수를 구현하여 프로젝트에 적용했습니다.

Vue.js

Vue2 / Vue3 를 활용하여 프로젝트를 개발했습니다.

Vuex를 통한 동기/비동기 데이터 상태관리 환경을 구축했습니다.

TypeScript

TypeScript를 React, Vue 프로젝트에 적용했습니다.

Next.js

Next14를 TypeScript + React 프로젝트에 적용하여 개발했습니다.

HTML/CSS

HTML과 CSS를 활용한 마크업이 가능합니다.

Jira

Jira 이슈 관리 등 협업툴을 사용한 업무 관리 및 커뮤니케이션이 가능합니다.

Git

Git을 사용한 소스코드 관리 및 협업이 가능합니다.

Github를 사용하여 프로젝트를 관리할 수 있습니다.

2022.05 - 진행중

**DKTechin 프론트엔드 개발자**

카카오 공동체 응용분석 서비스 및 사업자용 메세지 서비스에 대한 유지보수 및 개편 업무를 진행하였습니다.

기술 스택: TypeScript, React, Redux-Toolkit, Vue, Vuex, Zustand

1. 커넥트 올웨이즈 제품화 / 내재화

커넥트 올웨이즈 서비스 개선 프론트엔드 작업 (2024.06 ~ 진행중)
Vue 3 + Pinia
기존 서비스 코드 구조 분석 및 개발 스펙 정의
내재화 프로세스 진행
- 기능 단위 별 코드 개선, 버그 수정
- 추가 페이지 구현 및 기능 구현 (store 데이터 구축)
- 기존 코드 구조 공통 컴포넌트화로 관리 컴포넌트 갯수 감소
- 함수 공통화로 중복 로직 감소
- 기존 구조 컴포넌트화 / 재사용성 향상
올웨이즈 모바일 버전 개발
- React 18 + TypeScript + next.js 14 + Zustand 기본 개발 환경 구축
- Sockjs+ Stomp.js 웹 소켓 실시간 대화 기능 구현
- Zustand 스토어 구축

2. Next.js 14 사내 보일러플레이트 개선

사내 Next.js 14 보일러 플레이트 개선 작업 (2024.04 ~ 2024.05)
TypeScript + Next.js 14 + Recoil + React-Query
필요 공통 컴포넌트 구현
- Radio, Tab, Toggle, Filter, Accordion, Table
- 공통 컴포넌트 가이드 페이지 구현
필요 공통 커스텀 훅 구현
- useArray, useCookie, useDebounce, useEventListener, useHover, useOnClickOutside, usePagination, useStorage, useTimeoutFn, useToggle
공통 컴포넌트 및 커스텀 훅 가이드 페이지 구현

3. BizMessage 서비스 (React, Vue, TypeScript)

4. 카카오 공동체 모수 통계 및 연산 서비스 (React)

Audience Targeting Management (모수 통계 및 연산 서비스) 카카오 공동체 사내 응용분석 서비스 프론트엔드 개발자
서비스 유지보수 (2022.05 - 2023.11) / 서비스 개편 (2023.01 - 2023.06)
데일리스크럼 및 Jira를 활용한 커뮤니케이션
작업 단위 별 코드리뷰 진행
개편 기획서 검토 및 필요 API 리스트업
Redux-Toolkit 데이터 상태관리 패턴 구축
기존 Rx.js 데이터 관리 구조 Redux-Toolkit 이관 작업
Async-Thunk 비동기 환경 구축 및 Redux-toolkit을 통한 동기/비동기 데이터 상태관리 구현
재귀 구조를 가진 객체 배열 데이터 리스트 상태 변경 및 데이터 작업
선택한 데이터 그룹, 순서, 연산자, 유저키에 따른 데이터 연산에 필요한 로직 구현
Atomic 디자인 패턴 적용
공통 모듈 및 개편 페이지 구현
개편건 내부 테스트 및 QA/QC 진행
정교한 타게팅이 필요한 마케터, 영업자, 서비스 기획자의 데이터의 활용성을 높혔으며, 상반기 대비 58% 순방문자 유입 증대, 87% 클릭 증대

5. 카카오 공동체 분석 레포트, 데이터 분류 서비스 (Vue)