React study/React JS로 영화 웹 서비스 만들기33 [React] 7-7. React 앱 배포하기 📌 배포하기 📍 gh-pages - 우리가 만든 결과물을 github에 업로드 할 수 있게 해주는 패키지 1. 다음과 같은 명령어를 입력하여 패키지를 설치한다. npm i gh-pages이제 gihub에 html, css, javascript로 된 파일을 올리면 그것을 사이트로 만들어서 배포해 준다. 도메인 또한 가지게 된다. 2. package.json에 있는 build라는 script를 확인한다. 위 script를 실행하면 우리 웹사이트의 production ready code를 생성하게 된다. 이것은 코드가 압축되고 최적화된다는 의미이다. 3. 프로그램을 압축하고 최적화하는 과정을 거친다. 터미널에 다음과 같은 코드를 입력한다. npm run build위와 같은 과정을 거치면 build라는 폴더가 .. 2023. 6. 7. [React] 7-6. React로 영화 앱 만들기 (4) (dynamic URL 사용해보기) 📌 다이나믹 url 사용해보기 React Router에서는 다이나믹(동적) url을 지원해준다. ✔️ 다이나믹 url url에 변수를 넣는 경우를 말한다. ex) http://localhost:3000/movie/12 에서 12 주목! 우리는 user가 어떤 영화의 제목을 클릭하면 http://localhost:3000/movie/{특정 movie의 id} 로 주소를 이동하는 코드를 작성해 볼 것이다. 그러기 위해서는 아래와 같이 route에서 path를 수정한다. function App() { return ( // 주목! ..... Detail 컴포넌트를 보여주는 path에 '/movie/:id'라고 적어주었는데, :id라고 적을 경우 그 자리에 1이든 2든 우리가 원하는 무엇이든지 그 .. 2023. 6. 7. [React] 7-5. React로 영화 앱 만들기 (3) (Router 사용해 보기) 📌React Router를 사용하는 방법 1. react router 튜토리얼에서 다음과 같은 코드를 복사해 App.js 파일의 윗부분에 붙여넣는다. import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; App 컴포넌트에는 Router 컴포넌트와 Routes 컴포넌트를 작성한다. 우리는 지금 누군가가 만들어 놓은 컴포넌트를 가져다 사용하는 중이다. Switch 컴포넌트는 Route를 찾는 역할을 한다. Route 컴포넌트에서는 원한다면 여러개를 렌더링하는 것이 가능하다. 하지만 우리는 하나의 Route만 렌더링되길 원하므로 Switch 컴포넌트를 사용한다. but 지금 버전에서는 Switch를 사용하지 않게 되어 있으므로 대.. 2023. 6. 7. [React] 7-4. React로 영화 앱 만들기 (2) (Router 알아보기) 📌 React.js 앱에서 페이지 전환하기 🙂 목표: 영화 제목을 누르면 다른 페이지로 이동하게 만들 것이다. 1. 이전 시간에 작성한 코드를 깔끔해 보이도록 정리한다. (props 사용) 1-1. component를 만들 수 있다는 React의 장점을 이용하여 loading이 끝났을 때 영화를 화면에 보여주는 부분은 따로 컴포넌트를 만들어 사용하도록 하였다. Movie.js 파일을 새로 만들어 Movie 컴포넌트를 작성한다. Movie component는 그냥 Movie라고 불리는 함수일 뿐이다. function Movie({ coverImg, title, summary, genres }) { return ( {title} {summary} {genres.map((g) => ( {g} ))} ); } .. 2023. 6. 7. 이전 1 2 3 4 ··· 9 다음
