jineecode

개요: A 컴퓨터에서 작업해서 푸쉬한 git을 B 컴퓨터에서 이어 작업하기 위해 알아봄. 1. B 컴퓨터에 작업을 이어받을 폴더를 만들고 vscode로 열어 터미널을 열어줌. 2. 이어서 작업할 git hub HTTPS url을 복사함. 3. git clone "복사한 url" 잠시 뒤 클론 된다. 4. 현재 상태는 vscode의 맨 바깥쪽 폴더가 열린 것이므로 한 층 더 안쪽 폴더로 들어가야 한다. cd \ 생성했던 폴더 이름 *여기서 cd는 change directory 라는 뜻으로, 해당 폴더로 디렉토리를 변경(이동) 한다는 뜻이다. 이렇게 해주지 않으면 파일을 아무리 수정해도, .git이 클론된 폴더 내부에 있기 때문에 git이 찾을 수 없다. (.git이 없다는 말만 보고 git init을 해줘..

import React from "react"; class App extends React.Component { state = { isLoading: true }; render() { return {this.state.isLoading ? "Loading" : "We are Ready"}; } } export default App; /// {this.state.isLoading ? "Loading" : "We are Ready"} 이것은 ES6 문법으로 바꿔 써볼 수 있다. class App extends React.Component { ... render() { const { isLoading } = this.state ; return {isLoading ? "Loading" : "We are Read..

react class component는 render가 아닌 다른 메서드도 가지고 있다. 이름하여 life cycle method 이다. react가 component를 생성하거나 없애는 방법이다. component가 생성될 때 render 전에 호출되는 몇 가지 기능이 있다. render 후에 호출되는 기능도 있다. *mouting 1. constructor(): js에서 온 것. class를 만들 때 호출되는 것이다. import React from "react"; class App extends React.Component { constructor(props) { super(props); console.log("constructor"); } state = { count: 0 }; add = () =..

class App extends React.Component{ } React class component에서 가져오고 있음. function이 아니기 때문에 return을 가지고 있지 않음. render method를 가지고 있음. extends > react가 가진 컴포넌트를 app에 상속해준다고 보면 된다. class App extends React.Component{ render() { return Im a class component; } } render : App의 렌더가 어떻게 표시해줄 것인지 결정해주는 메서드. 바로 만들어 주는 것이 아닌, '이렇게 만들겠다' 라고 보면 된다. function component와 class component의 차이 :function component는 fun..

내가 전달받은 props가 내가 원하는 prop인지 확인하는 도구. 터미널에 npm i prop-types 를 해준다. 잘 설치됐는지 확인하는 방법은 package.json 파일에서 prop-types 가 있는지 확인한다. 본격적으로 prop를 검사하는 코딩을 넣어 확인해보자. import React from "react"; import PropTypes from "prop-types"; const foodILike = [ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { id: 2, name: "Samgyeopsal", image: "https:/..

1. 컴포넌트에 prop name과 value를 주기. import React from 'react'; function Food() { return I love potato } function App() { return ( hello! ); } export default App; 은 HTML 구조와 몹시 유사하게 생겼다. 꼭 name이 아니어도 괜찮다. import React from 'react'; function Food() { return I love potato } function App() { return ( hello! ); } export default App; fav라는 이름의 프로퍼티를 김치라는 value로 준 것. 당연히 이런 식으로도 된다. function App() { return ..

1. 컴포넌트 ReactDOM.render( , //△컴포넌트를 사용하고자 할 때 컴포넌트의 형태 document.getElementById('here') ); 컴포넌트 을 App처럼 사용할 수 없다. 이러한 형태는 리액트로 동작하지 않는다. 2. component는 HTML을 반환하는 함수이다. function App() { return ( hello! ); } App() 함수는, HTML을 반환return한다. 3. js와 html 사이의 이러한 조합을 우리는 jsx 라고 부른다. react에서 나온 개념이다. 4. 컴포넌트를 작성할 때마다, import React from "react"; 를 써준다. 대소문자를 꼭 구분하자. 이것을 하지 않으면 react는 jsx가 있는 컴포넌트를 사용하는 것을 이..

1. src\App.js App.js 에 hello 를 넣으면 2. public\index.html public\index.html의 HERE! 자리에 hello 가 들어간다. 3. src\index.js 이 원리는 src폴더의 index.js에 담긴 코드가 렌더해주기 때문이다. 당연히, document.getElementById('root') 의 root를 변경해주면 에러가 뜬다. 관리자 도구에는 hello가 있는 것처럼 보이지만, 실제로 소스코드를 확인해보면 없다. *이것이 바로 react 가 빠른 이유다. react는 소스코드에 바로 html을 넣지 않고 html에서 html을 추가하거나 제거하는 법을 알고 있다. *virtual DOM 이다. github.com/uhj1993/movie_app_2..