#devlog_넷째 날

Today I Did

• Navigation 컴포넌트 구성
• Navigation 컴포넌트 구현
• Footer 컴포넌트 구성
• Footer 컴포넌트 구현
• Main 페이지 구성

Navigation 컴포넌트 레이아웃 구성 및 기능 구현

심플하지만 border: 3px solid;를 줘서 div별로 구분을 했다. 기능을 우선시해서 UI 디자인은 마지막에 구현하기루!! 😊
전체적으로 flex 적용했는데 생각보다 layout 구현하는 것은 할만했다. ㅎㅎ Logo Image를 클릭하면 메인 페이지로 다시 돌아오게 만들었고 Search 박스는 내일 할 일! 그리고 대망의 Sign In 박스..!!

Sign In 박스를 클릭하면 /signin으로 연결시켰고 로그인에 성공하면 My Page 텍스트가 보인다. 물론 로그인되는 건 아직 연결 못해서 단순하게 클릭했을 때 로그인했다고 인식하게끔 만들었다.

그리고 My Page div에 onMouseEnter() 이벤트를 적용해서 서브메뉴가 보이게했고 마우스 커서가 어디에 있는지 구분을 주기 위해 hover를 적용했다. Favorites와 My Info를 클릭하면 각각에 맞는 페이지로 링크 걸었고 Sign Out을 클릭하면 로그아웃했다고 인식하게끔 만들었다.

여기서 오늘의 문제점 & 힘들었던 점!!

1. 어디에 onMouseEnter()를 주고 어디에 onMouseLeave()를 줘야할지 🤔
2. 새로고침했을 때 자꾸 로그인 상태가 풀려버린다! 🥲

어찌저찌 팀원분의 도움도 받고 열심히 구글링하다가 둘 다 해결했다. (°∀°)b

1번의 문제 해결 방법

처음에 나는 My Page div에 onMouseEnter(), onMouseLeave() 둘 다 줬는데 마우스를 조금만 움직여도 계속 이벤트가 일어나 엄청나게 깜빡깜빡거렸다.. ㅠㅠ
그래서 찾아본 onMouseEnter(), onMouseLeave(), onMouseOver(), onMouseOut() .. 등등 어떤 이벤트는 자식까지 영향을 주고 되게 다양했다.. 살짝 뇌정지가 왔을 때 쯤 설마 버블링을 막아야하나..? 라는 생각까지 했다. 😅 그러다 팀원분의 도움을 받아 금방 해결했다..
해결 방법은 바로 onMouseEnter(), onMouseLeave()를 각각 다른 곳에 주는 것!!
onMouseEnter()은 말그대로 마우스를 올렸을 때 일어나는 이벤트니까 My Page div에 적용시키는 것이 맞고, onMouseLeave()를 SubMenu에다가 적용하면 됐던 것이였다... ㅋㅋㅋ ㅠㅠ 왜 이런 생각을 못했던 것일까!! 당연하잖아.. SubMenu를 떠나면 더이상 안보이는 거.. 나는 문제 해결이 되지않는다면 너무 깊게 생각하는 버릇이 있는데 좀 더 단순하게 생각하도록 해야겠다.

결론

onMouseEnter(), onMouseLeave()를 각각 다른 곳에 준다.

2번의 문제 해결 방법

이상하게 새로고침 할 때마다 로그인 상태가 풀려버리길래 왜 자꾸 안되는가? 하고 끙끙 앓다가 알게된 점.. 새로고침하면 새로 렌더링 되면서 풀려버린다는 것.. 🥲 렌더링 순서 넘나 어려운 것..
react 새로고침 로그인 유지 등등 키워드로 찾아본 결과 로그인 상태를 state가 아닌 Storage에 저장하면 된다고 한다. 하지만 우린 redux를 사용하지 않아서 어디 Storage에 저장하면 좋을지 찾아보던 중 window(브라우저)에 LocalStorage가 있다는 것을 발견했다! 바로 LocalStorage에 로그인 상태를 저장하고 테스트했는데 새로고침해도 로그인 상태가 변하지않는다..!! (๑>ᴗ<๑) 드디어 성공했구나 싶었지만 이게 웬 걸... 브라우저를 껐다켜도 그대로 유지가 되어있더라 ㅋㅋㅋㅋ 띠용
찾아보니 LocalStorage는 브라우저를 껐다켜도 계속 유지가 된다고 한다. 그래서 자동로그인같은 기능을 할 때 유용하게 쓰인다고 한다. 그래서 찾아낸 2안은 바로 SessionStorage다. SessionStorage는 새로고침했을 때만 유지되고 브라우저를 껐다켜면 사라진다! SessionStorage에 로그인 상태를 저장하고 이제 끝인가 싶었지만 또 다른 이슈가 생겼다.. 로그아웃을 하고나선 리렌더링이 되지 않기 때문에 다시 로그인했을 때 My Page 텍스트가 보이지가 않았다. ㅠㅠ.. 또 열심히 구글링구글링.. 🔍🕵️‍♀️ 찾아보니 react가 리렌더링하는 조건은 2가지라고 한다.
1. state가 변화했을 때
2. props가 변화했을 때
그래서 로그인 상태 유지를 잘 하고싶으면 SessionStorage에 저장하는 것 뿐만 아니라 state도 변화를 줘야한다는 점! 다 지웠던 state를 복구하고 돌려보니 찐찐찐으로 다 잘 돌아갔다..!! 😘

결론

redux를 쓰지않았다면, 구현하고싶은 상황에 맞게 localStorage 또는 sessionStorage에 로그인 상태 저장한다.

2번 해결 방법 code

// - App.js
// 로그인할 때 sessionStorage와 state에 로그인(true) 상태 저장
  const loginHandler = () => {
    window.sessionStorage.setItem('loggedInfo', true);
    setIsLogin(true);
  };

// 로그인할 때 sessionStorage와 state에 로그아웃(false) 상태 저장
  const logoutHandler = () => {
    window.sessionStorage.setItem('loggedInfo', false);
    setIsLogin(false);
    navigate('/');
  };


// - Navigation.js
//sessionStorage와 state가 true인지 false인지에 따라 보여주는 텍스트가 다름
{window.sessionStorage.getItem('loggedInfo') === 'true' && isLogin ? (
          <div className="submenu" onMouseOver={() => setHide(false)}>
            <p>My Page</p>
          </div>
        ) : (
          <Link to="/signin">
            <p>Sign In</p>
          </Link>
        )}

Footer 컴포넌트 레이아웃 구성 및 기능 구현

풋터는 정말 간단하게 구현했다. 네비게이션과 마찬가지로 border: 3px solid;를 줘서 div별로 구분을 하고 전체적으로 flex 적용했다. 서비스 소개 div에서는 우리 프로젝트의 레포지토리와 위키를 연결하고, Team Members div에서는 우리 팀원들의 레포지토리로 연결시켜줬다. 이건 styled-componets로 작성했다.

// Anchor 컴포넌트
const Anchor = styled(Span.withComponent('a'))`
  text-decoration: none;
`;

// render되는 부분
<Anchor href="https://github.com/EUNYUSEO" target="_blank">
          Eunyu
</Anchor>

Main 페이지 레이아웃 구성 및 기능 구현

메인 페이지에서 가장 중요한 기능은 바로 뮤지컬 정보를 받아와서 보여주는 것이다!! 대략적으로 레이아웃을 구성하고 뮤지컬 썸네일이 보이는 부분은 Thumbnail 컴포넌트로 따로 만들었다. 우리는 Open API(외부 API)를 받아와서 보여주기 때문에 useEffect로 바로 GET 요청할 수 있게끔 구현했다.

// - Main.js
// 뮤지컬 정보를 받아올 상태
const [list, setList] = useState([]);

// 팀원분이 만들어주신 더미 서버에서 더미 데이터를 받아와서 테스트했다!
useEffect(() => {
    axios.get('https://localhost:4000/dummy/getitems').then((data) => {
      setList(data.data.dbs.db);
    });
  }, []);

// 렌더링 되는 부분에서 Thumbnail 컴포넌트에 props를 전달해 보여지도록 구현했다.
{list.map((el, idx) => {
            return <Thumbnail key={idx} poster={el.poster} title={el.prfnm} />;
})}


// - Thumbnail.js
// Main으로부터 props로 받아온 이미지 주소와 제목을 넘겨줬다.
export const Thumbnail = ({ poster, title }) => {
  return (
    <Box>
      <div className="thumbnail">
        <img src={poster} alt={title} width="300" height="400" />
    	// 찜꽁은 후에 즐겨찾기(별 모양) 아이콘이 될 것이다. ㅎㅎ
        <div className="pick">찜꽁</div>
      </div>
    </Box>
  );
};

추가적으로 전부 flex로 구성했더니 화면을 줄여도 이상하게 튀어나가지 않고 잘 줄여지는 걸 확인했다. ㅎㅎ

Tomorrow To Do

• MusicalDetails 컴포넌트에 뮤지컬 제목, 공연 시작 날짜, 공연 종료 날짜, 가격, 공연장소, 출연진, 러닝타임, 공연 날짜, 공연 진행 상태 받아오기
• Posters 컴포넌트에 뮤지컬 상세 이미지 받아오기
• Search 컴포넌트에서 검색창의 변화가 있을 때 마다 검색 상태 변경
• Search 컴포넌트에서 돋보기 아이콘 클릭 시 서버에 요청
• Search 컴포넌트에서 서버로부터 받아온 데이터로 목록 상태 변경
• 즐겨찾기(찜꽁) 아이콘에 마우스 오버했을 때만 활성화 되며 클릭 가능하게 하기
• 즐겨찾기 아이콘 클릭 시 서버에 요청