Kdt5 kim gyeong won 6__재업

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended" 
+  ],
+  "plugins": [
+    "prettier"
+  ]
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "endOfLine": "lf",
+  "singleAttributePerLine": true,
+  "bracketSameLine": true,
+	"trailingComma": "none",
+  "arrowParens": "avoid"
+}

.vsccode/settings.json

@@ -0,0 +1,10 @@
+{
+  "[javascript]": {
+	  "editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+	  "editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -1,219 +1,117 @@
-# 🎬 영화 검색
+## Vanilla JS로 OMDB API 영화검색 사이트 만들기
 
-주어진 API를 활용해 '[완성 예시](https://stupefied-hodgkin-d9d350.netlify.app/)' 처럼 자유롭게 영화 검색 기능을 구현해보세요!  
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+💬[데모] : (https://frolicking-trifle-07d151.netlify.app/)
 
-## 과제 수행 및 제출 방법
+### 사이트 설명
 
-```
-KDT기수번호_이름  |  E.g, KDT0_ParkYoungWoong
-```
-
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
+#### HOME
++ 영화를 검색할 수 있습니다.
++ 출시년도와 영화 타입을 선택하여 검색할 수 있습니다.
++ 검색 후 enter 입력 혹은 search 버튼 클릭 시 영화 포스터가 출력됩니다.
++ 포스터에 hover 시에 제목과 출시년도가 나타납니다.
++ 포스터 클릭 시 상세 영화정보 페이지로 이동합니다.
 
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+#### INFO
++ 상세 영화정보를 보여줍니다.
++ 잘못된 주소를 입력받으면 찾는 영화정보가 없다는 이미지가 출력됩니다.
++ 기본 값은 존윅4입니다.
 
-## 요구사항
-
-필수 요구사항은 꼭 달성해야 하는 목표로, 수정/삭제는 불가하고 추가는 가능합니다.    
-선택 요구사항은 단순 예시로, 자유롭게 추가/수정/삭제해서 구현해보세요.  
-각 요구사항은 달성 후 마크다운에서 `- [x]`로 표시하세요.  
+#### ABOUT 
++ 허전해서 넣었습니다.
++ 사이트 로고와 작성자 이름, github 주소를 보여줍니다.
 
+---
+개요: 
+---
 ### ❗ 필수
 
-- [ ] 영화 제목으로 검색이 가능해야 합니다!
-- [ ] 검색된 결과의 영화 목록이 출력돼야 합니다!
-- [ ] 단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)를 볼 수 있어야 합니다!
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+- [x] 영화 제목으로 검색이 가능해야 합니다!
+- [x] 검색된 결과의 영화 목록이 출력돼야 합니다!
+- [x] 단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)를 볼 수 있어야 합니다!
+- [x] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
 ### ❔ 선택
 
 - [ ] 한 번의 검색으로 영화 목록이 20개 이상 검색되도록 만들어보세요.
-- [ ] 영화 개봉연도로 검색할 수 있도록 만들어보세요.
-- [ ] 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요.
-- [ ] 무한 스크롤 기능을 추가해서 추가 영화 목록을 볼 수 있도록 만들어보세요.
-- [ ] 영화 포스터가 없을 경우 대체 이미지를 출력하도록 만들어보세요.
-- [ ] 영화 상세정보가 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
-- [ ] 영화 상세정보 포스터를 고해상도로 출력해보세요. (실시간 이미지 리사이징)
-- [ ] 차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.
+- [x] 영화 개봉연도로 검색할 수 있도록 만들어보세요.
+- [x] 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요.
+- [x] 무한 스크롤 기능을 추가해서 추가 영화 목록을 볼 수 있도록 만들어보세요.
+- [x] 영화 포스터가 없을 경우 대체 이미지를 출력하도록 만들어보세요.
+- [x] 영화 상세정보가 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
+- [x] 영화 상세정보 포스터를 고해상도로 출력해보세요. (실시간 이미지 리사이징)
+- [x] 차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.
 - [ ] 영화와 관련된 기타 기능도 고려해보세요.
 
-## API 기본 사용법
-
-```curl
-curl https://omdbapi.com/?apikey=7035c60c
-  \ -X 'GET'
+---
+### 파일 구조 및 기능
 ```
-
-## 영화 목록 검색
-
-영화 목록은 한 번에 최대 10개까지 검색할 수 있습니다.
-
-파라미터 | 설명                   | 기본값
----|----------------------|---
-`s` | 검색할 영화 제목(필수!)       | -
-`y` | 검색할 개봉연도, 빈 값은 전체 검색 | - 
-`page` | 검색할 페이지 번호           | `1`
-
-요청 코드 예시:
-
-```js
-async function getMovies(title, year = '', page = 1) {
-  const s = `&s=${title}`
-  const y = `&y=${year}`
-  const p = `&page=${page}`
-  try {
-    const res = await fetch(`https://omdbapi.com/?apikey=7035c60c${s}${y}${p}`)
-    const json = await res.json()
-    if (json.Response === 'True') {
-      const { Search: movies, totalResults } = json
-      return {
-        movies,
-        totalResults
-      }
-    }
-    return json.Error
-  } catch (error) {
-    console.log(error)
-  }
-}
+C:.
+│  index.html
+│  main.js :: 각 페이지가 #app 요소 안에 렌더링 되도록 DOMContentLoaded 이벤트를 추가합니다.
+│  package-lock.json
+│  package.json
+│  README.md
+│  style.scss
+│
+└─src
+    │  app.js :: header 요소에 클릭 이벤트를 추가하고, 최초 실행 시 랜딩페이지를 불러옵니다.
+    │  router.js :: route주소를 받아와 SPA 기능을 제어합니다.
+    │
+    ├─constants
+    │      routeInfo.js :: route주소 정보와 경로를 담고 있습니다.
+    │
+    ├─core
+    │      getDetail.js :: 영화의 세부정보를 fetch합니다.
+    │      movieFetch.js :: 검색어에 맞는 영화 정보를 fetch합니다.
+    │
+    ├─pages :: 이 폴더 안의 js파일은 각 주소에 렌더링 될 요소를 결정합니다.
+    │  │  about.js
+    │  │  main.js :: createMovieList를 호출합니다.
+    │  │  movieinfo.js
+    │  │  notfound.js :: URL주소가 잘못됐을 때 렌더링됩니다.
+    │  │
+    │  └─styles
+    │          about.scss
+    │          main.scss
+    │          movieinfo.scss
+    │
+    ├─scripts
+    │  ├─infoPage
+    │  │      createEl.js :: detailRes.js에서 받아온 데이터를 화면에 출력합니다.
+    │  │      detailRes.js :: getDetail.js를 통해 받아온 데이터에서, 필요한 데이터만 꺼내어 저장합니다.
+    │  │      infoRoute.js :: main화면에서 검색 결과 요소(영화목록 중 하나)를 선택 시, 해당 주소로 URL 전환을 담당합니다.
+    │  │
+    │  └─mainPage
+    │          createMovieList.js :: 검색 시 이벤트와, 스크롤 시 추가 데이터 fetch 이벤트를 제어합니다.
+    │          movieResult.js     :: API에서 받아온 영화 목록 데이터를 화면에 출력합니다.
+    │
+    └─utils
+            navigate.js      :: URL주소가 바뀔 때 이벤트를 발송합니다.
+            querySelector.js :: querySelector 메서드를 `$`로 단축합니다. 찾을 수 없을 시 오류처리도 포함합니다.
 ```
-
-응답 데이터 타입 및 예시:
-
-```ts
-interface ResponseValue {
-  Search: Movie[] // 검색된 영화 목록, 최대 10개
-  totalResults: string // 검색된 영화 개수
-  Response: 'True' | 'False' // 요청 성공 여부
-}
-interface Movie {
-  Title: string // 영화 제목
-  Year: string // 영화 개봉연도
-  imdbID: string // 영화 고유 ID
-  Type: string // 영화 타입
-  Poster: string // 영화 포스터 이미지 URL
-}
+---
 ```
-
-```json
-{
-  "Search": [
-    {
-      "Title": "Frozen",
-      "Year": "2013",
-      "imdbID": "tt2294629",
-      "Type": "movie",
-      "Poster": "https://m.media-amazon.com/images/M/MV5BMTQ1MjQwMTE5OF5BMl5BanBnXkFtZTgwNjk3MTcyMDE@._V1_SX300.jpg"
-    },
-    {
-      "Title": "Frozen II",
-      "Year": "2019",
-      "imdbID": "tt4520988",
-      "Type": "movie",
-      "Poster": "https://m.media-amazon.com/images/M/MV5BMjA0YjYyZGMtN2U0Ni00YmY4LWJkZTItYTMyMjY3NGYyMTJkXkEyXkFqcGdeQXVyNDg4NjY5OTQ@._V1_SX300.jpg"
-    }
-  ],
-  "totalResults": "338",
-  "Response": "True"
-}
+## 사용된 모듈
+package :
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.7",
+    "sass": "^1.62.0",
+    "vite": "^4.3.0"
 ```
 
-## 영화 상제정보 검색
+### 🧨문제점 :
++ info페이지에서 뒤로가기 시, 메인 페이지가 초기화 됩니다. 검색 내역과 데이터가 그대로 남아있어야 사용자도 편하고, 데이터 처리량도 줄어들 것 같습니다. route이벤트 관련된 문제인 것 같은데, 해당 문제점 관련해 서칭중입니다.
 
-단일 영화의 상제정보를 검색합니다.
++ 무한 스크롤 시 영화 정보가 없음에도, 스크롤을 올렸다가 내리면 이벤트 리스너가 계속 생성되는 현상이 있습니다. 최초 1회 영화정보 없음 표시가 나타나면, 이벤트리스너가 다시 생성되지 않는 로직이 추가되지 않았습니다.
 
-파라미터 | 설명 | 기본값
----|---|---
-`i` | 검색할 영화 ID(필수!) |
-`plot` | 줄거리 길이 | `short`
 
-요청 코드 예시:
+### 🧠아쉬운 점 :
++ router 기능에 대해 100% 이해하지 못해, 기능을 따라할 수는 있어도, 수정하기는 힘들었습니다.
++ JS 기초 지식이 부족해 많은 기능을 구현하지 못했고, 작업하는 중간중간 생각나는 원하는 기능들을 포기하기도 했습니다.
 
-```js
-async function getMovie(id) {
-  const res = await fetch(`https://omdbapi.com/?apikey=7035c60c&i=${id}&plot=full`)
-  const json = await res.json()
-  if (json.Response === 'True') {
-    return json
-  }
-  return json.Error
-}
-```
 
-응답 데이터 타입 및 예시:
-
-```ts
-interface ResponseValue {
-  Title: string // 영화 제목
-  Year: string // 영화 개봉연도
-  Rated: string // 영화 등급
-  Released: string // 영화 개봉일
-  Runtime: string // 영화 상영시간
-  Genre: string // 영화 장르
-  Director: string // 영화 감독
-  Writer: string // 영화 작가
-  Actors: string // 영화 출연진
-  Plot: string // 영화 줄거리
-  Language: string // 영화 언어
-  Country: string // 영화 제작 국가
-  Awards: string // 영화 수상 내역
-  Poster: string // 영화 포스터 이미지 URL
-  Ratings: Rating[] // 영화 평점 정보
-  Metascore: string // 영화 메타스코어
-  imdbRating: string // 영화 IMDB 평점
-  imdbVotes: string // 영화 IMDB 투표 수
-  imdbID: string // 영화 고유 ID
-  Type: string // 영화 타입
-  DVD: string // 영화 DVD 출시일
-  BoxOffice: string // 영화 박스오피스
-  Production: string // 영화 제작사
-  Website: string // 영화 공식 웹사이트
-  Response: string // 요청 성공 여부
-}
-interface Rating { // 영화 평점 정보
-  Source: string // 평점 제공 사이트
-  Value: string // 평점
-}
-```
+### 🎈얻은 것들 :
 
-```json
-{
-  "Title": "Frozen",
-  "Year": "2013",
-  "Rated": "PG",
-  "Released": "27 Nov 2013",
-  "Runtime": "102 min",
-  "Genre": "Animation, Adventure, Comedy",
-  "Director": "Chris Buck, Jennifer Lee",
-  "Writer": "Jennifer Lee, Hans Christian Andersen, Chris Buck",
-  "Actors": "Kristen Bell, Idina Menzel, Jonathan Groff",
-  "Plot": "When the newly crowned Queen Elsa accidentally uses her power to turn things into ice to curse her home in infinite winter, her sister Anna teams up with a mountain man, his playful reindeer, and a snowman to change the weather co...",
-  "Language": "English, Norwegian",
-  "Country": "United States",
-  "Awards": "Won 2 Oscars. 82 wins & 60 nominations total",
-  "Poster": "https://m.media-amazon.com/images/M/MV5BMTQ1MjQwMTE5OF5BMl5BanBnXkFtZTgwNjk3MTcyMDE@._V1_SX300.jpg",
-  "Ratings": [
-    { "Source": "Internet Movie Database",  "Value": "7.4/10" },
-    { "Source": "Rotten Tomatoes", "Value": "90%" },
-    { "Source": "Metacritic", "Value": "75/100" }
-  ],
-  "Metascore": "75",
-  "imdbRating": "7.4",
-  "imdbVotes": "620,489",
-  "imdbID": "tt2294629",
-  "Type": "movie",
-  "DVD": "18 Mar 2014",
-  "BoxOffice": "$400,953,009",
-  "Production": "N/A",
-  "Website": "N/A",
-  "Response": "True"
-}
-```
++ JS에 대한 이해가 늘었습니다. 함수의 호이스팅, 객체와 배열, json, API 통신과 비동기방식 등 다양한 문법들을 실사용하면서 원리와 사용법을 숙지하게 됐습니다.