노마드코더13 [ReactJS] Conclusions - ReactJS 로 영화 웹 서비스 만들기 (13) 마무리 시간!! #7.8 - 7.10 Conclusions Summary 길이 제한 영화마다 설명의 길이가 제각각이다. summary 의 길이 제한을 두어 좀 더 깔끔한 UI 를 구성하도록 해보자. 235 를 최대 길이로 잡아보겠다. {summary.length > 235 ? `${summary.slice(0, 235)}...` : summary } summary 의 길이가 235 보다 크면 slice 를 이용해 235 까지 자르고 뒤에 ... 붙여주기 summary 의 길이가 235 보다 작으면 그대로 summary 출력 결과 Breaking Change Breaking Change : 버전을 업데이트하면서 코드가 깨져서 코드를 수정 해야하는 경우 React.js 에는 없다. => 예전 코드에 기반해서.. 2021. 12. 12. [ReactJS] Publishing - ReactJS 로 영화 웹 서비스 만들기 (12) 구현한 프로젝트를 GitHub Pages 로 배포하기 #7.7 Publishing gh-pages 설치 npm i gh-pages gh-pages : 결과물을 github pages 에 업로드 할 수 있게 해주는 패키지 github 에서 제공하는 무료 서비스이다. package.json build scripts 의 build 를 이용하면 웹 사이트의 production ready code 를 생성 production ready code : 코드가 압축되고 모든게 최적화 된다 npm run build => build 폴더가 생성됨 homepage 추가 package.json 에 homepage 추가 "homepage": "https://{github username}.github.id/{github rep.. 2021. 12. 12. [ReactJS] Parameters - ReactJS 로 영화 웹 서비스 만들기 (11) 사실상 ReactJS 강의의 마지막 이론 부분이다. Parameter 를 이용해 movie 의 id 를 넘겨받아보자. #7.6 Parameters 영화의 제목을 클릭하면 해당 영화의 정보 페이지로 넘어가도록 구현해보자. 그러기 위해서 영화의 id 를 주고받아야 함 React Router 는 동적인 url 을 생성할 수 있다. 여기서 동적 이라는 의미는 url 에 변수를 넣을 수 있다는 것. 동적 url 에서 Parameter 를 이용해 정보를 넘겨줄 수 있다. 이것을 이용해서 영화의 id 를 주고받을 것이다. App.js function App() { return ( ); } Detail 컴포넌트 부분의 Route 를 보자. "/movie/:id" 의 형태를 이용하면 id 부분에 변수 넣기 가능 Home.. 2021. 12. 12. [ReactJS] React Router - ReactJS 로 영화 웹 서비스 만들기 (10) React Router 를 이용해 페이지 전환 구현하기 #7.5 React Router 영화 제목을 클릭하면 Detail 페이지로 라우팅 되도록 구현할 것이다. React-Router-Dom 설치 npm i react-router-dom@5.3.0 이번 실습을 위해서는 버전 설정을 해주지 않으면 오류가 날 수 있다. -> 버전에 따라 구현 방식이 다름 참고) 공식 튜토리얼 v5 https://v5.reactrouter.com/web/guides/quick-start Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best featur.. 2021. 12. 8. [ReactJS] Practice Movie App - ReactJS 로 영화 웹 서비스 만들기 (9) 드디어 본격적인 Movie App 만들기 시간!! #7.3-7.4 Practice Movie App 영화 정보들을 나열하기 부터 시작! 영화 정보는 https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year api 를 이용 => 평점 8.5 이상 & 년도 순으로 정렬 의 조건을 가짐 loading, movies 생성 const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); loading : 데이터 fetch 여부에 따라 변경 movies : 영화 정보 리스트 useEffect 와 getMovies const getMovies = async.. 2021. 12. 7. [ReactJS] Practice Coin Tracker & Coin Converter - ReactJS 로 영화 웹 서비스 만들기 (8) 이번 시간에는 저번에 이어서 두 번째 실습인 Coin Tracker 를 만들어 볼 것이다. 저번에 useState 실습을 해봤다면 이번엔 useEffect 실습이 될 것이다. #7.2 Practice Coin Tracker 데이터 업로드 전 로딩 기능을 추가하고 로딩이 완료되면 코인 리스트를 쭉 보여줄 것이다. 코인 리스트는 https://api.coinpaprika.com/v1/tickers api 이용 loading, coins 생성 const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); loading : 로딩 상태 여부 coins : 코인 리스트 useEffect 로 데이터 fetch useEffect.. 2021. 12. 7. 이전 1 2 3 다음
