AG GRID와 Toast editor 라이브러리

일주일 회고

회사에서 AG GRID와 Toast editor 라이브러리를 사용하고 있다. 이번주는 주로 라이브러리 내에서 몇몇 버그들이 있는 것들을 수정과 기능들을 추가하는 업무들이 있었다. 프론트 개발자로 사내 데이터가 많은데 백엔드와 DB 쪽에서 데이터를 가공해주면 그것을 클라이언트에 잘 보여주도록 하는 것이 내 역할이다. AG GRID는 이미 회사에서 사용하고 있어 유지/보수를 주로 했고 Toast editor는 내게 주어진 프로젝트로 관리자페이지를 만들면서 처음부터 만들었다.

AG-GRID 데이터 그리드 라이브러리

AG-GRID는 데이터를 잘 보여줄 수 있도록 보여주는 라이브러리 중 하나다. 자바스크립트부터 리액트, 앵귤러, 뷰 에도 적용할 수 있다. 서버사이드 렌더링과 데이터 엑셀 추출 등 다양한 기능들을 제공하고 있다. Docs를 보면 다양한 속성들을 제공하여 개발하는 사람들이 원하는 대로 쓸 수 있게 만들어져 있다. (그만큼 Docs를 꽤 훑어봐야한다는 점, 영어라는 점. 하지만 극복해야지.)

AG GRID에서 겪었던 문제는 특정 column에서 n개의 row를 합쳐야하는 상황이 있었다. 우리가 원하는 식의 병합하는 기능이 없어서 코드에서는 css를 조작하여 클라이언트에서 병합하는 것처럼 보이게 했다. 그 과정에서 함수를 정의하는데 연속적으로 나오는 데이터명은 이어붙이도록 의도했으나 연속되지 않아도 이후에 나온 데이터명까지 참고하여 문제가 생겼다. 코드 한 줄을 붙이고 안 붙이고에 따라서 버그가 생길 수 있다는 게 더더욱 실감났던 경험이었다.

Toast editor 에디터 라이브러리

Toast editor는 nhn에서 만든 에디터 라이브러리이다. 마크다운 형식과 위지윅 형식을 제공하고 기본 코드만 가져와도 충분히 이용하는데 무리 없는 에디터이다. 뷰에서 쓸 수 있는 라이브러리 리스트가 몇 있었는데 기본으로 제공하는 라이브러리의 기능들이 몇 없고 새로 만들어야 한다는 점과 공식 문서가 잘 없어서 Toast editor를 선택하게 됐다.

Toast editor를 가지고 게시글의 내용을 post하는 업무는 기존에 끝냈다. 하지만 string 형식으로 가져오고 이미지의 경우 base64의 형식을 가져 그 길이가 길었다. 또한 이후 관리자 페이지에서 잠시 쓰는 이미지는 임시 URL로 보여주고 등록할 때 Amazon S3 클라우드에 저장하고 받아온 링크로 바꿔주는 걸 해야했기에 에디터에서도 동일하게 접목시키려했다. 이번주 가장 시간을 많이 쓰게 된 작업이었는데 이슈가 많았다.

먼저 에디터에 이미지를 업로드하면 base64로 처리되는 내용을 임시 url로 바꾸는 작업, 라이브러리에 다행히 이미지를 업로드할 때 함수를 쓸 수 있도록하여 이 부분은 해결했다.

그리고 파일을 올릴 때 이미지만, 용량은 10MB 아래인지 체크하여 올릴 수 있도록 함수를 정의했다.

checkFileMetadata(file) {
      const allowedFormats = ["image/jpeg", "image/jpg", "image/png", "image/gif"]
      const maximumFileSize = 10 * 1024 * 1024 // 10MB

      /* 포맷 체크 */
      if (!allowedFormats.includes(file.type)) {
        alert("jpg, png, gif 이미지만 추가할 수 있습니다.")
        return false
      }

      /* 용량 체크 */
      if (file.size > maximumFileSize) {
        alert("10MB 미만의 이미지만 추가할 수 있습니다.")
        return false
      }

      return true
    },

그리고 toast editor에서 플러그인을 추가하도록 만들어뒀는데 일부 제공되는 플러그인이 있어 적용시키는 작업을 했다. 하나를 적용했는데 Color Syntax Plugin이었다. 그런데 self is not defined라는 오류만 계속 떴다. 다른 사람들의 코드들을 다 살펴봐도 내 코드에는 문제가 없었다. 도저히 원인을 알 수 없어서 도움을 요청했는데 단순한 문제였다. 만들고 있는 사이트는 SSG로 제작하고 있어 config파일에 target: static으로 설정했었다. 그래서 에디터가 새로고침할 때 안 되는 문제를 해결했었는데 Color Syntax Plugin은 아예 처음부터 안 됐다. 추가로 ssr: false를 추가하니까 너무 쉽게 해결된 것이다.

그 외 했던 업무들

프론트에서 받고 있는 칼럼 중 일부는 중복이 되서는 안 되는데 사용자가 입력하는 부분들에 있어서 중복체크를 하지 않은 점이 있었다. 그래서 이를 해결하기 위해서 중복을 막았다. 중복을 막는 과정에서 아무래도 이름은 똑같은데 띄어쓰기 여부에 따라 달라질 수 있겠다는 생각에 replace를 활용하여 공백을 메웠다. 처음에는 trim()을 활용했는데 trim은 문자열 양 끝의 공백을 제거하는 메서드였다. 지금 생각해보니 영어 이름에 있어서 대소문자 여부에 상관없이 중복처리를 해야겠다.

if (list.includes(value.replace(/ /g, "")))
	return 에러 메세지

배워야할 내용

axios를 이용한 데이터 통신을 자주하다보니 비동기 async await, promise를 접하게 됐는데 이 부분에 대해 어떤 차이가 있는지 제대로 알지 못했던 것 같다. 이제는 확실하게 이해할 필요를 느꼈다. 꼭 정리해서 올리려 한다.

자가 피드백

체력을 기르자 건강을 챙기자. (20일 동안 헬스장 12일 가기)
- 10일 남은 시점에서 헬스장에 3일을 갔다. 이제 남은 10일에서 9일을 가야하는데 아침에 하는 일과 늦은 업무로 못 가는 점이 크다. 아침 시간을 적극적으로 활용할 필요가 있다.
기본에 충실하자. (제로베이스 자바스크립트 28파트 끝내기, 자바스크립트 기초 문법 68강)
- 자바스크립트를 공부하기로 했으나 제대로 이뤄지지 못하고 있다. 출퇴근 시간을 활용하는 과정에서 졸고 휴대폰 게임을 하고 있는 내 자신만 보였다. 조는 건 좋지만 휴대폰 게임은 줄일 필요가 있다.
계획적인 삶 살기. (매일 오전 적극적인 다이어리 활용)
- 다이어리는 일주일동안 쓰질 않았다. 오전에도 쓰지 못했고. 업무에 있어서는 노션에서 조금 체계화를 시켜서 할 일, 한 일을 잘 정리하고 있는 점은 다행이다. 그래도 오전에 할 일은 정리해보자.
꾸준한 기록, 꾸준한 성장 (개발 1일 1블로그 -> 개발 7일 3.5블로그)
- 1일 1블로그는 사실 힘들 수 있겠다는 생각이 든다. 운동도 매일 가는 것보다 격일로 가고 안 가는 날짜에 블로그를 쓰는 게 좋아보인다. 신체 근육이 쉴 때 개발 근육을 키우는 식으로 가자.
토이 프로젝트로 백엔드, DB 경험하기
- 일주일 동안 약 6개의 api를 만들어봤다. 모델부터 스키마, CRUD 를 건드려봤는데 여전히 어떻게 흘러가는지 모르겠지만 경험을 했다는 거에 만족한다. 이제 유지/보수 쪽으로 api를 건드리게 될텐데 정리를 해봐야겠다.
영어공부도 틈틈이 (출퇴근 시간에 영어에 노출되기)
- 영어공부까지는 아니지만 영어 노출 시간을 늘리고 있다. 기묘한 이야기 시즌4가 나왔다길래 시즌1을 오랜만에 봤다.

지삶앎