부트캠프 18, 19일차 (솔로 프로젝트)

 

킬러의 보디가드 中

오늘의 생각

오전에 git과 명령어에 대해 조금 더 공부한 후 부트캠프에서 처음으로 솔로 프로젝트가 진행되었다. 혼자 공부했을 때도 강의를 위주로 들어서 토이 프로젝트 경험이 적었던 나에게 좋은 기회라고 생각했다.  페어 프로그래밍과는 확실히 다른 느낌이었는데, 기본적인 템플릿은 주어지지만 모든 고민과 기능 구현을 혼자서 해야했다. npm run test같은 기능도 주어지지 않았기 때문에 실시간으로 웹 페이지를 만들어가며 기능이 잘 구현되는지 확인해야 했고, 해당 기능이 작동하지 않으면 이에 대한 디버깅과 해결도 홀로 해내야만 했다.

 

이틀 간의 솔로 프로젝트를 진행하면서 느낀 점은 '생각보다는 할만 하다'였다. 외향적인 성격이고 사람들과 이야기하는 것을 좋아하는 성격이지만, 공상하는 것도 좋아하기 때문에 (유학생으로 홀로 지낸 시간이 길어서 그런 것 같다) 홀로 고민하는 것에는 나름 일가견이 있다고 생각한다. 

 

과정을 진행했을 때 기본적인 기능 구현부터 쉽지 않았다. 코드스테이츠에서 제공되는 기본 템플릿을 통해 웹 페이지를 구축해야 하다보니 내가 생각하고 있던 html 구조와 달랐고 클래스명 또한 모두 지정되어 있었기 때문에 전체적인 구조를 파악하는데 꽤 긴 시간이 걸렸다. 구조를 파악하는 과정이 필요했던 가장 큰 이유는 JS파일에서의 기능 구현이었다. DOM 기능을 활용해 HTML 요소를 선택하기 위해서는 클래스명을 정확히 알고 있을 필요가 있다고 생각했다.

 

전체적인 구조를 돌아보고 이해한 후에서야 JS파일에서 기능 구현을 시작하려 했는데, data.js파일(제공된 데이터 소스로, DB에서 데이터를 가져온 JSON 구조와 유사하다고 생각했다)의 배열 'agoraStatesDiscussion'이 어떤 형식의 객체를 포함하고 있는지 확인이 필요했다. 해당 파일을 둘러본 후에야 마침내 기능 구현을 시작할 수 있었고, TODO 주석에 적혀 있는 힌트들이 이해가 잘 되었다.

 

주어진 구조를 통해 DOM을 활용해 데이터로부터 질문들을 만드는 기능을 만들어 디스커션 나열 기능을 구현했고, 내가 생각하기에 좀 더 알맞은 CSS와 추가 기능을 구현했다. 이 과정에 이미 상당한 시간을 소요했다. 추가 도전 과제가 있었는데, 해당 부분을 모두 구현할 수 없다는 판단이 들었다.

 

생각보다 시간 소요가 커서 당황했기에 점심을 먹으면서 지난 과정을 돌이켜 봤다. 어떤 과정에서 가장 많이 시간이 소요 됐을까 천천히 돌이켜 봤는데, 대체로 시간들을 상당 시간 소요했던 것 같다. 신중한 접근이 지나쳐서 오히려 독이 되었다는 생각과 프로젝트 첫째 날 개인 자유 시간에 프로젝트에 공을 덜 들였다는 생각이 들었다. CSS적으로도 디자인을 신경쓰다 이것저것 만져서 시간을 꽤 소모했던 것도 컸던 것 같았다.

 

자리에 돌아와 추가 기능 중 하나인 '페이지네이션'기능을 구현하고자 했다.

 

페이지를 오갈 수 있다

디자인 생성 과정을 줄이고, 기능 구현에 더 큰 힘을 쏟았다. 결과적으로 아슬아슬하게 그룹 소모임 전에 기능을 구현할 수 있었다. 시간에 쫓기는 느낌에 약간은 스트레스를 받았지만 좋은 원동력이 됐다.

 

기능 구현에 가장 어려웠던 부분은 기존 코드를 사용해야한다는 점이었다. 기존의 프로젝트같은 경우 페이지를 로드할 시 for문을 활용해 배열 내의 모든 데이터를 하나하나 확인하며 해당 데이터를 담을 '게시판' 변수에 .append()기능을 활용해 요소를 추가했다. (이를 render()라는 함수로 구현했다.) 페이지네이션 기능 구현 과정에 render 함수에 간섭하지 않고 기능을 구현하는 부분이 어려웠다.

 

처음에는 render 함수 안에 해당 데이터를 만들 때 카운터 변수를 선언해 놓고 갯수를 센 후 모든 데이터가 나열되었을 때 페이지 당 10개의 게시물만 나오는 형식으로 접근했다. 그렇기 위해선 게시물이 추가될 때마다 계속해서 갯수를 세 줘야 하는데, 기능적으로 꽤 비효율적이라고 생각했다. 또한 이를 활용해 페이지네이션을 구현하기 위한 함수를 구현하는 것에도 무리가 있었다. 결국에는 게시물의 갯수를 10으로 나눈 후 별개의 "영역(range)"에 담아야 했다.

 

이에 더해 한 개의 페이지에서 로드없이 기능을 구현해야 했기 때문에 (react가 그리워지는 순간이었다) 기존의 게시물에 'hidden' 클래스를 추가해 디스플레이적으로 안 보이게 설정해야 했다. 한번에 수십 개의 게시물을 보여주지 않고, 부분적으로 보여주고 말고를 버튼을 눌렀을 때 결정하여야 하는데 논리적으로 구현하는 게 쉽지 않았다. 결국 구글링을 통해 참고하고 나서야 기능 구현을 해낼 수 있었는데, 해당 논리 구조를 이해하는데도 꽤 긴 시간이 들었다.

 

페이지네이션 기능 구현 중 가장 시간 소모가 컸던 부분은 render 기능과 따로 모든 자료형에 'hidden'이라는 클래스명을 추가하는 부분이었다. 기본적으로 ul 태그를 사용했기 때문에 classList.add()기능을 구현할 수 없었다.

 

주어진 자료형은 배열이었지만, ul 변수의 경우 querySelector를 통해 html 요소를 가져온 것이라 배열의 인덱스 활용이 불가능했다. 오랜 고민과 구글링을 통해 ul 변수 안에서 getElementsByTagName() 메서드를 활용하면 해당 리스트 내의 모든 리스트 아이템('li' 태그)을 선택할 수 있다는 점과, 이를 변수에 할당할 시 배열로 담긴다는 사실을 알게 되었다.

 

논리 구조를 활용한 함수

논리 구조를 재정립하고 다음 순서대로 진행되도록 기능을 구현했다.

1. render() 함수를 통해 받아온 데이터를 모두 추가한다(.append).
2. 모두 나열된 자료를 또 다른 함수인 appendPageNumber를 통해 자료의 갯수에 따른 페이지 넘버가 포함된 버튼 태그를 추가한다.
3. 현재 페이지를 1번으로 설정하고, 페이지 앞과 뒤의 번호에 따라 10개씩의 게시물만 보여주도록 범위(range)를 나눈다.
4. li 태그를 가진 모든 리스트 아이템에 display:none 기능을 부여한 'hidden'이라는 클래스명을 추가한다.
5. 해당 과정에서 현재 페이지 넘버에 해당하는 "범위"안의 자료들만 'hidden' 클래스명을 제거한다.
6. 이 기능을 모든 버튼의 이벤트리스너에 추가한다.

---

하루를 마치며

아쉽게도 그룹 소모임 이전까지 Local Storage기능은 구현하지 못했다.

 

새로운 프로젝트를 진행하면서 많은 아이디어가 떠올랐다. 보다 다양한 기능을 구현하고 싶었는데 시간적 한계에 도달해 많이 아쉬웠다. 주말을 활용해 추가적인 기능을 구현해보고 싶었지만...현재 이 글을 포스팅하고 있는 월요일 다양하고 많은 기능을 구현하진 못했다. 쉬는 날 더 공부하는 것은 참 쉽지 않은 것 같다...