최종회고 상편에 이어서...

modal 위치

파트너님은 modal까지 직접 만드시는 능력자 분이셨다. 다만 내가 만들어주신 modal을 사용하면서 오류가 발생하였는데, 모달이 현재 창을 기준으로 뜨는 것이 아니라, 상단에 뜨는 것이었다.

modalBackground CSS

const ModalBackground = styled.div`
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  animation: ${fadeIn} 0.4s cubic-bezier(0.5, 0, 0, 0.8) forwards;

  * {
    font-weight: 600;
    color: ${({ theme }) => theme.colors.black};
  }
`;

• Modal 뒤의 블러처리 되는 배경을 position: fixed로 한다. 그 이유는 fixed는 보고있는 창을 기준으로 하는 절대 좌표, absolute는 부모를 기준으로 하는 절대 좌표이기 때문이다. ModalPortal을 쓰더라도 body를 부모로 하여 상속받는 Modal이 생성되므로 position: fixed로 처리하여야 한다.

input history 툴팁 제거

• autoComplete="off" 속성을 줘서 해결!
  
  

styled-component 전역 theme

1) ThemeProvider

• import { ThemeProvider } from "styled-components" ThemeProvider를 import하여 ${({theme})=> theme.color.primary} 와 같이 사용한다.

2) useTheme

• 그렇다면 styled-component내에서 말고, component안에서 사용하고 싶을땐? useTheme를 import하여 사용한다.

SVG 괴담

svg 파일을 export 하여 사용하던 중, 계속해서 같은 svg가 나오는 경우가 발생하였다.

• svg상의 fill url이 똑같아서 생기는 오류였다. 다른 svg를 겹치지 않는 이름으로 바꿔서 해결하였다.

column 고정

종종 column 수를 고정하고 싶을 때 width를 계산해서 적용해줄 것인지, 아니면 table을 사용할지가 고민이었다! 이번에 도움 받은 방법은 width를 계산해서 하는 방법이었다.

• 가장 상위의 container div의 width가 100%일 때, 감귤들을 감싸는 div가 각각 10%의 width를 가지게 된다면 한 줄에 10개가 들어가게 된다.

• 또한 창의 크기가 줄어들어 div들의 간격이 너무 촘촘해질때는 max-width를 80%를 줌으로써 해결할 수 있다.

로그인 유지

그동안 스켈레톤 코드로 주어진 app.js에서 currentUser를 받아와 전역에 userState를 저장해주는 코드를 그대로 사용해왔다. 한번도 왜 이런 코드가 사용되는지 생각해보지 않고 복붙을 일삼은 나는 깊은 반성..을 하고 3차 프로젝트는 recoil을 사용해 로그인 유지를 해줬다.

1) loginState 활용

state.js

export const loginState = atom({
  key: "#loginState",
  default: localStorage.getItem("accessToken"),
});

export const userState = selector({
  key: "#userState",
  get: async ({ get }) => {
    const isLogin = get(loginState);
    const userToken = localStorage.getItem("accessToken");
    if (!isLogin || !userToken) return null;

    try {
      const res = await http.get("user");
      return res.data;
    } catch (err) {
      console.log("🚀 ~ userState error : ", err);
    }
  },
});

• 초기에는 default에 boolean값을 넣어줬지만, 토큰이 있는 것을 확인하고 true로 바꿔주면, 새로고침 후에 false로 바뀌는 당연한 현상이 발생했다. 후에는 localStorage에 토큰이 있냐없냐로 바꿔줬다.

• 이후에는 app.js 에서 따로 로그인 검증을 해주지 않고 header에서 recoil을 이용해 로그인/로그아웃 버튼 관리를 해줬다.