Westagram 후기

html/css (레이아웃)

• display: flex를 처음 사용해본 작업이었다!
  margin이나 padding으로 레이아웃 잡다가 flex로 정렬하니 확실히 간편했다. 처음 사용해보는지라 처음엔 좀 헤맸는데 flex 속성들 자료 찾아가면서 하다보니 확실히 처음보다는 훨씬 익숙해진 것 같다! 하지만 정렬하려고 하는 요소들을 div로 너무 많이 감싸는 것 같다. div 사용을 줄이면서 효율적으로 flex를 사용하도록 해봐야겠다.

• 메인페이지 css 코드가 너무 길다... 다른 분들은 300줄도 너무 긴 것 같다고 하시는데 난 거의 500줄이나 나왔다ㅋㅋㅋ.. 아직 크게 보는 것에 익숙치 않아서 요소 하나하나 스타일링을 해서 그런 것 같다. 나무보단 숲을 보는 연습이 필요해 보인다.

.story-border {
    width: 41px;
    height: 41px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

.story-img {
    width: 37px;
    height: 37px;
    border: 2px solid white;
    border-radius: 100%;    
}

• 가장 고생했던 부분은 스토리를 감싸는 그라데이션 원을 적용하는 것이었다. 처음에는 원으로 border를 주어 감싸려고 했는데 이 방법은 너무 어려워질 것 같아서 이미지 뒤에 그라데이션 된 배경을 넣고(배경의 그라데이션은 구글링 해보니 인스타 스토리 그라데이션 값을 준 세팅이 있길래 그걸 적용했다.) 이미지에 하얀 테두리를 주어 적용했다.
  그런데 분명 배경 그라데이션에 가로세로로 center값을 줬는데 이미지와 센터가 맞지 않는 문제가 발생했다. 이걸로 몇시간을 몇몇 분들과 씨름하다가 중앙 정렬이 맞지 않았던 이유를 찾아내주셨는데, 부모 Div와 이미지 크기 값이 둘 다 홀수 아니면 짝수여야 한다는 것이었다. 처음에는 부모 div인 .story-border의 너비와 높이는 홀수고 자식인 .story-img의 너비높이는 짝수였어서 미묘하게 중앙이 어긋났던 것이었다. 짝수 홀수가 안 맞으면 중앙을 계산하다가 픽셀값이 딱 안 맞아서 어긋나버리는 것일까..?
  아무튼 그래서 이런 문제를 발생시키지 않는 가장 쉽고 간단한 방법은 이미지를 img 태그로 따로 넣지 말고 원하는 div에 background-image 속성을 이용해 넣는 것이라는 것도 배울 수 있었던 경험이었다.

javascript

로그인 페이지

id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록, 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!

const pwInput = document.getElementById("pw-input");
const btn = document.getElementsByClassName("login-submit")[0];

function btnActive() {
    const idVal = idInput.value;
    const pwVal = pwInput.value;

    btn.style.backgroundColor = idVal.length && pwVal.length >= 1 ? "#0096F6" : "#C0DFFD";
};

const input = document.querySelectorAll("input");

input.forEach(function(target) {
    target.addEventListener('keyup', btnActive)
});

• 그동안 눈으로 보기만 했던 삼항 연산자를 처음으로 써보았다.

원래는 forEach를 쓰지 않고

idInput.addEventListener('keyup', function() {
    btnActive();
});
pwInput.addEventListener('keyup', function() {
    btnActive();
});

이렇게 id 입력창과 pw 입력창에 따로따로 이벤트 리스너를 주었는데 한 번에 이벤트를 줘보라는 피드백을 받고 forEach를 사용해 한번에 줘보았다. 사실 target으로 한번에 주는 것이 아직 이해가 될랑말랑한다.

메인 페이지

댓글 input 창에 엔터치거나 "게시" 누르면 댓글 추가되도록

const btn = document.querySelector('.comment-btn');
const input = document.querySelector('.add-comment');

function addComment() {
    const commentContainer = document.getElementsByClassName('js-container')[0];
    const commentDiv = document.createElement('div');
    const commentTxt = input.value;

    commentDiv.className = 'comments-list';
    commentDiv.innerHTML = `<p class="comment-id">wecode_bootcamp</p> <p class="comment">${commentTxt}</p> <img class="comment-like" alt="like icon image" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png">`;
    commentContainer.appendChild(commentDiv);

    input.value = '';
}

input.addEventListener('keydown', function() {
    if (window.event.keyCode === 13) {
        addComment();
    }
})

btn.addEventListener('click', function(){
    addComment();
})

원래 얘는 엄청 복잡하게 했었다. 댓글 하나의 큰 div 뿐만 아니라 댓글 작성자 id, 댓글 텍스트 하나하나 다 createElement로 p를 생성해서 거기에 appendChild해주고 또 클래스를 주는 방식으로 구현했었는데, 피드백을 받고 수정한 것이 지금의 코드이다.
이렇게 수정해보니 굳이 따로 p 요소들을 생성해서 넣어줄 필요가 전혀 없었다!

• 매번 느끼지만 효율적이고 간단하게 구현 방법을 생각해내는 것이 가장 어려운 것 같다ㅠㅠ
• 처음엔 엔터를 눌렀을 때 이벤트가 일어나는 것을 어떻게 구현하지 싶었는데 key code라는 것을 알게 되었다. 엔터의 키코드값은 13이라는 것을 이용하니 해결되었다. 신기했다.

느낀 점

일단 한번도 써보지 않았던 display: flex에 한걸음 가까워졌다는게 뿌듯하다. 자바스크립트는... 아직 공부가 많이 필요할 것 같다.
그래도 이전에는 원하는 기능들을 구현할 때 정말 감도 안 잡히고 손을 못 대겠어서 구글링해서 제대로 이해도 하지 않고 가져다 썼는데 지금은 어느정도 내가 손을 댈 수 있는 것 같아서 기분이 좋다.