Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

훈돌라

2024. 5. 1. 두 번째 팀 과제 본문

카테고리 없음

2024. 5. 1. 두 번째 팀 과제

훈돌라 2024. 5. 1. 20:25

이번 팀 프로젝트는 개인 과제의 연장선으로, 몇 가지 필수 기능들이 추가되었다.

  • (1) 필수요구사항
    • [1] TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)
  • [2] 영화정보 상세 페이지 구현
    • 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.
    • 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다
  • [3] 상세 페이지 영화 리뷰 작성 기능 구현
    • 상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.
    • 작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다.
    • 작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.
  • [4] github PR(=Pull Request) 사용한 협업
  • [5] UX를 고려한 validation check
    • 영화 검색 시
    • 댓글 작성 시
    • 추가 기능 구현 시 반드시 삽입

 

우선 우리 팀은 5명으로, 2/2/1 로 나뉘어서 분업하기로 결정했다.

 

영화정보 상세 페이지 구현 2명, 상세 페이지 영화 리뷰 작성 기능 2명, Validation Check (유효성 검사) 1명.

 

여기서 내가 맡은 부분은 유효성 검사 구현하기다. (사다리 타기)

 

평소 웹사이트들을 이용하며 친숙하게 봐왔던 로그인 시 경고창 ( ex) 비밀번호가 맞지 않습니다! ) 같은 부분을 말 그대로 유효성 검사를 해 사용자에게 경고를 해주는? 느낌이다.

 

 

 

팀원분들이 한 개인 프로젝트들 중 조장이신 선민님의 프로젝트에 현경님의 다크/라이트 모드 기능이 추가된 것이

우리조의 초기 작업물이다.

 

역할을 배정 받자마자 내가 해야할게 뭔가 생각해봤고, 당장 할 수 있는 건 검색창 유효성 검사를 구현하는 것이였다.

 

후에 영화 리뷰 작성이 구현되면 작성자, 리뷰, 비밀번호가 들어갈텐데, 비밀번호가 일치하지 않습니다! 라거나

 

리뷰에 텍스트 제한을 둬 몇 자 이상 작성해주세요! , 몇 자 이상은 작성하실 수 없습니다! 정도의 유효성 검사

 

를 구현할 수 있을 것 같다. 일단 필수 조건들에 맞는 유효성 검사만 구현하고, 나머지 추가되는 기능들도 있다면 구현할 예정이다.

 

 

선민님은 따로 엔터나 버튼을 누르지 않고도 인풋창에 텍스트를 쓰면, 자동으로 검색되게 코드를 짜셨다.

 

여기서 1차 당황,, 내가 생각한 유효성 검사는 엔터, 검색 버튼을 눌렀을 때 경고창이 뜨게 하는거였는데,,?

 

코드를 봤는데도 너무나 생소하다. 사실 막 생소하진 않았는데 아직 다른 사람의 코드를 읽는 게 익숙치 않다.

 

const searchInput = document.getElementById("searchBar");
searchInput.addEventListener("input", () => {
  const searchTerm = searchInput.value.toLowerCase();
  const movieCards = Array.from(document.getElementsByClassName("movieCard"));

  movieCards.forEach((card) => {
    const title = card.querySelector(".movieTitle").textContent.toLowerCase();
    card.style.display = title.includes(searchTerm) ? "block" : "none";
  });

 

나중에 다시 여쭤볼 계획이지만, 지금 내가 봤을 땐 인풋에 이벤트 리스너를 이용해서 구현하신 것 같다.

 

나는 버튼에  click 이벤트를 줘서 search 함수를 실행시켰었고!

 

그래서 이걸 어쩌나,, 하고 혹시 수정해도 되냐고 하니 괜찮다고 하셔서 버튼 넣고, 인풋 수정하고 있던 찰나에..

 

아니, 내가 이걸 왜 뜯어 고치고 있지? 저 상태로도 될건데 내가 생소하다고 이걸 뜯어 고친다고?

 

마인드부터 잘못됬다 난. 그래서 생각해낸게, 읽어온 데이터들이 영문으로 표기되니 한글을 입력했을 때 영문으로 검색하라는 경고창이 뜬다면?

 

사실 어렵지 않을 것 같은 느낌이? 들었다. 인풋에 한글이 입력되면 swal.fire ( 이쁜 알럿창 ) 을 띄우게 하면 되잖아?

 

  if (/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(searchTerm)) {
    swal.fire("영문으로 검색해주세요!");
  }

 

아직 지식이 얕은 난 또 한 번 폭풍 구글링으로 정보를 습득해내었다.

 

test 메서드를 사용하여 입력된 검색어에 한글이 포함되어 있는지를 확인하고, 포함되어 있다면 swal.fire 창을 띄우도록 하였다.

 

사실 처음 if 조건문에 한글을 어떻게 넣어야 할지 몰랐다.. 가나다..? ko..? 그래서 또 폭풍 구글링을 해보니

 

[ㄱ-ㅎ|ㅏ-ㅣ|가-힣] 이 놈이 정규표현식으로 한글을 나타낸다더라. 감히 예상하건데

 

ㄱ 부터 ㅎ 까지, ㅏ 부터 ㅣ 까지 가 부터 힣 까지. 그냥 한글의 모든 경우의 수를 표현식으로 만들어줬나보다.

만든사람 천잰가?

 

유효성 검사를 적용하고, 인풋에 한글을 친다면

 

 

난 또 해내버렸다. 무섭다 내 성장 속도가..

 

큰 틀 (기본?) 만 알고 있다면 구글링을 통해 코드를 짤 수 있다. 다만, 내 걸로 만드는게 제일 중요하겠지.

 

그래서 구글링으로 짠 코드를 몇 번 다시 써보고 손에 익히는 연습을 하는 중이긴 한데, 솔직히 손에 잘 안 익는다..

 

그래도 꾸준히 해야지. 성장했다, 김재훈.