2024 . 01 . 09 TIL

사실 어제가 첫 개인과제 제출 날이었는데 깜빡하고 TIL에 작성하지않았다 ㅋㅋㅋㅋㅋ......
근데 사실 정말 쓸 이야기가 없다. 전 TIL들에도 징징거렸듯이 방황만 하다가 시간을 보내는 경우가 많았고 어찌저찌하다가 동기분들이 도와주시고 끌어올려주셔서 겨우 기본적인 부분만 채웠을뿐...

뭐.... 대충 이런 느낌인데 사실 개인적으로 생각할 때는 API를 연동시켜서 페이지에 띄운 것 자체가 나에게는 정말 큰일이었다고 할 수 있다. 정말 진심으로 뭔말인지 이해가 안가서 너무 힘들었다.

* 이것저것 열심히 참고해서 꾸역꾸역 짜본 코드 *

const callApi = fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)

    .then(res => res.json())

    .then(data => {

        let datas = data['results']; 

        datas.forEach(a => {

            let title = a['original_title'];

            let overview = a['overview'];

            // Math.trunc() 함수로 소수점 자를 수 있음.

            let rating = a['vote_average'];

            let img = a['poster_path'];

            // 이미지 클릭시 아이디 출력 함수

            let alertId = function (event) {

                event.target.getAttribute(a['id']);

            }

            // https://image.tmdb.org/t/p/w500를 변수에 할당을 한 후 img태그에 넣어줬는데 안댐... 해결: 변수를 없애고 그냥 url자체를 넣어버림

            let temp_html = `<div class="col">

            <div class="myCards">

                ${img}'

                    class="movieCard" alt="..." onclick="alertId(id)">

                    <div class="card-body">

                        <h5 class="card-title">제목<br>${title}</h5>

                        <p class="card-overview">줄거리<br> ${overview}</p>

                        <p class="card-vote_average">평점<br>${rating}</p>

                    </div>

                </div>

            </div>`

            // document.querySelcetor로 바디태그를 선택한 뒤

            document.querySelector('body').innerHTML += temp_html;

        });

        console.log(data);

    });

다시 봐도 솔직히 잘 모르겠다 ㅋㅋㅋ.... 어떤 것을 배웠는 지 써야하는데 기억이 안난다...

튜터님의 피드백과 과제 해설 영상으로 과제를 좀 더 보충하는 시간이 있었지만 영상을 봐도 나는 이해를 할 수가 없어서 튜터님이 공부를 해봤으면 한다고 말씀하신 부분을 공부해봤다.
(타자 치기 힘드니까 VS로 직접 공부하고 써내려간 텍스트 파일로 대체한다)

* 피드백에 대한 공부 내용 및 etc *

1. const는 재선언, 재할당이 불가능하다고 공부했기 때문에 혹시 모를 상황에 대비해서 let으로 변수를 선언했습니다.
 - 추가적인 개념 복습이 필요할 것 같습니다.

2. <script>태그 안의 type = "module" 와 defer
 - defer를 사용하여 외부에서 불러온 js파일이 실행되는 것을 지연시켜 html의 파스가 모두 진행이 된 후 js파일에게 제어권을 넘겨줄 수 있게 합니다.
    모던 자바스크립트에서는 type = "module"을 많이 사용하는데, 여러 파일을 외부에서 불러왔을 때 사용을 하지 않는다면,
    독립적인 스코프를 보장 받지 못해 같은 스코프에 위치하게 되어 충돌이 일어납니다.
    module을 사용함으로 각 js 파일은 독립적인 스코프를 보장 받을 수 있습니다.
 
2-1. 다른 파일에 있는 데이터를 사용하는 방법
    내보낼 파일에서 ex) export const addFunc = (a, b) => a + b; (addFunc 함수를 수출하겠다.)
    사용할 파일에서 ex) import {const addFunc} from "./ 가져올 파일명";(어딘가에서(from) {const addFunc}를 가져와서 쓰겠다.(import))

3. 영화 포스터 이미지를 눌렀을 때 alert창이 안뜨는 이유
 - 'Uncaught ReferenceError: alertId is not defined' 
    원인 -> onclick 이벤트 핸들러에서 alertId라는 변수가 정의되지 않았을 때 발생.
    해결 -> ....??? 해결 영상을 봐도 잘 모르겠고, 어디서 부터 어떻게 해야할 지 모르겠습니다..

뭐 대충 이렇다... 솔직히 너무 힘들게 끝낸 과제라서 다시 돌아보기도 싫었다 ㅋㅋㅋㅋ.....

이런 건 못해도 공부는 열심히 하려고 노력하고 있다.
블로그에 새로운 카테고리도 추가하고 드디어 다시 자바스크립트 문법 복습에 들어간다.
그럼 뭐해... 내일 또 팀과제인데... 에효.... 그래도 이번엔 조원들과 함께 하니까
조금 더 나아지지 않을까 하는 작은 바램을 가져본다...

다 던지고 도망가고 싶은 마음이 없지는 않지만, 한 줄기 빛을 보았기 때문에 오늘도 어찌저찌 나아간다...