TIL#11. 인스타 클로닝 댓글달기 구현

[css] word-break

input text 박스를 통해 댓글입력 받을때 자동으로 줄바꿈을 하기위해서 사용하였다.
<text-area>를 사용하면 또 되겠지만 요번엔 요걸로 적용

word-break 속성은 텍스트가 자신의 컨텐츠 밖으로 넘쳐날때 줄을 바꿀지 지정한다.

/*오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)*/
word-break: break-all;

https://developer.mozilla.org/ko/docs/Web/CSS/word-break

  <div class="feed__commentList inPad">
    <div class="comment-row">
      <div class="comment">
        <span class="comment__userId">songhee</span>
        <span class="comment__contents">안녕하세요 위코드 18기 최송희님 위스타그램 진행중이시군요</span>
      </div>
      <i class="far fa-heart"></i>
    </div>
  </div>
      .
      .
      .
  <div class="feed__myComment inPad">
    <i class="far fa-grin fa-lg"></i>
    <input type="text" placeholder="댓글 달기..." />
    <button class="comment__btn-post btn-none">게시</button>
  </div>

.comment__contents {
  width: 100%;
  word-break: break-all;
}

[css] CSS 작성순서 convention

CSS는 폭포수와 같아서 그냥 쭈욱~쓰다보면 위에부터 반영되고 중복 시 젤 밑에꺼가 반영된다! 라고 생각했는데...권장 우선순위가 있다고 한다. 필수는 아니지만 코드 유지보수 차원에서 습관화 하자

위치 선정 > 윤곽 > 외곽 디테일링 > 채색 > 타이포그래피 와 같이 밖에서부터 안쪽으로의 흐름으로 쓰라고 가이드 한다고 한다

display 객체의 노출여부/표현방식
list-style
position 위치/좌표
float
clear
width / height 크기/여백
padding / margin
border / background 윤곽/배경
color / font 글자/정렬
text-decoration
text-align / vertical-align
white-space
other text
content 내용

[JS] .toggle()

댓글에 하트 클릭이벤트 구현시 toggle을 사용하였다. 아이콘 클릭 시 특정 클래스명을 추가했다, 뺏다 하는 기능!
classList.toggle("추가하고싶은 class 명");

const CLLICKED_CLASS = "fas";

postButton.addEventListener("click",function(){
    if(commentInput.value){
        let inputValue = commentInput.value;
        let row = document.createElement("div");
        row.innerHTML = postComment(inputValue);
        row.classList.add("comment-row");
        commentsList.appendChild(row);
        const commentLike = row.querySelector(".fa-heart");
      
        commentLike.addEventListener("click",function(){
            commentLike.classList.toggle(CLLICKED_CLASS);
        })
      
        commentInput.value = "";
        setButtonStatus();
    }
})