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

<회고록>

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다.

 

1. 태그 시스탬 도입

 : 코드 리뷰 사이트를 만들 때 중요한 것은 게시글을 보고 어떤 글인지 지레짐작이 가능해야 한다는 점이다. 실제로 많은 게시글 사이트의 경우에는 태그라는 시스탬을 통해서 이 글이 대충 어떤 글인지에 대한 지레짐작이 가능하도록 만들어놨다. 따라서 나도 태그 시스탬을 통해서 위 문제를 해결하려고 하였다. 

 태그 시스탬을 도입하면서 가장 어려웠던 부분은 onKeyDown 이벤트 핸들러였다. 태그 시스탬의 동작원리는 다음과 같다.

•  input에 문자열을 입력한다.
•  input에 엔터키를 눌렀을 때 해당 문자열을 태그로 변환한다.
•  변환한 태그를 태그목록에 추가한다.

위 과정을 보면 onKeyDown 헨들러가 핵심로직임을 알 수 있다. 특히 엔터를 눌렀을 때 바로 form이 제출되는 문제가 있었는데 이 문제를 해결하기 위해서는 엔터를 눌렀을 때 현재 진행되고 있는 이벤트들을 중단시켜야 한다는 점이었다. 따라서 나는 e.preventDefault()를 통해서 해당 문제를 해결했다. 또한 엔터를 눌렀을 때 현제 form에 있는 문자열을 태그로 변환시켜야 한다는 점이 있었는데 이 부분을 해결하기 위해서 나는 input과 관련된 상태를 만들어두고 onChange가 될 때마다 input과 관련된 상태를 업데이트 해주고 onKeyDwon을 했을 때 해당 input 상태를 tag 목록에 추가하는 방식을 해결했다. 나는 이 태그 시스탬을 도입하면서 크게 얻은 부분은 2가지 정도가 있다. 첫번째는 e.preventDefault()의 이해 , 두번째는 onKeyDown 헨들러에 대한 이해이다.

 

 

https://minprogramming.tistory.com/entry/eventpreventDefault-vs-eventstopPropagation-에-대하여

event.preventDefault() vs event.stopPropagation() 에 대하여...