더블리의 12층

• material-ui/styles/
• style library interoperability (아무거나 적용해도 상관 없음!)
  • Plain CSS
  • Global CSS
  • styled Componetns
  • CSS Modules
  • Emotion
  • ReactJSS
• 하지만 material-ui에서는 material-ui/styles의 패키지를 따로 제공한다는.. 어떤걸 사용해도 상관없음
• 그래도 styled components랑 비슷하니 이걸 사용하는게 좋을지도...

styled componets vs material-ui/styles

• styled components는 element별로 변수를 선언
• material-ui/styles은 변수하나에 여러개의 element의 변수를 선언

styled components

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

export default function StyledComponents() {
  return <MyButton>Styled Components</MyButton>;
}

material-ui/styles

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

• mongoDB Compass Download

• 설치를 하면 위처럼 새로운 connection을 생성할 수 있다.
• connection에 mongodb://localhost:27017과 같이 입력하면 database의 리스트를 확인 가능하다
• connection string format

CSS를 Component별로 입히기 위해서는 styled-components를 사용하자

설치하기

yarn add styled-components

소스코드 예제

NewsListBlock의 css를 정의하고 rendering하는 곳에 CSS의 block으로 포장하면 정상적으로 css가 입힌다.

import React from 'react';
import styled from 'styled-components';
import NewsItem from './NewsItem';

const NewsListBlock = styled.div`
  box-sizing: border-box;
  padding-bottom: 3rem;
  iwidth: 768px;
  margin: 0 auto;
  margin-top: 2rem;
  @media screen and (max-width: 768px) {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
`;

const NewsList = () => {
  return (
    <NewsListBlock>  
      (...)
    </NewsListBlock>
  );
};