메티의 블로그

연락처

📨 dbsdndwo12@gmail.com

github

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 React-query typescript Gitlab

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

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

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

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

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

2023/10/16 ~ 2023/12/20

개발 환경

React react-hook-form Mobx React-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 React-query typescript

개요: 그룹사 스펙에 맞게 인사 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 언어 숙련 / 기획 업무 개괄 이해 및 참여

개인 경험

노션 연동 블로그

2023/06/09 ~ 2023/09/01

개발 환경

pnpm vercel next.js react-hook-form notion-client-api tailwind

관련 링크

https://www.metistech.me/

metis-blog

ywj3493 • Updated Sep 27, 2024

1인 개발

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

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

성과: 목적에 맞는 notion 정리 글 쉽게 웹 배포 / 총 웹 검색결과 클릭수 148회 / 검색 노출 수 1.4천 회 이상 / vercel Real Experience Score 99~100 점 유지

배운 점: 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 를 좀 더 일반적이게 개선한 사례

✔️ 문제: 조직 트리 표현에 관한 커스텀 hooks 를 개발 및 유지 보수 중이었는데, 이는 조직 트리에만 사용하기 적합하게 되어있어, 비슷한 복잡한 로직을 또 다시 만들어야하게 되었던 사례, 또한 트리 내 검색어로 검색하는 기능은 고정된 특정 속성 (이름, 코드) 만 지원을 했지만, 기획이 변경되거나 추가되는 경우 대응하기 어려웠음

✔️ 원인: 특정 객체에만 대응이 가능하도록 코드가 작성되어, 속성이 조금이라도 달라진다면 해당 hooks 는 사용할 수 없게됨

✔️ 대안: 트리에 필수적인 속성만 추가가 되면, 나머지는 일반적이게 사용 할 수 있도록 커스터마이징

✔️ 해결