이형주

이메일: hyungju12@naver.com / beegizee1220@gmail.com
개발 직무: Frontend Developer
기술 스택: javascript / typescript / Vue2, Vue3 / vuex / pinia / React18 / redux / redux-toolkit / Webpack / Vite / grunt / gulp / storybook / micro-frontend / monorepo / shell-script

항상 새로운 시도를하는 Frontend Developer 이형주입니다.
3년 8개월 정도 UI Developer로 일하다가 2021년 9월, Frontend Developer로 전향, 현재까지 Frontend Developer로 일하고 있습니다.
컴퓨터 공학을 전공하진 않았지만, 부족한 전공 지식을 메꾸기위해 항상 공부하고있으며, 업무 및 개인 프로젝트에 여러 시도를 해보고있습니다.

Study MindMap (개발중)

주요 담당업무

현재 회사에서 프로젝트 진행 및 기능개발 그리고 유지보수 및 운영을 맡고 있습니다.
추가로 현재 맡고있는 서비스에서 아키텍처 설계 및 개선에 힘쓰고 있습니다. 그 결과 현재 맡고있는 서비스에 모노레포 기반 마이크로 프론트엔드 구조를 적용해 운영하고 있습니다.
또한 예전 프레임워크를 걷어내는 마이그레이션 작업도 진행하고 있습니다.

이력 (업무경험)

NHN Edu (FrontEnd Developer, 2022.07 ~ 현재)

소속: 에듀개발팀
사용 기술: VueJS, Storybook, JavaScript, Sass, Axios, CSS3, HTML5, TypeScript, Vuex, WoowahanJS, Webpack, Vite
이력
1. 2024.02 ~ 진행중 / 아이엠스쿨, 아이엠클래스
  - 아이엠클래스 JAVA, JSP, jQuery, WoowahanJS 기반 프로젝트 프론트엔드 환경 개선
  - 기존 Grunt 환경(grunt-webpack 사용하여 webpack과 연결되어있는 프로젝트) Webpack V1 에서 V5로 마이그레이션
    - 필요 없는 라이브러리 제거 및 라이브러리 버전 업
    - 노드 버전 업 (기존 Node V8 -> V14.17.6)
  - 새로 개발하는 UI 및 기능들 React 개발 환경으로 구축중 (Vite V5, Node V20.11.0 사용(LTS 버전))
    - 기존 배포 구조 및 서버 구조 파악 중
    - 기존 프론트 앱과 연결 중
2. 2023.11 ~ 2024.02 / 결제 프로젝트
  - 결제 API 및 유효성 검사 컴포저블 훅함수 개발
  - 모노레포 및 마이크로 프론트엔드 구조 재설계
    - 웹팩 커스텀 플러그인 제작 (빌드 결과물 파일명 기록 - 파일 다운로드 시 사용하기 위함)
    - 현재 서비스의 레거시 프레임워크 문제를 개선하기위한 작업 (VueJS version 2도 2023년 이후 지원이 끊김)
    - 결제 프로젝트를 위한 새 앱 구성
      - VueJS version 3 사용 (최신 버전), Node V20.11.0 사용
      - 아파치 서버 설정 추가 (새 앱 리턴위한 설정)
    - 파일업로드 백엔드 서버 허용 로컬 도메인 포트가 정해져있어 요청 에러를 방지하기 위해 Proxy 서버 설정
  - shell script 를 통한 모노레포 제어 및 빌드시간 단축 (직렬 실행 -> 병렬 실행)
  - 어드민 개발을 위한 vue component umd 형식으로 빌드 및 개발
    - 어드민은 JSP 환경이라 스크립트 형식 필요
    - 빌드된 스크립트를 JSP에 import하여 사용
  - Web Component 도입 및 컴포넌트 제작 시도
  - 느낀점
    - 이때도 shell script의 무한한 가능성을 느낌 (한번의 버튼 클릭으로 모든 프로젝트 패키지 설치 및 실행 / 프로젝트 병렬 실행)
    - 기존 JAVA, JSP, jQuery 레거시 환경에 있어서 어떤 방식으로 프론트엔드를 개발해야될지 고민이 깊어짐
      - umd 방식으로 빌드해 VueJS로 개발하긴했으나 이 방식이 최선인지는 아직 모르겠음
      - 나중엔 프론트 프로젝트 환경을 세팅해 배포구조를 파악하고, 이를 통해 프론트 프로젝트를 개선하고 싶다고 생각함
    - 반대로 Web Component의 한계를 느낌 (내 자신에 대한 한계..)
      - Web Component로 컴포넌트를 작성하면 VueJS, ReactJS에서 쉽게 사용할 수 있을줄 알았으나 ReactJS의 이벤트 바인딩(이벤트 위임방식) 방식 때문에 Web Component로 작성한 컴포넌트를 ReactJS에서 사용하기 위해선 한번 더 래핑을 해주어야한다는 것을 알게됨
      - 이를 위해 NAVER 컨퍼런스도 보고 여러 블로그를 찾아보았으나, 아직 이를 해결할 수 있는 방법은 찾지 못함
      - NAVER 컨퍼런스에 해당 내용이 있었으나 해당 내용을 제대로 이해하지 못한것이 아쉬움으로 남음 (지속적으로 연구해서 해결해야겠다고 생각함)
3. 2023.08 ~ 2023.11 / 여러 공통 훅함수 정의 (프론트 구조 설계)
  - 서비스 개발시 필요한 여러 훅함수 제작
    - useAnimations (애니메이션 효과 구현 훅함수)
    - usePolling (폴링 기능 구현 훅함수)
    - useRemoveDuplicateItems (중복 요소 제거 훅함수)
    - useApiQuery (API 요청 및 에러처리 훅함수)
    - usePromise (프로미스 인스턴스 생성 훅함수)
    - usePortalTransition (vue transition 컴포넌트 생성 훅함수, portal-vue version 2를 위한 훅함수)
    - useResizeObserver (대상 요소의 사이즈 변화 감지를 위한 훅함수)
    - typeGuard (타입 추론을 위한 타입 가드 함수)
    - makeVueInstance (Vue Component 동적 생성 및 마운트를 위한 함수)
    - postMessageToIframeWindow (iframe window로 postMessage를 전송하기위한 훅함수)
    - ...
  - 느낀점
    - 훅함수를 통해 로직을 공통화하면서 개발자의 생산성이 향상될 수 있다는걸 느낌
    - 동시에 vueuse 라이브러리에 대해 알게됨
4. 2023.08 ~ 2023.11 / 결석계 프로젝트 / PDF 편집기 제작 (Vue Component)
  - 라우터, 스토어 구조 재적립
  - PDF 편집기 구현 로직 제공
  - 마우스 이벤트 및 터치 이벤트 활용, 영역 드래그 기능 구현
  - vue-pinch-zoom 라이브러리 활용 핀치 줌 기능 구현
  - PDF 편집기 및 편집한 PDF를 보는 사용자 입장에서 form component가 동적으로 등록되고 언마운트되어야 했기에
    Vue Component 동적으로 빌드해 마운트 시키는 makeVueInstance 함수 그리고 언마운트시키는 함수 제작
  - 위 구현한 내용을 토대로 PDF 편집기, PDF Show 기능 구현
  - 느낀점
    - 좀 더 디테일하게 로직을 분리하지 않고 작업했던 점이 아쉬움으로 남음
    - 기능 구현을 빠르게해야했던 상황이라 로직 분리에 대한 충분한 고민이 없어 추후에 수정할 때 큰 어려움을 겪었었음
5. 2023.08 ~ 2023.08 / storybook 디자인 시스템 적용
  - Headless UI 컴포넌트로 제작된 컴포넌트들 정리
    - 마크업을 못하는 프론트 개발자들을 위해 storybook 정리
    - 예시 코드 작성
    - 느낀점
      - addon 기능을 적극적으로 활용하지 못한점이 아쉬움
      - storybook 의 더 다채로운 기능들을 활용하고자 노력해야겠다고 생각함
      - 또한 storybook 최신 버전이 7버전인데 해당 프로젝트의 VueJS 버전을 고려해 6버전을 적용한 것도 아쉬움으로 남음
6. 2023.07 ~ 2023.07 / sprite image 자동화 적용
  - vue.config.js에 sprite image 생성 자동화 기능 추가
    - webpack-spritesmith 사용
    - css handlebar template 사용 (css 파일에 자동으로 좌표값 입력)
    - sprite image 생성 및 좌표 자동 입력기능 구현
  - 느낀점
    - sprite image 자동화 적용을 통해 개발자의 생산성이 향상되었음
    - 하지만 모던 웹 브라우저에선 굳이 sprite image를 사용할 필요가 없을거같다는 생각도 들었음
    - IE 11이 공식적으로 중단된 시점에 svg 태그를 사용하는 방식으로 변경하는게 더 나을거같다는 생각도 들었음
7. 2023.07 ~ 2023.07 / 타입스크립트 적용 에러 해결
  - tsconfig.json 설정 오류 부분 해결
8. 2023.07 ~ 2023.07 / 에러처리 구조 재설계 (프론트 구조 설계)
  - 기존 에러처리 구조는 코드분석이 어렵게 되어있었음
    - 코드적으로 modal 클래스를 호출해 eventBus를 통해 event를 이밋하여 최상위 컴포넌트에서 이벤트를 수신해 컴포넌트를 띄우는 방식으로 되어있었음 (때문에 로직파악 힘들다는 단점 존재)
    - 그리고 기존 방식은 Vue3와는 어울리지 않는 방식으로(eventBus가 vue3에는 없음, vue가 추천하는 방식이 아님), 현재 프로젝트에서도 제거하기로 결정
  - 해결: useApiQuery 훅함수 제작
    - 에러를 루트 컴포넌트에서 자동으로 처리해주도록 도와주는 훅함수
    - 에러처리를 커스텀하게 할 수 있게 함수 구현 (인자로 커스텀 에러처리 함수를 받음)
    - 루트 컴포넌트에 에러 팝업 작성
    - 해당 훅함수를 사용하면 에러 발생시 루트 컴포넌트에서 에러 팝업 처리를 하도록함
  - 느낀점
    - 에러 처리를 공통화하면서 동시에 커스텀하게 가져갈 수 있는 방법이 많다는걸 느낌
    - 담당 서비스에서 사용한 에러처리 방식 또한 Root Component 에서 VueJS Provide를 통해 구현(React로 치면 콘텍스트를 사용한 것)하다보니 해당 코드를 처음 본 개발자는 이를 100% 이해하지 못함
    - 아직까지 고민이 많은 주제이긴함, 이해를 확실하게 못한 개발자의 실력 부족인지 그 코드를 어렵게 작성한 개발자의 잘못인지 아직 잘 모르겠으나, 더 나은 에러처리 구조에 대해서 지속적으로 고민해야겠다고 생각함
9. 2023.07 ~ 2023.07 / Headless UI 기반 여러 공통 컴포넌트 제작
  - 기존 UI 라이브러리와 같은 컴포넌트 제작 방식으론 디자이너의 요구사항을 충족시키는데 한계가 있음
    - 커스텀 용이하게 만든다고 해도, props를 넘겨서 커스텀하는 방식은 한계가있고, 코드 복잡도도 올라감
    - 이를 해결할 방식이 없을까 고민하던 찰나에 headless UI 컴포넌트 방식을 알게됨
  - Headless UI 컴포넌트 방식이란 컴포넌트를 HTML Tag 처럼 작성할 수 있도록 컴포넌트를 설계, 제작하는 방식임
    - 컴포넌트엔 오로지 로직만 존재
    - 이 방식으로 컴포넌트를 제작하면, 디자이너의 어떤 요구도 들어줄 수 있음 (생산성 향상)
  - 느낀점
    - Headless UI 컴포넌트 방식은 컴포넌트를 제작하는데 있어서 디자이너의 요구사항을 충족시키는데 아주 좋은 방식이라고 생각함
    - 단, Headless UI 컴포넌트 방식으로 컴포넌트를 만들다보니 컴포넌트 합성을 많이하게됨 (코드 길이 길어짐)
    - 해당 방식을 사용하되, 컴포넌트 합성을 줄이는 방법을 고민해봐야겠다고 생각함
      - 공통 컴포넌트 폴더 -> 공통 컴포넌트를 사용해 특정 메뉴에서 사용하는 컴포넌트 폴더 / 추후에 이런식으로 구성하면서 작업함
10. 2023.06 ~ 2023.07 / 프로젝트 전반에 있던 document setter 코드 제거 및 postMessage로 마이그레이션
  - 2022년 11월부터 추적관리
  - 담당 서비스 구조 및 WoowahanJS 코드 분석
  - 2023년 7월 domain setter 관련 업데이트가 적용된다하여 그동안 분석한 내용을 토대로 domain setter 코드를 postMessage 형식으로 마이그레이션
    - 프로젝트 전반에 document setter 코드 존재
      - 기존에 iframe으로 불러오는 페이지의 메서드 및 변수를 가져다 쓰기위해 document setter 사용, 그 반대도 마찬가지.
      - postMessage 공통 훅함수 제작 및 기존 코드 마이그레이션
      - 크롬 업데이트 전에 domain setter 코드를 전부 postMessage로 마이그레이션할 수 있었고, 크롬 업데이트 후에 별 에러 없이 서비스 지속 가능
  - 느낀점
    - 서비스 전반에 domain setter 코드가 많이 사용되어있었는데, 이를 postMessage로 마이그레이션하는데 성공하고, 크롬 업데이트 후에도 에러 없이 서비스가 지속되어서 너무 뿌듯했음
    - 다른 계열사 서비스들은 domain setter 코드가 많이 사용되어 장애가 발생한 곳도 있었는데, 해당 장애를 미연에 방지할 수 있어서 너무 좋았음
    - 무엇보다도 window 객체가 서로 다른 3가지 웹페이지가 서로 통신할 때도 있었는데, 이를 해결할 수 있어서 너무 좋았음
11. 2023.06 ~ 2023.07 / 재직자 프로젝트 (기능 구현) / feat. 기존 jQuery 기반 컴포넌트 제거 / Headless UI 컴포넌트 제작
  - 담당 서비스 전반적인 아키텍처 재설계 및 공통 컴포넌트(VueJS 기반) 설계 및 재작
  - VueJS Options API 개발 방식에서 Composition API 개발 방식으로의 전환
  - 컴포저블 훅함수 제작
  - 주요 로직 타입스크립트 마이그레이션 (예시> 공통 API 호출 함수 등)
  - 서비스 기능개발을 진행하면서 코드 리펙토링 그리고 WoowahanJS를 VueJS로 마이그레이션하는데 발목을 잡았던 jQuery 기반 컴포넌트를 제거함
  - jQuery 라이브러리 기반 컴포넌트를 VueJS 컴포넌트로 새로 제작
    - 추후 Web Component 및 StencilJS를 활용해 React에서도 사용 가능한 컴포넌트로 제작할 예정 (목표임)
  - 느낀점
    - 기존 jQuery로 되어있던 달력 컴포넌트를 VueJS 기반으로 직접 만들면서 VueJS 같은 선언형 프레임워크의 장점을 느낌
12. 2023.05 ~ 2023.05 / bootstrap UI 라이브러리 적용
  - 2023년 1월 마크업 개발도 프론트엔드 개발자가 하는 방향으로 결정
    - 마크업을 같이 진행해야 데이터 구조라던지 코드 리팩토링 관점에서 효율이 큼
    - 마크업에 대해 잘 모르는 기존 프론트엔드 개발자들을 위해 bootstrap UI 라이브러리 적용 (UI 라이브러리는 용량이 큼, 때문에 트리쉐이킹 가능하기에 해당 라이브러리 선택)
    - 기존 UI에 사이드이펙이 발생하지 않도록 postcss 사용, 빌드시 사이드이펙이 발생할 요소(클래스명) 제거
  - 느낀점
    - postcss 라이브러리가 아주 유용하다는 것을 느낌
    - 앞으로 UI 라이브러리를 적용할 때는 postcss를 사용하여 사이드이펙트를 방지할 예정
13. 2023.05 ~ 2023.05 / 담당 서비스 프로젝트 노드JS 버전 업데이트
  - 기존 12.12.0 버전 사용
  - 여러 라이브러리 호환성 테스트 후 14.17.6 버전으로 업데이트
  - 느낀점: 노드JS 14 버전은 14.21.0까지 있는데, 14.21.0 버전으로 빌드하거나 로컬 실행하면 에러가 발생함 (이유를 찾지 못해 14.17.6 버전으로 사용) 아쉬움으로 남아있음
14. 2023.04 ~ 2023.05 / WoowahanJS, VueJS 프로젝트 폴더 분리
  - 기존엔 WoowahanJS 앱 안에 VueJS 앱 존재
    - 마이그레이션 어려움, 코드 파악 어려움
  - 이를 동레벨의 폴더로 프로젝트를 분리함 (모노레포 방식으로 구현)
    - VueJS 앱 / WoowahanJS 앱 따로 관리, 코드 파악 용이, 마이그레이션 용이
    - 모노레포 방식으로 각 앱별 노드JS 버전 분리
    - lerna와 같은 모노레포 라이브러리 사용하지 않고 shell script를 직접 작성하여 install 및 로컬실행을 버튼 하나로 가능하도록함
      - 모노레포 지원 라이브러리를 안 쓴 이유: 각 앱별로 노드JS 버전을 다르게 가져가고 싶었음
  - 느낀점
    - lerna와 같은 모노레포 구성을 쉽게 도와주는 라이브러리에 각 프로젝트별로 NodeJS 버전을 다르게 가져갈 수 있는 방법이 있을 거 같은데 없어서 아쉬움이 남음
    - 반대로 shell script의 무궁무진한 가능성을 발견함
15. 2023.04 ~ 2023.04 / 빌드 파일 분리 (split chunk file)
  - 페이지 진입 속도 개선
  - 기존엔 각 앱을 하나의 파일로 빌드 (파일 다운로드하는데 시간이 너무 오래걸림)
    - webpack, grunt 각각 빌드툴 설정을 통해 각 파일별로 최대 500kb를 넘지 않도록 파일을 분리해 빌드하도록함
    - html-webpack-plugin을 통해 각 파일별로 빌드 및 split된 파일들을 html에 자동으로 추가하도록함
      - 이 부분에서 어려움을 겪음 (html-webpack-plugin 버전업(3->5)을 했는데 빌드된 파일들이 자동으로 추가가 안됨 / 원인 해결 못하고 버전 3으로 유지한 것이 아쉬움으로 남음)
    - 테스트결과 페이지 로딩 속도가 약 0.2초 빨라짐
  - 느낀점
    - 빌드 파일을 분리하니 페이지 진입 속도가 빨라지는 것을 확인하고, 이를 통해 사용자 경험을 향상시킬 수 있다는 것을 느낌
16. 2022.11 ~ 2023.02 / domain setter 코드 마이그레이션 및 대책 마련 (크롬 M110 버전 업데이트 대응)
  - 담당 서비스 전방위적으로 domain setter 사용 중 (SOP(Same-Origin Policy, 동일 출처 정책) 회피를 위해 사용)
  - 크롬이 해당 기능을 언제 막을지몰라 대비책 마련
    - 서버 헤더 설정 (Origin-Agent-Cluster: ?0) - 크롬 M106 보안 정책 적용
      - 위 방법은 브라우저 호환성이 좋지 못해 권장되는 방법이 아님
      - 결국 domain setter 코드 전부 마이그레이션이 필요한 상황
  - 느낀점
    - 레거시 코드를 관리할 때 미래에 대비하여 대책을 마련하는 것이 중요하다는 것을 느낌
17. 2022.08 ~ 2022.10 / 현재 프로젝트에 Eslint, husky(git hook, lint-staged), Prettier, TypeScript 적용
  - 코드 컨벤션 준수 여부 확인시간 제거 (Eslint)
  - husky 통해 코드 컨벤션 준수 여부 2번 체크 (Eslint + Prettier, husky(git hook))
  - TypeScript 도입, 타입정의 통하여 히스토리 관리 및 타입추론을 통해 생산성 증대 및 코드 리팩토링시 에러 감소
  - 느낀점
    - 코드 리뷰시 시간이 줄어들고, 코드 분석시간이 줄어들어 생산성이 향상됨
18. 2022.08 ~ 2022.09 / 게시글 휴지통 기능 작업
  - json-server 라이브러리를 통한 목데이터로 프론트 코드 미리 작성 (생산성 향상)
  - 일정 확률로 에러가 발생하도록 목데이터 설정
  - API 작업 후 URL 수정 통해 바로 테스트 시작할 수 있도록함
  - 느낀점
    - 목데이터로 프론트 코드를 미리 작성하면 API 작업시 테스트가 용이하다는 것을 느낌
19. 2022.07 ~ 2022.08 / GA 지표 분석 기능 구현
  - 페이지 진입 및 버튼 클릭 분석
  - VueJS 프로젝트에선 v-directive를 사용하여 GA 지표 분석 기능을 구현
  - WoowahanJS 기반 프로젝트에선 jQuery Plugin을 사용하여 GA 지표 분석 기능을 구현
  - 느낀점
    - 코드를 어떻게하면 통일시킬 수 있을지 고민하게됨

dktechin (FrontEnd Developer, 2021.09 ~ 2022.06)

소속: 스마트서비스 개발팀
사용 기술: VueJS, Webpack, Storybook, JavaScript, Sass, Axios, CSS3, HTML5, TypeScript, Vuetify, Vuex
이력
1. 2022.05 ~ 2022.06 DL 이앤씨 2차 출퇴근 서비스 프론트엔드 개발
  - 기존 DL 이앤씨 출퇴근 서비스에 작업관리 서비스 추가
  - Vue의 Composition API 활용 및 코드 리팩토링
  - Skeleton UI 도입 사용성 향상
  - 폴더 구조 관련 고민
    - router / store / components 역할별 폴더 구조에서 모듈별 구조로 변경 (역할별로 나누면 프로젝트 규모가 커질수록 코드분석이 어렵다고 생각했기 때문)
  - 느낀점
    - 모듈별 구조로 인해 코드 분석시간이 줄어들었다고 느꼈으나, 나중에 큰 차이 없다고 느꼈음
2. 2022.03 ~ 2022.05 DL 이앤씨 1차 출퇴근 서비스 프론트엔드 개발
  - 출퇴근 서비스 개발
  - Vue 2버전 사용 (IE11 대응위함)
  - Options API 사용
  - 코드 리팩토링 (Vue Mixins)
  - 코드 분석시간 관련 고민
    - Vue 2 Options API는 사용하기 쉽다는 장점이 있지만, 프로젝트 규모가 커질수록 오히려 코드 분석을 어렵게만든다는 단점이 있음 (후에 Composition API로 수정)
  - 느낀점
    - 프로젝트 규모가 커질수록 코드 분석시간이 늘어나는 것을 느끼고, 이를 해결하기 위해 Composition API로 수정하게됨
    - 이로인해 코드 분석시간이 줄어들고, 생산성이 향상됨
3. 2021.09 ~ 2022.03 스마트팩토리 프론트엔드 개발
  - Storybook 활용 및 디자인시스템 구축
  - 기존 프로젝트에 Eslint, Prettier, Stylelint, husky(git hook), lint-staged 적용 (코드 상태관리 개선)
  - tree shaking 기능 강화 (최종 빌드 결과물 용량 개선)
    - lodash -> lodash-es
    - is-esm 라이브러리 활용 (es6 module 문법으로 작성된 라이브러리인지 아닌지 판단 및 최대한 es6 module 문법으로 작성된 라이브러리 사용)
    - Webpack-bundle-analyzer 라이브러리 활용 (빌드시 각 라이브러리 용량 체크)
    - Sprite Image 생성 자동화 (Webpack)
    - Vue 전용 UI 프레임워크 활용 (Vuetify)
    - Vee-validate 활용 및 유효성 검사기능 개발 (JSON 활용, 에러 메시지 정리)
    - 직접 개발한 페럴렉스 플러그인을 vue 프로젝트에 적용 및 소개 페이지 작업
  - 느낀점
    - 코드 상태관리를 위한 라이브러리들을 적용하니 코드 리뷰시간이 줄어들고, 코드 분석시간이 줄어들어 생산성이 향상됨

Hivelab (UI Developer, 2019.02 ~ 2021.09)

소속: UI개발 1팀
사용 기술: React, Webpack, Gulp, Grunt, Sass, Storybook, HTML5, CSS3, jQuery, JavaScript
이력
1. 2021.05 ~ 2021.06 / 라인 파이넨셜
  - React 기반 UI Component 작업 (Storybook 활용 및 디자인 시스템 구축)
  - TypeScript 활용
  - 느낀점
    - TypeScript를 활용하면서 코드 분석시간이 줄어들고, 생산성이 향상됨
    - React 기반 UI Component 작업을 통해 React 원리에 대해 조금 이해하게됨
2. 2021.05 ~ 2021.06 / 토스 프로젝트
  - PDF 전환용 영수증 페이지 작업
  - Gulp 활용 마크업 환경 셋팅 및 java 기반 freemarker 템플릿 작업환경 셋팅
    - 리소스 부족 이슈 / Tailwind CSS 방식 처럼 css를 작성했었음 -> 생산성 증대
      class naming 고민 시간 제거 / 일정내 프로젝트 완료
  - 느낀점
    - 마크업 개발자로 일하면서 class naming에 대한 고민이 많았는데, Tailwind CSS 방식으로 css를 작성하니 class naming에 대한 고민이 줄어들었음
3. 2020.09 ~ 2021.04 / 한국 야쿠르트 홈페이지 프로젝트
  - Gulp 환경 셋팅
  - validate 공통 코드 구현
  - 느낀점
    - jQuery를 사용하여 validate 공통 코드를 구현했는데, 이때 jquery.validation 플러그인 및 form 태그를 좀 더 적극적으로 활용했었으면 어땠을까 아쉬움이 남음
4. 2020.07 ~ 2020.09 / NC 프로젝토리 UI 인터렉션 개발
  - 페럴렉스 효과 구현
    - 이때 경험을 토대로 페럴렉스 라이브러리 제작
  - 풀페이지 인터렉션 연구 및 구현
  - Gulp 환경 Sprite image 자동생성 기능 구현
  - 느낀점
    - UI 인터렉션에 대한 이해도가 높아졌고, 이를 통해 조직내 생산성을 향상시킬 수 있었어서 좋았음
    - 특히 스크롤 이벤트에 대한 이해도가 높아짐
5. 2020.01 ~ 2020.06 / 라인 UI 개발
  - 라인 마크업 환경 (Gulp) 개선 (버전업 및 기능 업데이트)
  - 느낀점
    - 이당시 오래전부터 존재했던, 때문에 걸프를 사용하고 있음에도 제대로 기능을 사용하지 못했던 기능을 해결하고 Gulp 환경을 개선함
      - 걸프의 어떤 라이브러리의 비동기 메서드를 사용중이었는데 해당 비동기가 완전히 끝나지 않은채 다음 로직이 실행되도록 작성되어있어 그 부분을 수정함 / 이로인해 발생하던 버그 해결
    - async / await 에 대한 이해도가 높아졌고 이를 통해 조직내 생산성을 향상시킬 수 있었어서 좋았음
6. 2019.02 ~ 2019.11 / NHN 토스트콘솔 UI 개발
  - bootstrap 활용 및 UI 컴포넌트 가이드 정리
  - 느낀점
    - bootstrap 기반으로 그 위에 또 다른 커스텀 컴포넌트를 만들다보니, 코드가 복잡해지고, 또한 커스텀 컴포넌트를 만들다보니 bootstrap의 장점을 살리지 못한 것 같아 아쉬움이 남음
    - 이땐 단순히 html, css만 사용해서 더 코드가 복잡해졌던 것 같음

Hivelab 재직시 개인 프로젝트

2019.12 ~ 2019.12 / FlexBox 교육툴 개발
- 링크open in new window
- FlexBox 원리에 대해 이해를 돕기위한 교육툴 개발
- 개인적으로 FlexBox를 공부하던 때라 보다 더 쉽게 이해하기위해 진행한 개인 프로젝트
- IE10 대응도 가능하도록 자동으로 prefix 붙여주는 기능도 구현
- 느낀점
  - 확실히 직접 만들어보면서 이해하는 것이 더 빠르게 이해할 수 있다는 것을 느낌
  - FlexBox에 대해 이해를 잘 못하는 분들에게 도움을 줄 수 있어서 좋았음
2019.12 ~ 2020.01 / 프로모션 페이지 제작을 위한 이미지 좌표 자동 측정 및 코드 자동생성 툴 개발
- 좌표 자동 측정 및 코드 자동 생성 툴 개발
- 단순 노동 작업에비해 시간이 오래걸려 이를 개선하기위해 진행한 개인 프로젝트
- 해당툴을 업무에 적용해 생산성 끌어올림 (월 2~30개의 프로모션 페이지 제작 -> 월 200개 제작)
- 느낀점
  - HTML, CSS, JavaScript만으로도 많은 것을 할 수 있다는 것을 느낌
  - 이때부터 여러 시도를 했던 것 같음
2020.01 ~ 2021.05 / 마크업 환경 개선
- 개인적으로 진행한 회사 내부 마크업 환경 개선 프로젝트
- Gulp로 이뤄진 마크업 환경 개선
- 전반적인 라이브러리 버전 업데이트 및 버그 수정 및 기능 추가
- Gulp에서 Webpack으로 마이그레이션 (빌드 최적화 기능 강화 및 빌드속도 개선)
- canvas tag 활용한 페럴렉스 라이브러리 개발
- JavaScript 기반 여러 인터렉션 효과 개발 및 공유
- 느낀점
  - Gulp와 달리 Webpack dev server 를 활용하면 메모리에 빌드된 파일을 올려놓고 서버를 띄워주기 때문에 작업 속도가 훨씬 빨라진다는 것을 느낌
  - 반대로 Webpack은 설정이 복잡하다는 것을 느낌
  - 빌드 결과물이 HTML, CSS, JavaScript 파일이 각각 분리되어야 했기 때문에 이를 위한 설정이 복잡하다는 것을 느낌

코스터네트웍스 (UI Developer, 2018.10 ~ 2018.12)

소속: 개발팀
사용 기술: JavaScript, HTML5, PHP, jQuery, CSS3, WordPress
이력
1. 2018.10 ~ 2018.12 / 코스터네트웍스 회사 홈페이지 개발
  - WordPress 및 PHP 기반 홈페이지
  - PHP 활용 게시판 기능 구현
  - 구글지도 적용
  - 느낀점
    - WordPress 및 PHP 기반 홈페이지를 개발하면서 서버사이드 언어에 대해 조금 이해하게됨

나인트리 (UI Developer, 2018.01 ~ 2018.10)

소속: UI 개발팀
사용 기술: CSS3, HTML5, JavaScript, jQuery
이력
1. 2018.09 ~ 2018.10 / 워커힐 마크업 작업
2. 2018.07 ~ 2018.09 / 다락휴 마크업 작업
  - css transition 활용 (애니메이션 효과 구현)
    - Reflow, Repaint(or ReDraw) 개념 인지 / 이를 통해 홈페이지 최적화
  - UI 인터렉션 구현
  - bxSlider (IE9 지원) 및 datepicker 플러그인 활용
  - 느낀점
    - css transition을 활용하여 애니메이션 효과를 구현하면서 Reflow, Repaint(or ReDraw) 개념을 인지하게됨
    - Reflow 동작이 많이 발생하면 웹 페이지가 느려진다는 것을 알게됨
3. 2018.04 ~ 2018.05 / 노랑풍선 마크업 작업 (PC, Mobile)
  - swiper 플러그인 활용
  - 느낀점
    - swiper를 통해 구현할 수 있는 UI 인터렉션의 다양성을 느낌
    - swiper 문서를 정독함
4. 2018.03 ~ 2018.04 / 두산 공작기계 프로모션 페이지 작업
  - pinch zoomer 플러그인 활용
  - 느낀점
    - 자바스크립트 지식이 부족하다고 느껴서 자바스크립트 공부를 시작함
    - 정확히 이 시기엔 jQuery 공부를 더 했었음

현재 진행중인 개인 프로젝트 ⭐

cross-framework-componentsopen in new window
- https://www.npmjs.com/package/hyungju-lee-uiopen in new window
- npm link (symlink 활용)
- vue2, vue3, react 등 프레임워크에 구애받지 않는 컴포넌트 설계 프로젝트
- web component 활용 중
- 알게된점: react는 이벤트 위임 방식으로 되어있기 때문에 react 대응위해 한번 더 래핑 필요
- 각 프레임워크에 맞게 컴포넌트 빌드하는 시스템 구축 필요
front-design-systemopen in new window
- 당장 web component 기반의 cross framework components 설계에 어려움을 느껴 시작한 프로젝트
- vue2, vue3, react18, vanilla javascript를 위한 디자인 시스템 구축
- 현재: monorepo 기반 microfrontend를 적용하여 vue2, vue3, react18 3개의 앱을 app shell 앱에서 통합
- 현재 구조에서 각 프레임워크에 맞게 컴포넌트 설계 예정

기타

excel 파일 생성

# 이형주

# Study MindMap (개발중)

# 주요 담당업무

# 이력 (업무경험)

# NHN Edu (FrontEnd Developer, 2022.07 ~ 현재)

# dktechin (FrontEnd Developer, 2021.09 ~ 2022.06)

# Hivelab (UI Developer, 2019.02 ~ 2021.09)

# Hivelab 재직시 개인 프로젝트

# 코스터네트웍스 (UI Developer, 2018.10 ~ 2018.12)

# 나인트리 (UI Developer, 2018.01 ~ 2018.10)

# 현재 진행중인 개인 프로젝트 ⭐

# 기타

# blogs

이형주