스파르타코딩클럽 내일배움캠프 74일차

오늘 일과 간단 요약

1. 오전 스크럼 + 디자이너님과 전체 회의
2. 로그인/회원가입 기능 수정 및 추가 (PR)
3. 오후 스크럼
4. 로그인/회원가입 모달창 분리(?)

 

 

 

 

 

 

 

 

 

 

오전 스크럼 + 전체 회의

늘 그렇듯 월요일의 시작과 함께 스크럼을 진행했다. 오늘의 진행자는 나.

매일 번갈아가면서 하기로 했는데 확실히 스크럼 하면서 소통을 더 많이 하는 것 같기는 하다. 뭐 안그래도 많이 하고 있긴 한데...ㅋㅋㅋㅋ

 

금요일에 디자이너님께 우리가 피드백을 드렸고 그거에 대한 피드백을 또 받아서 오전에 그거에 대해서 회의했다.

기획을 다 한줄 알았지만 기능 구현하면서 + 디자인 하면서 세세하게 바뀌는 부분이 많다.

그만큼 공들인다는 것도 있겠지만, 이런 적이 처음이라서 매일 회의할 때마다 신기해 하고 있다.

 

배너 버튼 디자인도, 반응형 디자인도, 로고 이미지도, 호버 되었을 때 등등....

피드백 주고 받는 부분도 점점 더 자세해진다. 오늘도 저거에 대해 조원들끼리 이야기해보고 디자이너님과 전체 회의를 진행했다. 그래도 확실히 회의 하는 시간이 점점 짧이지고 있기는 하다. 큰 틀은 잡혔으니까 그런 듯 싶다.

오늘도 전체 회의가 그렇게 길지는 않았다.

 

우리 웹페이지의 주요 타켓층에 대해 생각해보고,

타이틀이 영어가 좋을지 한국어가 좋을지 정하고,

다른 페이지 디자인이 언제쯤 완성될지 정하고...

 

TIL에는 적지 않은 자세한 부분들도 한가득이다. 노션에 매번 기록해 놓고 있는데 회의록 정리하시는 분의 수고가 정말 많다. 나중에 다시 들어가서 보기도 편하고...진짜 짱...!

 

오늘도 오전은 회의로 시간을 거의 다 보내고 나서야 각자 기능 개발을 시작했다.

 

 

 

 

 

 

 

로그인/회원가입 기능 수정 및 추가

애증의 소셜 로그인....토요일날 거의 몇 시간을 매달려 있었는데 실패하고 오늘도 좀 하다가 그냥 나중으로 미뤘다.

구글과 페이스북이 있으니까 다른 소셜 로그인은 나중으로 미루고 필수 기능 먼저 구현해야지...약간 아쉽다.

 

지난주에 비밀번호 재설정 부분을 페이지로 구현했는데 선형님이 모달로 바꿔주셔서 그거 CSS 수정하고,

header 부분도 수정해야 할 부분이 있어서 수정했다.

이게 디자인도 여러번 바뀌다 보니 수정할 부분들이 자꾸 생기는 것 같다. 뭐, 그렇게 귀찮지 않고 재밌게 하고 있다.

 

그리고 모달창에 x 표시 누르면 모달창이 사라지는데, 그거 말고도 모달창 바깥을 클릭하면 모달창 닫히게 구현하고 싶어서 그것도 구글링해보고 구현했다.

 

const modalRef = useRef<HTMLDivElement | null>(null);

// modal 띄우기
  const openModal = () => {
    setModal(true);
    document.body.style.overflow = "hidden";
  };

  // modal 바깥 부분에서 modal 닫기
  const modalOutClick = (e: any) => {
    if (modalRef.current === e.target) {
      setModal(false);
    }
  };

이런 식으로 modalRef를 이용해서 바깥 부분을 클릭하면 닫히게 만들었는데, 성공했다.

처음에는 안 먹혀서 뭔가 잘못했나 싶었는데 props를 넘겨주고 closeModal 함수에 코드를 추가하니까 되었다.

 

  const closeModal = () => {
    if (modal) {
      setModal(false);
      document.body.style.overflow = "unset";
    }
  };

 

modal 바깥 부분을 클릭했을 때를 event.target으로 생각하고 그걸 클릭하면 modal이 닫힌다고 생각하면 된다.

그리고 closeModal() 함수에서도 x 표시 누르면 삭제되도록 하면 된다.

 

이런 식으로 구현하고 나니 모달 창 제외한 메인 페이지 스크롤도 되지 않고 다른 곳 아무데나 클릭해도 모달창이 사라지게 되었다. 엄청 어려운가 싶어서 좀 헷갈렸는데 그래도 잘 구현되어서 다행이다.

 

여기까지 하고 난 뒤에 다시 PR 날리고 코드 리뷰 받고 merge했다.

 

 

 

 

 

 

 

로그인/회원가입 버튼 분리 후 모달창 다르게 구현하기

디자이너님과 회의를 하면서 로그인과 회원가입 버튼을 구분했으면 좋겠다는 의견이 나왔다.

원래는 모달 하나에서 카테고리에 따라 바뀌는 걸로 구현이 되어 있는데 이걸 버튼을 나누면 어떤 식으로 구현해야 할지 감이 잡히지 않았다.

 

그래서 처음에는 모달창 카테고리를 나눈 걸 header에도 똑같이 적용해서 로그인일 때, 회원가입일 때 나눠서 적용해봤는데 전혀 먹히지 않았다. 생각해보니까 모달창은 하나이고 그 안에서 나눠지는 건데 내가 생각을 잘못했다 싶었다. 그래서 header에서 아예 카테고리를 나눠서 구현해봤는데 그것도 실패...

 

그러다가 시윤님이  window.history.pushstate 라는 걸 알려주셔서 거기에 대해 공부해보고 적용하는 중이다.

path가 적용되기는 하지만 새로 고침이 되는 새로운 페이지는 아니고 내가 임의로 path를 정할 수 있다. 예를 들어서 '/login'이라고 적용하면 로그인 버튼을 누르면 'localhost:3000/login'으로 바뀌는 것이다. 이건 새로고침 하면 사라지고 또 페이지 전환에는 아무런 영향이 없다.

 

이걸 잘만 이용하면 될 것 같아서 지금 하는 중인데 쉽지 않군...

정 안되면 TIL 작성하고 좀 더 해보다가 내일 오전에 새로운 정신으로 시도해봐야겠다.

약간 한 가지를 오래 하다보면 집중력이 흐려지고 좋은 생각이 나지 않는데, 지금 그런 상태인것 같기도...ㅋㅋㅋㅋ

 

 

 

 

 

 

 

 

짧은 일기

3주동안 필수 기능을 다 끝내는 건데 솔직히 시간이 좀 길 줄 알았는데 그건 전혀 아니었음을 깨닫고 있다.

그리고 시간이 많다고 생각하다보면 어느새 마지막에 벼락치기를 하는 경우가 많았어서 그런지 이번에는 아예 시간이 없다고 생각하고 일부러 하루 전날 기능 구현을 완료하기로 계획하고 하는 중이다.

 

계획상으론 내일부터 2주차 개발 시작인데 사실 계획대로 되지는 않으니까...그리고 계획 잘 때는 기획 회의가 있다는 걸 간과하고 있었다. 초반일수록 회의하면서 합의할 내용이 많아지는데 지금은 그래도 점점 회의 시간이 짧아지고 있으니까 기능 구현에 좀 더 몰두할 수 있지 않을까 싶다.

 

로그인 기능을 구현했다고 다가 아니었다. 우선 디자이너님이 만들어주신 페이지가 나오면 그거대로 구현해야 하고,

자세한 기능도 조금씩 바뀌는 중이다. 내일도 유효성 검사 조금 바꾸고, alert 창 삭제하고 등등...해야 할 게 많다.

아, 그리고 오늘 다 완성하지 못한 로그인/회원가입 버튼 분리도 해야지. 여튼 할게 너무 많다.

그래도 해야지, 어쩌겠어. 사실 프로젝트 하는 건 너무 재밌고 즐겁게 하고 있어서....ㅋㅋㅋ 그냥 다른 걱정 없이 지금처럼 즐겁게 진행했으면 좋겠다.