UMC: 마켓컬리 클론코딩, JS 기능 추가하기

2주차의 워크북 내용은 1주차에 제작했었던 html, css에 기능을 추가하는 것이었다.
나는 배너 화면이 자동으로 넘어가도록 하는 swiper 기능을 직접 js로 구현하기로 했다. 사실 Swiper를 사용하면 되지만… 그러면 딱히 하는 것이 없으므로 직접 구현을 도전했다.

하지만.. 이건 잘못된 선택이었을지도…?

JS 코드

트러블 슈팅

• for문 내부에서 bannerList[i] 출력시 모든 리스트 내용 한번에 출력

  해결? -> 알고보니 그냥 빠르게 로직이 돌아가서 한번에 출력한 것 처럼 보인 거였음…ㅎ

• view로 변경했던 것을 다시 non-view로 변경하기

  해결 -> bannerList를 i -1로 출력하여 replace를 view를 non-view로 변경하게 했다.

• 무한루프 만들기

  이미지 변경을 무한루프로 만들려고 했다.

  j 변수를 새로 생성했다. j는 i를 5로 나눈 나머지 값이다.
  bannerList를 i가 아닌 j로 하여, 나머지가 0,1,2,3,4 다시 0,1,2,3,4 …로 돌아가기 때문에 인덱싱할 변수를 j로 한다.
  하지만 그럼에도 무한루프로는 만들지 못했다… → 완벽하게 문제 해결 못함 ㅜ

• 첫번째 루프가 돌고 난 후, 마지막 이미지 non-view 안됨

  i의 값이 0이 아니고 j의 값이 0일때, bnnerList[4] 값을 replace하여 view를 non-view로 변경하였다!
  j의 값이 0이라는 것은 i의 값이 0,5,10 … 이라는 것이다. 이때, i는 0일때는 첫 시작이므로 non-view의 값이 view로 잘 변경되고 다시 non-view로 잘 변경된다.

  하지만 i가 5,10…의 값들은 j의 값이 0인데, bannerList[0-1]이 되므로 -1을 인덱싱하면 에러가 발생하게 된다.(-1을 인덱싱할 수 없어서!)
  따라서 i의 값이 0이 아니면서 j의 값이 0일때, bannerList[4]를 view를 non-view로 변경시켜준다!

• setTimeout 시간을 2000이상으로 변경시 루프 오류

  이미지가 변경되는 시간을 조금 더 길게 주기 위해서 7000으로 변경했더니 갑자기 빠르게 루프가 돌면서 이상해졌다…
  정확한 에러 원인을 잘 모르겠어서 해결하지 못했다…ㅜ

  Failed to load resource: the server responded with a status of 400 ()
  

종합소감

---

이번에 기능을 구현하려고 하면서 느낀 점은… 자바스크립트 공부를 더 열심히 해야 겠다는 것이었다.
현재의 나는 이론은 아는데 활용을 전혀 못하고 있는 상태라고 느꼈다. 이게.. 개발을 하면서 확 느껴지니까 굉장히 내 자신이 답답하더라..
강의로 공부하면 해당 강의를 보고 코드를 따라서 작성하니까, 이론은 이해를 하지만 실제로 혼자서 적용하려니까 엄청 애를 먹었다..
그래서 내린 결론은, 중간고사 끝나면 자바스크립트 코테 문제들을 풀어볼까 생각중이다. 일단 문제를 풀면 어떻게 사용할 지 혼자서 생각하게 되니까 도움이 되지 않을까 싶다…!

그리고 또 느낀 점은.. 자바스크립트 공부 괜히 미뤄뒀다가 막판에 고생하는구나..를 느꼈다.. 약간 무서운..? 느낌이 들어서 미룬 경향이 없지않아 매우 많은데..^^… 괜히 미뤘다. 진작할 걸.. 엄청 후회된다악!
그러니 지금 부터라도 열심히 달린다. 이번 2023년 갈려보즈아!