인턴을 시작한 지 2달이 다 되어가는 시점에 쓰는 이번 일지에서는 리액트를 사용하면서 새로 배우고 구현해 본 것들 중 자랑하고 싶은 2가지 기능도 포함해서 작성해 보려고 한다.
[지난 과제 후기]
3월 한 달간 숨고, 크몽 사이트를 클로닝 하는 과제를 하면서 완벽하지는 않지만 실제 운용되는 사이트에서 백엔드와 프론트엔드가 어떤 식으로 연결되어 있는지 알게 되었다. 그동안에는 눈에 보이는 부분에만 집중해서 화면 뒤 서버와 연결되는 부분은 생각지도 못했는데 과제를 수행하면서 우리 눈에 보이는 페이지 뒤에서 정말 많은 일이 이루어진다는 점을 알게 되었다. 특히 내가 만든 페이지는 기능도 훨씬 부족한데 화면에 나타나는 시간은 훨씬 오래 걸려 원인은 노트북에 있다고 생각했는데 이제 보니 내 코딩 실력이 문제였다는 점을 확실히 알게 되었다. 앞으로는 최적화 부분도 신경 써서 로딩 시간을 단축해 보려는 새로운 목표도 생겼다.
[새로운 프로젝트]
두 번째 크몽 사이트 최종 리뷰까지 마치고 남은 인턴 기간 동안 하게 될 프로젝트를 시작하게 되었다. 3월 한 달간 두 번의 클로닝 과제를 하면서 남이 만든 결과물을 흉내 내는 것보다 기획부터 내가 직접 만들고 싶다는 마음이 커져만 갔었다. 그런데 막상 처음부터 직접 만드는 새로운 과제를 받게 되니 어디서부터 시작해야 될지 당황스러워지면서 간사하게도 새로운 것을 만들고 싶다는 마음이 줄어들어 버렸다. 우선 MIT님의 말을 빌려 과제를 설명해 보자면 “데일리펀딩 내에서 발생하는 모든 이슈 (업무 요청, 협조 등)를 통합 관리하여 이슈들의 진행 상황을 빠르게 확인하고 중복된 업무 요청을 방지하는 목적으로 이슈 트래킹 툴”을 만들게 되었다. 혼자서 하는 프로젝트였다면 무작정 코드부터 치면서 중구난방식으로 만들었겠지만 다행히도 다른 이슈 트래킹 툴에 대해 충분히 조사하고 기획부터 하라고 말씀 주신 덕분에 체계적으로 시작할 수 있게 되었다. 참고 자료는 있지만 백지에서부터 시작하는 것과 마찬가지기 때문에 기획하면서 백엔드 인턴인 Daniel님과 많은 토론을 했는데 학교에서 했던 조별 과제가 생각났다. 큰 틀을 완성하고 구현을 하고 있는 지금도 틈틈이 수정해야 되거나 논의해야 될 부분을 이야기하는데 다행히 조별 과제와 달리 두 명 모두 열심히 참여하고 이야기한 부분이 바로바로 반영되어 스트레스 없이 잘 이루어지고 있다.
평소에 Trello, Jira와 같은 툴들을 사용해 본 적이 없어 이번 기회에 처음 사용해 봤는데 멋진 기능들이 많았다. 그중에서 이번 프로젝트, 이슈 트래킹 툴에서 꼭 구현하고 싶은 부분은 칸반 보드였다. 학교 전공 시간 애자일 방법론 설명에서 여러 번 이름을 들어 보기만 하고 직접 사용해 보지는 않았는데 포스트잇 모양의 할 일을 직접 드래그해서 진행 상태를 변경하는 점이 매력적이었다.
위의 사진은 참고한 실제 현업에서 사용하는 칸반 보드인데 지금까지 나의 개발 경험으로는 포스트잇 모양을 잡아끌어 원하는 공간에 이동시켜서 상태를 저장시킨다는 것은 불가능하다고만 생각했다. 다행히 react-beautiful-dnd라는 훌륭한 라이브러리를 사용해서 걱정했던 것보다 어렵지 않게 구현할 수 있게 되었다. 칸반 보드는 처음 만들어 보는 형식이라 어려울 것이라고 충분히 예상이 되었지만 기존 이슈에 대해 추가 요청사항이나 질문 등을 하기 위해 댓글과 대댓글 기능이 필요해 이 부분을 구현하려는데 예상보다 어려워서 시간이 가장 많이 들었다. 두 기능들을 여러 자료를 참고해서 만들 수 있게 되었는데 참고한 자료와 직접 작성한 코드, 실행 결과를 아래 소개해 보려 한다.
- 기능1. 드래그 앤 드랍
위의 사진이 드래그 앤 드롭 구현의 모든 것이라고 해도 과언이 아니다. 순서를 간단히 정리해 보자면
- <DragDropContext>로 기능을 사용할 부분을 감싸준다.
- <Droppable>로 드래그해 온 엘리먼트를 드롭 해줄 공간을 설정한다.
- <Draggable>로 드래그 기능을 적용시킬 엘리먼트를 감싸준다.
3단계 지침을 가지고 디테일을 조금씩 수정해가면서 만든 결과물은 아래와 같은데 디자인적으로 조금 부족해도 필요한 기능이 모두 담겨 스스로는 매우 만족스러웠다.
-기능2. 무한 대댓글
처음 구현한 댓글 모델은 단순하게 게시글(이슈)에 대해 각각 댓글을 남기는 기능으로 대댓글 기능이 없었다. 대댓글이 필요하다는 사실을 알고 쉽게 수정할 수 있을 것이라고 생각했는데 머릿속 예상 결과와 내가 만든 코드를 실행했을 때 보이는 화면이 계속 달랐다.
가장 큰 도움을 준 자료를 첨부해 보자면 위의 모델 사진인데 명확한 모델을 먼저 그려보고 코드를 작성하면 훨씬 쉽다는 점을 여러 번의 삽질을 통해 배울 수 있게 되었다. SingleComment와 대댓글에 해당하는 ReplyComment가 있고, ReplyComment내부에 또 SingleComment와 ReplyComment가 계속해서 있는 구조로 원하는 대댓글 기능을 완성할 수 있게 되었다.
[4월 총평]
4월 한 달간은 이슈 트래킹 툴을 계속해서 만들었다. 이전 과제들과 달리 기간이 길어져 느슨해질 수도 있었는데 매주 리뷰 때마다 저번 주 보다 조금이라도 더 진행된 결과물을 발표하는 걸 목표로 삼아 열심히 만들고 있다. 지난주부터 Slack과 연동해서 로그인, 회원가입을 구현하는 중인데 꽤 까다로워서 어려움을 겪고 있다. 한 달간 경험이 쌓인 덕분에 크게 걱정되지는 않지만 빨리 문제들을 해결해서 다음 단계로 넘어가고 싶다. 매우 만족하면서 인턴 생활을 하고 있지만, 3월에 대게나라를 만난 것처럼 새로운 맛집을 발견하면 더할 나위 없이 좋을 것 같다.