미리보기

컴포넌트 모듈화와 Ant Design(antd)를 활용해 재사용성이 높은 사용자 인터페이스를 구축하고, 코드 중복을 줄여 유지보수 비용을 효과적으로 감소시켰습니다.

GitHub와 GitHub Projects를 이용해 코드 버전 관리와 이슈 트래킹을 체계적으로 수행하려 노력했습니다.

적절한 React Hook을 활용하여 데이터 메모제이션을 구현하고, 불필요한 재렌더링을 방지함으로써 어플리케이션의 성능 개선에 기여했습니다.

고속도로 터널 관리 시스템의 프론트엔드 개발자로서, 터널 관리 부분의 프론트앤드 전반적인 개발을 맡았습니다.

Ag Grid와 React Hook을 적절하게 이용해, 대용량 데이터를 효율적으로 시각화하였습니다.
한 번에 모든 데이터를 들고와 시각화하는 Ag Grid의 특성상, 로딩 시간이 꽤나 길다는 이슈가 있었습니다. 이에 적절한 데이터 메모이제이션으로 로딩시간을 단축시킨 경험이 있습니다.

React Query를 통해 백엔드와의 데이터를 캐싱, 자동 갱신하여 성능을 최적화하고 사용자 경험 개선에 기여했습니다.

Three js의 react-force-graph 라이브러리를 활용한 리그오브 레전드 챔피언 관계도 입니다.

Site | GitHub | Notion

트러블 슈팅

언어를 바꿀 때, 노드의 연결이 끊기는 현상 발생

상황 :

• 언어를 바꿀 때, 노드의 연결이 끊기는 현상 발생

원인 분석 :

• 디버깅을 통해 문제 해결.

• 초기 데이터와 언어를 바꾼 데이터의 노드 좌표를 각각 확인했을 때, 노드의 위치가 다르기 때문에 연결이 되지 않았던 것.

해결 방법 :

• 기존 link(노드 연결)에서 소스만 따온 새로운 배열을 만드는 함수의 구현

• 기존 데이터에 영향이 가지 않으면서도 언어가 바뀔 때마다 노드를 맞게 연결할 수 있는 함수 구현

결과 :

• 언어를 바꾸어도 노드의 연결이 끊기지 않도록 수정됨.

과정 및 상세 해결방안

로딩 최적화

상황 :

• 초기 로딩을 할 때, 노드 이미지가 완전히 로딩이 되기까지의 시간이 오래 걸림(약 15~17초)

• 초기 로딩 시, 화면에 모든 이미지가 보이기 때문에 지연 로딩은 사용할 수 없음

해결 방법 :

• 고해상도의 이미지를 비동기로 로딩을 시작한 뒤, Canvas를 사용해서 이미지를 약 25%로 축소시켜 빠르게 로딩하는 방법 이용

• 이후 비동기로 보낸 고화질의 이미지가 모두 오면 교체하는 방식

결과 :

• Speed Index를 7.7초에서 2.1초로 단축하여, 약 72.7% 감소하여 사용자 경험 향상

과정 및 상세 해결방안

바닐라 JS를 사용하여 FETCH와 AXIOS의 차이 및 각 장단점에 대해서 알아보기 위해서 만든 프로젝트입니다.

GitHub | Notion

트러블 슈팅

현재 업데이트 된 내용이 바로 반영 안되는 이슈

상황 :

• 기존 코드는 클릭 이벤트가 발생하면 특정 요소(todo-${elementId})를 업데이트하기 위해 innerHTML을 사용하여 새 데이터를 반영.
  → 이 때, 체크박스 클릭 시 업데이트되는 내용은 즉각적으로 반응하지 않고, 새로고침해야 반응

원인 분석 :

• 기존 코드에서는 DOM을 적절히 갱신하지 못하는 것으로 보임.
  → DOM 업데이트 방식의 문제

• 기존 코드에서 orginItem.innerHTML을 사용해 내용을 변경하지만, 이 방식은 DOM의 이벤트나 상태를 유지하지 못하는 것으로 보임.

해결 방법 :

• replaceWith 함수의 사용
  → 새로운 DOM 요소를 생성한 후, 기존 항목을 새 항목으로 교체해 체크박스 상태를 즉시 화면에 반영하도록 한다.
  → 불필요한 DOM의 재구성, DOM의 안정성 방면에서도 replaceWith가 맞는 선택이라고 판단함.

결과 :

• 수정(체크박스 클릭) 시 즉각적인 업데이트가 가능하도록 수정됨.

회고

• React와 같은 라이브러리에서는 컴포넌트 기반 개발을 통해 재사용성 높은 코드를 작성할 수 있지만, HTML, CSS, JavaScript만으로 구현하다 보니 코드의 재사용성이나 유지보수성에 한계가 있었습니다. 특히, 상태 관리나 컴포넌트화가 부족해 대규모 프로젝트에서는 관리가 어려울 수 있다는 점을 실감했습니다.

• 라이브러리나 프레임워크에 의존하지 않고 순수한 기술만으로 웹사이트를 개발하는 과정은 제게 도전적이지만 매우 유익했습니다.
  특히 DOM 조작, 이벤트 처리 등 JavaScript 자체를 직접 다루면서 깊이 있게 공부할 수 있었습니다.