코딩교육7 [코딩온] SeSAC 세번째 프로젝트 회고록 1. 목표와 계획 평가 가장 하고 싶었던 검색이랑 무한 스크롤은 구현했다. 초기에 기획했던 사용자 관련 기능은 거의 구현하지 못 했다. 프론트 한 명이 다 이끌어가기에는 프로젝트에서 자잘하게 CSS나 반응형 등에서 (발표 자료까지...) 할 일이 많았기 때문이라고 생각한다. 백의 부재라는 문제를 해결함에 있어서 보완을 하는 과정에서 구글링이나 불완전한 해결 때문에 시간이 계속 소모되었었다. 또한 중간에 코딩테스트 준비로 5일을 날리고, 프로젝트에 한 번씩 걸려주는 감기 행사도 있었다. 진통제 해열제를 하루 5번 먹어서 나중에 위염까지 걸렸지만,,, 가장 아픈 날에 가장 중요한 기능과 에러를 해결했었다. 역시 살짝 아플 때 일해야(?) 잡념이 안 들어서 진행이 잘 되는 것 같기도 하다. 작은 하나의 기능이.. 2024. 1. 6. [코딩온]Image grid 형태로 Infinite scroll 기능 구현하기 먼저 전체 코드이다. import React, { useState, useEffect, useRef, useCallback } from 'react'; import { Link } from 'react-router-dom'; import axios from 'axios'; import Loading from '../Loading'; export default function Film({ year, filter }) { const [data, setData] = useState({ results: [] }); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [page, setPage] =.. 2024. 1. 3. [코딩온] TMDB API에서 genre name 대신 genreID만 나올 때 import React, { useState, useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import axios from 'axios'; import Loading from '../Loading'; export default function MovieResult({ query }) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); //전체 장르 코드 매핑 const genreMapping = { 28: 'Action', 12:.. 2023. 12. 24. [코딩온] 검색 기능 구현을 위한 TMDB API의 활용 방법 TMDB API 에는 API의 검색 방법에 대해서 세 가지를 알려준다. https://developer.themoviedb.org/docs/finding-data 1. /search ( https://developer.themoviedb.org/reference/search-movie) 일반적인 검색 기능으로 text 기반의 검색 기능이다. query string을 입력하면 가장 근접한 검색 결과를 보여준다. 하나의 영화에 대해 원본, 번역된 이름 등 모든 검색 결과를 보여준다. 하지만 성능이 아쉬운 점이 오직 '영화 제목'만 검색한다. query에 roman holiday를 치고, 원하는 언어 타입 선택 후 try it 버튼을 눌러주면 response 결과 값도 알려준다. 프로젝트 기간에 다른 API를.. 2023. 12. 21. 이전 1 2 다음
