사과하는 제라스

현재 만든 웹페이지에 인터랙션을 활성화시켜보자. 1) 네비게이션 바 기능을 한번 구현해보도록 하자. react-router-dom (네비게이션을 만들어주는 패키지) 을 사용해보도록 하자. 먼저 다음 명령어로 react-router-dom을 설치하자. npm i react-router-dom 2) src에 components와 routes라는 이름의 폴더를 하나씩 만들자. 이후 Movie.css, Movie.js 파일을 components폴더로 옮겨주자. 3) routes폴더에는 Home.js와 About.js라는 파일을 만들어서 2개의 라우터를 생성하자. Home.js는 영화를 보여주는 페이지이고 About.js는 영화 하나에 대한 about페이지가 될 것이다. Home.js의 기능은 현재 우리가 App..

코드를 Cloud에 올릴 것임. 1) 다음 명령어로 gh-pages를 설치함. gh-pages는 웹사이트를 github의 github page 도메인에 나타나게 해준다. npm i gh-pages 2) package.json에 다음과 같이 homepage를 추가함. "homepage": "https://yoondj98.github.io/movie_app/" 3) build를 run해서 build폴더를 생성하고 우리는 그 폴더를 github에 올릴 것임. 다음과 같이 build를 실행하면 build폴더를 생성할 수 있음. 이것을 deploy의 이전 과정인 predeploy에 설정해줄 것임. package.json의 scripts에 deploy와 predeploy를 추가함. npm run build "scr..

1) JavaScript에서는 주로 data를 fetch하기 위해서 fetch 함수를 사용했지만 React에서는 더욱 좋은 함수인 axios를 사용하면 좋다. axios는 일종의 fetch 위에 있는 작은 layer이다. 일단 axios를 사용하기 위해서 axios를 설치하자. npm i axios 2) axios를 통해서 yts라는 영화 페이지에서 영화에 대한 데이터들을 가져올 것임. yts라는 사이트에서 맨밑에 있는 API라는 란에서 movie list에 대한 주소를 긁어오면 되는데 이 사이트가 URL이 자주 바뀜(불법 다운로드 사이트인가 봄.) 그래서 이러한 변화를 적용해주는 방식으로 만들어둔 주소인 다음 URL을 사용할 것임. https://yts.mx/api/v2/list_movies.json ..

state는 보통 동적 데이터(변하는 데이터, 존재하지 않는 데이터)를 이용해서 작업할 때 만들어진다. 이번 Chap에선 props가 아닌 state에 중점을 맞춰서 배울 것임. 1) Food 컴포넌트와 관련된 것들은 이젠 지워도 된다. 또한 App 컴포넌트 또한 이제는 function 컴포넌트가 아닌 class 컴포넌트 형태로 쓸 것이다. 1. foodILike 삭제 2. Food 컴포넌트 삭제 3. Food.propTypes 삭제 4. function App을 삭제 후 다음과 같이 class App 작성 class App extends React.Component{ render(){ return Hi, it's a class Component! } } 여기서 React.Component를 extend..

React에서 어떻게 작동을 하는지가 아닌 어떻게 보여주는지에 대해서 알아볼 것임. 에서 다음 부분의 가 HTML처럼 보이지만 사실 HTML이 아니다. 이것이 Component(컴포넌트)이다. ReactDOM.render(, document.getElementById('potato')); ㄴ이때 대신 App을 쓸 수는 없다. React는 컴포넌트가 HTML의 역할을 하게 할때 사용하기 때문이다. 이때 JavaScript와 HTML 사이의 조합을 JSX라고 한다. (ex) function Potato(){......}) 이 개념이 React의 유일한 custom한 기능이다. (나머지는 대부분 Javascript에서 배운걸 쓰는 것이다.) 에서 다음 부분은 App 컴포넌트인데 보이다시피 컴포넌트는 HTML을..

1. npx로 CRA(Create-React-App) 설치 콘솔창에 다음 명령어 입력. npx create-react-app movie_app npx란? 더보기 최근 npm으로 설치하는 모듈들은 자바스크립트 개발시 사용하는 단순한 모듈 라이브러리의 개념을 넘어 Tool 그 자체의 성격도 지니게 된 듯하다. INTRO에서 언급한 CRA나 vue-cli 처럼 프로젝트 생성도구 처럼 말이다. 그리고 사실 실제 개발이나 테스트를 하다보면 global 설치보다는 devDependency에 설치하는 경향이 더 많은 것 같다. 그리고 하루가 멀다하고 개선되고, 업데이트되는 이런 툴이나 의존성 라이브러리들을 한번 전역으로 설치해 PC에 남기고, 변경사항이 있으면 다시 삭제 후 설치하는게 번거로울 수 있다. 그리고 테스..

ReactJS를 시작하기 전에 필요한 설치 프로그램들과 그에 대한 설정을 다룰 것임. 1. NodeJS 설치 1) NodeJS 홈페이지에서 설치 2) 콘솔창에서 node -v 로 NodeJS 설치 여부 확인 + npm -v 로 npm 설치 여부 확인 2. npx 설치 콘솔창에 다음을 입력하여 npx를 설치 npm install npx -g 3. VSC 설치 4. git 설치 https://git-scm.com 에서 git 설치 이후 설치 여부 확인을 위해 콘솔창에 git -v 로 git 설치 여부 확인