Suyeon BLOG

Node js를 이미 다운받았다는 전제 하에 시작하도록 하겠습니다. 1. Visual Studio에서 폴더 1개를 생성합니다. 2. 터미널을 열어서 경로를 생성한 폴더명으로 옮깁니다. (cd 라는 명령어를 사용하면 됩니다.) 3. 터미널에 npx create-react-app 원하는폴더명 을 입력합니다. 4. 그 다음 react를 실행하고 싶으면 npx 로 만들었던 폴더명으로 터미널 경로를 이동합니다! (마찬가지로 이것도 cd 를 사용하면 됩니다) 5. 이동을 했다면, 터미널에 npm start 를 입력해주면 됩니다. 6. 만약 오류가 나거나 제가 올린 그림처럼 똑같은 문장이 뜨지 않는다면!! https://codingapple.com/unit/react1-install-create-react-app-n..

출처: Do it! 클론 코딩 영화 평점 웹서비스 1. movie_id - moive API에서 id값이 10인 것만 출력할 수 있습니다. ex) https://~~.json?movie_id=10 2. sort_by - 기본적으로 내림차순 정렬을 합니다. ex) https://~~.json?sort_by=rating 평점(rating)을 기준으로 내림차순을 합니다. ※ 영화 평점 웹서비스 디자인은 어디서 가져온 것인가? https://dribbble.com/shots/2442798-Movie-Application Movie Application dribbble.com - 여기서 회원가입은 없기 때문에 기능에는 '영화 제목', '영화 개봉년도', '영화 장르', '영화 시놉시스', '영화 평점', '영화 ..

출처: Do it! 클론 코딩 영화 평점 웹서비스 1. 구조 분해 할당을 하지 않았을 때 2. 구조 분해 할당을 했을 때 - 점 연산자 적용한 순서대로 하면 됩니다.

React 컴포넌트 class 정의할 때 - class 형 컴포넌트를 만드는 이유는 'state를 사용하기 위함' 입니다. - React.Component를 상속받아야만 합니다. - React.Component 클래스는 약 500줄이 넘는 코드를 가지고 있습니다. - 이때 App 컴포넌트는 클래스이므로 함수가 아니라서 return 사용이 불가능 합니다. - 따라서 render() 함수를 사용해서 JSX를 반환합니다. class App extends React.Component { render() { return 컴포넌트; } } render() 함수를 구현하지 않아도 사용할 수 있는 이유 - React.Component를 상속받았기 때문입니다. state - 객체 형태의 데이터입니다. - class co..

출처 : 노마드코더 - React JS로 영화 웹 서비스 만들기 1. gh-pages 다운받기 - TERMINAL에 npm i gh-pages 입력해서 다운받습니다. - 결과물을 git hub에 올릴 수 있도록 도와줍니다. 2. 폴더에 packages.json이 있는지 확인합니다. - TERMINAL에 npm run build 하면 build라는 폴더가 생성됩니다. - 폴더 안에 여러 파일이 있는데 여기에는 우리가 사용했던 코드들이 있습니다. - build를 GitHub에 올려주면 되지만 작업을 다 한 후에 해야 합니다. 3. 올리기 전에 우선 packages.json에 작업해야할 것이 있습니다. //scripts에 작성 "scripts" : { "deploy" : "gh-pages -d build", ..

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...currentArray]); setToDo(""); }; console.log(to..

출처: 노마드코더 - React JS로 영화 웹 서비스 만들기 1. nodejs를 다운받은 후, cmd창에 node -v 와 npx 입력하기 - 이때 npm이 존재한다면, npm install npx -g 를 입력해서 npx를 다운받습니다. - 다운받으면 업데이트하라고 권장하지만 안해도 됩니다. - 다음 git을 다운받습니다. (여기서 다운 받으면 됩니다. https://git-scm.com/downloads) 2. cmd창에 npx create-react-app 생성할파일명작성 입력하기 3. 다운 후, 만든 폴더 바로 실행하고 VSC(Visual Studio Code) 열기 - workspace에 만든 폴더를 추가하면 됩니다. (철자가 틀려서 실행이 안되었던 것이었습니다. 여러분들도 조심하세요.) - ..