About Computer

git repository의 모든 branch와 commit들, README까지 복제해오는 방법이다. 

복제하기 전 new_repository는 미리 생성해둬야 한다. 

$ git clone <org_repository>
$ cd org_repository
$ git remote -v
$ git remote set-url --push origin <new_repository>
$ git remote -v
$ git push --mirror <new_repository>

클라이언트, 서버, 데이터베이스에서 데이터의 흐름을 보면 다음 그림과 같다. 

예를 들어, 유저가 로그인을 하기 위해 아이디와 비밀번호를 입력하고 로그인 버튼을 누른다고 하자. 

그러면 클라이언트에서 서버로 로그인 request가 넘어가게 되고, 서버는 먼저 데이터베이스에 유저 아이디가 있는지 찾고 만약에 있다면 클라이언트에서 보내준 비밀번호가 데이터베이스에 저장된 해당 아이디의 비밀번호와 일치하는지 확인한다. 

이 때, 모든 정보가 일치하면 success로 response가 넘어가고 해당 아이디가 없거나 비밀번호가 일치하지 않을 경우에는 에러코드를 response로 넘겨준다.  

Axios

이전까지는 React JS 부분이 없어서 Postman을 이용해서 request를 보내고 response를 받았는데, 이제 클라이언트 파트를 만들었기 때문에 Axios를 사용해서 요청을 보낼 것이다. 

여기서 Axios는 jQuery에서 AJAX와 같은 것이라고 한다. 

이제 터미널 창에 cd client를 통해 client directory로 이동한 다음에 npm install axios --save를 입력해서 다운받는다. 

하지만 지금 이 상태에서 서버로 요청을 보내게 되면 서버는 5000, 클라이언트는 3000으로 서로 다른 포트 넘버(Origin)를 가지고 있어 CORS(Cross-Origin Resource Sharing) 정책에 의해 서버가 요청을 받지 못하고 에러가 뜬다.

 이를 해결하기 위한 방법으로는 

1. 개발자 도구 사용 (Chrome CORS Extension)

2. JSONP

3. Proxy

등과 같은 방법들이 있는데, John Ahn님의 노드 리액트 기초 강의에서는 Proxy를 사용한다.

Proxy

→ 클라이언트와 서버 사이에서 데이터를 전달해 주는 서버

→ 방식에 따라 클라이언트의 IP 주소가 서버에게 노출될 수도 있고 아닐 수도 있다.

Proxy Server의 기능

1. 방화벽

2. 웹 필터

3. 캐쉬 데이터, 공유 데이터 제공

Proxy Server를 사용하는 이유

1. 회사에서는 직원들, 집에서는 아이들의 인터넷 사용 제어

2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공

3. 더 나은 보안 제공

4. 이용 제한된 사이트 접근 가능

↓참고 사이트

https://create-react-app.dev/docs/proxying-api-requests-in-development/

위 참고 사이트에서 Configuring the Proxy Manually 부분을 보고 따라하면 된다.

먼저 client directory에서 npm install http-proxy-middleware --save를 하고, 

client 안에 있는 src 폴더에 setupProxy.js를 생성한다. → client/src/setupProxy.js

//setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = function(app) {

    app.use(
    
        '/api',
        
        proxy({
        
            target: 'http://localhost:5000', // 현재 server port number를 타겟으로
            
            changeOrigin: true,
            
        })
        
    );
    
};

이제 서버에 있는 index.js에 다음과 같은 코드를 추가해주고 

// index.js

app.get('/api/hello', (req, res) => res.send('안녕하세요~'))

클라이언트에 있는 LandingPage.js에 서버에 요청을 보내는 코드를 추가해준다.

// LandingPage.js 

import React, { useEffect } from 'react'; 

import axios from 'axios';


function LandingPage() { 
	
    useEffect(() => {

        axios.get('/api/hello')
        
        .then(response => { console.log(response.data) })

    }, [])

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

export default LandingPage

↓useEffect에 대한 참고 사이트

https://react.vlpt.us/basic/16-useEffect.html

그리고나서 실행시켜보면 콘솔창에 다음과 같이 '안녕하세요~'가 뜬 것을 확인할 수 있다.

Concurrently

지금까지는 서버 파트와 클라이언트 파트를 각각 실행시켜줬는데, concurrently를 이용하면 동시에 실행시킬 수 있다. 

먼저, 프로젝트 root directory에서 npm install concurrently --save를 통해 다운로드 받는다.

그런 다음에 root directory에 있는 package.json에서 scripts에 위와 같이 "dev" 부분을 추가해준다. 

이제 터미널 창에 npm run dev를 입력하면 server와 client 부분이 동시에 실행된다. 

프로그램 실행 시 발생한 오류

프로그램 실행시 위와 같은 에러가 발생했는데 해결 방법은 아래와 같다. 

client와 server 폴더로 나누면서 경로가 변경되었는데 기존 경로를 수정해주지 않아 발생한 에러였다. 

경로를 수정해주니 에러가 해결되었다. 

이제 본격적으로 client 부분의 작업이 시작된다.

그 전에 앞서, ReactJS에 대해 정리를 하자면 React는 사용자 인터페이스를 만들기 위한 Javascript 프레임워크다.

그리고 React의 특징으로는 다음 두 가지가 있다.

1. Component 기반

React는 component 기반으로, 캡슐화된 component를 조합해 복잡한 UI를 설계할 수 있다.

다시 말해 재사용성이 굉장히 뛰어나다고 할 수 있다.

2. Virtual Dom 

Virtual Dom을 설명하기 이전에 DOM에 대해 알아보면 DOM은 Doument Object Model의 약자로, 문서 객체 모델을 뜻한다. 넓은 의미로는 웹 브라우저 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다.

그렇다면 DOM(Real DOM)과 Virtual DOM의 차이점은 무엇일까?

만약 5개의 리스트가 있고 그 중 맨 앞 하나의 리스트만 변경되었다고 가정하자. 

그러면 Real DOM에서는 5개의 리스트 전부 리로드 해야한다.

하지만 Virtual DOM에서는 변경된 맨 앞의 리스트만 로드해오면 된다.

Virtual DOM에서의 과정을 보면 다음과 같다.

1. JSX를 렌더링하면 현재 상태가 메모리에 저장된다. 

2. Virtual DOM이 업데이트 되고 나면 저장된 이전의 상태와 현재 업데이트된 상태를 비교하는 diffing과정을  거친다.

3. 바뀐 부분만 Real DOM에서 변경한다.

Create-React-App

React App을 생성하기 이전에, 지금까지 작업해온 파일들은 모두 server 폴더 안에 넣어주고 새롭게 client 폴더를 만들어준다.

그리고나서 터미널 창에 cd client를 입력해 client 폴더로 이동하고 npx create-react-app . 을 입력하여 생성한다.

원래는 npm install -g create-react-app 을 입력하여 global  디렉토리에 다운받았는데, 이제는 npx를 이용하여 사용할 수 있고, 그렇게 할 수 있는 이유는 npx가 npm registry에서 create-react-app을 찾아서 다운로드 없이 실행시켜주기 때문이라고 한다. 

React App이 생성되고 나면 client 폴더 안에 있는 package.json 파일에 scripts 부분을 확인해 보면 위와 같이 작성되어 있는 것을 확인할 수 있다. 

이 script의 의미는 터미널 창에 npm run start를 입력하면 React가 실행되고, npm run build를 입력하면 build 되는 것을 의미한다. 만약 앞에 작성되어 있는 "start"를 "initiate"으로 바꾼다면 npm run initiate 명령을 통해 React가 실행될 것이다.  (client directory에서 실행시켜야 됨)

현재는 서버 파트와 클라이언트 파트를 각각 실행시켜줘야 하는데, 추후 강의 내용에서 그 둘을 동시에 실행시켜주는 방법을 적용시킬 예정이다. 

이제, client 폴더 내의 구조를 다음과 같이 변경한다. 

  _action과 _reducer → Redux를 위한 폴더

  components/views → 로그인, 회원가입 등의 페이지들

  components/views/Sections →해당 페이지와 관련된 css파일이나 component들

  App.js → Routing 관련 처리

  Config.js → 환경 변수 지정

  hoc → Higher Order Component의 약자, auth 관리

  utils → 여러 군데에서 사용될 수 있는 것들

hoc폴더에서는 다음과 같은 기능을 구현할 것이다.

페이지 생성

각 페이지 js파일에 다음과 같은 코드를 작성한다. 

// LandingPage.js

import React from 'react' 


function LandingPage() {

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

export default LandingPage

// LoginPage.js

import React from 'react' 


function LoginPage() {

	return (
    
    	<div>
        
        	LoginPage
            
	</div>
    )
}

export default LoginPage

// RegisterPage.js

import React from 'react' 


function RegisterPage() {

	return (
    
    	<div>
        
        	RegisterPage
            
	</div>
    )
}

export default RegisterPage

이때 functional component를 단축키로 생성하기 위해서는 extension을 다운받으면 된다.

위 이미지에서와 같이 좌측에 있는 블록 모양 아이콘의 Extensions 카테고리에서 es7을 검색하고 가장 상단에 뜨는 extension을 install 하면 된다.

설치가 완료되면 rfce를 입력했을 때 react functional component가 생성되고, rcc를 입력했을 때 react component class가 생성된다. 

페이지 이동

페이지 이동에는 React Router DOM을 사용하는데, 이를 위해 터미널 창에서 cd client를 하고 npm install react-router-dom --save 를 입력하여 다운로드 받는다. 

↓참고 사이트

reactrouter.com/web/example/basic

// App.js

import React from 'react';

import {
  BrowserRouter as Router, 
  Switch,
  Route,
  Link
} from "react-router-dom";

import LandingPage from './views/LandingPage/LandingPage'

import LoginPage from './views/LoginPage/LoginPage'

import RegisterPage from './views/RegisterPage/RegisterPage'


function App() {

  return (
  
    <Router>
    
      <div>

        <Switch>
        
          <Route exact path="/" component={ LandingPage } />
          
          <Route exact path="/login" component={ LoginPage } />
          
          <Route exact path="/register" component={ RegisterPage } />
          
        </Switch>
        
      </div>
      
    </Router>
  );
}

export default App;

이제 React App을 실행시켜 localhost:3000 뒤에 각각 /login, /register를 실행시켜 보면 다음과 같은 결과를 얻을 수 있었다.