반응형 Project/REACT23 23 - 영화 앱 깃허브에 배포하기 - 프로젝트 끝 - package.json 파일 수정하기 깃허브 주소를 영화 앱이 인식할 수 있도록 package.json 파일 수정. homepage 키와 키값을 browserslist 키 아래에 추가 깃허브 계정과 저장소 이름 주의하지. package.json 을 보자. 스크롤 내려 젤아래쪽에 browserslist 찾는다. "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, // 여기 쉼표 잊지말기 "homepage": "https://계정명.github.io/.. 2020. 12. 25. 22 - 영화 앱에 기능 추가하기 (3) - 마지막. 1. 리다이렉트 기능 만들기 리다이렉트 기능을 위해서는 route props 의 history 키를 활용한다. history 키에는 push, go, goBack, goForward 와 같은 키가 있다. 이 키들은 URL을 변경해 주는 함수들이 들어있다. - history 키 살펴보기 앱 실행후 개발자 도구 console탭에 history에 출력된 값을 펼쳐보자. push, go, goBack, goForward 키가 보인다. 지정한 URL로 보내주는 push() 함수를 사용한다. 그전에 Detail 컴포넌트를 클래스형 컴포넌트로 변경한다. 그래야 componentDidMount() 생명주기 함수를 사용해 Detail 컴포넌트가 마운트 될 때 push() 함수를 실행한다. - Detail 컴포넌트 클래스.. 2020. 12. 25. 21 - 영화 앱에 기능 추가하기 (2) 1. 내비게이션 만들기 - Navigation 컴포넌트 만들기 components 폴더에 Navigation.js 파일 만든다. import React from 'react'; function Navigation() { return ( Home About ); } export default Navigation; 이대로 Navigation 컴포넌트를 App 컴포넌트에 포함시키면 문제가 생긴다. - Navigation 컴포넌트 App 컴포넌트에 포함시키기 App.js 를 보자. Navigation.js를 임포트 하고, 사이에 포함시킨다. . . import About ... import Navigation from './components/Navigation'; // 여기 추가 function App() {.. 2020. 12. 24. 20 - 영화 앱에 기능 추가하기 1. react-router-dom 설치하고 프로젝트 폴더 정리 Home과 About 메뉴 만든다. Home 은 영화 앱으로 이동. About 는 개발자 소개 화면으로 이동. 화면 이동하려면 라우터가 필요하다. - react-router-dom 설치 터미널에서 코드 블록과 같이 입력한다. npm install react-router-dom 만약 안될시 sudo npm install react-router-dom - components 폴더에 Movie 컴포넌트 옮기기 Movie 컴포넌트 부터 자리를 마련한다. src 폴더 안에 components 폴더를 만든다. Movie.js와 Movie.css 를 components 로 옮긴다. 만약 vs코드에서 업데이트를 물어보면 No를 누른다. 아래 사진에 com.. 2020. 12. 23. 이전 1 2 3 4 ··· 6 다음 반응형
