잠깐! 시작하기 전에
이 글은 wecode에서 실제 공부하고(이제 사전 스터디는 아닙니다.), 이해한 내용들을 적는 글입니다. 글의 표현과는 달리 어쩌면 실무와는 전혀 상관이 없는 글일 수 있습니다.
또한 해당 글은 다양한 자료들과 작성자 지식이 합성된 글입니다. 따라서 원문의 포스팅들이 틀린 정보이거나, 해당 개념에 대한 작성자의 이해가 부족할 수 있습니다.
설명하듯 적는게 습관이라 권위자 발톱만큼의 향기가 날 수 있으나, 엄연히 학생입니다. 따라서 하나의 참고자료로 활용하시길 바랍니다.
글의 내용과 다른 정보나 견해의 차이가 있을 수 있습니다.
이럴 때, 해당 부분을 언급하셔서 제가 더 공부할 수 있는 기회를 제공해주시면 감사할 것 같습니다.
구현
1. 댓글 정보의 구조
설계를 지나 이제 드디어 무언가 더 나아갈 수 있게 되었습니다.
먼저, 댓글은 무엇으로 이루어졌는가, 어떤 정보를 포함하는가를 고민합니다.
DB 구조를 모방하듯 떠올리면 간편하겠지만, 완성된 형태를 정말 모르겠다면 하나의 댓글은 정보의 모음이라는 생각부터 시작할 수 있습니다.
댓글은 유저의 닉네임과 댓글내용, 좋아요의 수, 그리고 좋아요 여부를 포함할겁니다.
때에 따라 더 많은 정보를 가질 수 있겠지만, 지금 필요한건 딱 그정도면 될 것 같습니다.
그리고 해당 정보들을 분류해야 하고, 분류된 값들은 각각 분류명이 있어야 합니다.
이름(key)과 값(value)이니 객체를 사용해서 저장하는 방식이 떠오릅니다.
댓글 정보를 객체로 작성해보겠습니다.
let commentInfo = {
userName : string,
commentText : string,
liked : boolean,
like : numeber
... // 중략
}
이런 내용들로 이루어진 객체가 댓글의 정보라고 생각합니다.
번외로, DB와 연계해서 생각하는 방식이면 테이블의 가로행마다 PK인 id가 존재할거고, 작명만 약간 다르게 해주면 될 것 같습니다.
let commentInfo = {
id : number
user_name : string,
text : string,
liked : boolean,
like : numeber
...
}
와 같은 내용들일겁니다.
여기서 API로 불러올 정보(json file)에 정말 가까운 형태로 생각해보면, 객체(딕셔너리)와 배열을 더 활용해서 나타낼 수 있습니다.
{
comments : [
{
id : number
user_name : string,
text : string,
liked : boolean,
like : numeber
...
}
...
]
}
이런 구조로 작성되어야겠죠.
그럼 위 구조를 보고 저는
-
댓글 기능의 컴포넌트의 구조는 생각보다 깊지 않겠구나.
-
저 데이터 중에서 내가 입력받아야 하는 데이터는 몇 없구나.
이런 생각을 할겁니다.
그리고 이제 입력을 받아야 하는 값에 초점을 맞춰 구현을 시작합니다.
이어서
다음 글에서는 input, form, 이벤트를 다루는 컴포넌트를 가볍게 만들어보겠습니다.
