Figma에서 디자인? 을 하고 React로 export 후 SpringBoot와 연동하여 데이터를 출력해보자.

# Figma 페이지 디자인? 을 해보자.

일단 웹화면에 보이는 페이지를 만들려면 페이지를 디자인 해야한다.

Figma는 디자인을 하는 프로그램이고, Starter 패키지를 적용하면, 페이지를 3개까지 무료로 만들 수 있다.

그외, 무료로 테스트 하기 좋은 디자인 툴 이라고 생각하여 Figma로 디자인을 해보기로 했다.

(사실 디자인이라기 보다는 백엔드에서 데이터를 가져다가 뿌려주는 걸 테스트 하는정도...!)

1. Figma 가입 및 프로그램 다운로드

https://www.figma.com/ko-kr/

Figma: 협업을 위한 인터페이스 디자인 도구

figma 공식 사이트에서 Windows용 프로그램을 다운로드 할 수 있으며, 웹애서도 작업이 가능하다. 간단한 구글 인증 후 바로 사용이 가능하니 편리하다.

2. React로 export 하기 위한 플러그인

Figma에서 React로 export를 하기 위해서는 React 코드로 변경해주는 플러그인이 필요하다.

다수의 플러그인이 존재한다. (아래 리스트 참고)

검색을 해보면 많은 플러그인이 나온다. 여기서 나는 두번째에 있는 Builder.io 를 선택했다.

3. 플러그인 설치 방법

바탕 화면에서 마우스 우측 클릭 > Plugins > Manage Plugins... 를 클릭 후 원하는 플러그인을 검색하여 설치 후 사용하면 된다.

두번째 방법은 아래의 초록색 네모칸의 아이콘을 클릭하면 바로 플러그인 관리 화면이 나온다. 원하는 플러그인을 검색 후 사용하면 된다.

4. 디자인 하기

디자인 이랄것이 없으므로, 디자인은 각자 알아서 하기...

나는 아래와 같이 했다. 예쁘게 하지 않았다. 추후에 포트폴리오 만들때나 이쁘게 꾸며볼 생각이다.

단순히 백엔드에서 DB 데이터를 가져다가 잘 뿌려주는지 그리고 뿌려주는 과정만 체크 해볼 생각이다.

5. Builder.io를 통해 디자인한 Figma 정보를 React 로 변경 후 React에서 불러오기

Builder.io에서 내가 Design? 한 것을 React로 변경해준다.

변경한 코드를 React에 적용 해주면 된다.

6. React에 적용하면 아래와 같다.

App.js

import React from "react";
import "./App.css";
import MyComponent from "./MyComponent"; // Import MyComponent

function App() {
  return (
    <div className="App">
      <MyComponent /> {/* Use MyComponent */}
    </div>
  );
}

export default App;

MyComponent.js

import React, { useState, useEffect } from "react";
import styled from "styled-components";

function MyComponent() {
  const [user, setUser] = useState({});

  useEffect(() => {
    fetch("http://localhost:8080/users/1")
      .then((response) => response.json())
      .then((data) => setUser(data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <Box>
      <Div>Test Page</Div>
      <Div2 />
      <Div3>ID: {user.id}</Div3>
      <Div4>Username: {user.username}</Div4>
      <Div5>Email: {user.email}</Div5>
      <Div6>State: {user.state}</Div6>
    </Box>
  );
}

const Box = styled.div`
  background-color: #d9d9d9;
  display: flex;
  max-width: 814px;
  flex-direction: column;
  align-items: start;
  font-size: 32px;
  color: #000;
  font-weight: 400;
  padding: 74px 66px;
  @media (max-width: 991px) {
    padding: 0 20px;
  }
`;

const Div = styled.div`
  margin-left: 38px;
  font: 64px Inter, sans-serif;
  @media (max-width: 991px) {
    margin-left: 10px;
    font-size: 40px;
  }
`;

const Div2 = styled.div`
  border-color: rgba(0, 0, 0, 1);
  border-style: solid;
  border-width: 1px;
  background-color: #000;
  align-self: stretch;
  margin-top: 32px;
  height: 1px;
  @media (max-width: 991px) {
    max-width: 100%;
  }
`;

const Div3 = styled.div`
  font-family: Inter, sans-serif;
  margin: 112px 0 0 46px;
  @media (max-width: 991px) {
    margin: 40px 0 0 10px;
  }
`;

const Div4 = styled.div`
  font-family: Inter, sans-serif;
  margin: 31px 0 0 46px;
  @media (max-width: 991px) {
    margin-left: 10px;
  }
`;

const Div5 = styled.div`
  font-family: Inter, sans-serif;
  margin: 31px 0 0 46px;
  @media (max-width: 991px) {
    margin-left: 10px;
  }
`;

const Div6 = styled.div`
  font-family: Inter, sans-serif;
  margin: 31px 0 0 46px;
  @media (max-width: 991px) {
    margin-left: 10px;
  }
`;

export default MyComponent;

- 관련 코드는 github에 올려 놓겠다. (내가 프론트 개발자가 아니다보니 코드는 그냥 화면에 나오게끔만 구성함.)

https://github.com/Nanninggu/React_My_App.git

GitHub - Nanninggu/React_My_App: React_My_App_Fot_Tests

7. 데이터를 뿌려줄 백엔드 코드는 아래와 같다.

- (역시 내가 백엔드 개발자가 아니다 보니 코드는 그냥 화면에 던져줄 정도로만 되어 있다.)

https://github.com/Nanninggu/Hexagonal-Architecture-Pattern.git

GitHub - Nanninggu/Hexagonal-Architecture-Pattern: About Hexagonal-Architecture

- 참고로 백엔드는 postgresql, ApacheKafka를 localhost에 미리 기동 해놓아야 한다.

- Properties 정보를 보면 이해가 쉬울것이다. 참고.

# Application Name
spring.application.name=Hexagonal-architecture-pattern

# Postgres DB
spring.datasource.url=jdbc:postgresql://localhost:5432/PracticeDB
spring.datasource.username=postgres
spring.datasource.password=test1234
spring.datasource.driver-class-name=org.postgresql.Driver

# Logging
logging.level.org.springframework.web=INFO
logging.level.org.hibernate=ERROR

# Kafka 세팅
spring.kafka.bootstrap-servers=localhost:9092
spring.kafka.consumer.group-id=zzanggu-test
spring.kafka.consumer.enable-auto-commit=true
spring.kafka.consumer.auto-offset-reset=latest
spring.kafka.producer.key-serializer=org.apache.kafka.common.serialization.StringSerializer
spring.kafka.consumer.key-deserializer=org.apache.kafka.common.serialization.StringDeserializer
spring.kafka.producer.value-serializer=org.apache.kafka.common.serialization.StringSerializer
spring.kafka.consumer.value-deserializer=org.apache.kafka.common.serialization.StringDeserializer
spring.kafka.consumer.max-poll-records=1000

8. 마지막 결과물을 보면 아래와 같다.

리액트와 백엔드를 모두 실행시킨 결과는 아래와 같다.

디자인하고, React로 옮기고, SpringBoot에서 데이터를 가져와 화면에 뿌려주는 작업까지 간단하게 완료 하였다.

이제 포트폴리오를 만들어보자.

 

- 끝 -