TIL001_210319

JIYOON·2021년 3월 19일
Nomad CodersReact
0

TIL

목록 보기
1/42
post-thumbnail

TIL

🧸 감상

처음이라 재밌었다.
📙 열품타 7hour
👍 TIL 잘 정리
👎 늦게 일어남

💡 공부방법

1) 강의
2) 부족한 부분 복습/ 드릴다운
3) 1)번 복기 및 2)번 업데이트
4) 3)번 기반으로 창작
5) 반복

[강의 링크]

Nomad Coders

🚀 목표

  • 노마드코더 "ReactJS로 영화 웹 서비스 만들기" 100% 수강

  • 수강 후 복기하기

  • Udemy에서 Javascript 강좌 수강하기

  • 개발자 유튜브 통해서 공부 방향 및 팁 배우기

  • github 만들고 git push 해보기

📣 React Js로 영화 웹 서비스 만들기: 0.1-3.1

0.1 Requirements

[프로그램 설치 확인 방법]
터미널에서 프로그램명 -v 입력 + 엔터 (v:version)
예) node.JS 설치 확인법 : node -v
node.Js를 설치하면 npm이 자동으로 설치된다.
준비물: node.Js, npm, npx, git, VSC, homebrew

  • npm이란?: Node Packaged Manager,
    Node.js로 만들어진 pakage(module)을 관리해주는 툴
    -> npm을 통해 여러가지 모듈을 다운받아 사용할 수 있다! (install & run)

0.2 Theory Requirements

React 배우기 위해서는 Html+CSS+Js 지식 필요
function, variable, class, div, span, flexbox, display block, background color, return, argument, constants, let, array, object에 대한 개념이 필요하다.

0.3 Why React

페이스북이 관리.
에어비앤비. npm. 넷플릭스. 스포티파이. 슬랙 등이 사용.
프론트엔드 64%가 사용 (stateofjs.com에서 확인 가능)
리액트는 자바스크립트인 경우 많아서 리액트 사라져도 자바스크립트 개발 지식 남음

1.0 Creating your first react app

여기서 react 패키지를 통째로 다운받을 수 있다
https://github.com/facebook/create-react-app

패키지 파일을 만들어주는 명령어:
npx create-react-app movie_app_2021

  • npm은 package manager, npx는 package runner

terminal-npm start:
developement server을 시작해서 브라우저에서 보며 개발할 수 있다.

1.1 Creating a Github Repository

  • git이란?:
    프로젝트의 변경을 관리하는 버전관리(Version control) 소프트웨어
    변경사항에 대한 스냅샷을 찍어서 데이터를 보존한다.
  • repository(repo): 저장소 // commit: 커밋, 저장소의 스냅샷을 찍는 것, 프로젝트의 체크포인트를 가지는 것 // branch: branch off와 master(main directory)에 branch merge를 통해 협업

terminal에서 git init 실행

  • git init: 깃 저장소 초기화, 처음에 입력하는 것

git add 입력

  • git add: 깃이 새 파일들을 지켜보게 하는 것

git commit -m "제목"

  • git commit: 저장소의 스냅샷을 찍는다.

git push origin master

  • git push: 커밋을 깃허브에서도 온라인으로 볼 수 있게 한다.

1.2 How does react work?

React: javascript로 만들고 html로 넣는다.
virtual DOM: virtual document object model

  • virtual DOM에 대해서 검색해봤으나 나중에 자세히 읽어보기로 함.

2.0 Creating your first React Component

componant는 html을 반환하는 함수 (function returns html)
javascript와 html 사이의 조합을 jsx라고 한다

import React from 'react':
component 작성할 때마다 써줘야 함

react application은 App이라는 하나의 component만 rendering
따라서 App(main component)에 모든 component를 넣어줘야 한다

./: 같은 directory라는 의미

2.1 Reusable Components with JSX + Props

  • 이 부분은 다시 복습할 것, 확실하게 이해되지 않음 (복습하면 지우기)

재사용 가능한 component: component를 계속 반복해서 사용할 수 있다

    <Food fav="orange" />

food=component, fav=property, orange=value

food component에 정보를 보내는 법:
component의 property를 function component의 argument(인자)로 넣는다
function Food({fav}) = function Food(props.fav)
동적 데이터

component는 대문자로 시작해야 한다

2.2 Dynamic Component Generation

웹사이트에 동적 데이터를 추가하는 법
map은 function을 취해서 array의 각 item에 적용한다

  • map과 동적 데이터에 대해서 더 공부해보자(하면 지우기)
friends.map(function(friend){
return friend +"💖";})

2.3 map Recap

react는 각기 다른 element를 가져야 한다
image element는 alt prop이 있어야 한다(for blind people)

2.4 Protection with PropTypes

father component로부터 property를 제대로 전달받고 있는지 확인하는 법
: npm i prop-types 설치 (i=install)

proptypes 사용법

Food.propTypes = {
name: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired,
rating: PropTypes.number.isRequired,
}
  • 코드 복습하기 (react,map,array)
import React from "react";
import PropTypes from "prop-types";

function Food({ name, picture, rating }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <h4>{rating}/5.0</h4>
      <img src={picture} alt={name} />
    </div>
  );
}

Food.propTypes = {
name: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired,
rating: PropTypes.number.isRequired,
}

const foodILike = [
  {
    id: 1,
    name: "Orange",
    image:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.allfreschgroup.com%2Fwp-content%2Fuploads%2F2017%2F01%2FValencia-Orange.png&f=1&nofb=1",
    rating: 5.0
  }
];

function App() {
  return (
    <div>
      {foodILike.map(dish => (
        <Food key={dish.id} name={dish.name} picture={dish.image} rating={dish.rating} />
      ))}
    </div>
  );
}

export default App;

3.0 Class Components and State

  • 이 부분도 복습하고 드릴 다운

React.component는 함수가 아니기 때문에 return하지 않는다.
대신 render method를 가지고 있음
class App extends React.component -> React.component에서 extend 했기 때문에 class App에도 render method가 생긴다 ->
react는 자동으로 class component의 render method를 실행한다

function component가 아닌 class component를 사용하는 이유
: class component는 state다.
state는 object고 component의 data를 넣을 공간이 있고 이 data는 변한다

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component{
  state = {
    count: 0
  };
  add = () => {
    console.log("add");
  };
  minus = () => {
    console.log("minus");
  };
  render() {
    return (
    <div>
      <h1> The number is: {this.state.count} </h1>
      <button onClick={this.add}>Add</button>
      <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

3.1 All you need to know about State

  • 복습
  add = () => {
    this.setState(current => ({count:current.count +1}));
  };

setState를 호출할 때마다 react는 새로운 state와 함께 render function을 호출한다 (다시 render한다)

profile
JIYOON
다음 포스트

TIL002_210321

0개의 댓글