TIL_2020년 10월 30일 (금)

TIL 작성 원칙

• 매일 쓴다.
• 사소한 것이라도 쓴다.
• 좋은 생각이든 나쁜 생각이든 다 기록이라고 생각하고 쓰자.
• 체크박스를 만들어서 꼭 해야하는 일들을 체크해두자!
• 나의 일기이기도 하지만 남에게 보여주는 에세이라고 생각하고 짤도 넣고 재밌게 쓰자~

0. 매일 해야할 일

• 개발관련 글 읽기 or 개발관련 영상 보기
  • 오늘 본 글/영상 : 좋은 코드란 무엇일까?
• 개발관련 공부
• TIL 작성
• 알고리즘 풀기
  • 오늘 푼 문제 : 11/2일(월)시작 예정

1. 오늘 한 일

1. Wecode (10일차)
   • Instagram Refactoring
     혼자할 때보다 서로의 코드를 보면서 하는 것이 얼마나 좋은지 알 수 있었던 시간. 내가 아는 것을 설명해주고, 나는 이런 식으로 생각해서 코드를 썼다는 것을 설명해주고 또 다른 사람들의 코드를 보면서 그들의 생각을 듣고 좋은 것을 배울 수 있었다. 화면에 출력되는 것은 같아보이더라도 뒤에서 짜는 코드는 다양하다. 한 가지 정답만 있는게 아니니… 그래도 조금 더 나은 방법, 조금 더 좋은 코드를 쓰기 위해 더 노력하자!
   • How the Web Work
   • Halloween Event

2. Instagram 클론 프로젝트

   • 로그인 페이지 (CheckIdPw, activateBtn)

   

    
    // checkIdPw
   
    const loginBtn = document.querySelector("#loginButton");
    const idBox = document.querySelector("#idContainer");
    const pwBox = document.querySelector("#passwordContainer");
       
    loginBtn.addEventListener("click", function() {
      // const pwBox = document.getElementById("passwordContainer");
      if (idBox.value == "") {
        alert("Id를 입력해주세요!");
        idBox.focus();
      } else if (pwBox.value == "") {
        alert("비밀번호를 입력해주세요!");
        pwBox.focus();
        return;
      } else {
        alert("로그인 성공!");
      }
    });
       
    // changeBtnColor
       
    const inputForm = document.querySelector("#loginForm");
    // EventListner는 한 줄이라도 더 줄이면 좋다! 그래서 inputForm으로 묶어서 진행함
       
    function activateBtn() {
      if (idBox.value && pwBox.value) {
        loginBtn.style.backgroundColor = "#0095F6";
      } else if (idBox.value || pwBox.value) {
        loginBtn.style.backgroundColor = "#b2dffc";
      }
    }
       
    inputForm.addEventListener("keyup", activateBtn);
   

   • 메인페이지(activateCommentBtn, postComment, postCommentWithEnterKey)

    // activateCommentBtn
   
    const postCommentBtn = document.querySelector(".postCommentBtn");
    const commentContent = document.querySelector(".feedComment");
    const commentsListContainer = document.querySelectorAll(
      ".commentsListContainer"
    );
       
    function activateCommentBtn() {
      let comment = commentContent.value;
      if (comment) {
        postCommentBtn.style.color = "#1E90FF";
      } else if (!comment) {
        postCommentBtn.style.color = "skyblue";
        return;
      }
    }
    commentContent.addEventListener("keyup", activateCommentBtn);
       
    // add comment(postBtn)
       
    function postComment() {
      let comment = commentContent.value;
      if (commentContent.value == "") {
        alert("댓글을 입력해주세요");
      } else {
        let commentBox = document.querySelector(".commentBox");
        let asideProfileAccount = document.querySelector(".asideProfileAccount")
          .innerText;
        commentBox.innerHTML += `<div class="commentBox">
        <span class="commentAccount">${asideProfileAccount}</span>
        <span class="comment">${comment}</span>
        </div>
        `;
        commentContent.value = null;
        return;
      }
    }
    postCommentBtn.addEventListener("click", postComment);
       
    // add comment(enterKey)
       
    commentContent.addEventListener("keyup", function (e) {
      if (e.keyCode === 13) {
        return postComment();
      }
    });
   

3. 블로그 작성
   • TIL_2020년 10월 30일 (금)

2. 오늘의 생각

• 하루종일 기능 구현에만 집중했던 하루… 간단한 기능일 수 있지만 하루종일 이것만 했다. 완성시키긴 했는데 자꾸 줄이 밀리는 중ㅜㅜ height값을 어떻게 해야 이게 괜찮을지 고민중이다. 아주 조금씩 점진적으로 나아지고 있다. 더 나아질테니 너무 초조해하지말자. 매일 다짐하는 것이지만 마음속에는 하루에도 몇 번씩 마음이 왔다갔다한다.

• 할로윈데이라고 commitBox라고 해야하나? 이거 색깔을 이렇게 예쁘게 바꿔놨네 ㅎㅎㅎ 예전에는 “예쁘다” 였으면, 이제는 “어떻게 구현했을까?’를 먼저 생각하게 된다. 좋은거겠지…? ㅋㅋㅋㅋㅋㅋㅋㅋ