코드리뷰
이번주 금요일에 제출한 영화 검색 사이트를 다른 조원과 함께 코드 리뷰를 진행함
https://github.com/jyc-coder/KDT4-M2/tree/JeongYeongChan
다른 조원에게 들은 피드백은 아래와 같다
전역 변수 줄이기
해당 메서드 안에서 선언해서 끝낼수 있음에도 변수를 전역으로 선언하는 것을 줄여주는 것이 좋다고 한다. 함수 내부에서 선언후 리턴을 해주는 것이 좀더 나을것 같다고 함
이미지 크기가 다 다름
내 사이트의 검색결과의 영화 포스터를 보면 이미지 크기가 전부 다른 것이 아쉽다고 한다. 나도 사이트를 만들면서 그런 피드백이 올거라고 생각했지만, 수정은 하지 않았었다.
이미지 외부의 컨테이너 div를 만들어서 해당 컨테이너 내부에 꽉차게끔 설정해서 이미지 크기를 동일하게 해야 할것 같다.
Back TO Top 버튼 블록 배경 제거
스크롤을 내릴때 나타나는 back To Top 버튼을 감싼 블록의 배경이 다른 영화 포스터이미지를 가리는 느낌이 있다는 피드백이있었다. 나는 좀더 버튼이 있다는 점을 하이라이트 해주고 싶었는데, 역시 다른사람이 보기에는 좀 어지러운 느낌이었나보다. 다음에는 그냥 버튼만 보이게 만들어야겠다.
모달창 주변 배경의 투명도
다른 영화 이미지들이 보이게 투명도를 조절했으나, 다른 영화 이미지가 보여서 오히려 상세 페이지에 집중이 힘들다는 의견이 있었다. 확실히 이런 피드백들을 들으면 내가 의도한 디자인을 다른 사람들은 다르게 받아들일수 있으며, 내가 원하는 의도대로 이루어진다고 확신하는 것이 정말 좋지 않은 습관이라고 생각했다.
e.isComposing..?
KeyboardEvent.isComposing은 입력한 문자가 조합문자인지 아닌지를 판단한다. 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자이고, 영어는 조합문자가 아니다.
한글을 입력할 때 자세히 보면 입력 중인 글자 바로 아래에 검은 밑줄이 생기는 경우가 있는데, 이 밑줄이 보이는 상황에서 Enter키를 입력하면 이벤트가 2번 발생하는 이슈가 있다. 왜냐하면 글자가 조합 중인 건지, 조합이 끝난 상태인지 파악하기가 어렵기 때문이다.
따라서 enter 키를 입력했을때, e.isComposing의 값이 false인경우 메소드가 동작하게 설정을해야 이벤트가 2번 발생하지 않게 된다.
Form 태그 사용하면 위의 isComposing을 쓸일이 없지 않았을까?
검색창을 input 과 버튼으로 구성된 엘리먼트로 제작했는데 이런 피드백이 있었다. Form은 submit으로 사용자가 enter키를 입력했을때 자동으로 인식이 되는데, 굳이 input으로 할 이유가 없지 않았을까 하는 의견이었는데, 지금 생각해보니 맞는 말이었다.
Math.ceil
검색 결과물이 전부 다 나왔는지 아닌지를 페이지수로 판단하기 위해서 총 검색 결과물 개수를 10으로 나눈뒤 Math.round로 총 페이지수를 계산했는데... 만약 게시글이 104개라면 11이 아니라 10이 나와서 4개의 게시물이 렌더링 되지 않을것이라는 지적이 있었고. 테스트 해보니 맞았다...
반올림 해주는 기능을 가졌기 때문에 5미만의 수는 0으로 내림되기 때문이고 이런 경우에는 Math.ceil로 무조건 올림을 해주는 메소드를 사용했어야 했다.
InnerHTML을 쓰는게 낫지 않았을까?
반복적으로 엘리먼트를 렌더링 하기 위해서 element를 생성하고 난 다음 클래스를 부여하는 코드를 작성했는데.. InnerHTML을 사용해서 DOM구조를 잘 파악할수 있게 구현했으면 다른 사람들이 봤을때도 쉽게 이해할수 있지 않았을까라는 의견이 들어왔었다. 단순하게 createElement를 사용하고 해당 엘리먼트에 클래스를 부여하는 코드를 정리했지만, 직관적으로 어떤 구조로 이루어져있는지는 한눈에 보고 파악하는것은 무리가 있어보였다.
오류처리 시각화
사용자가 빈 검색창을 검색하던지, 아니면 영화제목이 아닌 키워드로 검색했을때에 대한 대응을 전혀 하지 않았다. 사용자가 사용하면서 오류가 발생했는지 아닌지를 파악할수 있게 하려면 오류가 발생했다는 사실을 알리는것이 좋다.
로딩 애니메이션 구현
렌더링 시간이 빨라서 로딩 애니메이션을 구현하지 않고 사이트를 제작했는데, 데이터가 복잡하거나 양이 많은 경우에는 렌더링하는데 시간이 걸릴수 있다. 꼭 이 사이트 뿐만 아니라 다른 사이트를 만들게 될때 로딩 애니메이션을 통해 렌더링 중이라는 것을 사용자에게 보여줄 필요성이 있어보였다.
느낀 점
이렇게 조원에게 내 코드를 보여주면서 고칠점, 아쉬운점을 피드백 받으니까 어떤 방향으로 코드를 만들어야 할지 파악이 되는 것 같아서 정말 좋은 시간이었다. 다른 조의 과제물도 한번 확인해봤는데 코드를 깔끔하게 작성했다는 느낌을 받았고, 앞으로도 이렇게 다른 사람들의 코드를 보면서 내 코드를 작성하는 방식을 개선해나가야겠다.
