소개

⭐ 이름 : 김범조

🖥️ github

처음 기록하게 된 과정은 github 툴 학습 과정에서 어려움을 느껴 기록을 시작하면서 현재는 개발자가 되기 위한 저의 경험 들을 다 기록으로 남겨 놓고 있습니다.

이렇게 축적된 기록들은 단순한 자료가 아니라, 새로운 문제를 마주했을 때 과거의 경험을 토대로 해결책을 찾아가는 저만의 데이터베이스 역할을 하고 있습니다.

이러한 기록 습관을 통해 지속적으로 학습하고 성장하는 개발자가 되어 의미 있는 기여를 하고 싶습니다. 감사합니다.

프로젝트

✅ 축산 사이트 쇼핑몰을 제작하여 해당 축산사의 온라인 접근성을 높이는 프로덕트를 생산하였습니다.

React styled-component TypeScript Jotai bitbucket

rechart를 이용하여 관리자가 한눈에 볼 수 있는 대시보드와 통계 차트를 구현하여 렌더링하였습니다.
- 데이터의 특성에 따라 각기 다른 도넛형 차트, 둥근 막대 바 차트, 막대 바 차트를 이용하여 구현하였습니다.
  - 도넛형 차트 : 상위 10개의 상품 비율을 한 눈에 보여주기 위해서 도넛형 차트를 선택하였습니다. 누적형 막대 바의 경우 해당 날짜의 주문 비율이라는 하나의 축만을 가지고 있어서 하나의 차트에 표현되기에 적합하지 않아 도넛형 차트를 선택하였습니다.
  - 막대바 차트 / 둥근 막대 바 차트 : 특정 일자별 데이터를 표시할 때는 일자가 x 축 value 가 y축으로 표시되어도 여러 개의 축이 나오게 되고 상대적으로 비교가 가능하기에 선택하였습니다.
ag-grid를 이용하여 관리자가 관리할 상품 / 배너 / 주문 관련 데이터들을 표로 구현하여 렌더링하였습니다.
- 리스트 페이지에서의 설정을 통해 브라우저 depth를 줄이며 관리자가 브라우저 depth를 한번 더 거쳐야 하는 경우를 줄이도록 하였습니다.
- drag field를 통해 순위를 변경할 수 있으며 순위 저장을 통해 서버로 api를 전송하며, 이를 통해 서버도 변경된 순위를 알 수 있도록 구성하였습니다.

기존 이미지 모듈의 경우 다중 이미지 업로드와 이미지 업로드 순서 변경을 하지 못하였다는 문제점이 있었습니다. 이 문제점을 해결하고자 커스텀 모듈을 구현하여 문제를 해결하였습니다.
- 커스텀 모듈의 경우, 모듈의 위치에 숨겨진 input 태그를 만들어 클릭 이벤트를 가로챈 다음 이미지 업로드 모달을 컴포넌트화 시켜서 해당 모달에 다중 이미지 업로드, 이미지 순서 변경, 이미지 제목을 보여줌으로 관리자의 이미지 업로드 작업을 개선하였습니다.
quill Editor 컴포넌트화로 인해 데이터에 입력된 결과 값을 렌더링 해주는 곳도 컴포넌트화하였습니다.
- 해당 에디터에서 하이라이팅을 위해 글자 크기를 키우거나, 색상을 표시하는 경우 등의 작업을 일반적으로 표시하게 되면 태그를 추가해서 스타일을 적용시키는 에디터 특성상 해당 하이라이팅이 적용이 안되는 문제를 해결하기 위해 실제 태그로 해석하기 위해 dangerouslySetInnerHTML 옵션을 사용하였으며 해당 코드 관련 재사용 문제로 인해 이러한 결과를 렌더링 해주는 곳도 컴포넌트화하였습니다.

기존 AI 툴을 이용하면서 불편했던 점

AI 툴이 리팩토링이 필요한 이전 코드를 기반으로 수정안을 제시함으로 인해 잘못된 변수나 잘못된 로직을 참조하여 해결책을 제시하는 부분, 수정이 필요한 구조를 제시하는 경우가 많았습니다.
해당 세션을 닫으면 이전 대화 기록을 참조하지 못하여 매번 새롭게 참고 사항이나 방향성을 제시해야 되는 반복적인 작업이 필요했습니다.