[Practice] 🤍 버튼 만들기

내일 배움 캠프 진행하며 시작된 첫 미니 프로젝트!

영화 추천 사이트 만들기

사용자가 접속하여 영화 링크와 트레일러 링크 그리고 개인의 의견을 기록하면 아래에 등록된 영화들을 카드 형태로 열람할 수 있다.

카드 내에는 제목, 평점, 장르 등 기본적인 영화 정보가 들어가고 트레일러를 볼 수 있는 버튼과 인스타그램의 좋아요처럼 맘에드는 영화 카드의 하트 버튼을 클릭하여 표시할 수 있도록 구성되어 있다.

나는 여기서 아주 귀엽고 조그마한 하트 기능을 만들기로 했당.

클릭 전 기본 하트	클릭하면 핑크 하트

(정말 왕 큰 페이지에 아주 작은 하트지만.. 너무 귀여워..✌🏻)

진행 중 맞이한 문제는?

일단 나는... 개발이라고는 1도 배워본적 없는 개발 신생아 + 스파르타 코딩의 기본 강의라고 할 수 있는 웹개발 종합반 1회독, 혼자 공부하는 자바스크립트 책 1회독도 못마친 상황이었다...

그렇기에 따라하는 수준만 가능하고 직접 코드를 작성한다거나 기본 강의에서 조금만 달라져도 땀 삐질삐질 흘리며... 울고 싶었던 상태랄까... 그래서 저 조그만 하트를 구현하는데 생각보다 많은 문제를 맞이했다...

1. 처음엔 하트 아이콘을 버튼 태그를 이용해 작성했다.
버튼... 나쁘지 않았지만 하트 아이콘 뒤로 회색 박스가 디폴트로 들어갔는데 이 회색 박스를 없애는 방법을 나는 몰랐다... 그래서 뒤에 박스가 없는 span 태그를 이용했다.

다행히 회색 박스는 없어졌다. 근데 뭔가 찾다보니 span 태그가 좀 안맞는 느낌이었다.. 그래서 구글링하던 중 다들 아이콘은 i 태그를 쓰는거 같길래 i 태그로 변경 -> 어쨌든 회색 박스 없어졌다 ^^ㅎ

2. 하트 아이콘 이미지 찾기
처음엔 구글에 대충 이미지를 찾아 이미지 주소 복사를 해와서 작성하였다.. 그랬더니 또 하트만오는게 아니라 뒤에 백지까지 따라오더라...

이번엔 아이콘 이미지 사이트를 찾았다... 다들 폰트어썸을 이용하는 것 같았는데... 난 폰트 어썸을 발견하기전에 다른 사이트를 먼저 봐버렸다.. 해당 페이지도 나쁘다는 건 아니었지만 svg 이미지 파일 또는 svg 코드만 제공해주는 곳이었다.

여기서 또 문제는 이미지 파일을 폴더에 넣자니 추후에 팀장이 코드를 추합할때 뭔가 불편할 것 같았다... 그래서 코드를 이용하는데 svg 이미지 코드도 처음 이용해봤다... 그래서 이것 또한 열심히 구글링을 통해 i태그 사이로 svg 코드를 그래도 넣으면 된다는 것을.. 배웠다..^^

3. 아이콘 색상 변경하기
색상 변경... 그냥 단순하게 .heart{color:red} 이런 식으로 하면 다되는줄 알았다... 근데 svg 이미지는 또 아니더라... 또 열심히 구글링했다..

다양한 방법이 있겠지만.. 필터를 사용하면 된다더라... 여튼 그래서 색상 코드 찾는 사이트와 필터값 구하는 사이트를 알아내서 아이콘 색상 변경도 완료...

4. 가장 애먹은 토글 함수
진짜 진짜 이게 가장 문제였다. 개생아인 나는 뭐가 문제인지도 모르니 함수가 잘못된건지 위치가 잘못된건지 알수가 없어 계속 바꿔가면서 새로고침을 해보았다..

(1)querySelector, querySelectorAll
진짜 너무 어려웠던 부분이다. 일단 내가 책에서 보기로는 셀렉터는 한개, 두개 이상의 클래스에 동일한 이벤트를 주고 싶을때는 All이라고 배웠다. 우리는 카드가 한개만 있는 것이 아닌 등록할 때마다 증가하기 때문에 All이라고 생각하고 했다.

그리고 새로고침해보니.. 되긴 되는데 홀수 카드만 이벤트가 동작했다... (첫번째꺼는 아이콘 색상 변경 o, 두번째거는 x, 세번째는 또 o 이런식으로...🙄)

그래서 생각해봤는데 뭔가... temp_html를 생각하니 카드를 생성한다면 이 temp 형식?이 하나씩? 복제되는 건데... 그럼 temp 내부에는 하나가 아닌가..?라는 생각이 들어 selector을 이용했다... 정답이었다...

(2)스크립트 위치
바디?가 위로 올라오고 그 다음에 스크립트가 배치되어야한다고 들었어서 일단 스크립트 제일 아래로 내렸다. 그랬더니 뭔가 하트가 눌려졌다. 클릭도 됐다!!

그래서 오 됐다!!했는데 팀장님께 코드를 넘겨보니 회색 하트가.. 카드에 들어가있긴 했는데 이벤트가 활성이 안됐다... 알고보니 mongo DB 연결 오류로... temp html이 아닌 그냥 body 카드만 적용이 되던 것이었다...

그래서.. 다시 위치를 막 변경해보기 시작했다... 근데 뭔가 이부분도 생각해보니... 저 temp html 안에 있는 i 태그에 이벤트를 주는거니까... 그 근처가 아닐까...? 하는 생각이 들어서 옮기다보니... temp html 상위함수인 forEach 안, temp html 밑으로 이동하니... 드디어 됐다...😭

그래서 작성한 코드는?

1. css

.heart {
    filter: invert(78%) sepia(7%) saturate(6%) hue-rotate(324deg) brightness(105%) contrast(81%);
    position: absolute;
    z-index: 1;
    margin-left: 290px;
    margin-top: 10px;
  }
  
  .heart:hover {
    cursor: pointer
  }
  
  .heart.active {
    filter: invert(68%) sepia(25%) saturate(2343%) hue-rotate(298deg) brightness(91%) contrast(87%);
  }

2. temp_html div 내부(?)

<i class="heart">
	<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 24 24" width="40">
		<path d="M0 0h24v24H0z" fill="none" />
		<path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" />
    </svg>
</i>

3. script(?)

function listing() {
    fetch('/movieworld').then((res) => res.json()).then((data) => {
        let rows = data['result']
        $('.box2Container').empty()
        rows.forEach((a) => {
        ~~~~~
		let togglingBtns = document.querySelector('.heart');
		togglingBtns.addEventListener('click', function () {
			togglingBtns.classList.toggle('active');
		})
    })
}

푸념 한판...

진짜... 이렇게보니까... 생각보다 더더 조그맣고.. 별로 안헤멘거처럼 보이기도 하는데ㅠㅠㅠ 위에 말했듯이 나는 위치가 잘못됐는지 함수가 잘못됐는지 아므것도 모르니까... 위치 변경 -> 함수 변경 -> 함수 변경 -> 위치 변경... 끝없는 변경에 변경.. 거의 12시간은 걸린거 같다...

그래도 완성하고나니... 조그맣고... 귀여운 하트 완성... 얼레벌레 이해는 다 됐으니.. 다음엔 더 잘 할수 있으리라 믿는다... 개생아 열심히 기어보자...🔥