[TIL 2023.06.01] 영화 검색 페이지 완성! 제출 전 다듬기 (GOE’s CINEMA)

내일배움캠프/Today I Learned

[TIL 2023.06.01] 영화 검색 페이지 완성! 제출 전 다듬기 (GOE’s CINEMA)

괴코딩 2023. 6. 2. 03:03

💻오늘 배운 내용

replace()

str_text.replace("찾을 문자열", "변경할 문자열")

정규표현식

str_text.replace(/찾을 문자열/gi, "변경할 문자열")

정해진 규칙을 사용해 모든 문자를 변환할 수도 있고 숫자만 변환하거나 맨 처음, 맨 뒤만 변환할 수 있음

슬래쉬(/) 표시 안에 넣는 텍스트의 따옴표는 없어야함

gi의 의미

g : 전체 모든 문자열 변경 (global)
i : 영문 대소문자를 무시, 모두 일치하는 패턴 검색 (ignore)

특수 기호를 맨처음 적을 때는 항상 역슬래쉬(\) 부분이 정규식 맨 앞에 존재 해야함

str_text.replace(/\./gi, "-")

기호의 뜻을 풀어보자면

1] /문자열/ (이제 정규식을 사용할건데)- ’/’ 슬래쉬는 정규 표현식의 시작과 끝을 나타냄.

2] /\/ (\뒤에 올 문자는 특수문자가 아니야, 알았지?)- ‘\’ 특수 문자로 해석되는 것을 방지

3] /\./ (문자열 안에 .(온점)을 찾아서)

4] /\./gi (대소문자를 무시한 전체 모든 문자열을 대상으로 .(온점)을 찾아서)

5] /\./gi, “-” (.을 모두 -으로 바꿔줘)

예시) “I.like.a.pizza”.replace(/\./gi, "-") ⇒ “I-like-a-pizza” 가 된다.

[ ] 안에 특수기호를 넣으면 하나하나 개별적으로 변환

"4asdf/.asdf/.fsdd4df".replace(/[/4.]/gi, "@"); => @asdf@@asdf@@fsdd@df

문자열 내의 “/”, “4”, ”.” 요소를 @로 바꿔라는 뜻

만약 "4asdf/.asdf/.fsdd4df".replace(/\/4./gi, "@")라는 식이 있다면

“/4.”의 패턴을 찾아서 @로 바꾸라는 건데 현재 문자열에서 “/4.”가 없기 때문에

"4asdf/.asdf/.fsdd4df" 그대로 반환된다.

[ ] 없이 특수기호 여러개를 작성하면 하나의 묶음으로 인식해서 변환

"asdf/.asdf/.fsdddf".replace(/\/./gi, "@"); => asdf@asdf@fsdddf

문자열 내의 “/.” 패턴을 찾아서 @로 바꿔라는 뜻

위의 문자열에서는 해당 패턴이 2번 발견된다.

정규식에서 문자가 의미하는 뜻

[a-z] : a ~ z 사이의 문자를 찾음

[abc] : a, b, c 중 하나를 찾음

[^abc] : a, b, c를 제외한 문자를 찾음

정규식을 활용한 특정 문자 제거 방법

.replace(' ','') 첫번째 공백 제거

.replace(/\-/g,'')	특정문자 제거1 (-)
.replace(/,/g,'')	특정문자 제거2(,)
.replace(/^\s+/,'')	앞의 공백 제거
.replace(/\s+$/,'')	뒤의 공백 제거
.replace(/^\s+	\s+$/g,'')
.replace(/\s/g,'')	문자열 내의 모든 공백 제거
.replace(/\n/g,'')	n개행 제거
.replace(/\r/g,'')	엔터 제거

❓발생한 이슈/고민

깃허브에 이미지 파일 업로드 오류
인풋창 에 뜨는 x가 보기 싫다.
브라우저 창 크기를 조정해도 막 이동하지 않고 풀로 붙인듯 위치를 고정하고 싶다.
페이지 스크롤 하면서 아래로 많이 내려갔다면 한번에 위로 올려줄 top버튼을 만들고 싶다.
error: failed to push some refs to 'https://github.com/HyunseoY/GOE_CINEMA.git'
404 에러라니 ㅜㅜㅠ
검색 JS 함수 간결하게 다시 써보자. 너무 정신없이 짜여진 듯

💡해결과정

1. 깃허브 업로드만 하면 되는데 png 파일 업로드가 안된다.

왜…왜 untracked….

파일에 제대로 추가가 되지 않아서 인식을 못하나 보다.

파일	Staging Area 상태표시	Working Tree 상태표시
README		M	내용을 변경했지만 아직 Staged 상태로 추가하지는 않음
Rakefile	M	M	변경하고 Staged 상태로 추가한 후 또 내용을 변경해서 Staged 이면서 Unstaged 상태
lib/git.rb	A		파일이 생성되어 Staged 상태로 추가까지 한 상태
lib/simplegit.rb	M		내용을 변경하고 Staged 상태로 추가까지 한 상태
LICENSE.txt	?	?	추적하지 않는 새 파일

git add .

git commit -m “메세지 입력”

git push

순서로 명령어를 입력하면 해결!

2. 인풋창 에 뜨는 x가 보기 싫다면

input 태그의 타입을 search에서 type="text” 변경하면 엑스표 사라진다. 시원~

3. 브라우저 창 크기를 조정해도 막 이동하지 않고 풀로 붙인듯 위치를 고정하고 싶다면

#btn {
  position: absolute;
  height: 60px;
  width: auto;
  left: calc(70%); /* 가로 중앙 정렬 (버튼 너비의 절반을 뺌) */
  transform: translateY(5%); /* 세로 중앙 정렬을 위한 변형 */
}

transform과 calc()을 사용한다면 어렵지 앉은 문제이다.

그걸 몰라서 한 1시간은 요리조리 삽질만 했던 것 같다.

(calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수)

4. 페이지 스크롤 하면서 아래로 많이 내려갔다면 한번에 위로 올려줄 top버튼을 만들고 싶다 3가지 정도 의 방법을 알아 냈다.

JS를 사용

const topBtn = document.querySelector('.moveTopBtn');
topBtn.onclick = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

html <a href=””/>로 앵커 만들기
top버튼의 태그에 바로 <div class="moveTopBtn" onclick="window.scrollTo(0, 0);">라고만 해도

top기능이 된다.

3개 방법 중 제일 스무스한 동작은 역시 자바스크립트를 활용하는 방법이지만

벌여놓은 코드가 많아서 조금이라도 코드를 더 짧게.. 간결하게 하고 싶었던 나로서는 2번 3번이 좋다..

그래도 이동의 부드러움은 포기 못해서 자바스크립트로 만들었다 ..ㅋㅋ

5. error: failed to push some refs to 'https://github.com/HyunseoY/GOE_CINEMA.git'

원격저장소(github)에 내 로컬(내컴퓨터)에는 없는 파일이 있을 때 내 파일을 push 하면 발생하는 오류다.

즉 원격저장소를 pull 해야한다.

그러고 나서 git push하면 정상적으로 작동한다!

항상 주에 한번씩은 날 괴롭히는 깃..언제쯤 익숙해질까

6. 404 에러….

index.html에서 top_rated.html 넘어갈때만 생기는 문제인 것을 확인

경로설정이 잘못 되어있었다.

<a href="/html/top_rated.html">이 아니라

<a href="./html/top_rated.html">슬래쉬 앞에 .(온점)이 있어야 한다.

사실 둘다 같은 말 아닌가..? 하지만 딱 저기만 문제가 생긴 것을 보면 .을 꼭 찍어줘야 되나보다

우리 깃헙스키…

7. 함수가 너무 보기 불편해서 수정했다.

// 검색어를 사용하여 영화를 필터링하는 함수
function searchFilter(data, search) {
  const searchKeywords = search.toLowerCase().split(' '); 
  // 검색어 모두 소문자로 전환
  // 공백을 기준으로 분리하여 배열로 반환하는 문자열 메서드
  // 예시) "Hello, world! This is an example." => ["Hello,", "world!", "This", "is", "an", "example."]

  return data.filter((movie) => {
    const movieTitle = movie.title.toLowerCase().replace(/\\s/g, ''); 
    // 정규 표현식을 사용하여 문자열에서 모든 공백을 제거하는 문자열 메서드
    // 예시) "The Dark Knight" => "TheDarkKnight"
    return searchKeywords.every((keyword) => movieTitle.includes(keyword));
  });
}

일단 주석은 다 떼고…ㅎㅎ

.every() 메소드를 사용하니 괜히 복잡하게 돌아가는 것 같아서

searchKeywords 뒤에 .join() 메소드를 추가하여 공백단위로 나열한 배열을 문자열로 바꿔준다.

그리고 영화제목에 searchKeywords 가 포함된다면 해당 영화를 표시하게!

// 검색어를 사용하여 영화를 필터링하는 함수
function searchFilter(search) {
  const searchKeywords = search.toLowerCase().split(' ').join('');

  return movies.filter((movie) => {
    const movieTitle = movie.title.toLowerCase().replace(/\\s/g, '');
 
	  return movieTitle.includes(searchKeywords);
  });
}

수정한 코드다. 좀 정리가 된 느낌!