#13~14 Favorite 페이지 만들기 (1~2)

[kimsojung318]

1. Favorite Page Template 1) FavoritePage.js

   • Favorite 영화 정보 Table 생성

   2) favorite.css

2. MongoDB에서 Favortie 영화정보 가져오기 1) FavoritePage.js

   • Axios.post('/api/favorite/getFavoredMovie', { ~ 중략 }

   2) routes/favorite.js

   • router.post('/getFavoredMovie', (req, res) => { ~ 중략 } → ".find()" 사용하여 정보 가져오기

3. 데이터 화면 노출 1) FavoritePage.js

   • useState로 "Favorites" 정보 상태 관리
   • ".map()" 사용하여 화면 노출 → {Favorites.map((favorite, index) => ( ~ 중략 )}

---

4. Remove 기능 생성 1) FavoritePage.js

   • "Remove" 버튼 생성 → "onClickDelete" 메소드 생성

   • <button onClick={() => onClickDelete()}> → 삭제해야할 정보를 전달해야 DB에서 조건에 맞는 데이터 삭제가 가능

   • removeFromFavorite API 호출

   2) routes/favorite.js

   • .findOneAndDelete() 사용하여 favorite 정보 삭제

   3) 삭제 후 화면 노출

   • getFavoredMovie API 호출 부분은 메소드 분리 → fetchFavoredMovie

   • onClickDelete > removeFromFavorite 호출 부분에서 response가 존재할 경우 fetchFavoredMovie 호출

[kimsojung318]

5. 오류 1) 내용 a. Cannot read property 'map' of undefined → state 등에 있던 배열이 이동 혹은 삭제 되어 .map을 사용할 수 없는 경우 발생

   b. `Uncaught (in promise) Error: Network Error`
   
   c. `Uncaught (in promise) Error: Request failed with status code 504`
       → 프록시 프로그램에서 지정한 시간 제한을 초과해서 발생한 오류
   
   d. `Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED)   `
       → https://nodejs.org/api/errors.html#errors_common_system_errors
   
   e. "Remove" 버튼 기능 안됨

   2) 해결방법 a. routes/favorite.js : "getFavoredMovie" API → ".exec()" Parameter 오타 "favorites"

   b. server/index.js : "cors" 추가
       → `const cors = require('cors')`
       → `app.use(cors())`
   
   ※ a 오류 해결 후 b ~ d 오류 발생 일단 주석처리 함
   
   e. FavoritePage.js
       → `<button onClick={() => onClickDelete()}>` 형식 오타

[kimsojung318]

5. 오류 1) Cannot read property 'map' of undefined

   • state 등에 있던 배열이 이동 혹은 삭제 되어 .map을 사용할 수 없는 경우 발생
   • routes/favorite.js : "getFavoredMovie" API → ".exec()" Parameter 오타 "favorites"

   2) Uncaught (in promise) Error: Network Error

   • erver/index.js : "cors" 추가 → const cors = require('cors') app.use(cors())

   3) Uncaught (in promise) Error: Request failed with status code 504

   • 프록시 프로그램에서 지정한 시간 제한을 초과해서 발생한 오류

   4) Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED)

   • https://nodejs.org/api/errors.html#errors_common_system_errors

   ※ i 오류 해결 후 ii ~ iv 오류 발생 일단 주석처리 함

   5) "Remove" 버튼 기능 안됨

   • FavoritePage.js : <button onClick={() => onClickDelete()}> 형식 오타