#TIL 9일차(개인 프로젝트 회고[1] )

앙꼬·2024년 4월 30일
부트캠프

부트캠프

목록 보기
9/59

개인 프로젝트 요구사항

📌 필수 요구사항

  1. 기본 구현 사항
  • jQuery 라이브러리 없이 순수 바닐라 자바스크립트 사용
  • TMDB 오픈 API를 이용하여 인기 영화 데이터 가져오기
  • 영화 정보 카드 리스트 UI 구현
  • 영화 검색 UI 구현
  1. 자바스크립트 문법 요소 활용
  • 변수 선언 시 const와 let만 사용 (var 사용 금지)
  • 화살표 함수 사용

  1. 배열 메소드 활용 (아래 중 2개 이상 사용)
    forEach | map | filter | reduce | find

  2. DOM 제어 (아래 API 목록 중 2개 이상 사용)
    querySelector | querySelectorAll | getElementById
    getElementsByClassName | createElement | appendChild
    removeChild | innerHTML | textContent

  3. 문서 객체 생성과 선택

  • document.createElement(tagName) : 새로운 HTML 요소를 생성합니다.
  • document.getElementById(id) : id 속성을 기준으로 요소를 선택합니다.
  • document.getElementsByTagName(name) : 태그 이름을 기준으로 요소를 선택합니다.
  • document.getElementsByClassName(name) : 클래스 이름을 기준으로 요소를 선택합니다.
  • document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다.
  • document.querySelectorAll(selector) : CSS 선택자를 이용하여 모든 요소를 선택합니다.
  1. 문서 객체 조작
  • element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다.
  • element.textContent : 해당 요소 내부의 텍스트를 변경합니다.
  • element.setAttribute(attr, value) : 해당 요소의 속성 값을 변경합니다.
  • element.getAttribute(attr) : 해당 요소의 속성 값을 가져옵니다.
  • element.style.property : 해당 요소의 스타일 값을 변경합니다.
  • element.appendChild(child) : 해당 요소의 하위 요소로 child를 추가합니다.
  • element.removeChild(child) : 해당 요소의 하위 요소 중 child를 삭제합니다.
  • element.classList.add(class) : 해당 요소의 클래스에 새로운 클래스를 추가합니다.
  • element.classList.remove(class) : 해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
  • element.classList.toggle(class) : 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
  1. 이벤트 처리
  • element.addEventListener(type, listener) : 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
  • element.removeEventListener(type, listener) : 해당 요소에서 등록된 함수를 제거합니다.
  • event.preventDefault() : 이벤트가 발생했을 때 기본 동작을 취소합니다.
  • event.stopPropagation() : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
  1. 기타

  • window.location.href : 현재 페이지의 URL을 가져옵니다.

  • window.alert(message) : 경고 메시지를 출력합니다.

  • window.confirm(message) : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.

  • (2) 선택요구사항

    • CSS
      • flex 사용하기
      • grid 사용하기
    • 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기
    • 대소문자 관계없이 검색 가능하게 하기
    • 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기
    • 원하는 추가기능 무엇이라도 okay!

근데 내가 작성하면 왜이리 안이쁘지 주말에 이거 작성하는법 좀 찾아봐야겠다..

어쨋든 필수 요구사항이랑 선택요구사항을 모두 충족시키면서 프로젝트를 끝냈다! html,css 태그부터 차근차근 보도록 하자

기본 뼈대

HTML

이런식으로 작성해서 기본 index.html를 만들고, 헤더랑 푸터는 따로 만들어서 가져왔다.

index.html
메인 페이지가 되는 html파일로, 카드 리스트 부분은 script부분에서 innerHTML을 사용해서 가져왔다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
    <title>개인과제</title>
</head>
<body>
    <header id="header"></header>
        <div class="main-head">
            <img src="./img/main.jpeg" class="main-img">
            <h4 class="main-title">FMV와 함께 즐겨요</h4>
        </div>
        <div class="main-page">
        <h3 class="main-page-title">영화 순위 TOP 20</h3>
            <div class="main-body">
                <!-- 영화정보 카드 리스트 부분-->
            </div>   
        </div>
        </div>
    <footer id="footer"></footer>
    <script src="../script/movie.js"></script>
    <script src="../script/header.js"></script>
    <script src="../script/footer.js"></script>
</body>
</html>

header.html
header.html에 검색폼을 넣어 제작했고, 이것 때문에 검색 기능하면서 조금 애먹었었다.😅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>헤더</title>
    <link rel="stylesheet" type="text/css" href="./css/hf.css">
    <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
</head>
<body>
    <div class="header-page">
        <nav class="hd-body">
            <h1 class="title"><a href="./index.html">FMV</a></h1>
            <div class="hd-bd1">
                <div class="movies">영화 장르</div>
            </div>
            <div class="hd-bd2">
                <form class="searchForm">  
                    <input type="text" id="search" placeholder="영화 제목을 입력하세요">
                    <button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
                </form>
                <i class="fa fa-user" id="person-icon"></i>
            </div>
        </nav>
    </div>
    <script src="../script/movie.js"></script>
    <script src="../script/header.js"></script>
</body>
</html>

CSS

grid를 사용해서 카드 템플릿을 만들었고, auto-fit을 사용해서 가능한 많은 열을 만들되, 열의 최소 너비를 유지하고, minmax로 최소 넓이와 최대 넓이(가변 넓이)를 지정해 반응형으로 작동하게 하였다. 

<style>
.main-body{
    width: 70%;
    height: 50%;
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* 3개의 열을 동일한 크기로 설정 */
    grid-gap: 20px;
}
</style>
profile
앙꼬
프론트 개발자 꿈꾸는 중
이전 포스트

#TIL 8일차(영화 검색 기능)

다음 포스트

#TIL 10일차(개인 프로젝트 회고[2] )

0개의 댓글