[7/26] 1차 스터디 7일차

🌱  [인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의 

 

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의

 

 

 # boiler-plate 만들기 (#17 ~ #22)

 

 

18. npm   vs.   npx

 

npm (node package manager)

1) 라이브러리들은 담고있는 레지스트리 역할

2) 어플리케이션을 켤 때 / 빌드시킬 때

3) npm에 관한 것은 package.json에 다 정의가 되어있음

4) npm install 시 -g를 하지않으면 local로 다운받는것

 

원래 create-react-app을 할때 npm install -g create-reate-app 이렇게 해서 global 디렉토리에 다운받았음

-> 이제는 npx를 이용해 create-react-app을 다운받지않고 node레지스트리에 있는걸 가져와서 쓸수 있게 된 것

-> disk space를 낭비하지않음 / 항상 최신 버전을 사용할 수 있음

 

 

 

19. Create React App 구조

 

CRA 실행하기

cd client

npm run start

React App 첫 실행화면

 

App.js가 랜더링되서 나온게 위 화면 -> index.js에서 App컴포넌트를 render

-> pubilc/index.html에 있는 <div id="root"></div>에 render됨

 

webpack이 관리하는 부분은 src폴더

-> public폴더는 webpack이 관리 안해줌

-> img파일 등을 넣을때는 src폴더에 넣어야 webpack이 관리해줄 수 있음

 

 

 

20. CRA to Our Boiler-plate

 

-  CRA 다운로드 후 client 관련 폴더구조

=====================

ROOT

└  📁 client

    └  📁 node_modules

    └  📁 public

        └  index.html

        └  favicon.ico

    └  📁 src

        └  App.css

        └  App.js

        └  App.text.js

        └  index.css

        └  index.js

        └  logo.svg

=====================

 

-  우리가 만들 Boiler-plate의 client 폴더 구조

=====================

ROOT

└  📁 client

    └  📁 node_modules

    └  📁 public

        └  index.html

        └  favicon.ico

    └  📁 src

        └  📁 _actions

        └  📁 _reducers

        └  📁 components

            └  📁 views

        └  App.js

        └  Config.js

        └  App.css

        └  📁 hoc

        └  📁 utils

        └  index.css

        └  index.js

=====================

 

*  📁 _actions, 📁 _reducers 는 Redux를 위한 폴더

*  📁 components / 📁 views 에는 Page들을 넣음

*  App.js 는 Routing 관련된 일을 처리

*  Config.js 는 환경변수 등을 설정하는 곳

*  📁 hoc 는 Higher Order Component (고차 컴포넌트) : 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수

    참고: https://ko.reactjs.org/docs/higher-order-components.html

*  📁 utils 는 여러군데에서 쓰일 수 있는 것들을 넣어둬서 어디서든 쓸 수 있게 해줌

 

위와 같은 구조로 폴더 생성 후 views 폴더에 아래 5가지 폴더 및 파일 생성하기

Footer/Footer.js

LandingPage/LandingPage.js

LoginPage/LoginPage.js

NavBar/NavBar.js

RegisterPage/RegisterPage.js

 

각 js파일에는 functional component 작성

(ES7+ React/Redux/React-Native snippets 라는 확장프로그램 사용하면 단축키로 간단하게 작성 가능)

// LandingPage.js

import React from 'react'

function LandingPage() {
  return (
    <div>LandingPage</div>
  )
}

export default LandingPage

 

 

 

21. React Router Dom

 

React Router DOM ?

참고: https://v5.reactrouter.com/web/example/basic

 

client 경로에서 npm install react-router-dom --save

 

공식문서를 참고하여 App.js 작성

// App.js

import {
  BrowserRouter,
  Route,
  Routes
} from "react-router-dom";

import LandingPage from './components/views/LandingPage/LandingPage'
import LoginPage from './components/views/LoginPage/LoginPage'
import RegisterPage from './components/views/RegisterPage/RegisterPage'


function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
      </Routes>
    </BrowserRouter>

  );
}

export default App;

! 강의 내용은 React Router v5를 기준으로 진행되기 때문에 현재시점 기준 최신 버전인 v6로 진행할 시 오류 발생

따라서 강의에서 진행하는 코드를 위와같이 수정해줘야 오류없이 실행 가능

참고 (React Router v6 업데이트 내역) : https://reactrouter.com/docs/en/v6/upgrading/v5

 

 

 

22. 데이터 Flow & Axios

 

                 <---------------              <------ Request --------- 

Database                        Server                                    Client

                 ---------------->             -------- Response ------>

 

 

axios 다운로드

npm install axios --save

axios는 jQuery의 ajax 같은 거

 

 

 

23. CORS 이슈, Proxy 설정

 

Server ( localhost:5000 )

Client ( localhost:3000 )

 

-> 다른 두 개의 포트를 가지고 있는 서버는 아무런 설정없이 Request를 보낼 수 없음

-> CORS(Cross-Origin Resource Sharing)정책 때문에 / 보안을 위해서

-> 해결하는 방법은 여러가지인데 여기서 우리는 Proxy를 사용하는 방법으로 해결

 

23강부터 다시듣기...