잠깐! 시작하기 전에
이 글은 wecode에서 실제 공부하고(이제 사전 스터디는 아닙니다.), 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.
또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 원문의 포스팅들이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.
설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.
글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.
분량이 조금 많아서 글을 나누기로 결정했습니다.
1. intro
2. 댓글 정보 구조
3. 이벤트 컴포넌트
4. 댓글 구현 컴포넌트
5. 좋아요 기능 추가
서론
불금 코딩 끝나기 직전, 앞자리에 계신 정일님께서 귀가 직전에 Comment 구현 플로우를 한 번 시작부터 구현하는 것을 보여주길 요청하셨습니다.
다행히 순조롭게 구현할 수 있었고, 문제없이 작동하는 것을 확인했습니다.
다만, 구현한 뒤 코드에 대한 올바른 설명이 뒷받침되었는지 고민한 결과, 썩 그렇지는 않았던 것 같아 글로 작성하며 정리해보고자 합니다.
이번 글은 '댓글기능'이라는 하나의 기능을 구현하기 위해 제가 생각하는 과정을 쭉 써보겠습니다.
그러니 그냥 편하게 봐주시면 됩니다.
순서
대부분 무언가를 구현할 때, 설계에서 난항을 먼저 겪게 됩니다.
충분히 고민하고, 또 고민해도 머리 속에서 생각했던 로직이 실제로는 작동하지 않는 것은 그 다음 문제가 됩니다.
글은 다음과 같은 순서로 이루어질 것 같습니다.
-
설계
-
구현
정말 목차는 간단합니다.
내용은 적을게 많으니, 얼른 시작해보겠습니다.
설계
설계는 많은 사항을 고려하고 들어가는 것보다 일단 기본적인 사항들이 무엇이 있을지부터 시작하는 것 같습니다.
이것도 다시 분류하면
-
댓글정보의 구조
-
이벤트가 발생하는 컴포넌트
-
댓글이 나타나는 컴포넌트
-
이벤트 & 댓글 렌더링 두 컴포넌트의 관계
의 순서로 진행이 될텐데, 4번의 위치를 1번으로 바꾸게 되면 하향식으로 진행하는 방법이 아닐까 생각합니다.
초기세팅(레이아웃 등)이 이미 완벽히 잡혀있는 상태에서는 하향식 개발이 편한 감이 있습니다.
page(최상위 컴포넌트)부터 시작해서 필요한 컴포넌트 구현&분리
그러나 틀만 잡혀있다면 상향식(기능별 component 위주)으로 고려해보길 공식문서에는 나와있습니다.
기능을 갖는 컴포넌트를 먼저 test하며 차차 블럭 맞추기식 완성
현재 우리가 하는 수준은 대규모 웹앱이 아니기에, 둘 다 해보는 것도 나쁘지 않다고 생각합니다.
더군다나 해당 설계 과정은 생각보다 유기적으로 연결되어 있으며, 설계순서에 따라서만 작성되는 것이 아닙니다.
때로는 2번을 고민하다 3번이 먼저 머리에 그려지는 경우도 있습니다.
그러니 저는 세세한 것들을 고민하기보다, 큰 틀만 잡고 흘러가듯 작성하는 방식이 옳다고 생각합니다.
이어서
다음 글에서는 해당 설계 순서에 맞춰 본격적으로 구현을 해보도록 하겠습니다.
