[FE] 나만의 시험지 CRUD를 할 수 있다. - 한달 간의 여정

블로그 포스팅 기준 너무 나도 긴 공백이었다. 블로그 기준으론 긴 시간 동안 자리를 비웠지만 정말 많은 것들을 실행하고 실험해봤다. 물론 지난 달 2주 정도는 중간고사 시험이 있어서 거기에 매진을 해야 했지만 개발 속도를 맞추기 위해 시험 공부를 뒷전으로 두고 프로젝트를 기준으로 시험공부를 야금야금 진행 했다. 1달간 진행 했던 코드를 기준으로 이야기를 풀어가 볼 것이다. 아쉽게도 중간 중간 있던 일들을 하나하나 담아내지 못했을 뿐 결과를 설명하면서 기억나는 중요한 것들을 담아 낼 것이다. 먼저 지금까지 내가 제작한 코드의 구조도는 아래 그림과 같다.

해당 이미지는 EditExam.js파일을 기준으로 작성한 컴포넌트 구조도 이다.

여기서 가장 우리가 중점으로 보아야할 파일은 EditorExam이다. 시간을 많이 들였던 부분이다. 아무래도 editor 라이브러리를 사용하지 않고 직접 하나하나 만들어 보다 보니 많은 부분들이 낯설기만 하고 답답하기만 했다. 주변 그 어느 누구도 editor를 직접 구현해보는 사람이 적었으며 구글링을 하기보단 Gpt에게 물어보는게 더 빠른 답을 얻을 수 있어서 Gpt와 한달간 대화만 한것 같다. EditorExam 코드를 전부 보여주기엔 코드가 너무 길다. 그래서 EdiotrExam의 가장 중심되는 부분과 기본적으로 내가 사용한 Hook들을 소개하며 다음 포스팅을 이어 갈 것같다. 다음 포스팅을 미리 엿볼 수 있는 두가지의 키워드가 있는데 그것은 div태그 속 존재하는 프로퍼티인 contentEditable과 여기서 가장 주요하게 다루고 있는 Hook인 useRef이다. 다음 포스팅을 어떻게 작성할지 아직 정하지 않았지만 이 둘의 개념을 중심으로 포스팅을 할 예정이다. 이 한달 간의 여정은 아직 끝나지 않았다. 현재도 진행 중이며 어느정도 EditorExam의 모든 코드들을 파악했으며 컨트롤 할 수 있는 여유가 생겨 이렇게 포스팅을 올린다. 이번 포스팅은 긴 시간 속 침묵의 해명과 프로젝트를 함에 있어 느꼈던 답답함들을 해소하는 공간이라 생각하며 글을 작성했으니 부담 없이 읽을 수 있길 바라며 글을 마친다.