TIL003_210322

JIYOON·2021년 3월 22일
Nomad CodersReact
0

TIL

목록 보기
3/42
post-thumbnail

TIL

🥸 감상


📙 열품타 11hour
👍🏼 5시부터 일어나서 공부함, 노마드코더 100% 수강, Udemy 강좌 수강 시작
👎🏼 -

🚀 목표

  • 노마드코더 "ReactJS로 영화 웹 서비스 만들기" 100% 수강 (완료일:0322/복습필요)
  • 수강 후 복기하기
  • Udemy에서 Javascript 강좌 수강하기 (19/682)
  • 개발자 유튜브 통해서 공부 방향 및 팁 배우기(적당히 완료)
  • React 자습서 공부하기 (나중에)

💡 발견!

Surfit.io: 개발자 및 디자이너 지식 플랫폼
Page Ruler Redux: css px 입력할 때 도움되는 확장 프로그램
Color by Fardos: css color 입력할 때 도움되는 확장 프로그램
CodePen: Online Code Editor and Front End Web Developer Community
Prettier Now
Bracket Pair Colorizer
Live Server

  • mac 창 전환: cmd+'
  • mac 탭 전환: cmd+숫자

[복습법]

1) 소스코드 페이지 댓글과 강의 댓글 같이 보기(완료)
2) 같은 서비스 만들어보기 (음악 웹 서비스)

[링크 목록]

Nomad Coders
React component
Design inspired (by Alex Banaga)
Create React App
DOM explanation (by Kimbug)
Library and framework (by 망나니개발자)
Styled Component (by NomadCoder) -아직 안 봄-
React Router
The Web Developer Bootcamp 2021

📣 React Js로 영화 웹 서비스 만들기: 4.2-6.4

4.0 Fetching Movies from API

[axios install]

npm i axios

  • API

    프로그램과 또 다른 프로그램을 연결해주는 일종의 다리, '직방'도 국가공공 API를 토대로 만들어진 서비스.

[YTS proxy API]

https://yts-proxy.now.sh/list_movies.json

  • Query

    데이터베이스에 정보를 요청하는 것

  • DOM(Document Object Model)

    브라우저에 기본적으로 내장돼 있는 API
    웹에서 말하는 document란 html, object는 객체(javascript의 자료형 중 하나)
    ->DOM이란 html을 object로 모델링했다 : html을 javascript도 이해할 수 있는 객체로 만든다.

  • jQuery

    library, framework. browser vendor들마다 다른 browser을 호환시켜줌

  • library 와 framework의 차이


    <프레임워크에는 제어의 역전이 적용돼 있다>
    Framework와 Library의 차이는 Flow(흐름)에 대한 제어 권한이 어디에 있느냐의 차이. 프레임워크는 전체적인 흐름을 자체적으로 가지고 있으며, 프로그래머가 그 안에 필요한 코드를 작성하는 반면에 라이브러리는 사용자가 흐름에 대해 제어를 하며 필요한 상황에 가져다 쓰는 것.

4.1 Rendering the Movies

[async와 await]

  getMovies = async () => {
    const moives = await axios.get("프록시 주소")};
  componentDidMount() {
    this.getMovies();

component Mount-> getMovies function 호출 -> axios.get("")이 실행될 때까지 기다린다 (async&await 사용)

  • Javascript 비동기 처리

    동기 : 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행(ex.은행)
    비동기 : 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행(ex.카페)

  • const

    블록 범위의 상수를 선언, 재할당, 재선언 불가

  • setState

    setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.
  state = {
    isLoading: true,
    movies: []
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies }
      }
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    this.setState({ movies, isLoading: false });
  };

하나의 setState에서 state에 있는 두 개의 상태(movies, isLoading)를 변경한다

 render() {
    const { isLoading, movies } = this.state;
    return (
      <section className="container">
        {isLoading ? (
          <div className="loader">
            <span className="loader__text">Loading...</span>
          </div>
        ) : (
          <div className="movies">
            {movies.map(movie => (
              <Movie
                key={movie.id}
                id={movie.id}
                year={movie.year}
                title={movie.title}
                summary={movie.summary}
                poster={movie.medium_cover_image}
                genres={movie.genres}
              />
            ))}
          </div>
        )}
      </section>
    );
  }
  • 코드가 이해가 되지 않으면 역순으로 차근차근 보면 괜찮은 것 같다.

4.3 Adding Genres

map에 있는 각각의 item은 key가 필요하다. map function에서 다음과 같이 제공(id 없을 때 사용): map function's another argument
-> item & item number(index, current item number)

<li key={index} className="genres__genre"> {genre} </li>

4.5 Cutting the summary

<p className="movie__summary">{summary.slice(0, 180)}...</p>

5.0 Deploying to Github Pages

1) terminal에서 npm i gh-pages 입력:

github에 웹사이트 업로드하는 모듈

2) package.json에 추가

"hompage": "https://{username}.github.io/{name of project in github}/"

3) package.json-script에 추가

  "scripts": {
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"

deploy 호출할 때마다 predeploy를 먼저 호출한다
deploy는 build 폴더를 업로드한다

4) terminal-

npm run build

-> build 폴더 생성, css와 js 파일 최소화

  • deploy 안 되는 문제 해결

  "scripts": {
    "deploy": "gh-pages -b master -d build"

server 죽이기: ctl+c

6.0 Getting Ready for the Router

npm intall react-router-dom

components와 router 폴더 생성

6.1 Building the Router

App.js에서 원하는 만큼의 path를 만들 수 있다.

import React from "react";
import { HashRouter, Route } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Detail from "./routes/Detail";
import Navigation from "./components/Navigation";
import "./App.css";

function App() {
  return (
    <HashRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
      <Route path="/movie/:id" component={Detail} />
    </HashRouter>
  );
}

export default App;

두 개의 컴포넌트가 동시에 렌더링되는 것을 막기 위해서 다음을 첫번째 route에 추가한다.

exact={true}

6.2 Building the Navigation

Navigation.js 파일에 다음과 같이 입력

function Navigation() {
  return (
    <div>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </div>
  );
}

-> 하지만 이렇게 하면 페이지 이동할 때마다 새로고침 됨 -> html이기 때문
-> Link를 사용해 보면? (Link는 Router 안에서만 쓸 수 있다)
"Link" corresponds to "HTML a" when we control this through css codes

function Navigation() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

BrowserRouter은 주소의 '#/'이 사라지지만 github page 설정이 조금 힘듬

6.3 Sharing Props Between Routes

Router에 있는 모든 route들은 prop를 가진다. (history, location, match, staticContext를 기본값으로 갖는다)

Movie.js의 return에 다음과 같이 추가하면
/movie/${id} 페이지로 해당 porps를 보낸다

      <Link
        to={{
          pathname: `/movie/${id}`,
          state: {
            year,
            title,
            summary,
            poster,
            genres
          }
        }}
      >

6.4 Redirecting

[user을 홈으로 redirect시키기]

  componentDidMount() {
    const { location, history } = this.props;
    if (location.state === undefined) {
      history.push("/");
    }
  }

📣 The Web Developer Bootcamp 2021: 1.1-3.19

[Some advice]

  1. Do all the exercises!
  2. Don't just copy! (Watching a couple of Gordon Ramsay videos online doesn't make me a chef)
  3. Take your time! (Don't rush, slow down and focus on practicing the concepts)
  4. Don't panic! (Don't panic, It's normal. Do not spin your wheels in the mud, take a break.)
  5. Take breaks!

2.12 Intro to the Web

Internet

network of networks, Infrastructure that enables many things, including the worldwide web

URL

Resources and documents are identified by urls(uniform resource locators).

Web browser

Allows us to request and view Web resources.

HTTP

Documents are transferred via HTTP. Foundation of communication on the World Wide Web. Request and Response

Web server

A computer(or the software running on the computer) that can satisfy requests on the Web.

Client

The computer(the device) that accesses a server

2.13 The request/Responce Cycle

browser

Job of the browser is to display or to render content for the client.
client: ask for the webpage(sending request)-> client got a response that is the instructions for the Web page-> Browser take the instructions.-> Browser builds the webpage.

그렇다면 instruction이란? :
웹페이지에서 오른클릭-페이지 소스 보기 했을 때 나오는 것! 그리고 우리가 배울 것!!

2.14 Front-End and Back-End

Back-End: Python, C, Java
Front-End: HTML, CSS, Javascript

2.15 What do HTML/CSS/JS do?

The purple Dino Danced
purple : css - adjectives
dino : HTML - nouns
danced : JS - verbs

3.18 What matters in this section

3.19 Introduction to HTML

HTML is a markup language
HTML Elements(요소): 태그들을 이용해서 만들어낸 웹페이지의 구성요소
ex) 

<p> KEEPCALM </p>

HTML Tags(태그): 시작태그(opening tag) & 종료태그(closing tag)
ex) 

<p>, </p>, <h1>, </h1> ...
profile
JIYOON
이전 포스트

TIL002_210321

다음 포스트

TIL004_210323

0개의 댓글