Wecode Fullstack Course 2주차 회고

지난 2주간 JavaScript, HTML, CSS를 배웠고 이를 활용해 하나의 페이지를 클론 코딩해보았다. 무언가 만들어낸다는 사실 자체로 즐겁기도 했지만, 원하는 그림대로 만들지 못해 스트레스도 많이 받았던 2주였었다.

처음으로 만든 페이지는 로그인 페이지, 아이디에 "@"가 들어가고 비밀번호가 8자리 이상이면 버튼이 활성화 되게 만들었다.

이때 활용한 이벤트는 input 이었는데 keyup, keydown, blur로도 구현할 수 있다고 한다.
버튼 활성화 / 비활성화는 disabled 속성을 활용하여 구현하였다.

const checkId = document.getElementById("account")
const checkPw = document.getElementById("password")
const checkButton = document.getElementById("checkButton");

//input, keyup, keydown, blur,
checkId.addEventListener("keyup", function() {
  if (checkId.value.includes("@") && checkPw.value.length >= 8) {
    checkButton.removeAttribute("disabled")
    checkButton.style.opacity = 1.0;
  } else {
    checkButton.style.opacity = 0.5;
  }
});

checkPw.addEventListener("input", function() {
  if (checkId.value.includes("@") && checkPw.value.length >= 8) {
    checkButton.removeAttribute("disabled")
    checkButton.style.opacity = 1.0;
  } else {
    checkButton.style.opacity = 0.5;
  }
});

checkButton.addEventListener("click", function() {
  window.location.href="/list.html"
});

두번째로 만든 페이지는 커피리스트다.
이미지는 Unsplash에서 가져와 크롭 및 리사이징하였다.
커피리스트는 flex-wrap 을 활용해 나름 반응형으로 구현해보려고 했는데, 만족스럽지는 못하였다.
더 좋은 방법이 분명히 있을텐데 다음에는 꼭 개선해야겠다.

마지막으로 만든 페이지는 커피 세부정보 페이지이다.
하트버튼을 눌리면 빨갛게 변하는 기능과 댓글 기능을 조악하게나마 구현하였다.

하트 버튼은 두가지의 아이콘을 absolute 속성으로 겹쳐놓고 click 이벤트로 opacity 값과 , z-index 값을 조절하여 구현하였고, 댓글창은 keyup 이벤트로, 엔터를 입력하면 빈 div 태그를 만들어 그 속에 input값을 집어넣는 형식으로 구현하였다.

const unlikedHeart = document.getElementById("unliked")
const likedHeart = document.getElementById("liked")

unlikedHeart.addEventListener("click", function() {
  if (unlikedHeart.style.opacity == 1) {
    unlikedHeart.style.opacity = 0
    likedHeart.style.opacity = 1
  } else if (unlikedHeart.style.opacity == 0) {
    unlikedHeart.style.opacity = 1
    likedHeart.style.opacity = 0
  }
})

const replyLog = document.getElementsByClassName("reviewLog")[0]
const replyInput = document.getElementsByClassName("reviewInput")[0]

replyInput.addEventListener('keyup', function(event) {
  if (event.key === "Enter") {
    const wrapComment = document.createElement('div') //댓글을 감쌀 div (포장지 느낌?)
    const nameComment = document.createElement('span')  //사용자 이름 
    const contentComment = document.createElement('span') //댓글 내용

    wrapComment.className = "wrapComment" //css값을 줄 수 있게끔 class 부여
    nameComment.className = "nameComment"
    contentComment.className = "contentComment"

    contentComment.innerHTML = replyInput.value // 위에서 생성한 빈 span태그 속에 replyInput값을 넣기
    
    wrapComment.appendChild(contentComment) // 우선 생성한 div태그에 input값을 넣는다
    replyLog.appendChild(wrapComment) // 내용물을 넣은 div태그를 HTML 문서에 만들어 놓은 댓글 목록에 출력
  }
})

이후 더 구현해야될 과제가 있었지만 댓글 기능 중에 아이디 값을 가져와 활용하는 부분에서 어려움을 느껴 구현하지 못했다.

이렇게 2주간의 Pre-course과정이 끝났다.
나름 고생하면서 클론코딩을 하면서 느낀 점은

1. 코드가 제대로 작동을 안하면 오타가 있는지 체크하자
기능이 작동하지않아 몇 시간을 씨름하고나서 찾은 원인이 클래스 이름의 영어 스펠링 오타란걸 확인하고 현자타임이 많이 왔었다

2. 항상 return되는 값의 위치를 확인하자
JavaScript문제를 풀다보면 결과값이 undefined로 표시되는 경우가 많았다 리턴값이 제대로 된 위치에 없었거나, 리턴되는 값이 없어서였다. 열심히 코딩을해도 반환되는 값이 없다면 무용지물이니 항상 이를 염두에 두고 코드를 짜도록하자

3. 의욕을 잃지말자!
잘하는 팀원들 보면서 자극은 받되, 무너지지말자!
나도 매일매일 발전하고 있다는걸 잊지말자!
대신 나도 그만큼 노력해야 된다는 것도 잊지말자!

다음 주 부터는 react 수업이 기다리고있다.

의욕 잃지말고 앞으로 나아가자.