1222 TIL

🐶 feedback

오전에 피드백받은 걸로 이슈를 만들었는데 와우 진짜 산넘어 산이다 좀 프로젝트가 부족하다는 생각이 들긴했는데 더 확고해진듯 ㅠㅠ 끝나면 혼자 프로젝트 하나 해볼까..? 근데 기능적으론 여기서 한거 이상으로는 못할 것 같은데 그래도 주제가 좀 더 괜찮으면 더 괜찮을 수도 있을 것 같고..? 모르겠당..

🌠 css

• line-height: 40px;
  https://sanctacrux.tistory.com/1058
  ➜ display 속성(inline/block/inline-block)에 따라서 적용 가능 여부가 가능
  span에는 적용 불가능 p에는 적용 가능

  • block: div p h li
  • inline: span b i a
  • inline-block: IE7 이상에서만 사용가능

• 스타일시트 접두어

  • -webkit- : 구글, 사파리 브라우저에 적용
  • -ms- : 익스플로러에 적용. (생략 가능)

• object-fit
  https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%82%AC%EC%9D%B4%EC%A6%88-%EB%B9%84%EC%9C%A8-%EB%A7%9E%EC%B6%94%EB%8A%94-3%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-object-fit-background-size-position#object-fit_%EC%86%8D%EC%84%B1

🌠 js

• referrer : 지난 페이지 url 받아오기

    var referrer = document.referrer
    product_id=referrer.split('=')[1]
    
	var target = document.getElementById('detailBox')
    
    if (response.status==204){
        alert("삭제되었습니다")
        target.remove();
        window.history.back();// 이러면 뒤로가기라서 해당 커멘트가 새로고침해야지 없어짐
        location.href=`${FRONT_END_URL}/product-detail.html?product_id=${product_id}`
      }

• 사진이 없는 경우 사진 박스 없애기

 //이미지 없는 경우 그냥 이미지 없는 채로 올라가게하기
    if (comment_detail_json.image == null){
        const commentBox = document.getElementById('commentBox')
        commentBox.innerHTML=`<table>
                                <tr class="comment-content-Box">
                                    <td colspan="4" class="comment-text">
                                        <p id="comment_text">${comment_detail_json.comment}
                                        </p>
                                    </td>
                                </tr>
                                <tr class="comment-info-Box">
                                    <td class="comment-date">
                                        <p id="date">${comment_detail_json.created_at.substr(0, 10)}</p>
                                    </td>
                                    <td class="clike-button">
                                        <p><button><i id="like_icon" class="bi bi-heart"></i></button></p>
                                    </td>
                                    <td class="like-count">
                                        <p id="like_count">좋아요 ${comment_detail_json.like.length}개</p>
                                    </td>
                                    <td class="comment-editdel" id=""><span id="">수정</span>/<span
                                        id="">삭제</span>
                                    </td>
                                </tr>
                            </table>`
    }
    else{
        const comment_image = document.getElementById("comment_image")
        comment_image.setAttribute("src", `${BACK_END_URL}${comment_detail_json.image}`)
        const comment_text = document.getElementById("comment_text")
        comment_text.innerText = comment_detail_json.comment
        const date = document.getElementById("date")
        date.innerText = comment_detail_json.created_at.substr(0, 10)
        const like_count = document.getElementById("like_count")
        like_count.innerText = '좋아요 ' + comment_detail_json.like.length + '개' 
    }

수정할 때 사진 넣을 곳이 없다고하면 어쩌나 걱정했는데 없을 때랑 있을 때를 애초에 나눠놔서 그런지 오류없이 잘 작동했당 다행

• 엔터키 연결

1. js에서 엔터키 실행하는 함수 정의 후

function enterkey() {
  if (window.event.keyCode == 13) 
  {
    login();
  }
}

엔터키를 눌렀을 때 동작이 실행될 부분에 추가해서 연결시켜준다

<input onkeyup="enterkey();" type="text"  value="" />

또는

2. jquery를 이용

$("#SEARCH_KEYWORD").keyup(function(e){if(e.keyCode == 13)  login(); });

• 좋아요 비동기

http://jsfiddle.net/jmnote/ubem6c0z/27/