개발야 기하하자

최신 웹 앱을 스타일링하는 적절한 방법에 대해 많은 이야기가있었습니다. 문서 레벨에서 일반적이고 가장 오래된 스타일링 방법이 있습니다- style.css파일을 생성 하고 HTML 파일에서 링크하는 것이 더 최근에는 JS의 스타일링 방법입니다. 이것은 CSS-in-JS로 널리 알려져 있습니다.

CSS-in-JS는 CSS 모델을 문서 수준이 아닌 구성 요소 수준으로 추상화하는 스타일링 방식입니다. 이것은 CSS가 특정 구성 요소로만 범위가 지정 될 수 있고 문서 수준이 아니라는 개념입니다. CSS-in-JS를 사용하면 다음과 같은 이점이 있습니다.

• HTTP 요청 수 감소 : CSS-in-JS는 자산과 리소스를로드하기 위해 HTTP 요청을하지 않아도됨을 의미합니다.
• 스타일링 조각화 : CSS-in-JS를 사용하면 호환성 문제에 대한 걱정없이 자유롭게 스타일을 작성할 수 있습니다.

CSS-in-JS 접근법의 예는 styled-components 입니다. 스타일 구성 요소를 사용하면 클래스 이름 충돌에 대한 걱정없이 구성 요소에 일반 CSS를 작성할 수 있습니다. 단일 구성 요소로 범위가 지정되고 페이지의 다른 요소로 누출되지 않는 CSS를 작성하는 데 도움이됩니다.

스타일이 지정된 구성 요소 인 이유

스타일이 지정된 구성 요소를 사용하면 태그가 지정된 템플릿 리터럴을 사용하여 JavaScript로 CSS를 작성할 수 있습니다. 구성 요소와 스타일 간의 매핑을 제거합니다. 구성 요소는 하위 수준 스타일 구성으로 만들어집니다. 다음과 같은 이유로 스타일 구성 요소가 작성되었습니다.

• 자동 중요 CSS : 스타일이 지정된 구성 요소는 페이지에 렌더링되는 구성 요소를 추적하고 해당 스타일을 완전히 자동으로 주입합니다. 코드 분할과 결합하면 사용자는 필요한 최소량의 코드를로드 할 수 있습니다.
• 클래스 이름 버그 없음 : 스타일이 지정된 구성 요소는 스타일에 대한 고유 한 클래스 이름을 생성합니다. 중복, 겹침 또는 철자 오류에 대해 걱정할 필요가 없습니다.
• CSS를 쉽게 삭제 : 클래스 이름이 코드베이스 어딘가에 사용되는지 알기가 어려울 수 있습니다. 스타일링 된 구성 요소는 모든 스타일링이 특정 구성 요소에 연결되어 있으므로 분명합니다. 컴포넌트가 사용되지 않고 (툴링이 감지 할 수있는) 삭제되면 모든 스타일이 컴포넌트와 함께 삭제됩니다.
• 간단한 다이나믹 스타일링 : 소품 또는 글로벌 테마를 기반으로 컴포넌트의 스타일을 조정하는 것은 수십 개의 클래스를 수동으로 관리 할 필요없이 간단하고 직관적입니다.
• 무통 유지 관리 : 구성 요소에 영향을 미치는 스타일을 찾기 위해 다른 파일을 찾아 다닐 필요가 없으므로 코드베이스의 크기에 상관없이 유지 관리가 매우 중요합니다.
• 자동 공급 업체 접두사 : CSS를 현재 표준에 작성하고 Styled Components가 나머지를 처리하도록합니다.

일단 첫 번째로 

npm install --save styled-components

styled-components 를 install 해줍니다.

그런다음 

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

이렇게 스타일을 줄 수 있습니다.

이렇게 쉽게 스타일드 컴포넌트를 사용할 수 있습니다. 자주 쓰이고 유용합니다 !

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 이러한 미묘한 차이말고는 엄청 편하다고 생각합니다. 

MongoDB를 설치해 보겠습니다. 일단 MongoDB는 몽고DB(MongoDB←HUMONGOUS)는 크로스 플랫폼 도큐먼트 지향 데이터베이스 시스템이다. NoSQL 데이터베이스로 분류되는 몽고DB는 JSON과 같은 동적 스키마형 도큐먼트들(몽고DB는 이러한 포맷을 BSON이라 부름)을 선호함에 따라 전통적인 테이블 기반 관계형 데이터베이스 구조의 사용을 삼간다. 이로써 특정한 종류의 애플리케이션을 더 쉽고 더 빠르게 데이터 통합을 가능케 한다. 아페로 GPL과 아파치 라이선스를 결합하여 공개된 몽고DB는 자유-오픈 소스 소프트웨어 입니다. 

다운로드는 

https://www.mongodb.com/download-center/community

에서 다운을 받으면 됩니다 ! 

자신에게 맞는 Version, OS를 설정해주고 다운로드 해주면 됩니다.

다운로드가 다 끝났으면 

윈도우 + R을 누른 뒤 cmd 라고 입력해 명령 프롬프트 창을 엽니다. 그리고 mongod 이라는 명령어를 입력합니다.

그러면 에러가 뜰 것 입니다. 왜냐하면 환경변수 설정을 안해줬기 때문입니다.

윈도우 키를 누른 뒤 내컴퓨터 => 고급시스템설정 => 환경변수 에 들어가서  

Path를 편집해줍니다. 편집하기를 누르면

자신의 MongoDB bin 경로를 설정해줍니다.

그런다음

mongod을 입력하면 에러가 뜰 것 입니다. 왜냐하면 직접 경로를 지정을 안해줬기 때문에 

cmd 창에서 mongod --dbpath 내가 설정 할 경로 (옵션) 을 주었습니다.

저의 경우 mongod --dbpath C:\Program Files\MongoDB\Server\4.2\db 이렇게 설정을 해줬습니다.

db라는 폴더는 제가 만든 것 입니다 ! 여러분들도 만드시면 좋을 것 같습니다.

그러면 마지막으로 mongod 을 입력한 뒤

url 에 http://localhost:27017/ 를 입력해서 

이렇게 나오면 정상적으로 MongoDB가 설치가 된 것 입니다 감사합니다 :)

일단 제 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 서버에서 값이 왔어요~~! 로 들어간 것을 확인할 수 있습니다

감사합니다 :) 

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