240619 TIL

[아웃소싱 프로젝트 3일 차]

 

ui는 완성되었고 나는 팀원분이 만들어두신 supabase database를 불러오는 코드만 작성했고, 불러오는 데 성공했다! 

저녁 이후에 시작해서 얼마 걸리지 않았던 것 같다.  나중에 프로젝트 때 참고할 것 같아서 TIL에 작성해 두고 기록해두려 한다 :>

 

supabase에 있는 database 불러오기 완료

 

supabase 관련 파일을 mainmap.jsx에 import 해준다 

import { getPost } from '../../../supabase/post.api';

 

 

useState , useEffect 이용하여 supabase 데이터 베이스를 불러오는 코드를 작성

 

const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getPost(1);
        setPosts(data);
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    };
    fetchData();
  });

 

 

완성된 MainMaps.jsx 코드 

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { getPost } from '../../../supabase/post.api';


const StyledMainMapsContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 25px;
  width: 1500px;
`;

const StyledMapsBox = styled.div`
  width: 480px;
  height: 400px;
  margin: 1%;
  border-radius: 15px;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  margin-top: 25px;
`;

const StyledMapPhoto = styled.div`
  width: 400px;
  height: 250px;
  background-color: #d9d9d9;
  margin: 0 auto;
  margin-top: 25px;
`;

const StyledSubHeading = styled.h3`
  font-size: 20px;
  font-weight: bold;
  margin-top: 25px;
  margin-left: 37px;
`;

const StyledSubContent = styled.p`
  font-size: 15px;
  color: #999;
  margin-top: 15px;
  margin-left: 2px;
`;

function MainMaps() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getPost(1);
        setPosts(data);
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    };
    fetchData();
  });


return (
    <StyledMainMapsContainer>
      {posts.map((post) => (
        <StyledMapsBox key={post.id}>
          <StyledMapPhoto />
          <StyledSubHeading>{post.title}</StyledSubHeading>
          <StyledSubContent>{post.body}</StyledSubContent>
        </StyledMapsBox>
      ))}
    </StyledMainMapsContainer>
  );
}

export default MainMaps;

 

map() 함수를 이용하여 불러오기 추가했다.  👀

이미지 불러오는 건 내일 할 예정... ㅎㅎ 오늘도 고생했고 내일도 고생하자 파이팅! 🥹