VUE......프론트 엔드 개발자s

진정...손이 많이 가고 노가다에 가까운 작업이다.

진정 내가 못하고 거지만... 하는 것마다 찾아보고 하니깐 지친다.

진정 리스펙한다.

 

진정 옛날 개발자라서 jsp에...제이쿼리로 난장판하던 시절이 생각나서 자꾸 돔으로 접근하려고 하는 습관이.....

 

 

단순 게시글 가져오기 위한 내부로직은

1. 게시글 본문

2. 게시글 카테고리

3. 게시글 댓글(최대 100개)

4. 게시글의 좋아요/조회수 카운팅

5. 나는 댓글에 좋아요까지....

6. 해당 사용자 조회수 카운팅 했는지 체크하구 조회수 Insert

 

댓글을 작성한다고... 게시글 전부를 다시 태우지 않는다. 저 6가지 로직을 또 태운다고??

ajax의 장기가 드러나는 부분이다.  10년전 봤던 최범균님의 쓴책이 아직 책상 한구석에 있다. 

 

뭐 암튼 나는 댓글을 등록한 후...해당 지점에 가서 댓글에 대한 돔을 그릴 생각을 했다!?!(append) ㅋㅋ.. 올만에 프론트 엔드를 해서 그런가? 정신 못차리는 생각을 했던 부분이다.

역시 전문가가!! 했던 사람이!! 말랑말랑한 머리를 가진 친구가 와야 한다. ㅠ

 

사실 뷰에서 $refs라는 녀석이 있기 때문에 돔에 직접 접근에서 빠르게 해결하려고 했던것이 크나큰 실수다..

refs라는 녀석은 없다 셈치고 하자!!

 

머리속 당분간 프론트엔드 머리가 들어와 있어야 한다. ..하악하악.

 

 

댓글은 리스트로 받아와서  쭈욱쭈욱 랜더링한다.

 <div  v-for="(comment, i) in commentList" :key="i">
 ..
 </div>

그럼...단순히 상태 관리하는 commentList에 방금 작성한 객체만 쏘옥 넣어 주면 끝나는것이다..

상태가 변하면 알아서 다시 랜더링해준다. 

this.commentList=[comment, ...this.commentList]

아.. 멀리도 돌아돌아 삽질했네.ㅅㅂ.ㅋㅋ

대댓글에 대한 부분도 해당 위치를 찾아서 쏘옥 넣어 주면 된다.

 

뷰나 리액트는... 상태를 이용해서 랜더링한다!!!!!!!!

 

랜더링 되는 조건으로는 상태가 변화거나 부모가 변화거나... 강제로 하거나....구구절절 알고 있던 내용인데.... 왜왜 머리가 돌이 되었니. ㅡ

다시금 프론트 뇌세포를 깨우자!!

if(targetObj.target.classList.contains('comment-good-solid')){
   targetObj.target.classList.remove('comment-good-solid')
   targetObj.target.classList.add('comment-good-outline')
}else{
   targetObj.target.classList.remove('comment-good-outline')
   targetObj.target.classList.add('comment-good-solid')
}

똥코드는.. 얼렁 클린하자.ㅠ

.

 ※  상태 변화를 줘서 다시 그리게 한다!!!...  ※

comment = { ...comment, good : !comment.good, goodCount : response.data ? comment.goodCount+1 : comment.goodCount-1}
this.commentList = [ ...this.commentList.slice(0, index), comment, ...this.commentList.slice(index+1, this.commentList.length) ]

comment.good에 따른 CSS를 변경하는 것이 아니라. comment.good 데이터 자체를 변경하면 된다!!!!!!