[TIL] 240111 (목) 영화 검색 페이지 만들기 / 유효성 검사

오늘의 공부📖

1. 알고리즘 코드카타
2. JS 문법 강의 다시 듣기
3. 팀과제 영화검색 유효성 검사

오늘 공부한 내용 정리💁🏻‍♀️

1. 복습한 내용

Javascript 강의를 다시 들으면서 앞부분부터 제대로 이해하지 못하거나 까먹은 부분들을 보충해가며 강의를 수강하였다.
함수 파트 역시, 어제 들은 함수 세션 강의를 듣고 나서 다시 강의를 들으니, 이제야 함수를 선언하는 방법과 호출하는 방법에 대해서 더 잘 이해할 수 있었고, 복잡한 코드 속에서도 함수의 형태가 눈에 잘 들어와서 코드를 해석하고 이해하는데 더 도움이 되었다.

(아래 링크 참고)
Javascript 함수

2. 새롭게 배운 내용

개인과제에 이어 팀과제에서 메인 페이지의 유효성 검사(validation check) 파트를 맡게 되어 오늘 구현하고자 했다.
카드 제목을 input 검색창에 입력하면, 검색 결과에 맞게 카드가 뜨고, 잘못된 입력을 했을 경우에는 alert 창이 뜨게끔 하고자 하였다.

처음에는 조건문을 사용하면 금방되겠지 라는 생각을 했는데, 생각보다 생각 해야할 것도 많고 확인해야 할 것도 많았다.

① 카드의 제목 속에 검색어가 일치할 경우, 배열에 push를 한다.
② 배열 속에 카드 제목이 하나라도 존재할 경우, 즉, 배열의 길이가 0이 아닌 경우,
-> display "block" / "none"을 실행한다.
③ 빈 배열일 경우, , 검색 결과가 일치하지 않을 경우에는 alert창을 띄워 다시 검색하도록 한다.

글로만 작성하면 이렇게 간단해 보이는데 막상 코드로 구현하고자 하니 생각보다 만만하지가 않았다..
자꾸 될 것만 같은 느낌이었는데, 이제 진짜 알겠는데?! 라고 했지만 결국 다 실패 했다.. ㅋㅋ
내일 다시 튜터님께 질문을 하고 문제점을 파악해 보아야겠다.

<내일 할 일>

• header 부분 클릭 시, main 화면으로 돌아가기
• input 부분에 alert + main 화면으로 돌아가기 함수 구현하기
• 더보기/줄이기 구현하기
• 하단에 상세페이지 이동 버튼 고정시키기
• 상세페이지와 연결하기

하루를 마치며...🤔

일주일 동안 집에 앉아서 공부만 하는데 시간이 정말 너무 빠르게 흘러 가는 것만 같다. 벌써 내일이 금요일이라는게 믿기지가 않지만.. 주말 동안 복습을 좀 열심히 하는 주말을 보내야겠다는 생각이 든다. 개인과제 리뷰부터 강의도 다시 한 번 더 들어봐야겠다.