일주일간 인스타그램 메이펜이지 그리고 로그인 페이지를 만들어 보았다. 기업에 남는 코드들이 있어 리뷰해 보겠다.

인스타그램 메인 페이지를 HTML,CSS 클론코딩을 진행하였고 그 외 요소에는 자바스크립트로 구현하였다.

메인페이지

HTML코드와 CSS 코드는 생략 하겠다. 만약 보고싶다면 git를 방문해 주시기 바랍니다. 일단 자바스크립트 구현에서는 위에 서치 input를 클릭한다면 박스가 나오고 focusout 즉 그 외 곧을 누른다면 없어지는 효과를 구현하였다. 이후에는 class명의 자바스크립트로 바꿔 좋아요 버튼이 활성화 되게 만들었다.

댓글창 기능도 구현하였는데 enter 혹은 게시를 누른다면 댓글창에 댓글이 추가되는 기능을 만들어 주었다.

• https://github.com/tmdckszm

자바스크립트 기억에 남는 나의 코드

inputSearch.addEventListener('focusout', ()=>{
    searchBox.style.display = "none"
})

어떻게 하면 영역 밖에서 이벤트 발생시 서치박스를 닫을 수 있을까 생각을 해보았는데 focusout 이라는 아주 좋은 기능이 있었다. 영역 이외에 일어나는 애니메이션을 종료 ? 시킬 수 있다. 이벤트에 자세한 내용은 MDN 공식문서를 참조하길 바란다.

https://developer.mozilla.org/ko/docs/Web/Events

farHeart.addEventListener('click', ()=>{
    if(farHeart.className === "far fa-heart"){
        farHeart.classList.replace("far", "fas");
    }else if(farHeart.className === "fas fa-heart"){
        farHeart.classList.replace("fas", "far");
    }
})

처음에 좋아요 버튼을 바꾸어 줄려고 하였을때는 background-color 를 바꿔줘야된다고 생각했는데 문제점이 하트에 배경색이 바뀌는게 아닌 전체 영역에서 바뀌었다. 그래서 아예 class 명을 바꿔줘 빨간 하트를 가져오게 구현하였다. 아래 링크는 아이콘 참조 사항이다.

https://fontawesome.com/

mainInput.addEventListener('keydown', (e)=>{
    if(e.keyCode === 13){
        let divTag = document.createElement("div");
        let spanTag = document.createElement("span");
        let spanTag2 = document.createElement("span");
        divTag.classList.add('qa_layout_2')
        spanTag.classList.add('qa_name')
        spanTag.textContent = "k_seung_chan"
        spanTag2.classList.add('qa_hello')
        spanTag2.textContent = mainInput.value
        divTag.appendChild(spanTag)
        divTag.appendChild(spanTag2)
        divTag.append(spanTag2)
        qLayout2.append(divTag)
        mainInput.value = "";
    }
});

이 부분은 댓글 추가 구현기능이다. HTML DOM에 접근하여 새로운 엘리먼트들을 새로 만들어주어 이벤트가 발생할때마다 엘리먼트들이 새로 추가될 수 있도로 만들었다. 마지막으로 이벤트가 발생하여 끝나는 순간 input의 value값도 초기화 될 수 있도록 만들었다.

처음부터 html css 코드로 레이아웃을 잡는 경우가 많은데 댓글창이 끝없이 늘어 날 수 있는 경우를 생각하지 못하였었다. 이번 경험을 바탕으로 그러한 부분을 유의해야 될 것 같다.