[데브코스 14일차 TIL] 바닐라JS 코드 디자인에 대해 2 + git 공부

💡 배우고 생각해본 것들

e.preventDefault() 에 대하여

e.preventDefault()는 from의 전송 뿐 아니라 태그의 기본동작을 차단한다. 예를 들어 a태그는 기본동작으로 href로 페이지를 이동하는데, 이것도 차단할 수 있다. 나는 그동안 폼의 전송을 막고 싶을 때 기계적으로 e.preventDefault()를 사용했는데, 태그의 기본동작을 막는다는 근본적인 생각을 하지 않고 사용하고 있었다.

querySelector에 대하여

그 동안 나는 id, class, 태그 이름을 가져오는 것에만 기계적으로 사용하고 있었는데, 태그에 name을 줘서 input[name=todo] 이런 식으로 특정 태그를 가져올 생각을 하지 않았었다. html 기본기가 부족한 상태가 아닌가 체크를 해봐야 할 것 같다.

 

<코드 디자인 관련>

SPA에서 submit에 대하여

<form> 태그에 관하여 submit은 폼 안에서 enter 이벤트가 발생했을 때도 submit 처리를 한다. 나는 그동안 submit 을 사용하지 않고, 클릭 이벤트와 엔터 이벤트, 2가지 이벤트에 대하여 이벤트핸들러를 연결해줬던 것 같다. 이것도 기계적이었던 것 같고, submit으로 처리해볼 생각은 하지 않았던 것 같다.

상위 컴포넌트에서 하위 컴포넌트로 함수를 넘긴다

form이 list를 관리하기 위해 onSubmit 함수 자체를 파라미터로 넘겨줄 수 있다. (신박하다)

state를 이용해서 렌더링한다.

신박하다2...

컴포넌트 계층에 대하여

마치 레고 조립을 하듯 계층별로 클래스를 나눈다. (신박하다 3...)

데이터는 어디에서 받는가?

리액트에서도 그렇고, 데이터를 받아야 하는 부분이 있다면 이 데이터를 어디서 받아야 할 지 고민했었다. 항상 그런것은 아닐테지만, 강사님께서는 최상단 스크립트에서 보내서 state로 보내주셨다. 상태, 컴포넌트 등등 이런 디자인을 갖고 있는 코드이므로 가능한 패턴인 것 같다. 생각해보면 만약에 데이터를 Store로 분리한다 했을 때, 최상단에서 불러오는 것이 당연(당연한 것은 없지만)한 것 같기도 하다.

 

---

💡 오늘의 회고

컴포넌트 설계 외에도, git을 다시 학습해보았다. 저번에 1주차 미션을 진행하면서 나는 git을 잘 사용하지 못하고 있다는 것을 깨달았다. 내 커밋은 엉망이었다. 나는 지금까지 혼자만 작업을 해왔기 때문에 커밋에 대해 깊게 생각하지 못하고 있었다. 단위 별로 커밋을 한다고는 했지만 'add .' 로 스테이지에 추가하고 그냥 커밋해버리는 것이 습관이었다. 커밋은 습관이라 잘 고쳐지지 않다는 것이 이런 것을 말하는 것 같다. 기계적으로 'add .'을 해버리는 것을 정말 고쳐야겠다. 앞으로 git을 사용할 때는 심혈을 기울이자. 정신 바짝 차리기!!!

진유림 님의 git 강의를 통해서 1인 3역을 하면서 브런치를 3개 만들고 협업하는 상황을 시뮬레이션해서 연습해보았다. 앞으로 있을 PR에서, 다른 분들이 코드리뷰를 더 편하게 하실 수 있도록, 또 추후에 회사에서도 좋은 커밋을 할 수 있는 습관을 들이자.