🌏 [project #2] Jigu-tory #3

흐어.. 벌써 또 일주일이 지났다. 내일이면 어느새 3주 차에 접어든다!! 이번 주는 지도 api를 끌어오는데 많은 시간을 썼다. 카카오 developer 에 다양한 샘플들이 나와있지만 개발 왕초보인 나에게는 보고 이해하는 것도 어려웠고, 리액트에 가져와서 구현하는 것도 쉽지 않았다. 그래도 보다보니 어느정도 이해되는게 신기했다. 프론트 팀원 분의 하드캐리로 얼추 구현이 완성되었고, 계획한 스케쥴에 맞게 흘러가고 있긴하다. 근데 중간에 잔잔바리 에러들이 자꾸나온다. 제발 들어가주라 에러s ㅠㅠ

배운 점

z-index

모달과 지도api를 사용하면서 알게 된 css 속성이다. 예전에 (라떼시절..) 그림판 쓰던 시절에 마우스 우클릭하면 맨 앞으로 보내기 & 맨 뒤로 보내기라는 기능이 있었다. 비슷한 속성이라고 보면 된다. z-index를 사용할 때는 position 과 꼭 함께 사용해야 구현할 수 있다. 언제든 가장 앞으로 빼고 싶은 컴포넌트에 z-index 값을 가장 크게 주었다. 현재 프로젝트의 경우 모달이 가장 앞으로 와야하기 때문에 모달이 가장 큰 값을 갖고있다.

모달 바깥 영역 클릭하여 닫기

참고 영상링크
이리저리 블로그도 보고, 영상도 보면서 custom hooks 를 만들었다. 모달 바깥 영역을 클릭했을 때 모달을 닫는 함수이다. useRef 를 처음으로 사용했는데, 아직도 애매한 느낌이다. 사용하다보면 구체적으로 알게 될 것 같다. 정말 편한 hooks 이지만 아직 많은 hooks 를 사용하지 못하고 있다. 차근차근 고고

const useClickOutside = (handler) => {
  let domNode = useRef();

  useEffect(() => {
    let windowHandler = (e) => {
      if (!domNode.current?.contains(e.target)) {
        handler();
      }
    };
    document.addEventListener('mousedown', windowHandler);
    return () => {
      document.removeEventListener('mousedown', windowHandler);
    };
  });

  return domNode;
};

 const domNode = useClickOutside(() => {
   // 모달 닫는 함수를 여기에 적는다.
  })

그리고 해당 모달이 있는 tag에 ref={domNode} 넣어주면 모달창 닫기를 원하는 곳에서 이용할 수 있다.

구글로그인 api

계속 서버가 끊기는 에러를 마주했지만.. 해결했다! 로그인에서 너무나 한 번에 원샷원킬로 아무 에러도 안 나서 불안했는데, 역시 에러는 시간차 공격 ㅎ헿.. 서버가 끊겼던 이유는 서버코드에서 선언되지 않은 변수가 사용되고 있었다. 서버 코드 수정하시다가 실수로 주석처리 해 놓으신 부분이 있었는데 주석을 풀고나니 허무하게도 해결됐다.

항상 에러가 나면 내가 작성한 코드부터 의심하게 되는데 이제 서버 코드도 유심히 보고, 프론트와 잘 연결이 되는지도 살펴봐야겠다. 그래도 에러가 나고, 해결하는 과정에서 배우는 것들이 많고 기억하게되는 것들도 많다!

AWS 과금

RDS와 EC2 를 종료시키지 않고 2주가 흘렀다. 과금이 될거라곤 상상도 못한채.... 우선 AWS 측으로 메일을 보내놨으니 답장을 기다려봐야겠다. 엄청난 금액은 아니지만 총 35불 정도..? 과금의 무서움을 느끼는 중이다. 모두들 서버 잘 끄시고, 데이터도 잘 끄셔요 흑 ㅠㅜ..

다음 주 할 일

• 회원정보 수정 페이지
• 마이페이지
• 반응형 구현
• 인트로 페이지