본문 바로가기
React TIL

[React] Day_24 개인 프로젝트 후기

by 림졍 2024. 10. 23.

 

오늘 요약 정리.gif (직접 만듬)

 

 

드디어 대망의 CSS 만지는날...!

그래도 JS 했을때보다 익숙하고... 재밌고..(?) 나름 볼만 하지만...

??? : 응 부술게 ^-^! (와르르..)

... 아오 🤦🏻‍♂️

그래도 결과물은 나왔잖아. 한진해.

 

하지만 그래도 완성은 시켰죠?

북마크 안해도 되지만 달리기반이라고 기능을 넣으라고 하셨지만?

안했습니다. 힘들어요. (절대 코드가 꼬여서인건 안비..밀)

여튼 한거를 보여줄..수는 있는데... 코드가 쪼개진 것도 있고~

GitHub에 조각조각나있어서 귀찮기도 해서...

그냥 크게 깨달은 부분 위주로 적어보도록 하겠습니다. 라쯔고.

 

 

개인 프로젝트 변경사항 정리  -  이봐  f12, 늘 먹던거로.  s(^-^_)

 

변경사항 in HTML - autocomplete 활용 및 <body> 정렬

 

매번 과제를 만들때마다 입력창에 무언가를 뚱땅뚱땅치면

어디선가 적었던 캐시들이 나와서... 오잉 이건 뭐지했던 순간이 많았는데

그걸 아예 없애주는 기능을 배웠다. 바로 autocomplete 라는 친구.

// 나오지 않게 하려면 off로, <input> 에 심어주면 끝!
<input placeholder= "영화를 입력해 주세요." class="search" id="query" autocomplete="off" />

 

그리고 CSS를 적용하기가 까다롭게 자꾸 조각조각난 애들을 붙여주기위해... <body> 를 조금 붙이고 고쳐봤다.

 

- header

<!-- header는 div class 안줘도 됨 ^-^! -->
<header>
	<div class = "title">
		<h1>영화 검색</h1>
	</div>
	<div class="search">
	  <!-- autocomplete ="off" 는 캐시를 지우는 아아주 고오오급진 기능 -->
	  <input placeholder= "영화를 입력해 주세요." class="search" id="query" autocomplete="off" />
	  <button type="button" class="search_btn"> 검색하기 </button>
	  <!-- 왠지 돌아가기도 넣어주고 싶어서 넣어줌 ㅇㅇ -->
	  <button type="button" class="reset_btn"> 돌아가기 </button>
	</div>
</header>

 

- 모달

    <div class="modal">
        <div class="popup">
        	<!-- 이미지 및 정보, modal_img_box로 통합 (CSS 편의성 증대를 위해) -->
        	<div class="modal_img_box">
            <img class="modal_img_item" src="" alt="" />
            	<div class="modal_info">
                	<p class="modal_title"></p>
                	<p class="modal_comment"></p>
                	<p class="modal_p"> <span class="modal_date"></span>
                	</p>
                	<p class="modal_p"> <span class="modal_rating"></span>
                	</p>
            	</div>
        	</div>
    	</div>
        <!-- 모달 닫기 버튼, 괜히 아래로 내려보고 싶어서 내려버림. 히히 -->
    	<div class="modal_close_btn">
        	<button type="button" class="close_btn"> 닫기 </button>
    	</div>
    </div>

 

 

 

변경사항 in JS - 더 많은 데이터는 다른 API를 가져오고... 그리고 q....query?

 

CSS까지 완료를 하였건만... 다들 다른 영화가 뜬다는데 나는 뜨지 않았다..!

이유를 찾아보니 (찌리릿!) 다른 api를 가져오지 않아서라고...🥲

그래서 냅다 똑같이 가져와서, 검색하기로 가져오기를 눌렀건만...

계에에에에속 나오지 않고 콘솔도 텅텅 비고.. 않이 이게뭐람 하던 시간만 벌써 3시간째...

그렇게 계속 헤딩하던 림졍은.. 결국 원인을 찾게 되는데...💁🏻‍♂️ (더 이상의 말은 생략한다.)

// 입력창에 값 입력 시, 나오게 하기 위해서는 말이죠..
// 입력된 값을 API 링크 ?query= 뒤에 ${}를 활용하여 넣어주면 된다..
// 단, 절대 백틱 써야 하고, searchUrl은 무조건 searchMovie 내부에 있어야함!

const searchInput = document.querySelector("#query"); // 참고
const authorCode = '이거슨 비밀의 시크리또';
...
async function searchMovie () {
  const searchUrl=`https://api.themoviedb.org/3/search/movie?query=${searchInput.value}&include_adult=false&language=ko-KR&page=1`
  try {
    const response = await fetch (searchUrl,{
      method: "GET",
      headers : {
        accept : "application/json",
        Authorization: authorCode
      },
    });
    const data = await response.json();
    movies = data.results;
    displayMovie(movies);
  } catch (error) {
    console.error ("오류! 오류! : ", error);
  }
}

 

아, 버튼 부분도 추가해서 보여주도록 하겠다. (까먹을 뻔.)

const searchBtn = document.querySelector(".search_btn");
const resetBtn = document.querySelector(".reset_btn")
...
// 검색 버튼 클릭 시 searchMovie 함수 실행
searchBtn.addEventListener("click", () => {
  searchMovie(); // 항상 첫 번째 페이지를 불러옴
});

// 초기화 버튼 클릭 시 전체 영화 다시 불러오기
resetBtn.addEventListener("click", () => {
  searchInput.value = "";  // 검색어 초기화
  fetchMovies();  // 전체 영화 다시 불러오기
});

 

 

 

CSS - 기억해. 개발자도구는 최고, 아니 그냥 신이야.

(오늘도) 깡통 lose, CSS win!

 

이번엔 f12랑 cmd + shift + c (윈도우는 ctrl + shift + c) 눌러서 안해야징~ 하고

자체적 하드코어로 냅다 덤볐다가 눈물 주우우울줄 흘린사람? ... 저요.

진짜 웃긴게 구현은 또 완벽하게 했는데 왜 안될까 하면서

깡통이랑 의논했는데 역시 얘는 JS 전문이라 그런지 고장남.

니가 그러면 그렇지; 그러니까 내 블로그 썸네일을 그렇게 말아먹...읍읍

아 안되겠다 냅다 켜보고 내가 봐보겠음; 하고 보고 확인해보니

스페이스바, 스펠링철자, 내부의 내부로 들어간 친구 등등...

생각보다 저엉말 어이없는 부분에서 오류가 많이났... 아 그만할게요. 🤦🏻‍♂️

그래서 이번에는 이것저것 눌러보면서 새롭게 알게된 CSS만 써보도록 하겠다.

(절대 귀찮아서가 아님. 진짜 CSS 줄만 200줄 가까이됩니다요..)

/* 새롭게 알게된 CSS 요소들 (와!) */

.til {
	flex-direction: column; /* 요소 수직으로 배치 */
	align-items: center; /* 아이템도 가운데 정렬이 가능하다.. */
	gap: xpx; /* 사이사이의 간격, 이거 예전에 써먹긴 했는데 까먹어서 다시 적어보기 */
	flex-wrap: wrap; /* 요소들이 한 줄에 넘치면 다음 줄로 자동 배치 */
	transform: translate(-50%, -50%); /* 요소를 정중앙 배치, 각각 50%만큼 이동(X,Y축) */
	z-index: 1000; /* 위쪽에 배치되도록 */
	z-index: 999; /* 아래에 배치되도록 */
}

 

 

 

마무리 - 하나 구현하면 생기는 오류... 오류... 오류들...

낫-이지 한 라이브서버와의 전투...

 

아니 필요한 기능을 완성했더니... 뭔가 부족한거 같아서 하나를 추가한단말이죠?

(실은 TIL 쓰다가 오류 또 나서 디버깅하다가 못쓸뻔 ^^;;)

약간 그런거 보면 생각나는게... 모래성이고... 두더지게임이고... 도미노고...

다 하나같이 삐끗하면 와르르 무너지는.. (그리고 같이 무너지는 내 억장..)

수많은 Error 속에서.. 그래도 무너지지 않고 해결하고 완성시켜서 다행이다..

이제 진짜 남은건 디버깅..들 뿐이니 조금만 수정하고 제출해야징...

 

 

??? : 안녕하세요, 갑자기 냅다 프로젝트가 날ㄹ라가버린.... tkfㄹㅕㅈㅝ...

 

 

오늘의 KPT 회고

  • Keep :  프로젝트 끝! 내일은 특강정리하면서 마무리!
  • Problem : 깡통은 CSS에 취약하다. 아니 그냥 쉽지않다;
  • Try : CSS는 진짜 그냥 f12키고 혼자하자... 너 생각보다 잘함 ㅇㅇ...

끝.

728x90
반응형

'React TIL' 카테고리의 다른 글

[React] Day_26 데일리 정리  (1) 2024.10.25
[React] Day_25 데일리 정리  (1) 2024.10.24
[React] Day_23 개인 프로젝트 중간점검  (2) 2024.10.22
[React] Day_22 데일리 정리  (2) 2024.10.21
[React] Day_21 데일리 정리  (1) 2024.10.18

관련글

티스토리툴바