개발야 기하하자

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
  root: {},
  row: {
    height: '42px',
    display: 'flex',
    alignItems: 'center',
    marginTop: theme.spacing(1)
  },
  spacer: {
    flexGrow: 1
  },
  importButton: {
    marginRight: theme.spacing(1)
  },
  exportButton: {
    marginRight: theme.spacing(1)
  },
  searchInput: {
    marginRight: theme.spacing(1)
  }
}));         // 인라인 스타일 

const UsersToolbar = props => {
  const { className, ...rest } = props;

  const classes = useStyles(); // 변수에 styles 할당

  return (
    <div
      {...rest}
      className={clsx(classes.root, className)}  // 실제 할당 된 styles 사용 classes.xxx 로 사용할 수 있다.

    >
   );
}

Material-UI 컴포넌트 사용 여부에 관계없이 앱에서 Material-UI 스타일링 솔루션을 사용할 수 있습니다.

Material-UI가Carbon을 통해지속 가능한 조직광고를구축하도록 지원

Material-UI는 동적 UI를 구축하기위한 강력한 기반을 제공하는 것을 목표로합니다. 간단하게하기 위해, 우리는 재료-UI 구성 요소에 사용되는 스타일 솔루션 노출 은 AS @material-ui/styles패키지를. Material-UI는 다른 모든 주요 스타일링 솔루션 과 상호 운용 이 가능하기 때문에 사용할 수는 있지만 꼭 그럴 필요는 없습니다 .

Material-UI의 스타일링 솔루션을 사용하는 이유는 무엇입니까?

이전 버전에서 Material-UI는 구성 요소 스타일을 작성하기 위해 사용자 정의 인라인 스타일 솔루션 인 LESS를 사용했지만 이러한 접근 방식은 제한적인 것으로 입증되었습니다. CSS-in-JS 솔루션을 채택했습니다 . 그것은 많은 훌륭한 기능 (테마 중첩, 동적 스타일, 자체 지원 등)을 잠금 해제 합니다. 우리는 이것이 미래라고 생각합니다.

• 통합 스타일링 언어
• SCSS (Sass)를 CSS-in-JS로 변환

Material-UI의 스타일링 솔루션은 스타일 구성 요소 및 감정 과 같은 다른 많은 스타일링 라이브러리에서 영감을 얻었습니다 .

• 💅 구성 요소 와 동일한 장점 을 기대할 수 있습니다 .
• 🚀 빨리 타 오르고 있습니다.
• API 플러그인 API 를 통해 확장 할 수 있습니다 .
• ⚡️ 런타임에서 서버 측에서 작동하는 고성능 JavaScript-CSS 컴파일러 인 JSS 를 핵심으로 사용 합니다.
• KB 15KB 미만 gzipped ; Material-UI와 함께 사용하면 번들 크기가 증가하지 않습니다.

 출처 : https://material-ui.com/styles/basics/

Material-ui/styles 중 makeStyle 라는 속성을 이용해서 inline component를 만들어 봤습니다.

생각 보다 엄청 편했습니다. scss를 사용하다가 처음으로 inline component를 사용해 봤는데 

example ) scss : margin-top => inlinecomponent : marginTop 이러한 미묘한 차이말고는 엄청 편하다고 생각합니다. 

일단 제 i18n 코드에다가 Nodejs 서버를 연동해보겠습니다. 일단

보내기라는 버튼을 누르면 서버와 통신을 해서 서버에서 data를 던진 값을 보내기 옆에 출력하는 것을 해보겠습니다.

일단 front쪽 코드는 

   <button className='button' onClick={(e) => { this.onClickBtn() }}> 보내기 </button>
    <div> 서버에서 온 값 : {this.state.message} </div>

이렇게 버튼을 달아주고 이벤트 핸들러를 달아줬습니다. 그리고 상단 state 에 message:"" 라는 변수를 선언해줬습니다.

그리고 이벤트 핸들러인 onClickBtn 함수를 만들어줍니다.

  onClickBtn = async () => { 
    const data = await new Photo().getData();
    console.log('data : ', data);
    this.setState({ message: data.data });
  }

상단에 import 하는 부분에서 

import Server from 'server/server';

서버쪽이랑 통신하는 컴포넌트를 import 해줍니다.

import axios from "axios";

const ServerUrl = "http://192.168.0.69:5000/";


class Server {

  getData() {
      return new Promise(async(resolve, reject) => {
          try {
            let data = await axios.get(ServerUrl);
            resolve(data);

          } catch(e) {
            reject(e);
          }
      })
  }
}

export default Server;

 let data = await axios.get(ServerUrl); 
 resolve(data);

라는 코드로 data값을 받아옵니다.

여기까지가 front 코드였습니다.

이제 server 쪽 코드를 보겠습니다.

var express = require('express')
const cors = require("cors");
const app = express();

var whiteList = [
    "http://localhost:3000"
]

app.use(cors(whiteList));

app.get('/', function(req, res) { 
    res.send('서버에서 값이 왔어요~~!');
});

app.listen(5000, ()=> { 
    console.log(' 서버가 열렸다아아아아!!');
})

아주 간단하죠

get으로 front에 값을 날려주고 

listen은 포트 번호를 지정해주는 것 입니다.

그리고 cors 라는 것으로 permit 해줄 url을 적어줍니다 ! 

여기까지 벡엔드 코드입니다.

이제 실행을 시켜볼까요 ? 

서버를 키고

front 에서 버튼을 눌러봅니다 !

서버에서 온 값 : {this.state.message} 이 우리가 서버에서 설정해준 data 서버에서 값이 왔어요~~! 로 들어간 것을 확인할 수 있습니다

감사합니다 :) 

틀렸거나 이상한 부분은 지적해주시면 감사하겠습니다 ! 아직저도 초보라서 쓴 피드백은 환영입니다 :) :)

https://themes.material-ui.com/

사이트에 무료 demo 버전 ui를 제공해줍니다 ! 그래서 제가 만든 i18n에 ui를 붙혀보았습니다 !

완전 유용한 사이트에요!!!

그럼 코드로 보시죠 !

많은 ui example 들이 있습니다 저는 

이 ui 를 사용했습니다. 

사용할 경로에 git clone https://github.com/devias-io/react-material-dashboard.git 를 입력해줍니다

(git이 설치되었다는 경우하에) 아니면 git 설치를 해야합니다 그부분은 => 이쪽으로

설치를 한뒤 터미널에서 npm install, yarn install 을 한 뒤 yarn start를 입력해주면 

이렇게 defualt 사이트가 나옵니다 저는 이 ui와 제 i18n을 customizing 해봤습니다.

결과는

이렇게 나왔습니다. 

기본 프로젝트를 할 때 ui를 이렇게 처음부터 잡아주면 굉장히 편리 할 것 같습니다 ! 감사합니다 :)

바벨은 특정 버전의 ECMAScript 코드를 하위 버전의 ECMAScript로 변환해주는 자바스크립트 컴파일러다. 

대부분의 브라우저가 ES6 문법을 완전히 지원해주지 않기 때문에 ES6문법의 자바스크립트를 사용할 수 없다.

그래서 Babel 을 이용해서 개발은 ES6로 하고 브라우저 트랜스 파일링된 ES5 문법의 JS 파일을 사용하게 하는 식의 구성을 가지게 해야한다.

프로젝트에 babel 설치

npm install --save-dev babel-core babel-cli babel-preset-es2015

babel-cli 설치 확인

babel version

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1"
  }

babel 문법

ECMAScript 6는 2015년 6월 승인을 목표로 작성되고 있는 새 ECMAScript 표준이다. Prototype 기반의 객체 지향 패턴을 쉽게 사용할 수 있도록 돕는 class의 추가, => 화살표 함수 표현, 템플릿 문자열, generator와 yield 등 다른 언어에서 편리하게 사용하던 많은 기능들이 추가될 예정이다.