📝 오늘 한 것

1. window.onload() / closure

2. carousel 구현 중

📖 학습 자료

1. 사전 학습 가이드 STEP 4 (carousel)

📚 배운 것

DOM

---

1. carousel(캐러셀)

어제 풀이에서 이어서

1) javascript

HTML에 z-index를 추가하고 CSS도 반응형이 계속 유지되도록 수정한 후 z-index를 활용할 수 있게 자바스크립트 코드를 전면 뜯어 고쳤다

const rightArrow = document.querySelector('.right');

rightArrow.addEventListener('click', function goBack () {
  var presentImage = document.querySelector('.carousel-image');

  if (presentImage === presentImage.parentElement.lastElementChild) {
   
    /*
    // image-1 요소를 새로 생성함
    var firstImage = document.createElement('img');
    firstImage.src = "/images/image-1.png";
    firstImage.style.zIndex = '4';
    firstImage.style.position = 'absolute';
    firstImage.style.width = '100%';
    firstImage.style.top = '50%';
    firstImage.style.left = '50%';
    firstImage.style.transform = 'translate(-50%, -50%)';

    // 특정 위치에 image-1 요소 삽입 (insertBefore 이용)
    var parentImage = presentImage.parentElement;
    parentImage.insertBefore(firstImage, parentImage.childNodes[1]);
    presentImage.remove();
    */

    console.log(firstImage);
    console.log(presentImage);

  } else {
    presentImage.remove();

    console.log(presentImage);
  }
});

• else 이후의 부분이 우측 버튼을 눌러 현재 화면에 보이는 이미지를 제거해주면 그 밑의 이미지가 나타날 수 있도록 z-index를 활용해서 작성해본 것 (1~4번째 이미지까지 담당)
• / if 부분 /은 그냥 눈 가리고 아웅 급의 코드. 저렇게 하면 될 리가 없다는 걸 몸소 익혔다.

• 위와 비슷한 오류가 났지만, 이렇게도 해봤음

// 우측 버튼
const rightArrow = document.querySelector('.right');

rightArrow.addEventListener('click', function goNext () {
  // [순서 1] 항상 box의 마지막 요소를 선택하도록
  var presentImage = document.querySelector('.carousel-image-box').lastElementChild;
  // → [순서 3] 그러나 여기서 presentImage에는 항상 그 부모의 마지막 요소이자 '첫 번째 요소'가 할당됨
  // 즉, 두 번째 이미지로 화면이 바뀌고 나서 우측 버튼을 다시 누르면 if 구문이 또 실행됨
  // → [순서 4] 그 말인 즉슨, [순서 2]처럼 실행할 수 없다는 것

  // [순서 2] 선택된 요소가 그 부모의 몇 번째 자식 요소인지에 따라(if 조건문) 그 부모의 마지막 요소 다음에 새로운 요소(image-2, image-3 등)를 추가...하려고 했음
  if (presentImage === presentImage.parentElement.firstElementChild) {

    var secondImage = document.createElement('img');
    secondImage.src = "/images/image-2.png";
    secondImage.style.width = '100%';
   presentImage.parentElement.appendChild(secondImage);
    presentImage.remove();

  }
});

이 사이에 또 뭐가 많았다. 근데 역시 정리는 못했음. 실은 md 파일에 그때그때 뭘 많이 적어놓긴 했는데 정리하기가 어렵다. 뒤늦게 다는 아니더라도 기억나는 대로 적어 보았다. 나중에 이 과제를 해결했을 때 다시 돌아와서 이 목록을 본다면 과연 웃길까, 어떨까.

💡 carousel을 만들기 위해 지금까지 사용해봤던 것들

display: none

element.style()

element.remove()

nextElementSibling

previousElementSibling

children[0]

z-index

parentChild

lastElementChild

firstElementChild

createElement

src

insertBefore

appendChild()

if, else if, else 구문

for 반복문

window.onload()

closure

💭 오늘은 다른 일정이 있어서 다른 날에 비해서 공부를 많이 하지 못했다. 지금은 뜬금없이 closure를 공부 중이다. 그런데 이것보단 아무래도 기존 계획을 수정해야 할 듯하다. 원래도 STEP 6까지 다 본 후 자바스크립트 추가 강의를 들으려고 했지만, 아무리 생각해도 지금 시점에서 강의를 들어야 할 거 같다. 강의만 주야장천 듣다가 실습을 하니까 너무 재밌었는데 하다가 오래 막히니까 다시 강의가 보고 싶어진 이 아이러니. 일단은 내일을 위해서 취침하고, 내일 아침에 다시 시도해보자.

오늘은 TIL 올리기 좀 민망한 듯하다. 구현에는 실패했더라도 찾아본 내용을 안 잊으려면 그때그때 코드를 블로그에 옮겨온 후 코멘트도 달아놔야 하는데 그렇게 하니까 자꾸 문제 상황을 해결하기 위해 내가 검색해야 할 것들만이 아니라 새로운 쪽으로 가지를 뻗게 된다. 그렇게 생각은 더욱 더 카오스가 되어버림. 아무튼 아직까진 총체적 난국인 상황이다.

✨ 내일 할 것

1. 찜해둔 강의들 커리큘럼 조사

2. carousel