코드 리뷰 사이트 개인 회고 3일차

<회고록>

오늘은 코드 리뷰 사이트를 만들면서 개인적으로 어려웠던 부분들에 대해서 같이 이야기를 나눠볼려고 한다.

 

1. 코드 리뷰 사이트 매인 페이지 디자인 수정

 : 사실상 어제까지 만든 코드 리뷰 사이트에서 가장 수정해야 하는 부분은 메인 페이지 디자인이었다. 그 이유는 다음과 같다.

첫번째 ux적인 측면에서 사용자가 볼 수 있는 자료가 별로 없다는 점이다. 어제까지 만든 코드 리뷰 사이트에는 사실상 사용자가 볼 수 있는 정보가 한정적이었다. 태그도 자신이 선택한 태그를 넣을 수도 없었으며 답변이 되고 있는지 아님 안되고 있는지도 확인할 수 없었다. 따라서 유저가 이 사이트를 볼 때 이 사이트가 코드 리뷰 사이트인지 한 눈에 살펴보기에 굉장히 어려웠다는 점이다. 그래서 나는 디자인을 다음과 같이 수정했다.

위 사진처럼 수정했을 때의 장점은 사용자가 직접 단 태그를 볼 수 있었으며 답변이 진행중인지 아닌지도 확인할 수 있었다. 추가적으로 유저 랭킹을 통해 사용자가 유저 피드를 가장 많이 올린 사람의 명단도 볼 수 있었다.

 

2. 태그 시스탬

사실상 태그 시스탬을 처음에 도입하지 않은 이유는 어떻게 태그 시스탬을 도입할 지에 대한 의문감 때문이었다. 실제로 태그 시스탬을 도입할 때 조금의 어려움이 있었다. 처음에 엔터를 눌렀을 때 바로 onSubmit이 되지 않고 태그를 입력할 수 있도록 만들어야 한다는 점과 태그들의 상태를 어떻게 저장할 지에 대한 고민들이 있었다. 나는 이때 event.preventDefault를 통해서 현재 이벤트의 실행을 중단시키고 나중에 form 버튼을 눌렀을 때 해당 로직이 돌아가도록 지정했다. 그리고 onKeyDown을 통해서 만약 엔터를 눌렀을 때 키워드가 배열로 저장되도록 지정했다. 그리고 이를 서버에게 넘겨주고 이를 받은 서버는 map 메소드를 통해서 해당 키워드들을 뿌려주는 형식으로 만들었다.