[Momentum_problemShooting] iframe, checkbox...

https://nomadcoders.co/javascript-for-beginners

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

를 끝내고 모멘툼을 만든지, 벌써 2주 전인데도 지금도 수정 중이다. 

 

대학원생 친구에게도 배포해서 

의견 들으면서 계속 기능을 추가하고 수정하다보니깐... 정말 끝이 없다.

그래도 나와 친구가 쓰려고 좋아하는 글귀들도 넣고, 하다보니 점점 발전되서 기분 좋기는 함. 

 

 

아직도,

해결되지 않은 문제들이 여러 개인데 

문제 해결 과정에 대해서 써보려고 한다. 

 

성공,

실패 /작업 중

---

우선, 

1. 친구가 화면 분할해서 쓴다고 해서 --> @media로 반분할 쯤? 약 740px에서 css 다 줄어들게 변경

// 폰으로 링크 줄 때가 많아서 400px보다 작을 때 경우도 만듦.

--> 이거 반응형으로 %로 많이 하는 것 같은데 우선 나는 익숙한 방식으로 해보면서 조정했음.

 

---

2. 유투브 영상이랑 반반 켜 놓는다고 해서 그럴 바엔 넣자 --> iframe API 로 영상은 넣었음. 

- api 사이트 코드를 그대로 붙여놔서, 처음에는 비디오 목록을 만들었음. 

- 플레이리스트를 넣고 싶어서, 이리저리 해보다가... 따로 함수나 변수 만들 필요 없이 매개변수 list에 유튜브에서 만든 재생목록 ID 넣기

--> 재생목록 ID는 앞에 PL붙어 있고, 공개로 전환한 재생목록 페이지에서, 고개를 들어...url 입력창을 보면 'list=PL####' 확인 됨.  

// 3. API 코드를 다운로드 받은 다음에 <iframe>을 생성하는 기능 (youtube player도 더불어)
let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    videoId: "gWfFWVQW13E", //변경-영상ID //리스본 카페.
    playerVars: {
      rel: 1, //연관동영상 표시여부(0:표시안함)
      controls: 1, //플레이어 컨트롤러 표시여부(0:표시안함)
      autoplay: 1, //자동재생 여부(1:자동재생 함, mute와 함께 설정)
      mute: 1, //음소거여부(1:음소거 함)
      loop: 1, //반복재생여부(1:반복재생 함)
      playsinline: 1, //iOS환경에서 전체화면으로 재생하지 않게
      // playlist:
      //  "AKWlyl8_sdM,4Hm56tqcOc,s56deFmiIh0,PfqRyzUuHnM,gOjkGLBZhZo,4YUuA-hPDZA,FDI8d7jm4zU,BJ2U4t1jruA,wkFL8Oa0p30,o3ORqZYUccE,POsucxJPxqM,VFosjkiy7bw",
      //이러다 공허하게 //내가 죽으려고 //산나비 //말포이 공부중 //내 비평가들 //바닷가 카페 //나비 보베따
      //바람이 물었다 //벅찬 날//쇼팽 왈츠//웬즈데이 //포기할 이유가 없다 //시절인연
      list: [
        "PLRubaLN0jh9IH9EAxbE1ijc12Ilg-QB-Q",
        //"PLRubaLN0jh9JCZcTIRRNBvUq3Srx9o9SN",//리스트 여러개 안 되나..?
      ],
      shuffle: 1,
      //재생할 영상 리스트 //
      color: "white",
      enablejsapi: 1,
      disablekb: 0,

      events: {
        onReady: onPlayerReady, //onReady 상태일 때 작동하는 function이름
        onStateChange: onPlayerStateChange, //onStateChange 상태일 때 작동하는 function이름
      },
    },
  });
}

 

2.1 아직 고민 중인 게.. 재생목록을 여러 개 넣을 수는 없는 지.. 꼭 영상 분할로만 해야 하는지..

--> 일단 []로 만드려는 시도는 처참하게 실패, --> 확인은 안 했는데 영상이 재생되는 것으로 보아, 한 목록이 끝나면 넘어갈 수도. 

--> 난 목록 2개 중 고르게 할 수 있는 지가 궁금함.. 

 

2.2 그리고 희한하게 재생목록 shuffle적용이 안되네??? 1인데....???

---

3. 난수 할당해서 배경화면 이미지를 시간에 따라 변경 시, 두 이미지가 겹치는 현상 --> 배경 이미지 리스트가 HTML에 계속 생성되기 때문이라서 삭제 함수 추가  function bgImageChange()

const images = [
  "0.jpg",
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
  "5.jpg",
  "6.jpg",
  "7.jpg",
  "8.jpg",
  "9.jpg",
  "10.jpg",
];

function bgImageChange() {
  // 이전 이미지 요소를 찾아 제거
  const previousImage = document.querySelector(".background-image");
  if (previousImage) {
    previousImage.remove();
  }

  const chosenImage = images[Math.floor(Math.random() * images.length)];
  const bgImage = document.createElement("img"); //js에서 html로 만들어 넣을때 사용

  bgImage.src = `img/${chosenImage}`;
  bgImage.loading = "lazy";
  bgImage.classList.add("background-image");

  // 새 이미지를 body에 추가
  document.body.appendChild(bgImage);
  //appendChild html에 추가
  //append는 가장 뒤에, prepend를 쓰면 가장 위에 오게 할 수 있음.
}

bgImageChange();

// 15분마다 배경 이미지 변경
setInterval(bgImageChange, 15 * 60 * 1000);

 

3.1. 이미지 로딩에 시간이 걸리는 문제 해결 x --> "lazy" class넣어서 어떻게 해보려고 시도 했는데 실패 했음.

--> 검색을 해도 잘 모르겠달까.. gpt는 산으로만 가서 일단 보류 중

 

3.2. 이미지 배열 length 써서 추가하는 거로 바꿀 예정. 일일히 숫자 넣기가 .. 굉장히 귀찮음. 

 

---

4. 투두를 바로 삭제하면 아쉬워서(?) 체크박스를 누르면 가운데 줄 긋기를 넣었는데, 새고 시 날아간다고 함. --> LS에 넣는 방법이나 class= checked를 넣으면 될 거 같은데. 

- LS에 넣으려면, 코드가 많이 들어가야 해서 class넣는 것으로 틀었음. 

- but, 해결이 안되서.. 우선 보류 중. 

- 체크박스 클릭 시 id넣는 것까지는 됐는데.. 왜 add가 안될까? 고유의 checkbox.checked 어떻게 해보려고 했는데 실패 중.. 

- 몇 번 더 해보고 안 되면,, SOF에 물을 예정..

 

 

---

5. 친구가 다른 기기에서 키면 다시 입력해야 한다고, 이름 입력하면 유지되게 요청 --> LS 수준이 아니라 아예 로그인 기능인데.. 아직 몰라서

- 다음 코코아톡 클론 강의 들으면 가능하지 않을까 생각중. 

 

 

이외에도 짜잘짜잘하게 많은데

이미 지나가서 ..

일단 계속 디벨롭 중!