soonoh kim

소개

웹 개발 언어를 공부하기로 마음을 먹었다.
수많은 구글링 결과 3개의 프레임워크/라이브러리가 가장 많이 사용함을 알게 되었는데.
현제 국내 추세는 React가 압도적으로 높다.(구인구직시 가장 소요가 많은 프레임워크)
프레임워크와 라이브러리의 차이점이 아직까지 구분이 되지는 않지만,
React, angular, vue 가장 대표적으로 언급되고 정보도 많이 공유 되고 있었다.
웹 개발을 목표인데 큰거를 만들어 보자는 의욕이 있어
'지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해서'
Facebook에서 말한 React 만든 목적이 눈의 띄여 선택 하였다.
대학 졸업이후 근 10년 만에 개발언어를 공부하자니 앞이 막막하긴 하지만,
처음 'C'를 배워 Hello World 가 화면에 나타났을때의
희열감을 생각하면 해쳐나갈수 있을리라 생각한다.

환경설정

Visual Studio Code 편집기를 이용하여 소소 코드 편집을 진행 할 것이며,
Nodejavascript 환경에서 React를 사용하기로 하였다.
React 설치 및 각종 스크립트 모듈 관리를 위하여
npm, yarn (package manager)를 설치를 하였다.

환경설정 툴 설치

Visual Studio Code

https://code.visualstudio.com/ 접속 하여 설치를 진행

Node.javascript, npm

Npm 설치의 경우 Node Package Manager 이며 node.javascript 설치 시 같이 설치가 된다.
https://nodejavascript.org/en/ 접속 하여 설치를 진행

Yarn

Node.javascript 설치와 동시에 npm이 설치 되었으므로,
npm install -g yarn 명령어를 사용하여 전역에서 사용가능 하도록 설치 진행한다.

React

과거에는 Node.javascript에서 React 사용을 webpack/ babel 등을 설정 하여야 했으나,
지금은 명령어 하나로 해당 설정이 완료 되도록 변경 되었다.
npm install -g create-react-app

용어설명

Visual Studio Code

마이크로 소프트에서 만든 소스 코드 편집기 이다.
다양한 프로그래밍 언어를 지원하며 각 언어와 함께 사용할 수 있는 기능을 제공한다.
플러그인을 통해 편집 기능 추가 및 프로그래밍 언어 지원 등 새로운 확장 기능을 추가할 수 있다.

Nodejavascript

구글 크롬의 자바스크립트ㅡ엔진(V8Engine)에 기반해 만들어진 서버 사이드 플랫폼

비동기 I/O 처리 /이벤트 위주
Node.javascript 라이브러리의 모든 API는 비동기식
빠른 속도 :
구글 크롬의 V8 자바스크립트 엔진을 사용하여 빠르 코드 실행 제공
단일 쓰레드/뛰어난 확장성
Node.javascript 는 이벤트 루프와 함께 단일 쓰레드 모델을 사용
이벤트 메커니즘은 서버가 멈추지않고 반응하도록 해주어 서버의 확장성을 키워줍니다.
쓰레드를 한 개만 사용하고 Apache 웹서버보다 많은 요청을 처리할 수 있습니다.
노 버퍼링
어플리케이션엔 데이터 버퍼링이 없고, 데이터를 chunk로 출력

Npm (Node Packaged Manager)

Node.javascript로 만들어진 package(module)을 관리해주는 툴
Node.javascript로 만들어진 모듈을 웹에서 받아 설치 관리해주는 프로그램

Yarn

페이스북에서 만든 새로운 자바스크립트 패키지 매니저
코드베이스가 커지면서 npm 사용시 일관성, 보안

Webpack

자바스크립트 코드가 많아지면서 하나의 파일로 관리 하는데 한계점이 나타났으며
이러한 문제를 해결 하기 위한 모듈 번들
의존성 그래프에서 엔트리로 그래프의 시작점을 설정
모든 자원을 모듈로 로딩한 후 아웃풋으로 묶음
로더로 각 모듈별로 바벨, 사스변환 등을 처리
로더로 처리한 결과물을 플러그인이 받아 난독화, 텍스트 추출등의 추가 작업

웹팩의 주요 네가지 개념

엔트리 :
웹팩에서 모든 것은 모듈이다.
자바스크립트,스타일시트,이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용.
자바스크립크가 로딩하는 모듈이 많아질수록 모듈간의 의존성이 증가하며,
의존성 그래프의 시작점을 ‘엔트리’ 라고 한다.
아웃풋 :
엔트리에 설정한 자바스크립트 파일을 시작으로 의존 되어 있는 모든 모듈을 하나로 묶음.
번들된 결과물을 처리할 위치는 output에 기록
로더 :
자바스크립트 만 사용 가능한 웹팩을 이용하기 이하여 비 자바스크립트 파일을 변경 하는 역할
플러그인 :
번들된 결과물을 처리. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용

Babel

JavaScript transpiler.
공식 설명은 compiller이라고 하나 실제 동작은 transpiler 이라고 보는게 이해하기에 쉽다.
ES5 -> ES6 ->ES7 변화 되면서 JavaScript에 최신 문법들이 쓰여지게 되었습니다.
이러한 JavaScript 코드를 browser가 인식하고 실행하기에는 모든 문법을 지원하지 못하는 문제가 생김. (구형 browser , IE)
생산성과 유지보수성 등의 이유로 코드자체는 ECMAScript 최신버전으로 구현하는게 좋음.
이로 인해 구현과 실행환경과의 버전 차이 발생
버전 차이 문제점을 해결 하기 위하여 구형 browser가 인식할 수 있는 문법(ES5)으로 변환시켜주는 transpiler.

모든 최신 JavaScript함수를 다 사용할 수 있는 것은 아님.

React 프로젝트 생성 및 모듈 추가

환경설정 이후 템플릿 작성을 위한 프로젝트 생성

터미널 창에서 App 생성

create-react-app react-document

React 프로젝트 생성 이후 해당 폴더를 연 후 명령어 입력

yarn start

디폴트 프로젝트 실행 화면이 웹에 나타난다.

React-router 설치

프로젝트가 생성된 디렉토리로 이동 후 해당 명령어를 사용 한다.
yarn add react-router-dom
웹 브라우저 사용 되는 리액트 라우터
yarn add cross-env –dev
프로젝트에서 NODE_PATH를 사용하여 절대경로로 파일을 불러오기 위한
환경 변수를 설정 할 때 운영체제마다 방식이 다르므로
공통적인 방법으로 설정 할 수 있게 해주는 라이브러리

Material-ui 설치

React 기반 UI 라이브러리
npm install @material-ui/core

용어 설명

Create-react-app

React를 사용하기 위하여 webpack/ babel 등을 설치 후 설정 작업을 하여야 했으나,
해당 모듈 설치 이후 기본적으로 아래의 모듈을 포함하여 설치가 된다.
차후 설치된 모듈의 업데이트를 위하여는 매뉴얼로 업데이트가 필요하다,
최초 React App 프로젝트 생성시에는 설치, 설정 작업이 필요 없이 간단하게 할 수 있다.

Webpck : 모듈 번들링 도구
Babel : ES6, React 등의 문법을 ES5 코드로 변환시켜주는 트랜스파일러
Autoprefixer : 다양한 벤더(browser)들에게 적절한 CSS가 적용될 수 있도록 prefix를 붙여준다.
ESLint : 자바스크립트 lint, 코드 컨벤션과 오류 등을 잡아준다.
Jest : 자바스크립트 테스트 도구

ESLint

ES + Lint

ES : EcmaScript 자바스크립트를 뜻함
Lint : 프로그래밍 에러가 있는 코드에 표시를 달아 놓는 것을 의미

코딩 스타일 점검 기능을 추가 하여 가지고 있음

Jest

페이스북에서 만든 테스트 프레임워크. 실제 브라우저가 아닌 가상환경에서 실행

Material-Ui

React 기반 UI 라이브러리
구글 머테리얼 디자인 기반으로 제작
방대한 양의 데이터(Github규모, 구글검색자료 등)
React 장점 그대로 사용 가능
구글 공식 Material Icon 전부 지원 -> npm install @material-ui/icnos
React Coding Conventions 준수

프로젝트 초기 설정 및 구조

파일제거

src/App.css
src/App.test.javascript
src/logo.svg

Layout 구조

상단에 헤더메뉴
좌측에 사이드메뉴
중앙에 컴포넌트뷰어

디렉토리 및 파일 생성

사이드 메뉴 생성 데이터

scr/Array/Menu.javascript : 배열 구조로 사이드 메뉴에 필요한 데이터를 모아 놓은 파일

Layout 관련 컴포넌트 모음

src/Ui/Sidemenu.javascript : Array / Menu.javascript 의 데이터를 이용하여 사이드 메뉴를 생성 하는 컴포넌트
src/Ui/Draw.javascript : 사이드메뉴 동작을 위한 컴포넌트
src/Ui/PermanentDrawer.javascript : 전체 화면 Layout을 관리 하는 컴포넌트

View 관련 컴포넌트

src/Components/Home : 웹 페이지 루트 URL
src/Components/View : URL 이용하여 각 정보를 보여 주도록 하는 컴포넌트

Layout에 사용할 icon 컴포넌트

src/icons/HomeIcon : 홈페이지 아이콘 추가를 위한 컴포넌트

컴포넌트 설정

Scr/App 수정

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import PermanentDrawer from './Ui/PermanentDrawer';

const App = () => {
  return (
    <Router>
      <div>      
        <PermanentDrawer/>
      </div>
      </Router>
  );
};
export default App;

Import

외부 스크립트 또는 외부 모듈의 export된 함수 객체를 가져오는데 사용
Export와 마찬가지로 ,ES6에서 정의된 API

BrowserRouter

HTML5의 history API(pushstate, replaceState, popState)를 활용하여
URL과 화면을 동기화하는 종류 중 하나

PermanentDrawer

전체 Layout을 관리 하는 컴포넌트로 web의 루트URl(‘/’) 이동시 실행됨

Components/Home 작성

루트 URL 접속 시 index -> App -> PermnentDrawer 순서로 모듈이 실행이 되며,
PermanentDrawer 실행 시 홈페이지 화면을 보여주는 컴포넌트이다.
학습을 위해 Text만 나오도록 코드 작성

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid'

const Home = () => {
  return (
    <Grid container>
            <Grid Grid item sm={3} />
                        
            <Grid item sm={9}>
            <Typography variant="display4"  gutterBottom>
             2018-08-18
            </Typography>
            </Grid>
    </Grid>
   );
};
export default Home;

Typography

Material-Ui에서 지원하는 라이브러리로 TEXT의 서체 및 글꼴을 변경할 수 있다.

대략적으로 아래와 같은 기본적인 설정이 되어 있다.

사용방법

    <Typography variant="display4" gutterBottom>
        Display 4
    </Typography>
    <Typography variant="display3" gutterBottom>
        Display 3
    </Typography>
 <Typography variant="body1" gutterBottom align="right">
        Body 1
    </Typography>
    <Typography variant="caption" gutterBottom align="center">
        Caption
    </Typography>

Grid

Material-Ui Grid 다양한 설계에 걸쳐 유연성을 허용하면서 시각적 레이아웃과 일관성을 유지한다.
12-column grid layout을 기본으로 적용 된다.

Components/View

사이드 메뉴 선택 시 TEXT를 화면에 보여주는 컴포넌트 부모 컴포넌트에서 가져오는 데이터(props)를 보여주도록 만들어져 있다.

import React from 'react';

const View = (props) => {
    let menupath = props.location.pathname;
    let Text = props.extra
    return (
        <div >
            <h3>{menupath}</h3>
            {Text}        
        </div>
    );
};
export default View;

Props

리액트는 컴포넌트를 생성할 때, 사용자가 정의해 놓은 속성 같은 것들을 Object안에 넣어서 해당 컴포넌트 안으로 전달 할 수 있다.
이 객체를 “props”라고 부른다. Props는 Read-Only 이며 props 원본을 수정할 수는 없다.
부모 컴포넌트에서 자식 컴포넌트로 불변하는 값을 전달 할 때 사용한다.

State

리액트 컴포넌트는 컴포넌트의 상태를 저장할 수 있습니다.
Props와의 차이점은 State는 컴포넌트 내부에 존재 하여 상태 값 변경이 가능 합니다.

Props.location.pathname

Props로 전달 받은 데이터 중 URL을 반환 받을 수 있는 함수
부모 컴포넌트 URL : /A/1 이라면 Props를 통해 /A/1을 전달 받을 수 있다.

Props.extra

Props에 default가 아닌 추가적 필요시 임의의 변수를 만든 후 전달 하고자 하는 값을 보낼 수 있다.

extra={props.location.pathname.replace(/\/A\/|\/B\/|\/C\/|\//,'')} />}

위의 값은 View 컴포넌트의 부모 컴포넌트인 PermanentDrawer 에서 추가로 생성 하여 넘겨주기 위하여 작성한 코드 이다.
Location.pahtname이 “/A/1” 이라면 extra 로 넘어오게 되는 값은 “1”이 됨을 알 수 있다.

/icons/HomeIcon

import SvgIcon from '@material-ui/core/SvgIcon';
import React from 'react';

function HomeIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </SvgIcon>
  );
}
export default HomeIcon;

Material-ui에서 지원하지 않는 icon을 사용하고자 할 때 사용기 위한 함수 이다.
해당 컴포넌트는 아이콘을 가져와서 사용하기 위하여 작성하였다.
기본적으로 1,000개 이상의 icon은 @material-ui/icons 에 기본적으로 등록 되어 있어 SvgIcon 등록을 하지 않아도 사용이 가능 하다.

{…props}

스프레드 연산자 – 배열 리터럴의 일부를 반복 가능한 식에서 초기화하거나 식을 함수 호출에서 여러 인수로 확장할 수 있습니다.
기본적인 설명은 아래 와 같다.

function f(a, b, c, x, y, z) {  
  return a + b + c + x + y + z;  
}  
  
var args = [1, 2, 3];  
console.log(f(...args, 4, ...[5, 6]));  
  
// Output:  
// 21

/Ui/Sidemenu & /Array/Menu

import React from 'react';
import { Link } from 'react-router-dom'
import {Menu} from '../Array/Menu.js';

import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import List from '@material-ui/core/List'

function Sidemenu(props) {
    let menupath = props.location.pathname;
    return (
        <div>
          <List component="ul">
            {Menu.map(({name,url,id}) =>
            
             menupath.includes(id)
         
            ?<ListItem  component= { Link } to={url} button>
                     <ListItemText primary={name} />
            </ListItem>
           :null 
            )}
          </List>
        </div>
    ) }
 export default Sidemenu ;

/Array/Menu.js
파일에 미리 만들어 둔 배열 구조의 데이터를 사용 하여 사이드 메뉴를 생성하기 위한 컴포넌트 이다.
헤더 메뉴를 선택 하게 되면 해당, URL을 Sidemenu 컴포넌트에서 건네 받은 뒤,
URL을 Key 값으로 URL선택에 따른 사이드 데이터를 생성 하도록 만들어져 있다.

List

문자나 이미지를 수직구조로 보여 주기 위한 목록을 만듬
Materil-Ui에서 생성에 대한 라이브러리가 존재 하여 규칙에 따라 생성 하면 List를 생성 할 수 있음

List 생성시 입력 해야 하는 모듈 입니다.

Component=”ul” 은 HTML에서 사용 하던 목록 표현 방식을 지정하는 문자열 입니다.
Materilal-Ui 의 경우 기본적으로 설정이 없을 시 “ul” 방식으로 설정 되어 있습니다.
자주 사용 되는 방식은 “ul”, “nav” 사용하고 있습니다.

ul (Unordered List의 줄임 말)
순서가 없는 목록을 만들 시 사용 합니다.
nav (navigation 의 줄임 말)
목록을 작성 하면서 URL Link를 목록으로 만들 시 사용 하였다.
Html의 경우 <a href …> 등으로 작성 하여 사용 하였다.
<ListItem …>
List 의 각 항목을 만들 때 사용 하는 모듈
<ListText…>
ListItem 안에 Text 입력 시 CSS 설절을 불러온뒤 사용하는 Text 출력을 위하여 사용 하는 모듈
보여주고자 하는 {name} 문자열은 CSS Primary 설정을 가져와서 보여줌.

Menu.map

JavaScrip의 Array 객체 내장함수
Map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 프로세싱 하여 그 결과로 새로운 배열을 생성

Sidemenu 컴포넌트에서는 새로운 배열을 생성 하는 목적이 아닌
요소를 반복적으로 가져오는 프로세싱을 사용하기 위함이 크다.
실제 사용은 List 생성을 조건을 위한 반복문 용도이다.

javascriptX 3항연산

React 안에서 IF 문 등의 조건문이 사용은 가능 하나, javascriptX 외부에서만 IF문을 사용 할 수 있다.
실제 조건문이 필요한 곳은 javascriptX 내부가 많아, javascriptX 내부에서 사용 가능한 3항연산자을 이용하여 조건문을 사용 하고 있다.
기본 구조는 A ? B : C 이며, A조건이 참일 경우 B 내용을 적용 하게 되고, 거짓일 경우 C 내용이 적용 되도록 하는 조건문이다.

Sidemenu 컴포넌트에서 적용 중인 3항연산자
Props로 가져오 URL이 배열 구조의 데이터의 ID 포함 여부를 이용하여,
포함된 배열 데이터를 List를 만드는 코드 이다.

Menu.map(({name,url,id}) =>
            
             menupath.includes(id)
         
            ?<ListItem  component= { Link } to={url} button>
                     <ListItemText primary={name} />
            </ListItem>
           :null

Map을 이용한 반복문을 이용하여 가져온 배열 데이터의 ID가 URL을 포함하는지 확인,
“참” 일 경우 ListItem을 이용하여 목록을 생성,
“거짓” 일 경우 생성을 하지 않고 넘기는 방법을 이용하고 있다.
{ url } , { name } 의 경우 map을 이용한 반복문으로 가져 오고 있다.

Ui/Draw

Sidemmenu 컴포넌트에서 만든 사이드메뉴 List를 보여주는 것과, 사이드 메뉴의 on/off 기능을 구현 한 컴포넌트 이다.

import React from 'react';
import { Route } from 'react-router-dom';

import Drawer from '@material-ui/core/Drawer';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';

import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import Sidemenu from './Sidemenu';

const Draw = ({ open,paper,drawerHeader,onSelect}) => {
  return(
    <Drawer
      variant="persistent"
      anchor='left'
      open={open}
      classes={{
        paper: paper,
      }}
     > 
      <div className={drawerHeader} >
        SideMenu
        <IconButton onClick={() => onSelect()}>
           <ChevronRightIcon />
        </IconButton>
      </div>    
      <Divider />
       <Route path ="/:id" component = {Sidemenu}/>
      </Drawer>
  )
}
  export default Draw;

Drawer

Material-Ui 에서 지원해주는 라이브러리
특정 컴포넌트나 전체 화면의 좌우측면에 보조적인 컨텐츠를 보여주는 기능을 합니다.

사용방법

import Drawer from '@material-ui/core/Drawer'

<Drawer>...</Drawer>

Anchor
화면이나 컴포넌트의 상,하,좌,우 어디에 보여줄지 선택 해주는 옵션,
기본적으로 ‘left’ 설정 되어 있다.
Open
Drawer이용한 보조 화면의 on/off를 설정 해주는 옵션으로
True, False 선택 하도록 되어 있다.
기본적으로 ‘false’ 설정 되어 있다.
Classes
구성 요소에 적용된 스타일을 재정의하거나 확장

IconButton

Material-Ui 에서 지원해주는 라이브러리
Button 기능을 icon에서 사용할 수 있도록 함.
지정한 액션을 수행하도록 하는 프로그램시 사용

onClick={() => onSelect()}
IconButton Click시 onSelect() 함수가 실행 되도록 함.

Ui/PermanentDrawer

전체적이 UI 와 View를 관리하는 모듈,
Drawer(SideMenu) 의 부모 컴포넌트
Content 컴포넌트 대신에 Props를 필터링 데이터를 보여주는 모듈

HeadMenu

<div className={classes.appFrame}>

<AppBar 
              className={classNames(classes.appBar, {
                [classes.appBarShift]: open,
                [classes[`appBarShift-${anchor}`]]: open,
              })}
            >

            <Toolbar disableGutters={!open}>
  
              <Tabs
                value={this.state.value}
                onChange={this.handleChange}
                indicatorColor= "secondary"
                // textColor="primary"
                centered
              >
                <Tab icon={<HomeIcon />}  variant="Headline" color="inherit" component={Link} onClick={this.handleDrawerClose} exact to="/" />
                <Tab label="A" variant="Headline" color="inherit"  onClick={this.handleDrawerOpen} component={Link} to="/A" />
                <Tab label="B" variant="Headline" color="inherit"  onClick={this.handleDrawerOpen} component={Link} to="/B" />
                <Tab label="C" variant="Headline" color="inherit"  onClick={this.handleDrawerOpen} component={Link} to="/C" />
              </Tabs>
            </Toolbar>
</AppBar>

AppBar
Materil-UI 제공하는 라이브러리 화면 제목, 선택에 따른 동작 등을 제공
문법에 맞는 Action Bar, Nav Bar를 사용 할 수 있음.
- className
  특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정 시 사용
  React에서 이미 사용 중인 “class” 키워드와의 혼란을 줄이기 위하여
  "className" 이라는 이름을 사용
- AppBar의 위치
  Class.AppBar – 사이드메뉴 비활성화 상태시 AppBar의 위치 및 설정을 불러옴
  Class.appBarShift – 사이드메뉴 활성화시 AppBar가 이동된 것처럼 보이기 위한, 위치 및 설정을 불러옴
  Class.appBarShift-left – 사이드메뉴 활성화시 AppBar가 이동시 여백의 길이에 대한 설정을 불러옴
Tabs
AppBar 안의 생성한 Tab 들을 그룹화 시켜 이벤트와 Tab의 CSS 통일을 위하여 사용
- Value
  정수형의 변수 0부터 시작함, 숫자와 매칭된 tab은 indicatorColor로 표시됨
- onChange = { this.handleChange }
  tap 변경 시 Value 값을 변경하기 위한 함수
- indicatorColor – Value로 선택된 tab의 색깔을 지정
Tab
- Icon – tab에 아이콘을 추가 하기 위한 함수
- Label – Text를 추가 하기 위하 함수
- onClick={this.handleDrawerOpen} – tap 클릭 시 사이드메뉴 나타나게 하기 위한 함수
- component={Link} – 페이지 이동이 아닌 해당 URL 페이지만 새로 그려줌
- exact to – 정확한 URL 일 경우 진행 되도록 함

SideMenu

SideMenu를 생성 하기 위하여 Draw 컴포넌트를 실행

let side = <Draw 
       open = {this.state.open}
       paper = {classes.drawerPaper}
       drawerHeader = {classes.drawerHeader}
       onSelect = {this.handleDrawerClose}
       />

open = {this.state.open} – 사이드메뉴 오픈 유무에 대한 정보를 보내기위한 데이터
paper = {classes.drawerPaper} – 화면에 대한 일관성을 유지하기 위하여 CSS 정보 데이터
drawerHeader = {classes.drawerHeader} – 사이드메뉴에 대한 정보 데이터
onSelect = {this.handleDrawerClose} - 사이드메뉴 종료에 대한 정보를 데이터

ContentView

Content 컴포넌트를 사용하여 여러 자료를 보여 주는 화면이나
테스트를 위하여 URL 정보 등을 보여 주도록 변경 하였다.

            <Route exact path= "/" component={Home}/>
             <Route
              path="/:id"
              render={(props) => <View {...props}  
              extra={props.location.pathname.replace(/\/A\/|\/B\/|\/C\/|\//,'')} />}
              />

<Route exact path =”/” component={Home}/>
URL이 “/”(Root)일 경우 Home 컴포넌트를 보여주도록 하는 함수 부분이다.
- Exact path=”/”
  “/” 기호의 경우 “/A” 경우에도 포함 되어 있어
  “/A” URL 일 경우 홈페이지와 /A 컴포넌트 2개가 동시에 화면에 나타나게 된다.
  이러한 경우를 막고자 Exact path를 사용하여 “/” 경우에만 나오도록 지정하였다.
Render={(props) -=> <View{…props}
View 컴포넌트 동작을 위한 데이터들을 Props을 통해서 전달해주기 위한 함수이다.
Extra={props.location.pathname.replace(/\/A\/|\/B\/|\/C\/|\//,'')} />}
URL 문자열을 Props로 건내 줄 때 최상위 폴더의 이름을 삭제하고 건내 주기 위하여 설정한 값이다.
특수 문자의 경우 앞에 “\”기호를 집어 넣어 replace기본적인 문법에 사용되는 특수문자와 구분되도록 되어 있다.

2018년 9월 11일 화요일

소개

환경설정

환경설정 툴 설치

Visual Studio Code

Node.javascript, npm

Yarn

React

용어설명

Visual Studio Code

Nodejavascript

Npm (Node Packaged Manager)

Yarn

Webpack

웹팩의 주요 네가지 개념

Babel

React 프로젝트 생성 및 모듈 추가

터미널 창에서 App 생성

React-router 설치

Material-ui 설치

용어 설명

Create-react-app

ESLint

Jest

Material-Ui

프로젝트 초기 설정 및 구조

파일제거

Layout 구조

디렉토리 및 파일 생성

사이드 메뉴 생성 데이터

Layout 관련 컴포넌트 모음

View 관련 컴포넌트

Layout에 사용할 icon 컴포넌트

컴포넌트 설정

Scr/App 수정

Import

BrowserRouter

PermanentDrawer

Components/Home 작성

Typography

Grid

Components/View

Props

State

Props.location.pathname

Props.extra

/icons/HomeIcon

{…props}

/Ui/Sidemenu & /Array/Menu

List

Menu.map

javascriptX 3항연산

Ui/Draw

Drawer

IconButton

Ui/PermanentDrawer

HeadMenu

SideMenu

ContentView