[fastcampus] Ch.5 React Component Styling (3)

productuidev·2022년 3월 8일

개발 공부 리액트 패스트캠퍼스 프론트엔드개발

React Study

목록 보기

10/52

패스트캠퍼스 한 번에 끝내는 프론트엔드 개발(Online) 강의 정리

Ch.5 React Component Styling (3)

6. Ant Design (앤트디자인)

알리바바의 자회사 앤트파이낸셜에서 제작한 리액트와 타입스크립트(Typescript) 기반의 UI 라이브러리

(PC) https://ant.design/
(Mobile) https://mobile.ant.design/
레이아웃과 그리드, 데이터 I/O를 위한 다양한 컴포넌트, 다양한 국가 언어 등을 지원
사례 : 어드민 개발을 위한 앤트 디자인 https://jeonghwan-kim.github.io/2018/10/13/ant-design-101.html
설치 및 활용 :
https://devbada.tistory.com/428
https://programming119.tistory.com/168
https://velog.io/@khw970421/React-Ant-design-%EC%82%AC%EC%9A%A9%EB%B2%95
https://velog.io/@lamda/%EC%99%9C-Google-material-design%EC%9D%84-%EB%86%94%EB%91%90%EA%B3%A0-Ant-Design%EC%9D%84-%EC%93%B8%EA%B9%8C

설치하기

import 'antd/dis/antd.css'; // 전역 스타일 추가 in index.js
import { DatePicker } from 'antd'; // 리액트 컴포넌트 in App.js

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>

  document.getElementById("root");
);

src/App.js

import './App.css';
import { DatePicker } from 'antd';

function App() {
  return (
    <div className="App">
      <DatePicker />
    </div>
  );
}

export default App;

Antd 분할하기 (Modularized)

방법 1

import DatePicker from 'antd/es/date-picker';
import 'antd/es/date-picker/style/css';

방법 2

npm run eject
npm install babel-plugin-import --save-dev

{
  ...
  "babel": {
    "presets": [ "react-app" ],
    "plugins": [
      [
        "import", {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  },
}

전역적으로 적용하지 않고 풀어서 사용할 각각 컴포넌트만 가져오면
최종 프로덕트의 번들 사이즈를 줄일 수 있음

Antd 아이콘 추가하기

https://ant.design/components/icon/

npm install --save @ant-design/icons

아이콘 패키지 설치 후 원하는 아이콘 컴포넌트 copy

src/App.js

import './App.css';
import { DatePicker } from 'antd';
import { GithubOutlined } from '@ant-design/icons'; // 추가

function App() {
  return (
    <div className="App">
      <p>
        <CalendarOutlined /> // 복사한 캘린더 아이콘 컴포넌트 추가
      </p>
      <DatePicker />
    </div>
  );
}

export default App;

Antd Grid 활용 (레이아웃 쉽게 잡기)

Columns, Gutter

import { Row, Col } from 'antd';

const colStyle = () => ({
  height: 50,
  backgroundColor: 'red',
  opacity: Math.round(Math.random() * 10) / 10,
});


function App() {
  return (
    <div className="App">

      // <Col span={24 중에 어느정도 차지할지 비율로 결정하는 정수} />
      // <Row gutter={16 + 8n의 정수} /> Columns 사이에 16px 간격을 주는

      // 2 columns
      <Row gutter={16}>
        <Col span={12} style={colStyle()} />
        <Col span={12} style={colStyle()} />
      </Row>

      // 3 columns
      <Row gutter={16}>
        <Col span={8} style={colStyle()} />
        <Col span={8} style={colStyle()} />
        <Col span={8} style={colStyle()} />
      </Row>

      // 4 columns
      <Row gutter={16}>
        <Col span={6} style={colStyle()} />
        <Col span={6} style={colStyle()} />
        <Col span={6} style={colStyle()} />
        <Col span={6} style={colStyle()} />
      </Row>
    </div>
  );
}

export default App;

offset

import { Row, Col } from 'antd';

function MyCol( {span, offset} ) {
  return (
    <Col span={span} offset={offset}>
      <div style={{ height: 50, backgroundColor: 'red', opacity: 0.7 }} />
    </Col>
  );
}

export default function App() {
  return (
    <div className="App">

      // <Col offset={24 중 건너띄고 싶은 정수} />

      <Row gutter={16}>
        <MyCol span={12} offset={12} />
      </Row>
      <Row gutter={16}>
        <MyCol span={8} />
        <MyCol span={8} offset={8} />
      </Row>
      <Row gutter={16}>
        <MyCol span={6} />
        <MyCol span={6} offset={3} />
        <MyCol span={6} offset={3} />
      </Row>
    </div>
  );
}

import { Row, Col } from 'antd';

function MyCol( {span, offset} ) {
  const opacity = Math.round( Math.random() * 10 ) / 10;

  return (
    <Col span={span} offset={offset}>
      <div style={{ height: 50, backgroundColor: 'red', opacity: 0.7 }} />
    </Col>
  );
}

export default function App() {
  return (
    <div className="App">

      // <Row type="flex" justify="좌우정렬" align="위아래정렬" />

      <Row style={
        { height:300, }
      }
        justify="start" align="top"
      >
      </Row>
      <MyCol span={4} />
      <MyCol span={4} />
      <MyCol span={4} />
      <MyCol span={4} />
    </div>
  );
}

Style-Components

리액트에서 CSS/SCSS를 커스터마이징 하기 위해선 먼저 styled-components에 대해 이해하는 것이 좋다
https://styled-components.com/docs/basics#getting-started

Styled-components를 사용하는 8가지 이유 https://analogcoding.tistory.com/181
실무에서 Styled-Component를 쓸 때 https://blog.slashuniverse.com/m/3
Styled-Components 활용
https://doheelab.github.io/css/styled-components/
https://dkje.github.io/2020/10/13/StyledComponents/

import { React } from "react";
import { Button, Tooltip } from "antd";
import { FilterOutlined } from "@ant-design/icons"

export default function Menu () {
    return (
        <div className="Menu">
            <Tooltip title="버튼">
                <Button shape="circle" icon={<FilterOutlined />} />
            </Tooltip>
        </div>
    );
}

import 'antd/dist/antd.css';

npm install styled-components

import { React } from "react";
import styled from "styled-components";

import { Button, Tooltip } from "antd";
import { FilterOutlined } from "@ant-design/icons"

export default function Menu () {
    return (
        <div className="Menu">
            <Tooltip title="버튼">
                <MenuButton shape="circle" icon={<FilterOutlined />} />
            </Tooltip>   
        </div>
    );
}

const MenuButton = styled(Button)`
    background-color : red;
    `;

import styled from "styled-components"
import { 뭐시기 } from "antd";
export default function App() {
	return (
    	<스타일먹인 뭐시기 />
    );
}
const 스타일먹인 뭐시기 = styled(뭐시기)`
color : 빨강빨강;
    background-color : 초록초록;
	`;

참조

https://studioplug.tistory.com/375
https://xtring-dev.tistory.com/entry/React-styling-Ant-Design%EA%B3%BC-styled-components-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://velog.io/@noyo0123/ant-design-styled-component
https://tech-monster.tistory.com/76

React 협업 이슈 (CSS 관리포인트)

프론트 엔드 개발자는 리액트를 사용하면 각 컴포넌트마다 원하는 웹의 영역의 html을
분리해서 담아야 하는데 웹퍼블리셔가 전체적인 html, css를 작성하여 넘겨주면
다시 해당 소스들을 분리해서 JSX 형식에 맞게 컴포넌트 파일에 넣어주어야 하기 때문에
이러한 점을 보완한 Vue를 사용하는 회사들도 있고 웹퍼블리셔 없이
프론트엔드 개발자가 html 단부터 코드를 작성하기도 하고
웹퍼블리셔에게 리액트의 JSX 개념을 교육하여 JSX 형식으로 프론트 엔드 개발자에게 넘겨주기도 한다.
그래서 회사에 수준 높은 웹퍼블리셔가 있고 협업을 해야한다면
리액트보단 순수 자바스크립트나 Vue를 사용하는 것이 좋을 수도 있다.
반대로 웹퍼블리셔는 없고 프론트엔드 개발자만 있다면 오히려 리액트로 프로젝트를 구성하는 것이
컴포넌트 단위로 서로 구역 기능을 나누어 구현하기 좋아 리액트를 사용하는 것이 효율적일 수도 있다.
https://velog.io/@padd60/TIL-React.js%EB%A5%BC-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90

OKKY https://okky.kr/article/900868?note=2285730
퍼블리싱 파일을 react에 맞게 세팅하는 방법 https://leejungyeoul.tistory.com/82

우아한형제들에 퍼블리셔가 없는 이유

https://blog.chosunghyun.com/kr-how-woowabros-front-devs-work-part-2/

Q. 퍼블리셔라는 직군이 있는 회사도 있습니다. 우아한형제들은 어떤가요?
A. 우아한형제들에는 퍼블리셔가 없다. 예전에는 있었는데 현재는 없으며 채용 계획도 없다.
퍼블리셔는 갑론을박이 조금 있는 주제이다. 웹에 대한 관점의 차이 때문이다.
우아한형제들은 웹을 "공공의 문서"라고 보기보다는 "애플리케이션"의 관점에서 바라보고 있다.
그래서 퍼블리셔가 아닌 프론트엔드 개발자가 있는 것이다.
또 프론트엔드에서 컴포넌트 개발을 하는 등 "재사용성"에 집중하는 것이다.
예를 들어 CSS는 큰 프로젝트에서 깨지기가 너무 쉽다.
즉 "퍼블리셔"는 기술을 터치하는 맥락에서 다른 접근 방향을 가지는 것이다.

Q. (연장) 새로운 기술을 받아들이기로 하면 그 기술을 어떻게 적용하나요?
A. 배민은 5년 전까지만 해도 PHP를 주로 사용했다. 전부 서버 사이드 렌더링이었다. 그때는 이것이 당연했다.
백엔드는 자바를 사용했다. 이후 마이크로 서비스 아키텍처가 나을 것이라고 판단하고 API 서버를 제작하기 시작했다.
즉, 이전에는 php로 렌더링 하는 html 문서뿐이었던 웹이 한순간에 또 다른 클라이언트가 된 것이다.
이때까지만 해도 우아한 형제들에는 웹 퍼블리셔만 있었고 프론트엔드 개발자가 없었다.
이런 기술적 과도기를 극복하기 위해 "우아한JS"라는 것을 만들었다.
퍼블리셔가 웹 개발자로 소프트랜딩 할 수 있도록 돕는 프레임워크였다.
이 덕분에 많은 퍼블리셔들이 웹 개발자로 1~2년 사이에 직군을 전환할 수 있었다. 기술 허들을 낮춘 것이다.
배달의 민족 내에는 우아한JS로 운영되는 다양한 프로젝트가 있다.
여전히 우아한JS를 사용하는 프로젝트도 있다.
그 후 2년간 주력 기술을 리액트와 타입스크립트로 전환했고, 이제는 이것이 기술 표준이 되었다.
서비스에 사용하는 기술을 전환한다는 것은 달리는 차의 바퀴를 바꾸는 것이다.
조금씩 바꾸며 괜찮은지 지속적으로 확인해야 한다.
또 팀에 있는 개발자의 수, 실력, 성향에 따라서 매우 다르다.
출처 - 우아한JS (우아한형제들 기술블로그) https://techblog.woowahan.com/2507/

소프트랜딩 : 비행기가 충격을 받지 않고 사뿐히 착륙하는 것을 뜻한다.

productuidev

필요한 내용을 공부하고 저장합니다.

이전 포스트

[fastcampus] Ch.5 React Component Styling (2)

다음 포스트

[fastcampus] Ch.5 React Component Styling (3)

React Study

Ch.5 React Component Styling (3)

6. Ant Design (앤트디자인)

설치하기

src/index.js

src/App.js

Antd 분할하기 (Modularized)

방법 1

방법 2

Antd 아이콘 추가하기

src/App.js

Antd Grid 활용 (레이아웃 쉽게 잡기)

Columns, Gutter

offset

Style-Components

참조

React 협업 이슈 (CSS 관리포인트)

우아한형제들에 퍼블리셔가 없는 이유

[fastcampus] Ch.5 React Component Styling (2)

[fastcampus] Ch.6-1 HOC (1)

0개의 댓글