[내일배움캠프 TIL] 21일차

Jaehyeon Ye·2022년 11월 28일
0

오늘 새로 배운 것

우선 좋아요 기능 구현에 있어서 다른 계정들이 좋아요를 누르거나 취소하는 것을 고려한 코드를 짜는 부분에서 막혀서 포기했었는데, 좋아요를 누르면 해당 계정을 담는 리스트를 만들고 취소하면 그 리스트에서 해당 계정을 제거하는 식으로 구현하면 된다는 것을 깨달았다. 그리고 좋아요 옆의 카운트는 아마 그 리스트의 length를 출력하면 될 것이다.

또한 좋아요 icon으로 fontawesome의

<i class="fa-regular fa-heart"> // 속빈 하트
<i class="fa-solid fa-heart"> // 꽉찬 하트

를 사용할 때 class나 id값으로 jquery와 삼항 연산자를 사용해서 좋아요 클릭이나 취소에 따른 모양 변화를 일단 구현해보려고 한다. 물론 나중에 더 좋은 방법을 찾는다면 그 방향으로 구현해볼 것이다.

그리고 검색 기능 구현도 사실 이번에 기능은 구현됐지만 나중에 데이터가 엄청 많아질 경우를 이제 고려해봐야하므로 다음 프로젝트에서도 혹시 firebase를 사용할 경우 자체 검색 api를 한번 찾아보고 미리 db에서 해당 데이터만 가져오는 query도 좀더 찾아봐야될 것 같다.

오늘 리액트 실무기초 강의에서는 본격적인 내용에 들어가기에 앞서 html, css 등을 간략히 짚고 넘어가는 것 같은데 오늘 강의에서 배운 부분들은,

<div>, <p>, <button> 등등...

이것들의 정확한 명칭은 태그(Tag)가 아닌 '요소(elements)'이다.

태그는

<></>

이걸 뜻한다

DOM은 html 단위 하나하나를 객체로 생각하는 모델이며 예를 들어 div라는 객체 안에 하위 노드를 가진 이러한 구조를 트리 구조라고 한다. 그리고 document.queryselector, document.getElementbyId 등 그냥 관습적으로 DOM 조작하기 위해서 익히 써왔던 구문에서 이 document가 DOM 트리를 볼 수 있는 구문이고 예를 들어 body를 보려면 document.body, head를 보려면 document.head라고 하면 되며 body와 head는 형제 요소라고 할 수 있다. body의 자식 요소에 접근하려면 document.body.childNodes, 눈에 보이는 자식들을 보려면 document.body.children, 원하는 요소들만 보려면 예를 들어document.getElementbyName("div") 이런 식으로 사용하면 된다.

하루를 돌아보며...

드디어 두번째 팀 프로젝트가 끝났다. 다른 조들도 다들 들리기로는 어렵다 어렵다 했다지만 발표에서 본 결과물들은 꽤나 잘했다는 생각이 들었다. 다음 프로젝트가 있기까지 이제 다시 강의를 들으며 기본을 다지는데 좀더 집중해서 뒤쳐지지 않고 1인분 이상의 몫은 해야겠다는 생각이 들었다.

profile
FE Developer

0개의 댓글