미리보기

정보기술솔루션을 제공하는 기업으로서 프로젝트 수주를 받아 웹개발자로 참여하였습니다.

• 그린카 차세대 구축 : 카셰어링 서비스 제공을 위한 모바일 애플리케이션

• 한국타이어 웹사이트 : 한국타이어의 트랙 현황, 운전자 및 차량 관리 웹 애플리케이션

• NEOGRID-UI : 사내 프로젝트로 javaScript를 사용하여 객체표준화를 통한 UI 컴포넌트 개발

코드잇 교육 플랫폼에서 진행한 웹 개발 프로젝트로, 내 체험 관리 및 알림 내역 기능을 구현했습니다.

재사용 가능한 무한 스크롤 공통 컴포넌트 개발 

무한 스크롤 기능은 다양한 페이지에서 요구되고 있었기 때문에, 이를 개별적으로 구현하는 것은 비효율적이라고 판단하였습니다.

이에 따라 공통 컴포넌트로 관리하기로 결정하여 개발하게 되었습니다. React Query에서 제공하는 훅을 활용하여 캐싱 기능을 제공하고, 데이터 페칭 함수에 제네릭 타입을 선언하여 다양한 유형의 데이터를 처리할 수 있는 유연한 컴포넌트를 구현했습니다.

또한, 스크롤 영역, 로딩 상태, 에러 처리와 같은 공통 기능을 통일화하여 일관된 사용자 경험을 제공하였습니다.

Input 공통 컴포넌트 설계 및 React Hook Form 도입 

각각 제작된 커스텀 컴포넌트와 잘 호환되는 input 폼 필드가 필요했습니다.

이를 해결하기 위해, 하위 컴포넌트에서 폼 상태를 효율적으로 관리할 수 있도록 React Hook Form에서 제공하는 커스텀 훅을 활용하여, 상위 컴포넌트에서 관리하는 폼 상태를 하위 컴포넌트에서 쉽게 접근하고 관리할 수 있게 했습니다.

그 결과, 폼 상태 관리가 간소화되었고, 코드의 재사용성과 유지보수성이 향상되었습니다. 또한, 폼 유효성 검사와 오류 처리 과정을 간편화하여 개발 속도 또한 개선되었습니다.

카셰어링 서비스 제공을 위한 모바일 애플리케이션 개발 프로젝트에 참여하여, 고객 파트 서비스 구현을 담당했습니다.  

- 프로젝트 구조 설계 및 각종 컴포넌트 개발

- 예약시 포인트, 통신사 카드 결제 기능 구현

- 팀 내 Redux-toolkit 도입

- 사용기술: React 18, TypeScript, Redux, Sass

한국타이어의 트랙 현황, 운전자 및 차량 관리 웹 개발 프로젝트에 참여하여, 유지보수 및 EAI 배치 기능 관리 및 추가 업무를 담당하였습니다.

- 기존 시스템에 추가적인 차량 관리 데이터를 처리하는 EAI BATCH 기능을 추가하여 시스템 확장성 향상

- 차량 통신 시스템에서 들어오는 불완전한 RFID 태그리더의 수신메시지를 파악하여 JUnit을 사용하여 단위테스트 코드 반영 후 RFID 태그 인식 성공률을 50%에서 80%로 향상

- 한국타이어 태안 통합 관제 시스템의 유지보수에 참여하여 안정적인 운영 지원

- 사용기술: JSP, Jquery, Spring, JPA, JPQL, JUnit

프로그램 개발 과정에서 피그마 디자인을 기반으로 반응형 웹을 구현하고 컴포넌트 설계 시 효율적인 CSS 적용 방법에 대한 지식이 필요함을 느꼈습니다.

성장한 점 & 알게된 점 

레이아웃 구성 및 스타일링 

Flexbox와 Grid를 사용하여 반응형 레이아웃을 구성하고, 컴포넌트화와 BEM 규칙을 통해 유지보수성이 뛰어난 스타일링 구조를 만들며, 협업 시 더 효율적으로 작업할 수 있는 방법을 익혔습니다. Tailwind CSS, SCSS, Styled Components의 차이점을 이해하고, 각 스타일링 기법의 장단점을 파악하여 프로젝트에 적절히 적용해보았습니다. 이를 통해 각 방법의 특징과 장점을 활용하여 효율적인 스타일링 솔루션을 선택하는 능력을 키웠습니다. 

성능 최적화 기법 

디바운싱, 스로틀링 등 성능 최적화 기법을 활용하여 효율적인 코드 작성 및 최적화 방법을 익혔습니다. 서버 측에서 렌더링을 미리 해두고 클라이언트로 전달하여 초기 로딩 속도를 빠르게 할 수 있습니다. 

협업 및 성능 최적화 경험 

협업 프로젝트에서 폼 상태 관리, 렌더링 최적화, 무한 스크롤 구현을 경험하고, React Query를 활용하여 성능을 최적화하는 방법을 배워 효율성을 중요하게 생각하게 되었습니다.