(2.3) Implementing React_ Redux 사용하기. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고

(2.3) 2.2에 이어서 진행하는 implementing React_ Redux 사용하기 입니다.

(20) /leadmanager/frontend/src/components/layout/Header.js 작성

components 폴더 내에 layout 폴더를 생성하고 layout 폴더 내에 Header.js 파일을 생성 및 작성해 줍니다.

- 여기서 우리는 Redux를 사용할 필요가 있습니다.
- VS(Visual Studio.비쥬얼 스튜디오.다운로드)와 같은 IDE(Integrated Development Environment.통합 개발 환경) 등을 사용중이라면 다음과 같이 IDE 내에서 설치가 가능합니다. 검색해 보시면 됩니다!
- MS Link: https://marketplace.visualstudio.com/items?itemName=dmeenhuis.es7-react-js-snippets-with-semicolons

ES7 React/Redux/GraphQL/React-Native snippets (with semi-colons) - Visual Studio Marketplace

- 저는 개인적으로 Intellij IDEA 를 매우 좋아하고 선호하기 때문에 이렇게 찾아 보았습니다.
- 링크: https://plugins.jetbrains.com/plugin/10113-react-snippets/versions

React snippets - Plugins | JetBrains

- 결국 스크립트 작성을 쉽게 해 주는 tool입니다. 그래서 설치 하고 안하고는 여러분의 자유입니다.
그러면 다시 Header.js를 작성해 볼까요?

// Header.js
import React, { Component } from 'react'

export class Header extends Component {
	render() {
    	return(
        	<div>
            
            </div>
        )
    }
}

export default Header

- 위와 같이 작성을 하거나 다음과 같이 Redux를 활용하여 작업시간을 대폭(진짜 엄청나게!!) 단축시킬 수도 있습니다.
- 다음과 같이 rce(의미: React Component) 만 입력하면 generate 메세지가 나오고 키보드의 Tab 키를 입력해 주면 바로 하나의 form이 완성됩니다.

 여기서 Tab 키를 입력해 줍니다.

 

 

 

 

 

 

 

- 그리고 코드 내의 <div> </div> 가 있던 자리에( div 는 지워준다. )에 bootstrap 코드를 넣어줍니다.
- react에선 class를 쓸 수 없으니 className으로 바꿔 줘면 좋습니다.
- IDE에선 같은 문자를 문서 작업할 때와 같이 한 번에 수정이 가능합니다.(예: VS 는 ctrl+D 로 다중선택 가능)

// Header.js
import React, { Component } from 'react'

export class Header extends Component {
	render() {
    	return(

            // Bootstrap의 Toggler code를 넣어줍니다.
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>
  <div className="collapse navbar-collapse" id="navbarTogglerDemo01">
    <!-- <a className="navbar-brand" href="#">Hidden brand</a> -->
    <!--Lead Manager라고 이름을 바꿔줘 보아욥!-->
    <a className="navbar-brand" href="#">Lead Manager</a>
    <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
      <li className="nav-item active">
        <a className="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href="#">Link</a>
      </li>
      <li className="nav-item">
        <a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form className="form-inline my-2 my-lg-0">
      <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

        )
    }
}

export default Header

- 그리고 줄 정리도 한번 해 주시면 좋아요!!
- 다음으로는 쓰지 않을 코드는 지워 주세요.
- 수정을 해 줘도 좋구요.

// Header.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
export class Header extends Component {
	render() {
    	return(
         <nav className="navbar navbar-expand-sm navbar-light bg-light">
			<button 
				className="navbar-toggler" 
				type="button" 
				data-toggle="collapse" 
				data-target="#navbarTogglerDemo01" 
				aria-controls="navbarTogglerDemo01" 
				aria-expanded="false" 
				aria-label="Toggle navigation">
			  <span className="navbar-toggler-icon"></span>
			</button>
				<div className="collapse navbar-collapse" id="navbarTogglerDemo01">
  					<a className="navbar-brand" href="#">Lead Manager</a>
   						<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
   						</ul>    					
 				</div>
		</nav>
       );
   }
}
export default Header;

(21) /components/App.js 파일 수정

- 다음의 코드를 추가해 Header를 호출하고 적용하면 됩니다.

import Header from './layout/Header';

 

(22) dev 실행하기

- 다음의 명령어를(cli.가상환경) 실행시켜 주세요.

$ npm run dev

결과

- 이렇게 위와 같이 Lead Manager라 적혀 있는 Header 를 가지게 되었습니다.

(23) 문제 발견하기!
- 이렇게 까지 했는데 절대 끝이 아닙니다. 여기서 발생하는 문제가 있습니다. 다음의 코드와 이미지로 설명할게요.

App.js 내의 코드중 UI의 글자와 같은 것을 수정을 해 준다고 해서 바로 반영되지는 않습니다.

App.js 수정 // Lead Manager => Lead Managers 로 수정

- 그리고 브라우저를 봐도 변화는 없습니다.

- 변화를 보려면 수동적으로라도 명령어 [ $ npm run dev ] 를 입력해 줘야 합니다.
- 그렇게 어려운 일이 아니지만 이런 서비스를 제공할 때 조금이라도 작업시간을 단축시킨다면 정말 좋겠죠? 
- 1초의 시간도 돈으로 살 수는 없습니다.
- 이런 번거로움이 문제점으로 발생합니다. 그러면 이 문제를 해결해 보도록 할까요?

이 문제의 해결은
(2.4) 에서 다뤄보도록 하겠습니다!!! // Watch option을 적용할 것 입니다.

Stay tuned for the next episode of Web development by the English teacher JOHNNYCLUB!!!