기존에 사용했던 로그인 관련 상태 관리 리덕스

import { createSlice } from "@reduxjs/toolkit";
import { getCookie } from "../../utils/cookieUtils";

  function deleteCookie(name: string) {
    document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }

const accessToken = getCookie("access_token");


const initialState = {
  isLogin: !!accessToken,
};

const isLoginSlice = createSlice({
  name: "isLogin",
  initialState,
  reducers: {
    logIn: (state) => {
        state.isLogin = true;
    },
    logOff: (state) => {
        state.isLogin = false;
        deleteCookie("access_token"); // 엑세스 토큰 삭제
        deleteCookie("refresh_token"); // 리프레쉬 토큰 삭제
        deleteCookie("nickname"); // 닉네임 삭제
        deleteCookie("emoticon"); // 이모티콘 삭제
        deleteCookie("email"); // 이메일 삭제

    },
  },
});

export const { logIn, logOff } = isLoginSlice.actions;
export default isLoginSlice.reducer;

그리고 아톰으로 저장하여 사용한 리코일 코드

import { atom, useRecoilState } from 'recoil';
import { getCookie } from '../utils/cookieUtils';


// 리덕스에서 사용했던 deleteCookie 함수를 그대로 사용합니다.
function deleteCookie(name: string) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}

// access_token 쿠키를 가져옵니다.
const accessToken = getCookie('access_token');

// Recoil 아톰(atom)을 사용하여 상태를 정의합니다.
export const isLoggedInState = atom({
  key: 'isLoggedInState',
  default: !!accessToken, // 기본값은 access_token 쿠키가 있을 경우 true, 없을 경우 false
});

// 리듀서 대신 Recoil 상태를 사용합니다.
export function useLoginStatus() {
  const [isLoggedIn, setIsLoggedIn] = useRecoilState(isLoggedInState);

  const logIn = () => {
    setIsLoggedIn(true);
  };

  const logOff = () => {
    setIsLoggedIn(false);
    // 쿠키 삭제 등의 작업을 수행합니다.
    deleteCookie('access_token');
    deleteCookie('refresh_token');
    deleteCookie('nickname');
    deleteCookie('emoticon');
    deleteCookie('email');
  };

  return { isLoggedIn, logIn, logOff };
}

이제 로그인 페이지에서

  const [isLoggedIn, setIsLoggedIn] = useRecoilState(isLoggedInState);

로그인을 상태를 useRecoilState를 사용해 업데이트 해주면 아톰에서 그걸 저장하고?

내가 사용하고 싶은 컨퍼넌트에서 useRecoilValue를 통해 사용 해주면 된다.

  const isLoggedIn = useRecoilValue(isLoggedInState);

결과

너무나 편함!!!

아래는 프론트엔드의 기본 적인 코드 나는 토큰을 쿠키에 담아서 저장했고 이걸 헤더에 담아 주었다. 아참 시작전에 EventSourcePolyfill을 설치하고 import 해주자

useEffect(() => {
    const accessToken = getCookie("access_token");
    const refreshToken = getCookie("refresh_token");

    const eventSourceInitDict: any = {
      headers: {
        accessToken: accessToken || "",
        refreshToken: refreshToken || "",
      },
    };

    sse.current = new EventSourcePolyfill(
      `${process.env.REACT_APP_SERVER_URL}/서버에서 준 주소,
      eventSourceInitDict
    );

    sse.current.onopen = (e) => {
      setIsStarted(true);
      console.log("[sse] 연결이 열렸습니다", { e });
    };

    sse.current.addEventListener("addComment", (event: any) => {
      const eventData = JSON.parse(event.data);
      console.log("댓글을 받았습니다:", eventData);
      setEventDataList((eventDataList) => [...eventDataList, eventData]);
    });

    sse.current.addEventListener("addMessageRoom", (event: any) => {
      const eventData = JSON.parse(event.data);
      console.log("메세지를 받았습니다:", eventData);
      setEventDataList((eventDataList) => [...eventDataList, eventData]);
    });


    sse.current.onerror = (err) => {
      console.log("[sse] 에러 발생", { err });
    };

    // 컴포넌트가 언마운트될 때 SSE 연결을 해제합니다.
    return () => {
         if (sse.current) {
        sse.current.close();
      }
    };
  }, []);

문제점

SSE가 받아 지는것을 성공했지만 위의 이미지처럼 나는 이걸 새로고침을 해도 저장할수 있어야 했지만 SSE는 그것이 불가능했다.

해결책

HTTP방식으로 서버단에서 따로 저장한것을 GET도 하는 방식을 추가 대신 우리가 지속적으로 요청을 하면 SSE를 사용하는 의미가 없으니

useEffect(() => {
  if (AlertData) {
    setEventDataList(AlertData);
  }
}, [AlertData]);

useEffect로 Get 데이터가 있으면 SSE데이터에 추가하는 방식이다.

문제점2

SSE로 받은 데이터를 삭제를 시도하면 HTTP방식으로는ㄴ 아직 데이터가 없는 상태이다. 즉 새로고침을 해줘야 GET으로 받은 데이터가 존재함이 되므로 삭제가 가능 하게 된다.

해결책2

useEffect로 SSE로 데이터를 받으면 queryClient 시켜서 새로고침을 시켜준다.

useEffect(() => {
  if (eventDataList) {
    queryClient.invalidateQueries("getAlert");
  }
}, [eventDataList]);

남은숙제

클릭하면 해당 메세지창이나 해당 댓글 페이지로 이동하기 메세지는 잘되는데 해당 댓글에는 두개의 쿼리스트링을 받는데 id값이 해당 게시물의 id가 아니라 댓글의 id로 따라가서 엉뚱한 게시물로 이동이 됨...

웹소켓과 SSE(Server-Sent-Event)에 차이점

Socket과 SSE에 가장 큰 차이점을 하나 말해보라고 한다면 Socket은 양방향(bidirectional)으로 데이터를 주고 받을 수 있지만 SSE(Server-Sent-Event)를 사용하게 되면 클라이언트는 데이터를 받을 수만(mono-directional) 있게 됩니다. 그러니까 어떤 기능이 필요한지에 따라서 뭐를 사용할지 결정하면 됩니다.

마지막으로 총 청리

웹소켓과 SSE에 가장 큰 차이점은 통신 방향이다. 웹소켓은 양방향 SSE는 단방향이기 때문에 클라이언트가 데이터를 보낼 필요가 있을 때는 소켓. 예를 들어 FPS 게임 같은 경우. 하지만 SSE는 서버에서 클라이언트로만 데이터 전송이 가능하기 때문에 주로 노티를 줄 때 많이 사용된다. 지원하는 브라우저 같은 경우 IE를 빼고 생각한다면 둘 다 거의 대부분에 모던 브라우저에서 Polyfills 없이 사용이 가능하다. 하지만 Server-Sent Event도 Polyfills를 사용하면 되기 때문에 큰 문제가 되진 않는다. SSE를 사용할 때 buffer만 꺼주면 소켓이랑 같이 실시간 업데이트가 가능하다. SSE를 사용할 때 주의할 점은 HTTP/1을 사용할 경우 브라우저에 최대 연결 수가 보통 6개로 제한되기 때문에 6개 이상 텝을 열었을 때 작동이 잘 안 될 수가 있다. 하지만 HTTP/2를 사용할 경우 기본 최대 연결 수가 100이 됨으로 문제가 될 가능성이 많이 줄어든다. 소켓은 서버와 연결이 끈겼을 때 자동으로 연결해주는 기능이 없기 때문에 스스로 코드를 짜야되지만 서버사이드 이벤트 같은 경우에는 자동으로 3초마다 한 번씩 확인을 한다. 서버사이드 이벤트 같은 경우에는 firewall이 있는 경우도 사용이 큰 문제없이 가능하기 때문에 firewall이 있을 경우 사용을 고려하는 것도 좋다.

그래서 textarea로 바꾸어 주었다

const ContentInput = styled.textarea`
  width: 1200px;
  height: 180px;
  font-size: 16px;
  margin: 40px auto 60px;
  padding-left: 20px;
  padding-top: 20px;
  border-radius: 8px;
  border: solid 1px #cfced7;
  background-color: #fff;
  outline: none;
  color: #484848;
  &::placeholder { 
    color:  #dddce3;;
  }
`

근데 왜 플레이홀더 색깔이 안바뀌냐?? 그건

 &::placeholder { 
    color:  #dddce3;;
  }

이렇게 넣어줘야 바뀜 이것땜에 1시간동안 고생함 ㅠㅠ

결과물

저렇게 레이아웃 되면서 클릭하면 선택할 수 있는 모달이 내려 온다.

처음에는 어렵게 생각했지만 div박스안에 div박스를 만들어 클릭 했을때만 저 알약 같은 박스만 레이아웃 되게 하면 되는거 였음

 const handleBoxClick = (index: number) => {
        setSelectedBox(index);
        setIsWhele(false);
        setIsDate(false);
        setIsTime(false);

        if (index === 0) {
          setIsWhele(true);
        } else if (index === 1) {
          setIsDate(true);
        } else if (index === 2) {
          setIsTime(true);
        }
      };

총 3개의 박스가 있으니 조건을 걸어 둔다.

    <NavigationBoxRayout>
            <NavRayout>
            <InnerBox
            onClick={() => {handleBoxClick(0); setIsWhele(true);}} highlighted={selectedBox === 0}>
                    <TextBox>
                        <TextContent>여행 카테고리</TextContent>
                        <TextContent2>{selectedCountry ? selectedCountry : "여행지를 선택해주세요."}</TextContent2>
                    </TextBox>
                </InnerBox>

                <InnerBox
                onClick={() => {handleBoxClick(1); setIsDate(true);}} highlighted={selectedBox === 1}>
                <TextBox>
                        <TextContent>날짜</TextContent>
                        <TextContent2>{formattedDate ? formattedDate : "날짜를 선택해주세요."}</TextContent2>
                    </TextBox>
                </InnerBox>
                <InnerBox onClick={() =>{handleBoxClick(2); setIsTime(true);}} highlighted={selectedBox === 2}>
                <TextBox>
                        <TextContent>시간</TextContent>
                        <TextContent2>시간을 선택해주세요.</TextContent2>
                    </TextBox>
                </InnerBox>
            </NavRayout>
        </NavigationBoxRayout>


        {/* 모달 부분 */}
        <ModalRayout>
            {isWhele && (
            <SelectCountry id={param} onClick={setSelectedCountry} />
            )}
            {isDate && (
           <CustomCalendar setFormattedDate={setFormattedDate} /> 
            )}
            {isTime && (
             <Clock value={selectedTime} onChange={setSelectedTime} />
            )}
        </ModalRayout>

이러게 온클릭이벤트를 걸어주고 프롭스를 내려준다.

const InnerBox = styled.div<InnerBoxProps>`
    width: 331px;
    height: 84px;
    display: flex;
    padding: 20.4px 140px 20.4px 38px;
  ${({ highlighted }) => highlighted && `
    width: 331px;
    height: 84px;
    display: flex;
    padding: 20.4px 140px 20.4px 38px;
    border-radius: 58.7px;
    box-shadow: 1.3px 0 16.6px 0 rgba(0, 0, 0, 0.25);
    border: solid 1px #2bde97;
    background-color: #fff;
  `}
`;

마무리는 이렇게 효과전과 효과후를 만들어 주면 끝!

첫시도

데이터를 맵으로 뿌리는곳에 옵셔널체인징을 걸어 보았다

결과 실패

두번째 시도

유즈이펙트를 사용하면 되지 않을까라는 생각에 사용해봄 하지만 여전히 로딩중이 띄어지지 않았다..

결과 실패

세번째 시도

다량의 데이터를 가져오는데 시간이 필요하다면 셋타임 아웃을 걸어 데이터를 받을 시간을 벌어보자

결과 성공

아래는 코드

export const Main: React.FC = () => {
  const queryClient = useQueryClient();
  const [showData, setShowData] = useState(false);
  const { isLoading, isError, data } = useQuery("mainPost", getHomePosts);

  useEffect(() => {
    const delay = 300; 
    if (!isLoading && !isError) {
      setTimeout(() => {
        setShowData(true);
      }, delay);
    }
  }, [isLoading, isError]);

  if (isError) {
    return <p>오류가 발생하였습니다...!</p>;
  }

  console.log("data", data)

  return (
    <div>
      <Header/>
      <StCardContainer>
      {showData && data?.map((item: cardItem) => (
          <Cards key={item.id} items={item} />
        ))}
      </StCardContainer>
    </div>
  )
}

1.버튼 눌러 로그인화면 띄우기 2.카카오에게 인가 코드 받아오기 3.인가코드는 주소의 쿼리스트링에 담아져서 제공된다. 이걸 파싱해서 백엔드에게 전달한다. 4.(백엔드는 우리가 준 코드를 알아서 처리해서 토큰을 준다.) 5.그 토큰을 받아서 로그인을 유지한다.

1. 버튼 눌러 로그인화면 띄우기

버튼을 누르면 카카오에서 제공하는 로그인 화면을 띄워주기만 하면 된다. 카카오에서 제공하는 로그인 화면은 아래 링크 https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code

안에 있는 변수인 REST_API_KEY, REDIRECT_URI는 백엔드가 kakao developers에서 얻어와서 줄 것 이다. 저 두 변수는 유출되면 안되니 조심하자.

그리고 window.location.href를 이용해 주소를 바꿨다.

// ----------------------------------------카카오 로그인
  const REST_API_KEY = '백엔드에서 받을거';
  const REDIRECT_URI = '백엔드에서 받을거';
  const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const kakaoLoginHandler = () => {
    window.location.href = link;
  };

return (
     <Button
          color={'kakaoLogin'} 
          onClick={kakaoLoginHandler}
          size={'large'}
          name={"Kakao로 시작하기"}
          kakao={true}
          />
    );
};

2. 카카오에게 인가 코드 받아오기

인가 코드는 어떻게 받아올까?

1번을 잘 수행했다면 페이지에 로그인 하기 버튼이 생겼을 것이다. 이걸 누르면 카카오 계정 정보를 입력할 수 있는 창이 뜬다.

그리고 제대로 했다면 크롬 주소를 한번 봐보자.

백엔드에서 받은 REDIRECT_URI에 ?code?=이상한코드가한가득 이런게 똥꼬에 붙어있을 것이다. 이게 카카오에서 주는 인가 코드이다. 이걸 백엔드한테 주기만 하면 된다!

3. 인가코드는 주소의 쿼리스트링에 담아져서 제공된다. 이걸 파싱해서 백엔드에게 전달한다.

파싱해서 백엔드에게 전달하기 위해선 파싱하는 코드도 필요하다. 그걸 어디다 적을 것이냐..

나는 따로 Recirection이라는 페이지를 팠다. 백엔드에서 준 URI는http://localhost:3000/kakao/callback이므로 /kakao/callback에 받은 코드를 백엔드에 전달할 로직이 작성된 Redirection 페이지를 띄울 것이다.

아래처럼 작성해 연결해주었다.

const code = window.location.search; // code?=이상한코드가한가득

나는 저대로 달라해서 줬지만 백엔드에서 인가 코드 자체만 달라고 한다면 아래처럼 받아오자.

const code = new URL(dococument.location.toString()).searchParams.get('code'); // 이상한코드가한가득

이제 code안에 담아진 카카오의 인가 코드를 백엔드로 보내주기만 하면 된다.

useEffect(() => {

  getKakaoToken(code)
  alert("로그인을 완료하였습니다.")

  navigate('/')


}, []);
  return (
    <div>Redirection</div> 
  )
}

나는 리액트쿼리를 사용했다 아래는 api요청

// 카카오 토큰 받아오기
  const getKakaoToken = async (code: string | null) => {
    try {
      const response = await instance.get(`백엔드: 여기로 코드주세요~ 하는 주소를 코드?code=${code}`)

    document.cookie = `accessToken=${response.headers.accesstoken}; path=/;`;
    document.cookie = `refreshToken=${response.headers.refreshtoken}; path=/`;

    return response.data;
    } catch (error) {
      console.error(error);
    }
  }

5. 그 토큰을 받아서 로그인을 유지한다.

위에 코드에서 보듯 나는 쿠키에 저장한 토큰을 사용했다

비동기로 뭔가를 할때 지연이 있을때 그 지연을 직접 세팅해서 넣어줄수 있는 새로운 훅

처음 들었을때 이걸 스피너의 로딩 화면을 일부러 0.5초 정도 보여주면 어떨까라는 생각이 들어서 저장 해둠 나중에 프로젝트에서 로딩 스피너를 사용할때 로딩화면을 0.5초정도 더 보여줘서 로딩 다음 화면에서 이미지를 완전히 받아올때까지 기다려주는 역활을 하지 않을까?

그리고 힘들었던점은 CSS.. 하나만 틀려도 이쪽 저쪽 난리가 아니었던... 그래도 결과물을 보니 뿌듯합니다.

아래는 결과물

메인화면

로그인 화면

글쓰기 화면

상세페이지

const accessToken = getCookie("accessToken");



const addCommentMutation = useMutation(
    (commentText) =>
      instance.post(
        `/api/comments`,
        {
          postId: id,
          content: commentText,
        },
        {
          headers: {
            Accept: '*/*',
            Authorization: `${accessToken}`,
          },
        }
      ),
    {
      onError: (error) => {
        console.log('댓글 작성 실패', error);
      },

      onSettled: () => {
        queryClient.invalidateQueries('comments');
      },
    }
  );


  const handleCommentSubmit = async (e) => {
    e.preventDefault();
    try {
      await addCommentMutation.mutateAsync(commentText);


      setCommentText('');
    } catch (error) {
      console.log('댓글 작성 실패', error);
    }
  };

// } // await axios.post( // ${process.env.REACT_APP_SERVER_URL}/api/like, // payload, // { // headers: { // 'Content-Type': 'application/json', // Accept: "/", // Authorization: ${accessToken}, // }, // } // ); // // 좋아요 버튼 상태 변경 // setIsLiked((prevState) => !prevState);

// } catch (error) { // console.log('좋아요 처리 실패', error); // } // }; // -----------------------좋아요 기능----------------------------

    const accessToken = getCookie("accessToken");

    const likeMutation = useMutation((payload) =>
        axios.post(`${process.env.REACT_APP_SERVER_URL}/api/like`, payload, {
          headers: {
            'Content-Type': 'application/json',
            Accept: '*/*',
            Authorization: `${accessToken}`,
          },
        }),
      {
        onError: (error) => {
          console.log('좋아요 처리 실패', error);
        },
      }
    );

    const handleLikeButton = async () => {
      try {
        const payload = {
          postId: id,
        };

        // 좋아요 버튼의 상태를 변경
        setIsLiked((prevState) => !prevState);

        // 서버로 좋아요 요청 보내기
        await likeMutation.mutateAsync(payload);
      } catch (error) {
        console.log('좋아요 처리 실패', error);
      }
    };

리액트 쿼리는 useMutation라는 훅으로 동작을 처리합니다. 주로 데이터를 변경하는 요청 (생성,업데이트,삭제)등을 보내고 서버의 응답을 처리할때 사용됩니다. useMutation은 axios 또는 fetch와 같은 HTTP 클라이언트와 함께 사용되어 비동기 통신을 쉽게 처리하고, 응답 데이터를 관리하고 상태를 업데이트할 수 있도록 도와줍니다.

이로써 여러 개의 인자를 받을 수 있으며, 요청을 커스터마이징하고 응답을 처리하는 방법을 조정할 수 있습니다.

서버와 연결을 위해 코드를 작성하고 아래 로그인을 시도해 보았지만 로그인 버튼을 클릭하는 순간 리다이렉션이 되는 현상이 계속 되었다. 왜 이럴까

시도1: 백엔드 서버와의 통신 점검 결과: 게시판의 GET은 되므로 아님

시도2: consloe.log 찍어보기 결과: 콘솔은 받는다.

시도3: 리다이렉션 된다는것을 파악하게됨

원인

form 태그는 기본적으로 제출되면 웹 페이지를 새로고침하거나 다른 페이지로 리디렉션되는 동작을 수행합니다. 이 동작은 폼을 제출하는 것이 일반적인 웹 페이지의 기본 동작이기 때문에 브라우저가 기본적으로 수행합니다.

그러나 React 애플리케이션에서는 주로 SPA (Single Page Application) 방식을 사용하며, 전통적인 웹 페이지처럼 매 요청마다 새로운 페이지를 로드하는 것이 아닌, 단일 페이지 내에서 동적으로 컴포넌트를 교체하면서 사용자와 상호작용하는 방식을 취합니다.

이런 SPA 방식에서는 폼 제출 시 페이지 리로딩 없이 AJAX 요청을 사용하여 서버와 상호작용하고, 페이지를 업데이트하는 것이 일반적입니다. 이러한 동작을 위해서는 event.preventDefault() 함수를 사용하여 폼의 기본 제출 동작을 막아야 합니다.

따라서 LoginState 함수 내에서 폼을 제출할 때 event.preventDefault()를 호출하지 않았기 때문에, 폼이 기본적인 제출 동작을 수행하고 페이지가 새로고침되면서 SPA 방식의 장점을 잃어버리는 문제가 발생했던 것입니다.

event.preventDefault()를 추가하여 폼 제출의 기본 동작을 막으면, 페이지가 리로딩되지 않고 비동기 요청이 수행되도록 할 수 있습니다.

  const LoginState = async (event) => { 
    event.preventDefault();
    console.log(process.env.REACT_APP_SERVER_URL)
    try {

따라서 함수 내에 event.preventDefault();를 추가 해줬더니 깔끔하게 로그인이 됌

어제 로그인 페이지에 이어 오늘은 집사진이라는 상세페이지를 구현 했습니다. 틱히 어려웠던 점은 오른쪽에 있는 4개의 버튼들의 위치를 레이아웃하는것이 힘들었습니다.

  return (
    <PicTotal>
        <PicPadding>
            <PicTop>
                <CardWidth>
                    <CardTop>
                        <DetailTag>
                           <DetailTagText>
                                <TagTextButton>모던스타일</TagTextButton>
                                <TagTextButton>아파트</TagTextButton>
                            </DetailTagText> 
                        </DetailTag>
                        <CardPics>
                             <CardPic src="https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/164890162254034673.jpeg?w=1440"  />
                        </CardPics>
                    </CardTop>
<CustomHr2 />
                    <div>
                        <CommentDiv>
                            <CommentText>
                                댓글
                                <CommentNumber>
                                    46
                                </CommentNumber>
                            </CommentText>
                            <CommentButDiv6>
                                <CommentButDiv5>
                                    <CommentEmoticon>
                                        <CommentEmoticonPic src="https://image.ohou.se/i/bucketplace-v2-development/uploads/cards/snapshots/164890162254034673.jpeg?w=1440"  />
                                    </CommentEmoticon>
                                    <CommentButDiv4>
                                        <CommentButDiv3>
                                            <CommentButDiv2>
                                                <CommentLine contenteditable="true" data-placeholder="칭찬과 격려의 댓글은 작성자에게 큰 힘이 됩니다:)" size='44' isEmpty={isEmpty} onInput={handleChange}>

                                                </CommentLine>
                                                <CommentButDiv>
                                                    <CommentBtn>
                                                        입력
                                                    </CommentBtn>
                                                </CommentButDiv>
                                            </CommentButDiv2>
                                        </CommentButDiv3>
                                    </CommentButDiv4>
                                </CommentButDiv5>
                            </CommentButDiv6>
                        </CommentDiv>

                    </div>
                </CardWidth>

                <SideButtonPosition>
                    <SideButtonSticky>
                        <SideButtonControl>
                            <SideButtonBox>
                                <SideButton>
                                    <SideButtonSpan onClick={handleHeartClick}>
                                        <SideButtonHeart >
                                        {isFilledHeart ? <AiFillHeart  color = "#43C5F0"size={23}/> : <AiOutlineHeart  size={23}/>}


                                        </SideButtonHeart>
                                    </SideButtonSpan>
                                    <SideButtonSpanNumber>
                                        180
                                    </SideButtonSpanNumber>
                                </SideButton>

                                <SideButton>
                                    <SideButtonSpan onClick={handleBookClick}>
                                        <SideButtonHeart>
                                        {isFilledBook ? <FaBookmark  color = "#43C5F0"size={23}/> : <FaRegBookmark  size={23}/>}


                                        </SideButtonHeart>
                                    </SideButtonSpan>
                                    <SideButtonSpanNumber>
                                        180
                                    </SideButtonSpanNumber>
                                </SideButton>
<CustomHr />
                                <SideButton>
                                    <SideButtonSpanLow>
                                        <SideButtonHeart>
                                            <SlBubble size={23}/>
                                        </SideButtonHeart>
                                    </SideButtonSpanLow>
                                    <SideButtonSpanNumber>
                                        180
                                    </SideButtonSpanNumber>
                                </SideButton>

                                <SideButton>
                                    <SideButtonSpanLow>
                                        <SideButtonHeart>
                                            <FiShare2 size={23}/>
                                        </SideButtonHeart>
                                    </SideButtonSpanLow>
                                    <SideButtonSpanNumber>
                                        180
                                    </SideButtonSpanNumber>
                                </SideButton>

                            </SideButtonBox>
                        </SideButtonControl>
                    </SideButtonSticky>
                </SideButtonPosition>
            </PicTop>
        </PicPadding>
    </PicTotal>
  ) 
}

그리고 엄청난 양의 Div지옥

CSS는 생각대로 잘될때는 너무나 재미있지만 하나가 틀어지면 레이아웃이 산으로 가는 현상은 끊었던 담배를 생각나게 합니다. 그래도 재밌어 ㅋㅋ

Git Flow 전략

• main - dev - front, back - feature_개인단위
• 깃 저장소 관리

1. 프론트 저장소 : origin : master / dev / feature_
2. 백 저장소 : origin : master / dev / feature_
3. 개별 저장소 : origin : (fork) master / dev / feature

• 개인 레포에서 작업 후 병합 순서

1. 개인 작업 : add , commit 로컬의 feature 브랜치에서 작업을 진행. git checkout dev dev 브랜치로 이동한다 git merge feature 로컬의 feature 브랜치를 dev 브랜치에 병합함

2. 팀 레포 병합 전 충돌 해결 : git fetch upstream 팀 back 레포를 로컬 dev에 fetch한다. git merge upstream/dev 그 후 팀 레포의 dev 브랜치를 로컬의 dev에 병합하여 발생하는 충돌을 해결한다

3. 개인 레포에 로컬 dev 브랜치를 push한다 git push origin dev

4. Merge Request 신청 : 깃랩 개인 레포 dev 브랜치 → 팀 back 레포 dev 브랜치에 merge request를 생성한다.

Branch 정의 main dev feature

• main( = master) : 바로 product로 release(배포) 할 수 있는 브랜치 하나의 main만 사용, 배포 시 Tag 및 업데이트 내용 추가 작성, 추가 생성하지 않습니다.
• dev : product로 release 할 준비가 된 가장 안정적인 브랜치로 개발이 완료된 상태라면 main 브랜치로 merge합니다. 하나의 dev만 사용, 추가 생성하지 않습니다.
• feature : 새로운 기능을 추가할 때 사용하는 브랜치로 dev 브랜치에서 분기하여 진행되며, 개발이 완료된 기능은 dev 브랜치로 merge합니다. 해당 feature 업무 담당자가 최신 버전의 dev에서 feature/<포지션-기능명>으로 생성합니다.

커밋 메시지 규칙 Type : Subject

• Type

**feat : 새로운 기능**

**fix : 버그 수정에 대한 커밋**

**patch : 기능 부분 코드 수정**

refactor : 코드 리팩토링 수정

rm : 기능 삭제

docs : 문서 수정

style: 스타일링 수정

• 유의미한 코드 단위/기능 완료 시에 커밋
• Reviewer, Assignee 지정

MR 규칙 Title + Description

• TITLE : Type : Subject
• Description : 작업내용 작성
• Reviewer, Assignee 지정

첫째날 완성물

강의로만 클론 코딩을 해왔는데 실제로 내가 사이트를 보고 클론코딩을 해보는건 처음이었다. 이전 프로젝트에서는 나만의 생각으로 그려왔던것에 반해 이미 만들어져 있는것을 똑같이 흉내내는건 상당히 손이 많이 갔다. CSS 스킬 향상에 좋을듯... 재밌어 ㅋㅋㅋ

import React from "react";
import { styled } from "styled-components";
import Card from 'react-bootstrap/Card';

const LogIn = () => {
  return (
    <LoginMain>
    <LoginLayout>
      <Layout>
      <h2>
        <img
        src="/img/todaylogo.png"
        alt="로고 이미지"
        style={{ marginBottom: '30px',
        cursor: 'pointer', marginTop:'40px',width: '150px', height: '50px' }}
      />
      </h2>

      <form style={{width: '300px'}}>
        <LoginInput type="text" placeholder="이메일"/>
        <LoginInput type="text" placeholder="비밀번호"/>

         <LoginBtn>로그인</LoginBtn>

        <section style={{display: 'block', textAlign: 'center'}}>
          <LoginText>비밀번호 재설정</LoginText>
          <LoginText >회원가입</LoginText>
        </section>
      </form>

      <section style={{display: 'block', textAlign: 'center'}}>
          <LoginSns>SNS계정으로 간편 로그인/회원가입</LoginSns>
          <Card.Img 
  variant="top"
  src="/img/facebook.png"
  style={{
    objectFit: 'cover',
    width: '1.3cm',
    height: '1.3cm',
    borderRadius: '50%',
    marginRight: '20px', 
  }}
/>
<Card.Img
  variant="top"
  src="/img/kakao.png"
  style={{
    objectFit: 'cover',
    width: '1.3cm',
    height: '1.3cm',
    borderRadius: '50%',
    marginRight: '20px', 
  }}
/>
<Card.Img
  variant="top"
  src="/img/naver.png"
  style={{
    objectFit: 'cover',
    width: '1.3cm',
    height: '1.3cm',
    borderRadius: '50%',
    marginRight: '20px', 
  }}
/>
        </section>
        <p style={{    marginTop: '24px',
    color: 'rgb(194, 200, 204)',
    fontSize: '14px',
    lineHeight: '18px',
    cursor: 'pointer'}}>로그인에 문제가 있으신가요?</p>
     <LoginUnuserText>비회원 주문 조회하기</LoginUnuserText>

      </Layout>

    <LoginFooter>© bucketplace, Co., Ltd.. All Rights Reserved</LoginFooter>
    </LoginLayout>
    </LoginMain>
  );
};

export default LogIn;

여기 ::after는 뭘까

모던 스타일과 아파트 사이에 가상요소를 만들어 준다

가상요소란

본문

1. 가상요소 ::before, ::after의 정의

1.1) 가상 요소(Pseudo-Element)란?

– 가상클래스(Pseudo-Class)는,별도의 class를 지정하지 않아도 지정한 것 처럼요소를 선택할 수 있습니다. – 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능합니다.

실제 사용 적용

이렇게 단어마다 |를 만들어줘 단어 간의 구분을 만들어준다. 맨 마지막 단어에는 빼고 싶으므로

&:last-child::after {
    display: none;
  }

를 넣어주면 완벽

1번째 시도

결과:실패

onMutate 옵션을 사용하여 mutate 함수가 호출된 직후에 새로운 데이터를 다시 가져오도록 해보았다 실제로는 onMutate 옵션을 사용하는 것으로만으로는 댓글을 작성하자마자 즉시 업데이트되지는 않습니다. onMutate 옵션은 mutate 함수가 호출된 직후에 실행되는 콜백 함수이지만, useQuery 훅이 리턴하는 data는 axios.get 요청을 기반으로 한 데이터로 초기화됌

   const { data: cardData, isLoading, isError, refetch } = useQuery(
        ['card', id],
        () => axios.get(`http://52.79.242.223/api/posts/${id}`).then((res) => res.data),
        {
            staleTime: 10000, // 10초 동안 만료된 데이터를 보여줌
            onMutate: () => {
                // 댓글 작성 시 새로운 데이터를 가져오도록 mutate 함수 호출
                refetch();
            },
        }
    );

2번째 시도

결과:성공

onMutate 옵션은 주로 mutate 함수가 성공적으로 호출되었을 때 데이터를 업데이트하는 등의 사후 작업을 수행할 때 사용됩니다. 따라서 댓글을 작성하자마자 즉시 업데이트를 보고 싶다면, 아래와 같이 onMutate 옵션을 사용하는 것이 아닌, 댓글 작성 성공 후에 refetch 함수를 호출하여 새로운 데이터를 가져오도록 해야 합니다:

    // 댓글 작성 성공 후 호출되는 함수
    const handleCommentSubmit = async (e) => {
        e.preventDefault();
        try {
            // 댓글 작성 요청
            const accessToken = getCookie("accessToken");
            console.log(accessToken);
            await axios.post(
                `http://52.79.242.223/api/comments`,
                {
                    postId: id,
                    content: commentText
                },
                {
                    headers: {
                        Accept: "*/*",
                        Authorization: `${accessToken}`,
                    },
                }
            );

            // 댓글 작성 후 새로운 데이터를 가져오도록 refetch 함수 호출
            refetch();

            // 댓글 작성 후 폼 초기화
            setCommentText('');
        } catch (error) {
            console.log('댓글 작성 실패', error);
        }
    };