드디어 첫 프로젝트!!인스타그램 클론코딩하기. (일명 위스타그램 프로젝트)

1st Project : Westagram

클론 코딩?

clone+coding의 합성어라고 생각하는데, 말 그대로
실제로 운영되고 있는 웹사이트를 따라 코딩하며 학습하는 방식을 의미한다.

결과물부터 보여줘

html

피드를 세 개를 만들었더니 너무 길어져서 이하 생략..
가능하면 최대한 자세한 class를 붙이고, 각 특징? 역할? 별로 묶어주려고 노력했다.
div-section을 구분지어 사용해주는 편이 더 좋았을지도 모른다는 생각이 들었었다.
따로 페이지가 이동하지 않는 특징을 가지는 피드 밑 이미지들은 a 태그 대신 button 태그를 달아주었고, ul - li 구조를 이용해 비슷한 요소가 나열되는 틀을 잡아 마크업을 진행했다.

생각보다 잡아줘야 할 구조가 많아서 조금 당황했었다.
막연히 금방 후딱후딱 하겠지! 라고 생각했는데, nav 영역도 세 부분으로 나눠 마크업을 해야했고, 피드 부분도 어떻게 구조를 짜고 클래스를 줘야 딱 보일까 하는 고민을 정말 많이 했다.
결론은.. 정말 귀찮았었다..(죄송합니다 죄솧ㅇ합니다)

근데 자바스크립트 하면서 피드를 하나로 만들었다. 음. 핳ㅎ하. (머쓱)

css

이번에 css 작업을 하면서 가장 크게 생각하려 한 부분이 "가능하면 비슷한 요소를 클래스로 스타일링을 다 줄 수 있게 해보자!!" 였다.
그 전에 국비학원을 다니면서 html 마크업과 css 스타일링을 자주 해줬었는데, 그 때에는 비슷한 요소라고 해도 서로 묶인 틀이 다를 경우 각각 스타일링을 해줬었다.
이번에는 선택자의 장점을 이용해! 가능하면 비슷한 마크업들은 같은 클래스를 주고 스타일링을 진행해봤다.

common.css와 reset.css이다.
common에는 두 파일 모두에 공통적으로 들어갈 항목들 (예를 들어 button 초기화 속성이라거나 a 태그 초기화 속성이라거나...)을 넣어주었고, reset에는 크롬에서 주는 기본 속성을 모두 리셋해주는 스타일 마크업을 인터넷에서 받아 적용시켰다.

nav, main-right 부분은 position fixed로 상단에 고정시켰고,
main의 feeds는 float: left로 왼쪽으로 치워(?)주었다.

비슷한 속성이 있던 main-right의 컨텐츠들 중 스토리, 친구 추천 부분을 하나의 클래스를 이용, 같은 스타일링을 해줬었다.
login 부분의 경우 input태그는 모두 같은 속성을 가지고 있었기 때문에 정말!! 너무 쉽고 간단하고 좋았다. 사랑스럽다..

가능하면 float, absolute보다 flex를 먼저 쓰려고 노력했다.
justify-content, align-content도 많이 써볼 수 있어서 좋았다 :)
grid도 사용해보고싶은데, 언제쯤 써볼 수 있을까..

클래스로 css를 주는 이유를 조금조금 깨닳아가는 중이다.
확실히 효율적인 면에서 차이가 날 것 같다. 같은 코드를 여러번 작성하는 것과 클래스 하나로 일괄적으로 속성을 부여하는 것..
물론 그것에 완전히 익숙해지기 전 까진.. 더 많은 시간이 필요하겠지만ㅠㅠㅠ

javascript

main.js

제일 먼저 구현해본건 댓글달기!!
local Storage를 사용하지 않았고, appendChild와 createElement를 사용해 작성했다.
아주 약간의 재미를 더해주기 위해서 닉네임부분 뒤에 Math.random과 floor를 사용해 숫자를 붙여주었다.
재미없나..? 나는 나름 재미있었으니 재미있던걸로!!!!

세션 후 main.js 수정

그 전 코드에서는 createElement와 appendChild, createTextNode를 썼었다. 세션에서 innerHTML을 사용하면 조금 더 간단하게 수정이 가능하니 그렇게 작성해보라 하셔서 innerHTML으로 작성해보았다.
이전에 존재하던 html은 그대로 유지시키고, 이후에 작성하는 댓글들만 새로 추가시키고싶었기 때문에 createElement("li")와 .commentList에 appendChild를 사용하는 것은 그대로 유지시켜보았다.

 const commentList = document.querySelector(
    "#main article .comments .commentList"
  );

  const li = commentList.appendChild(document.createElement("li"));
  li.className = "comment";

  li.appendChild(document.createElement("a")).appendChild(
    document.createTextNode('nick')
  );
  li.appendChild(document.createElement("p")).appendChild(
   document.createTextNode(comment)
  );

이랬던 코드가

 const commentList = document.querySelector(
    "#main article .comments .commentList"
  );

  const li = commentList.appendChild(document.createElement("li"));
  li.className = "comment";
  li.innerHTML = '<a href="#">nick</a><p>${comment}</p>';

으로 아주 간략해져버렸다!!!!!!!
호메메메 호메메메 innerHTML도 잘 쓸 줄 아는 개발자가 되어야지 하고 다짐하게 된 순간이었다.

login.js

아이디, 패스워드 각 input에 한 글자 이상씩 입력되어있을 경우 버튼이 활성화되도록 코드를 작성하였다.
버튼의 활성화, 비활성화 같은 경우에는 button.disabled = true/false; 를 이용했다.
input의 value length를 이용했는데, 처음에 이벤트리스너를 keypress? keydown? 으로 줬더니만.. 키가 눌리기 이전 값의 길이를 가지고 오는 바람에 아주 조금 멘붕이 와버렸다.
다행히 keyup 이벤트가 생각이 나서 keyup으로 변경해주자 길이를 아주 잘 들고 왔다는 후문!!!!!!

login.js 수정

은선님과 함께 저녁을 먹다가 알게된 오류.
loginBtn을 활성화 시킨 뒤 아이디나 비밀번호를 지우면.. 비활성화가 되지 않는다는 아주아주 슬픈 사실.
아주아주 간단히 고쳤다.

if (inputIdValueLength && inputPwValueLength) {
   button.disabled = false;
   button.style.cursor = "pointer";
   button.style.opacity = "100%";
   button.addEventListener("click", () => {
     document.location.href = "../html/main.html";
   });
}

이렇게만 있던 코드에

if (!inputIdValueLength || !inputPwValueLength) {
  button.disabled = true;
  button.style.cursor = "initial";
  button.style.opacity = "40%";
}

이 코드를 덧붙였다!!! 해결 완.료.☆

frontend 첫 세션이 끝나고

css 예쁘게 순서대로 정리하기

이미 다 썼는데 예쁘게 정리하라 하셨다. 음.
꼼수를 써봤다. 분명 국비학원에서 쌤이 알려주신 프로그램중에 css를 sorting해주는 확장기능이 있었다. 찾았다.
postCSS sorting 이라는 확장 프로그램인데, setting.json에 내가 순서를 입력해두면 그 순서대로 정리가 되는 매우 친절하고 좋은 프로그램이다 :)
역시 세상은 넓고 귀찮아하는 사람들은 매우 많은가보다. 필요에 의한 공급.

DOM에 대해 명확히 알고 기억하기

이건 오늘 배운 HTTP와 함께 포스트로 작성하기로 마음먹었다.
이거 다 쓰고 위스타그램에 추가 기능을 구현하기로 했다.
배운것은 까먹기 전에 정리하기.

querySelector와 getElementsByClassName

이전에는 거의 querySelector로 작없을 진행했었어서 아직 getElementsByClassName 혹은 getElementById 처럼 직접 클래스, 아이디명으로 html에 접근하는 건 어색하다..
갑자기 궁금증이 생겨 두 개의 차이가 있느냐 여쭤봤다.
결론은 없다! 였었다.
그럼 대체 왜 분리가 되고 왜 다른 메소드가 생겨나게 된거지..
jsx로 리액트를 작성할 때와 js로 리액트를 작성할 때와 그 차이와 비슷한걸까..

=> className으로 가져오는 것은 HTMLCollection으로 돌아오고, querySelectorAll로 가져오는 것은 NodeList로 돌아온다.
HTMLCollection은 Array method를 사용할 수 없기 때문에 forEach 등을 사용할 수 없지만 for문은 사용이 가능하다.
NodeList도 정확히 말하면 type이 Array는 아닌데.. Array method를 사용할 수 있다. 근데.. 왜 사용가능한지는 더 찾아봐야 할 것 같다. 쥬륵

=> 방금 또 찾아봤는데 NodeList는 push, sort 등을 쓸 수 없단다. 약간.. 알면 알 수록 어려운 자바스크립트의 세계를 보는 기분이다.

=> NodeList 는 array-like object라서 arrayMethod를 쓸 수 있는거였다.

=> 근데 HTMLCollection도 array-like object 같은데.. 왜 얘는 또 안 된대...?

콘솔의 순서?

위 사진에도 나와있지만, console을 찍은 뒤에 class를 변경시켰다.
하지만 변경시키기 전의 console에서 class가 전부 hi로 나와버렸다.
제로초 블로그 에서 답을 찾았다..!!!!!

객체를 로깅할 때는 객체의 내용 변경사항이 실시간으로 업데이트 된다는 것을요.

이런 이유로 console에서 class들이 전부 hi로 찍혔던 것이었다.
실제로 setTimeout으로 className을 뒤늦게 바꾸게 한 뒤 콘솔을 찍으면 class가 list로 나왔다. 알면 알수록 신기하고 어려운 자바스크립트의 세계.

=> 동기적이지만 비동기적으로 실행되는 자바스크립트의 특성에 따라 아마도 console보다 object변화가 먼저 일어났을 것이라고 추정. 따라서 console.log로 리스트를 찍어도 클래스가 hi로 나오는 것 같다 라는 결론!!!
이런 비동기적 처리를 다루기 위해 async, await, promise등이 존재.