[React] Day_23 개인 프로젝트 중간점검

 

아니 형님들 그렇다고 다짜고짜 한꺼번에 오시면...🤦🏻‍♂️

 

 

개인 프로젝-또 제출까지 이틀...  ( 아 하기싫ㅇ )

오늘은 프로젝트 진행상황을 공유해보고자 합니당

근데.. 쓰려고 하니 냅다 오류! 오류! 때문에 디버깅 했더니... ㅎㅎ... TIL 쓸 시간 다 지나갔네요.. 🫠

오늘은 그래서 짧고 굵게 가시죠. (우다다ㅏ다다다ㅏ다)

 

 

개인 프로젝트 진행 상황 공유  및  ... 💧

 

이번 프로젝트는 영화 검색 사이트 만들기! (목요일까지 제...출이다 흑흑)

세계적인 영화 데이터베이스인 TMDB의 API를 사용해 영화 정보를 검색하고,

데이터를 기반으로 웹페이지를 제작해보는 것이 목표이다.

지금껏 배웠던 HTML, CSS, JavaScript만을 사용하여 뚱땅뚱땅 해볼 예정.. (아 JS 진짜 싫다.)

완성작 예시는 저렇던데... 이뿌다... (언제 다 만들지ㅜ)

 

날짜별로 퀘스트가 주어졌는데.. 일정은 아래와 같다.

• TMDB API 연동해서 데이터 가져오기
• 영화 카드 리스트 UI 구현하기 (영화 요약 정보 보여주기)
• 검색기능 구현하기
• 모달 창으로 상세 페이지 구현하기 (tmi 남발)
• 메인페이지 돌아오기 및 코드저엉리
• 모듈화 및 코드분리
• 디버깅 및 최종 제출 준비

 

하zㅣ만 우리의 금쪽이 림졍은... 어떻게 했냐면요?

• API 연동
• UI 구현 - 검색창 구현
• 모달 - 코오드 정리 - 코드 부운리

 

결론 : CSS만 남았다. ^-^b! (히히 나는 최고야) 어떻게 보면 좋은거 같죠?

오류! 오류! error! 404! 살려줘! 으아악!

 

네... 뭐... 검색구현까지 다 하고 신나게(?)모달을 ... 만지니

갑자기 검색이 작동을 안하고요?

어라라.. 그래서 순간 당황해서 뚱땅뚱땅 고쳤더니...

갑자기 모달이 작동을 안하는 이....이런 곤란한 상황 ^^;;;

그렇게 TIL 제출이 늦어지고.... 이것저것 찾아보며 검색하고... 눈물도 좀 흘림요.ㅜ

(왜 다들 그렇게 잘하는거임? 진촤 외 취업 않함..? ㅡㅡ)

 

 

그래서 뭘 했느냐... 깡통을 이용했습니다.

절대 깡통놈 안쓰겠다고 했던 림졍 나와.

차마 부끄러워서 자그맣게 올리는 깡통놈과의 대화(좌), 그리고 막상 해결하고 나서 싸우는 내 자아들(우).

 

지푸라기라도 잡는 심정으로 열심히 이것저것 세세하게 심문하니(?)

그래도 이것저것 다른 방안도 있고 여튼 그래요 주인님 ^0^! 해주는 우리 깡통..

여튼 뭐... 이것저것 적어줘야 하는데 말이죠...

뭐 적지 했는데 크게 변경된 사항들이 있어서 이거라도 적어보겠습니다.

엣헴.

 

 

변경사항 1 - 우리 fetch가 달라졌어요!

 

달리기반 트윽강 버프로 .then 대신 async / await 를 활용하여 

우리 금쪽이(?) fetch를 보다 읽기 쉽고 에러 처리가 간편하도록 만들어주었다! (장점 Day_18 참고)

('.then'은 체에에에에인이 기이이이일어질수록 가아아아아아독성이 떠어어어얼어지고 에러처리가 보오오오오옥잡함.)

 

- 변경 전

const apiUrl = '쉿!';

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: '여긴 비밀이야 >.ㅇ'
  }
};

fetch(apiUrl, options)
  .then(res => res.json())
  .then(json => movieCards(json.results))
// json = data, 그래서 결과값을 movieCards라는 카드 찍어내는 공장에
// json.results라는 설계도를 보내서 작업했다! 라고 생각하기.
  .catch(err => console.error("오류! 오류! :", error);

 

- 변경 후

const apiUrl = '쉿!';

async function fetchMovies() {
    try {
        const response = await fetch(apiUrl, {
            method: "GET",
            headers: {
                accept: "application/json",
                Authorization: '히히 여기도 비밀이지롱'
            },
        });
        const data = await response.json();
        movies = data.results;
        displayMovie(movies);
    } catch (error) {
        console.error("오류! 오류! :", error);
    }
}

 

 

변경사항 2 - export... import... 이것이 모듈이었군...

 

실은 분리할 때, 제일 애를 많이 먹었던 림졍...

그래서 세상 간단하게 만들려고 2개만 만들었는데..

이것마저 분리하니 뭐가 안되더라..! (아니 왜 안되냐고!)

변수가 겹쳐서 그런건 알겠는데요... 아....

이때 깨달았습니다... 모듈화가 이런 것이라는걸요.. (아니 나는 진짜 모달뭐시기 이런건줄 알았ㅈ)

여튼 변수가 똑같은데 잘라야 하잖아요? 아래처럼 쓰세요... 여러분... 

설명도 적어놨으니 편할겁니다.. (이해안가면 찾아오3.)

// [01.js]
let superstar = [];
export { superstar }; 
// [02.js]
import { superstar } from './01.js'; // 01.js에서 superstar를 import

 

 

마무리 - 야 이제 너의 즌믄분야(?)니까 금방 가능하지..?

 

아니. 그렇지만 제출해야하니까 노력해볼게..!

 

 

특강정리는 음... 실습이기도 했고 어제 열심히 해서(?) 오늘은 그래도 잘 따라갈 수 있었다

여튼 그래서 나름 행복했음... 나도 이렇게 할 수 있구나.

하지만 이놈의 개인프로젝트가 저를 괴롭히고... 괴롭히고... 괴롭히네요...

그래서 코드카타는 언제하고... 잠은 언제자고... 그러지..?

(요새 모닝루틴에 몬스터가 들어가기 시작했습니다.. 거기에 커피 한잔도 필수구요.)

자 내일 CSS만 마무리 잘하자꾸나... (토닥토닥)

 

 

오늘의 KPT 회고

• Keep :  키보드 안뿌시고 꿋꿋하게 오류 해결하고 자는 림졍 칭차내 ^-^b
• Problem : 근데 깡통 도움은 좀 받고 살아... 너무 이것저것 찾아보면서 똥고집 피우지 말고.
• Try : GPT도 은근 쓸때가 있다. (이거 맞나..?)

끝.