react-table로 만들어진 컴포넌트를 적용하는 작업을 진행 하였다. 해당 컴포넌트는 props로 필수 적으로 columns 와 data를 넘겨주어야 했다. columns는 각 열의 이름이고 data는 행에 들어갈 값들이다. 변수에 각각의 값들을 담아서 넘겨주었는데 처음엔 에러가 났다. 왜 그런지 살펴보니 배열에 담아서 보내주어야 했다. 그래서 다시 배열게 담아서 넘겨주었는데 에러는 나지 않았지만 값이 렌더가 되지 않았다. HTML 테그들은 만들어 졌는데 값은 없었다. 다른 값을 넘겨 주거나 node 형식을 넘겨 줘 보아도 똑같았다. 작업 중에 현재 서비스에 버그가 생겨서 아직 해결을 못한 상황이다. 내일 다시 한번 확인해 보아야 겠다.

webpack에 대해서 공부를 해보았다. 웹팩이란 모듈 번들러로 아래의 그림과 같이 다양한 자원들을 조합해서 하나의 결과물을 만드는 도구이다. 모듈 번들링이란 많은 자원들을 하나의 파일로 병합,압축 해주는 동작을 말한다. react cra 를 reject하여 내가 필요한 것들로만 구성해보는 작업과 webpack을 사용하여 react, sass 를 적용해 보는 작업을 진행하였다. 그냥 따라만 해본거라서 완벽하게 이해는 하지 못했다. 계속해서 연습하면서 익숙해져야 할 것 같다.

기존의 약관 페이지는 택스트만 띄워둔 형태여서 약관 페이지를 새로 만드는 작업을 진행하였다. 기존의 약관들에 관한 글들은 js 파일에 객체 형식으로 저장이 돼 있었다. 오역자들에서 md 파일을 바로 가져다 사용하기 때문에 마크다운 형식으로 바꾸어 보여주려고 했다. 하지만 오역자들에서는 styled-markdown 이라는 라이브러를 사용하고 회사 프로젝트에서는 react-markdown 이라는 라이브러리를 사용하고 있었다. react-markdown 으로는 md 파일을 바로 넣어줄수가 없었다. 그래서 다시 js 파일로 바꾸어 사용하였다. 그런데 이번에는 markdown 문법이 하나도 적용이 되지 않은 채로 나타났다. 왜 그런거지 하고 이리저리 살펴보다가 Tap과 Enter 가 문제 였다. 좀더 보기 쉽게 ..

어제에 이어 오늘도 에러를 해결하기 위해 계속 검색을 하였다. 첫번째 에러는 Yub 에서 validation 설정을 하는 부분에서 오는 에러였는데 Yub에서 mixed와 array 두가지를 사용하면 발생하는 에러였다. 그래서 mixed로 통일 시켜주어 해결을 하였다. 두번째 에러는 Formik 의 ref props가 innerRef로 변경이되었는데 해당 props가 좀 버그가 있었다. 그래서 직접 ref를 내려주는 방식을 사용하여 해결할 수 있었다.

내일 배포를 위해 마지막 테스트를 하는데 예상치 못한 에러가 발생했다. Formik 버전업에 대해서 대응한 부분에서 발생하였다. 이런저런 시도를 하는데 에러가 사라졌다 생겼다를 반복해서 결국 다시 다운그레이드를 실시 하였다. 다시 테스트를 하던 중 에러가 다 사라졌다고 생각하던 중 사파리 테스트를 하다가 에러가 발생하였고 다시 크롬에서 테스트를 하니 똑같은 에러가 발생하였다. 에러가 난 곳을 찾아가 보아도 그곳은 4개월전에 커밋을한 곳이였고 이번 업데이트에서 건드렸던 부분이 없는 곳이였다. validation 에러가 원인이였는데 결국 해결은 하지 못했다.

회원가입 API 관련해서 전체적으로 테스트를 진행하였다. 별다른 이상은 없어서 린트에러나 좀 더 보기 좋게 코드를 수정하고 마무리 하였다. immer.js 에 대해서 간단하게 공부를 하였다. state의 구조가 복잡한 경우 상태관리를 좀 더 쉽게 만들어 주는 라이브러리이다. immer.js에서 제공 한 초안을 모두 변경하면 나머지는 라이브러리에서 처리한다.