2021.12.22의 기록

초점 흐림이 포인트인 오늘 아침 학원 옆 건물에 비친 햇빛 ㅎㅎ.

- 오늘의 자체 평가 및 느낀점 - 

-> 새벽에는 JS 강의를 더 수강하려다 이론이 아직 미흡한 것 같아 블로그들의 친절한 개념 정리를 보면서 하루를 마쳤다. 진도 나가기에 급급하진 말자.

오늘은 CSS를 진짜 마치는 날. 어제도 2시에 취침을 해서 정말 피곤하지만 해보자 시도라도.

아침에 일어나는 순간 생각한다. (일어나기 싫다.) 해야지 초심 잡아야지. 

CSS의 속성은 생각보다 엄청 많다. 중요한(많이 쓰이는 것)것만 다시 보고 나중에 필요 시 검색 후 사용하자. 너무 많은 정보가 한꺼번에 밀려 들어오니 집중이 안 되었다..

스터디 때는 쇼핑몰 세미 프로젝트 코드를 분석했다. 대충 틀만 보았고, 각 페이지별 기능이 상당히 만만치 않다는 것을 느꼈다. 나중에 잘 만들어 수 있을지 확신이 서진 않았지만 답을 찾을 것이다. 

마지막 타임으로 스터디원 중 한명이 면접 질문을 올려서 질문에 문답하는 시간을 가졌다. 클래스와 인스턴스와 객체를 설명하시오. 인스턴스의 개념이 모호했지만 확실하게 설명할 수 있게 개념이 정리되어 좋았다. 다른 질문들도 확실히 설명할 수 있을 정도로 개념 정리해야겠다.

마지막으로 쓴 것은 몸에 좋다고 생각하고 화이팅 해보자~

 

 

---

- 오늘 공부 계획 -

• 자바스크립트 (뉴렉처) 강의 수강 및 실습 35~?
• 오늘 강의 내용 복습 (CSS) 중요 위주
• 시간 나면 백준 단계 별로 풀기?
• 쇼핑몰 기능 구상

---

- 공부 내용 -

• 박스모델 관련 스타일 속성
• 테이블 관련 스타일 속성
• 박스모델 변형 관련 스타일 속성
• 반응형 웹 디자인(Responsive Web Design)

위로 아래로 버튼을 누를 시 위치가 바뀜

체크박스 선택 후 일괄 삭제나 노드 바꾸기가 가능한 모습

제목 컬럼을 누를 시 정렬이 바뀜

//Ex10-클릭한 컬럼을 기준으로 레코드 정렬하기 #1
window.addEventListener("load", function () {

  var notices = [
    { "id": 1, "title": "유투브에 끌려다니지 않으려고 했는데....ㅜㅜ..", "regDate": "2019-02-05", "writerId": "newlec", "hit": 2 },
    { "id": 2, "title": "자바스크립트란..", "regDate": "2019-02-02", "writerId": "newlec", "hit": 0 },
    { "id": 3, "title": "기본기가 튼튼해야....", "regDate": "2019-02-01", "writerId": "newlec", "hit": 1 },
    { "id": 4, "title": "근데 조회수가 ㅜㅜ..", "regDate": "2019-01-25", "writerId": "newlec", "hit": 0 }
  ];

  var section = document.querySelector("#section10");

  var noticeList = section.querySelector(".notice-list");
  var titldTd = section.querySelector(".title");
  var tbodyNode = noticeList.querySelector("tbody");

  var bindData = function () {
    var template = section.querySelector("template");

    for (var i = 0; i < notices.length; i++) {
      var cloneNode = document.importNode(template.content, true);
      var tds = cloneNode.querySelectorAll("td");
      tds[0].textContent = notices[i].id;

      var aNode = tds[1].children[0];
      aNode.href = notices[i].id;
      aNode.textContent = notices[i].title;

      tds[2].textContent = notices[i].regDate;
      tds[3].textContent = notices[i].writerId;
      tds[4].textContent = notices[i].hit;

      tbodyNode.appendChild(cloneNode);
    }
  };

  bindData();

  var titleSorted = false;

  titldTd.onclick = function () {
    // 이 부분에 새로 배운 내용을 작성해 보세요.

    tbodyNode.innerHTML = "";

    if (!titleSorted)
    notices.sort(function (a, b) {
        titleSorted = true;

        if (a.title < b.title)
          return -1;
        else if (a.title > b.title)
          return 1;
        else
          return0;
      });
    else
      notices.reverse();

    bindData();

  };
});

//Ex9-다중 노드선택 방법과 일괄삭제, 노드의 자리바꾸기
window.addEventListener("load", function () {

  var section = document.querySelector("#section9");

  var noticeList = section.querySelector(".notice-list");
  var tbody = noticeList.querySelector("tbody");
  var allCheckbox = section.querySelector(".overall-checkbox");
  var delButton = section.querySelector(".del-button");
  var swapButton = section.querySelector(".swap-button");

  allCheckbox.onchange = function () {
    var inputs = tbody.querySelectorAll("input[type='checkbox']");

    for (var i = 0; i < inputs.length; i++)
      inputs[i].checked = allCheckbox.checked;
  };

  delButton.onclick = function () {
    var inputs = tbody.querySelectorAll("input[type='checkbox']:checked");

    for (var i = 0; i < inputs.length; i++)
      inputs[i].parentElement.parentElement.remove();
  };

  swapButton.onclick = function () {
    var inputs = tbody.querySelectorAll("input[type='checkbox']:checked");

    if (inputs.length != 2) {
      alert("엘리먼트는 2개를 선택해야만 합니다.");
      return;
    }
    var trs = [];
    for (var i = 0; i < inputs.length; i++) {
      trs.push(inputs[i].parentElement.parentElement);
    }

    var cloneNode = trs[0].cloneNode(true);
    trs[1].replaceWith(cloneNode);
    trs[0].replaceWith(trs[1]);

  };

});

//Ex8-노드 삽입과 바꾸기
window.addEventListener("load", function () {

  var section = document.querySelector("#section8");

  var noticeList = section.querySelector(".notice-list");
  var tbodyNode = noticeList.querySelector("tbody");
  var upButton = section.querySelector(".up-button");
  var downButton = section.querySelector(".down-button");

  var currentNode = tbodyNode.firstElementChild;//.children[0];

  downButton.onclick = function () {
    var nextNode = currentNode.nextElementSibling;

    if (nextNode == null) {
      alert("더 이상 이동할 수 없다.");
      return;
    }

    //tbodyNode.removeChild(nextNode);
    //tbodyNode.insertBefore(nextNode, currentNode);
    currentNode.insertAdjacentElement("beforebegin", nextNode);

  };

  upButton.onclick = function () {
    var prevNode = currentNode.previousElementSibling;

    if (prevNode == null) {
      alert("더 이상 이동할 수 없다.");
      return;
    }
    //tbodyNode.removeChild(currentNode);
    //tbodyNode.insertBefore(currentNode, prevNode);
    currentNode.insertAdjacentElement("afterend", prevNode);

  };

});

- 뉴렉처 강의 자바스크립트 예제 코드 어렵지만 다시 보니 이해가 된다. 노드간의 관계

---

- 스터디 계획 및 결과 - 

-> 전 기수 세미 프로젝트 쇼핑몰 코드 분석 및 페이지별 내부 기능 구상 및 추측

-> 면접 질문을 위한 자바 개념 질문 및 답

 ==> 질문 :

• 클래스와 객체와 인스턴스는 무엇인가? 
• Wrapper 클래스란 무엇인가?
• Iterator와 Iterable의 차이는 무엇인가?

=> 확실히 말로 설명하려니까 막힘. 충분히 간결하게 설명가능한 정리가 필요.