연락처

📨 dbsdndwo12@gmail.com

github

https://github.com/ywj3493

Notion 블로그

https://www.metistech.me/

소개

한 회사에서 오랜기간 연구원 직무로 일을 하면서, 웹 ERP 개발 관련 다양한 업무를 경험해보았습니다. 입사 초기에는 기획 관련 업무를 포함, 백엔드, 프론트엔드 개발 등 웹 개발의 전반적인 업무를 모두 경험 했었으며, 같은 팀에서 프론트엔드 파트장으로 프론트엔드 관련 개발 및 업무 관리를 했습니다. 현재는 프리랜서로 외부 프로젝트의 프론트엔드 업무를 진행하고 있습니다.

프로젝트 내의 코드적인 문제나, 개발 환경적인 문제를 개선하기위해 꾸준히 학습하고, 실제로 적용해보려고 노력합니다. 개발은 혼자서 하는 것 보다, 함께 하는 것이 더 좋은 결과물을 낼 수 있다고 생각합니다. 이를 위해서 좋은 정보를 공유하고, 개선안을 제시하고, 함께 학습하는 것을 좋아합니다.

 

프론트엔드

코어: React Typescript Next.js

상태관리: React-hooks ContextAPI TanStack Query(React-query) recoil

스타일: Tailwind CSS styled-component twin.macro

 

백엔드

서버: Spring

DB: Tibero Oracle

 

경력사항

티맥스 비아이

• 연구원 (2019.08 ~ 2024.11.06)

• 프론트엔드 개발

• 인사 ERP 개발 및 배포, 인사 관련 프론트엔드 라이브러리 개발 및 배포

회사 경험

사내 ERP 대체 프로젝트

• 2024/09/10 ~ 2024/11/06

• 개발 환경
react react-router react-hook-form styled-components

• 개요: 사내 ERP 리뉴얼을 위한 사내 ERP 대체 프로젝트

• 기여: 프론트엔드 업무 분배 / 기존 라이브러리 기능 이전 및 개선 / 공통 컴포넌트 디자인 라이브러리 개발

배달공제회 인사 앱 개발

• 2023/11/27 ~ 2024/03/20

• 개발 환경
React react-hook-form Mobx Tanstack-query typescript Gitlab

• 개요: 인사 ERP 베타 버전 개발에서 배달공제회 버전으로 분기해 개발

• 기여: 프론트엔드 업무 분배, 일정 관리 / 조직 관리 페이지 개발 / Tanstack-query 사용방법 공유

• 성과: 배달 공제회 인사 앱 프론트엔드 배포

• 배운 점: 업무 분배 및 일정 관리에 대한 방식 학습 및 적용 / 타 팀과 협업

서울시 교육청 조직도 프론트엔드 앱 개발

• 2023/10/16 ~ 2023/12/20

• 개발 환경
React react-hook-form Mobx Tanstack-query typescript Gitlab

• 개요: 서울시 교육청 내부 전산 시스템 기능 중 인사, 조직 관리 부분 프론트엔드 앱 개발, 타 계열사 프로젝트 기여

• 기여: 프론트엔드 업무 분배, 일정 관리 / QA 이슈 관리 / 게스트 관리 및 검색, 필터링 기능 개발

• 성과: 서울시 교육청 조직도 프론트엔드 앱 배포 및 시범서비스 운영

• 배운 점: 타 사 코드와 비교를 통한 기술 스택 숙련 / 타 프로젝트에 기여하는 방식 경험 및 소통

인사 ERP 컴포넌트 라이브러리 개발

• 2023/06/01 ~ 2024/09/10

• 개발 환경
React typescript styled-component Docker storybook Jest

• 1인 개발

• 개요: 자사의 프론트엔드 컴포넌트, 백엔드 API 호출 repository 등을 타사에 제공을 위한 라이브러리 개발

• 기여: 프로젝트 구성 / 사용자 가이드 작성 / 사내 사설 npm 서버 배포 및 관리 / 공통 컴포넌트 및 훅 개발 / 타 계열사 라이브러리 API 연동 및 API 제공 / 테스트 구성

• 성과: 계열사에게 제공할 라이브러리 서버 운영 및 3개 계열사에 서비스 제공

• 배운 점: 라이브러리 배포 관점 이해 / Docker 사용 숙련 및 개념 숙지 / 복잡한 훅을 flux 패턴으로 풀어나가는 방법 학습 및 적용 / 테스트 코드 작성 숙련

인사 ERP 베타 버전 설계 및 개발

• 2021/05/10 ~ 2023/05/10

• 개발 환경
백엔드: Tibero Spring boot
프론트엔드: React typescript Mobx Tanstack-query

• 개요: 그룹사 스펙에 맞게 인사 ERP 모듈을 다른 프론트엔드 앱 위에 SPA 앱 올리는 프로젝트

• 기여: 기획 팀과 소통을 통한 기획 보완 / 인사, 조직, 근태 백엔드 개발 / 인사, 조직, 근태 프론트엔드 개발

• 성과: 그룹사 프론트엔드 연동 대응 및 배포

• 배운 점: 기획팀과의 소통 방식 개선 / Java typescript 기술 스택 숙련

인사 ERP 알파 버전 React 전환

• 2021/01/01 ~ 2021/05/07

• 개발 환경
백엔드: Tibero Oracle Java Gitlab jenkins Jeus Docker
프론트엔드: React MobX typescript Gitlab WebToB

• 개요: 자사 프론트엔드 프레임워크 개발 중단에 의한 기존 프로젝트 React 전환

• 기여: DB 서버 관리 백엔드 개발 보완 / 인사, 조직 화면 React 전환 / 알파 버전 QA 대응

• 배운 점: Docker 개념 이해 및 실사용 / React 개념 이해 및 실사용

인사 ERP 알파 버전 설계 및 개발

• 2019/08/01 ~ 2020/12/31

• 개발 환경
백엔드: Tibero Oracle Java Gitlab jenkins Jeus
프론트엔드: Javascript Gitlab WebToB

• 개요: 자사 백엔드, 프론트엔드 프레임워크를 통한 인사 ERP 개발 프로젝트

• 기여: 경쟁사 조사를 통한 도메인 습득 / IA 작성, UI 패턴 기획 등 기획 업무 / RDB 설계 / 자사 타 제품 연동 /인사, 조직, 평가 백엔드 개발 / 인사, 조직, 평가, 시각화 차트 프론트엔드 개발

• 배운 점: RDB 설계 방식 학습 / Java, Javascript 언어 숙련 / 기획 업무 개괄 이해 및 참여

개인 경험

유어위시

• 2024/11/01 ~ 2025/02/28

• 개발 환경
pnpm next.js shadcn/ui tailwind & cva react-hook-form tanstack-query orval AWS Github actions

• 프론트엔드 1인 개발

• 개요: 회사 직원들에게 선물해줄 수 있는 상품 판매 커머스 제품

• 기여: 기존 제품 백엔드 재개발에 따른 프론트엔드 재개발 / 토스 페이먼츠 결제 모듈 연동 / http only cookie 사용 인증 연동 / 백엔드 API 코드젠 설정 / Github actions CI 설정 (백엔드 서버 배포 여부 감지, 빌드 테스트) / 기본 기능 이전 및 보완

• 배운 점: next.js 사용법 숙련 / FSD 아키텍쳐 적용 / 백엔드 API 코드젠 설정, http only cookie 사용을 위한 로컬 서버 https 설정 등 프로젝트 설정 숙련

노션 연동 블로그

• 2023/06/09 ~ 2023/09/01

• 개발 환경
pnpm vercel next.js react-hook-form notion-client-api tailwind

• 관련 링크
https://www.metistech.me/

• 1인 개발

• 개요: notion 에서 제공하는 cilent api 를 사용해, notion 특정 형태의 notion database 에 글을 작성하고, 공개 태그를 추가하면 글이 게시되는 블로그 개발

• 기여: next.js 기반 블로그 개발 / 각 블로그 포스트 페이지에 맞는 SEO 를 위한 sitemap 업데이트 구현

• 성과: 목적에 맞는 notion 정리 글 쉽게 웹 배포 / 총 웹 검색결과 클릭수 240회 이상 / 검색 노출 수 3천 회 이상 / vercel Real Experience Score 99~100 점 유지 (2024/11/15 기준)

• 배운 점: SSR, SSG, ISG 등 다양한 렌더링 방법의 의의와 사용 방법 이해 / 기술 스택 숙련 / SEO 및 DNS 에 관한 설정 및 사용 이해

CLAON admin

• 2023/03/09 ~ 2023/06/01

• 개발 환경
Typescript React Next.js React-query React Hooks Recoil react-hook-form
pnpm
Github Actions lightsail

• 관련 링크
https://github.com/Co-Laon/claon-admin-web

• 개요: 암장 관리자와 강사를 위한 admin 웹 서비스 프론트엔드 개발

• 기여: Github Actions 를 통해 아마존 lightsail 에 nginx를 통해 admin 웹 서비스 자동 배포 구성 / 가입 화면 / 메인 화면 웹 페이지 기능 구현 / react-hook-form 을 통한 커스텀 form 적용

• 배운 점: 기술 스택 숙련 / Github Actions 를 통한 CI/CD 이해 및 구축

CLAON

• 2022/04/13 ~ 2023/02/01

• 개발 환경
React-Native Typescript React Next.js React-query Tailwind CSS Jest Storybook Github Actions firebase

• 관련 링크
https://github.com/Co-Laon/claon-app

• 개요: 클라이밍 특화 SNS 서비스, web view 를 통해 클라이언트 구현

• 기여: Infinite scroll 피드 형식 메인 페이지 / 게시글 작성, 암장 관리, 암장 리뷰 관리 등 대부분의 웹 페이지 기능 구현 / toast, 로딩 컴포넌트 등 공통 디자인 컴포넌트 구현 / React-query 사용 방식 공유 및 적용

• 배운 점: Infinite scroll 구현을 위한 Web API 학습 및 적용 / 새로운 기술 공유 및 연습

개선/문제해결 사례

도메인 특화된 커스텀 hooks 를 좀 더 일반적이게 개선한 사례

1. 특정 속성만 가지면 나머지 값은 사용 가능하도록 제네릭을 가진 특정 인터페이스로 기본 객체 인터페이스 수정 및 변환 유틸 함수 추가

2. 속성 값에 맞는 검색 필터 함수를 생성하는 팩토리 함수를 만들어 다양한 속성에도 검색이 가능하도록 기능 추가

프론트엔드에서 백엔드 API 응답 DTO 관리 유틸 클래스 도입 사례

1. 유틸 클래스는 백엔드의 하나의 엔티티로 간주하여 프론트엔드 작업자의 합의하에 atomic 속성을 정함

2. 해당 엔티티와 관련 있는 여러 응답 DTO 를 input 으로 가지는 create 함수 생성
1. 이 때, input 객체는 타입 가드 함수를 통해 DTO 가 어떤 인터페이스, 타입 인지를 확인

3. 기본 속성에 간단한 추가 연산으로 나오는 selector 등은 get 또는 메소드로 추가

조직의 하위 조직 인원수 계산 API 로직 개선 사례

1. DFS 로 노드를 탐색해 최하위 조직 노드의 인원수를 확인

2. 한 노드의 child 탐색이 다 끝나면 상위 노드 인원수 카운트를 업데이트

3. 총 인원수 계산은 한번의 탐색으로 완료 가능

기술

학력

전자통신공학 학사

졸업 프로젝트