미리보기

든든한 개발사원이자, 팀장님의 믿음직한 조력자 역할

[입사 후 작은 변화들]

1. 팀 리딩 경험

   • 팀 내의 의견을 취합하고 조율하여 만족할만한 합의점을 찾아 결정하는 리딩 경험

   • 팀원마다 달랐던 코드 스타일, 커밋 스타일 등을 공통으로 사용 할 수 있도록 컨벤션 설정

   • 프론트 개발을 어떻게 진행할 것인지 등 팀 내 개발 회의 주도

2. 기술부채해결에 기여

   • React 라이브러리 및 TypeScript 언어 도입

3. 프로젝트에 대한 깊은 경험

   • 프론트엔드, 백엔드, 인프라, 배포, CI/CD 등 프로젝트의 전반적인 부분을 경험

4. 원활한 지식 공유

   • 입사 후 사수가 없어 누군가에게 도움을 얻기 힘들고 혼자 공부해 구현해야 했음

   • 후임 입사 후 알고있는 부분은 공유하고, 모르는 부분은 찾아가며 알려줌으로써 지식공유에 대한 발판 마련

5. 팀 내 부드러운 분위기 도입

   • 팀원들이 모두 모였을때, 정적만 흐르던 분위기에 잦은 웃음과 맞장구 리액션을 통해 활기와 부드러움 추가

[차량 내비게이션에서 SPC계열사의 상품을 픽업주문 할 수 있는 서비스의 POC]

주요업무

• 프론트엔드

사용 기술

• Core Stack

  • TypeScript, React, Vite

• Sub Stack

  • React-query, Jotai, Zod

업무 내용

• 프로젝트의 코딩 컨벤션, 폴더 네이밍, 커밋 스타일, structure 등에 대한 프로젝트 가이드라인 정의

• 프로젝트 생성 및 초기 설정

• nginx, Dockerfile, AWS ECR을 사용한 프론트 배포

이슈 및 해결

• 프로젝트 가이드라인 정의

  • 코드의 통일성과 효율적인 협업을 위해 가이드라인이 필요하다고 판단되어 제안

  • 각자의 의견에 조금씩 차이가 있기에 모두가 동의할 수 있는 선을 찾으려 노력했으며, 좁혀지지 않는 부분은 전문성을 따져 조금 더 우위에 있는 사람의 의견을 채택해 모두가 인정한 프로젝트 가이드라인 선정

• 관리자단 빌드 시 발생한 경고 해결

  • 관리자단 빌드 시 Chunk가 너무 크다는 경고가 발생하는 것을 확인해 방안 탐색

  • Vite설정에 manualChunk 설정 추가해 의존성이 높은 모듈끼리 묶어 Chunk 크기 경고 해결하며

    LCP 속도 0.9s > 0.8s로 0.1초 단축으로 런타임 성능도 소폭 개션

  • 방안 탐색하며 특정 라이브러리의 import 방식을 개별모듈로 가져오도록 변경해

    빌드 속도 5.41s → 2.33s 로 56.93% 단축

• 처음 타 프로젝트에서 사용한 배포설정파일의 재사용

  • 처음 작성했던 설정파일들을 그대로 복사해 사용하는 것이 아닌 기존보다 발전하려는 개선이 있어야 한다고 생각

  • 기존의 배포에 사용하는 설정파일에서 중복되거나 필요없는 부분은 제거하고 추가적으로 설정해줄 부분은 추가해 리팩토링 진행

[2023_글로벌 정보제공 서비스 관리자 웹 개발 프로젝트의 React 전환 및 메뉴 통합]

주요업무

• 프론트엔드

사용 기술

• Core Stack

  • JavaScript, React, Vite

• Sub Stack

  • React-query, Zustand

업무 내용

• 공통 컴포넌트에 대한 코드리뷰 도입

• Google 지도 커뮤니티 라이브러리에서 구글 공식 라이브러리로 마이그레이션 제안(실 구현 후 설득)

• 1만개 이상 대량의 마커 지도표시 기능 구현

• 마커 렌더링 시 발생한 마커 깜빡임 이슈 최적화

• 데이터리스트를 받아 다양한 마커의 렌더링을 담당하는 역할을 하는 ui 공통 컴포넌트 구현

• zustand의 원자 선택자를 자동으로 만들어주는 공통함수 사용 구조 제안 및 구현

• 페이지 종속적인 상태들의 스토어 사용에 대해 팀 내 회의 제안

이슈 및 해결

• 특정 기능 및 컴포넌트의 중복 개발

  • 기존에 팀 내 공유 없이 공통 기능 및 컴포넌트를 개발하여 중복 개발 이슈와 팀원 간 인식 차이에 따른 잡음이 발생

  • 공통 컴포넌트와 기능을 사전에 식별하고 분배한 후, 개발된 내용에 대해 코드 리뷰 제안

  • 식별된 내용을 사용할 팀원들이 협의한 방안대로 개발되었기에 중복개발 이슈와 분란 제거

• Google Marker Deprecated

  • 구글 지도 사용 중 Marker가 Deprecated됨을 확인해 팀 내 공유

  • 기존에 사용하던 React용 구글지도 라이브러리는 오래된 커뮤니티 라이브러리라 업데이트 중단되었으니 구글의 공식 라이브러리로 마이그레이션 제안

  • 작업량을 이유로 제안이 반려되었으나, 공식 라이브러리로 실 구현 후 추가작업량 및 부가적인 이점 설명을 통해 동의를 얻어 마이그레이션 진행

[유럽의 CP사를 통한 데이터 수집 및 실제 POI에 대한 정보 수정을 할 수 있는 관리자 페이지]

주요업무

• 프론트엔드, 백엔드

사용 기술

• Core Stack

  • JavaScript, React, Vite, Spring Boot, Kotlin, MSA

• Sub Stack

  • React-query, Zustand, SSE, JPA, Kafka, Jenkins

업무 내용

• react query를 사용한 서버상태 관리

• zustand store를 통한 전역상태 관리

• 데이터가 많고 복잡한 정보수정 페이지 구현

• 공통 페이지네이션 컴포넌트 구현

• JWT 토큰 검증을 위한 axios interceptor 구현

• 스케줄러를 이용한 대용량 데이터 가공

• Junit 단위 테스트

• nginx를 사용한 프론트서비스 정적배포 경험

이슈 및 해결

• 기술부채해결

  • 기존에 화면구현을 위해 Thymeleaf를 사용하던 방식에 의문을 가짐

  • Thymeleaf를 SPA처럼 사용하지 않고, 레퍼런스가 많은 React를 도입해 재사용성, UX 개선 제안

• 대용량 데이터 처리

  • 백엔드 서비스에서 하루 한번 스케줄러를 통해 대량의 데이터를 DB에서 가져와 가공을 거쳐 Kafka 메시지로 발송하는 과정에서 Heap 메모리 부족 이슈 발생

  • 스레드와 페이지네이션을 활용해 적정 용량으로 데이터를 분할 처리하여 메모리 문제 해결

[각 국가별 CP사를 통한 데이터 수집 및 수집된 데이터를 확인, 평가 할 수 있는 관리자 사이트를 MSA 방식으로 개발]

주요업무

• 프론트엔드, 백엔드

사용 기술

• Core Stack

  • JavaScript, Thymeleaf, Spring Boot, Kotlin, MSA

• Sub Stack

  • JPA, Kafka, Socket.js, Jenkins

업무 내용

• 프로젝트 규모가 크고 실제 업무에 사용할 서비스이기 때문에, 서비스 중단을 방지하고 시스템 확장성 및 안정성을 확보하기 위해 MSA 구조를 도입

• 전체 페이지 퍼블리싱 및 페이지 구성

• 구글지도 API 사용한 지도기능(마커, 인포윈도우, 지도이동 등) 구현

• Kafka를 사용해 각 서비스에서 보낸 알림용 메시지를 알림 서비스에서 받아 처리

• Kafka Listener 에러 핸들러 구현

• Socket.js, Stomp 사용한 알림 및 동적 데이터 업데이트 구현

• 잦은 배포를 통해 작업상황을 원활히 공유하기 위해 Jenkins를 사용해 배포 자동화 구현

이슈 및 해결

• 사내 첫 MSA 프로젝트로, 레퍼런스 부족

  • 개발 전 백엔드 팀원과 함께 MSA의 구조와 설계방법 등에 대해 찾아보며 서비스를 띄워 게이트웨이부터 서비스끼리의 통신까지 먼저 구축해보며 경험치 획득

[하드웨어 테스트를 관리하기 위한 소프트웨어 개발]

주요업무

• 화면 및 기능개발

사용 기술

• JavaScript, Thymeleaf

업무 내용

• jointjs 라이브러리를 사용해 사용자가 설정한 부품들의 연결관계, 포트정보, 상태 등을 시각적으로 볼 수 있는 기능 구현

• 메뉴단위 별 r, w, x로 구분된 권한을 관리자가 확인 및 자유롭게 설정할 수 있는 기능 구현

• 설정된 권한을 원하는 사용자에게 다중으로 부여할 수 있는 기능 구현

• 데이터 테이블, 상세화면 구현

• 수정 페이지에서 버튼을 통해 테이블에 동적으로 입력폼 행 추가, 삭제 기능 구현

• jib, docker, portainer를 통한 배포 경험