✂️ 분배된 이슈

• 네이버 소셜 로그인(#45)
• 사이드 바 띄우기(#43)

🚩 구현 목표

• 네이버 소셜 로그인으로 클라이언트에서 로그인 확인
• 로그인 여부에 따라 로그인 모달창, 사이드바 출력

🍀 세부 목표

네이버 소셜 로그인(#45)

• OAuth 로그인 API 사용하여 클라이언트에서 로그인 하기
• 검색 창 레이아웃 구현
• 마이버튼 레이아웃 구현
• 마이 버튼 클릭 시 로그인 모달창 띄우기
• 메인 페이지에서 사용자의 로그인 여부 확인하는 비동기 api 구현

사이드 바 띄우기(#43)

• 마이정보사이드바 레이아웃 구현
• 로그인 되어 있을 경우 마이 버튼 클릭 시 로그인 모달이 아닌 사이드바 띄우기

사이드 바 - 사용자 닉네임 UI 출력(#39)

• 사용자 정보(닉네임, 이름 등) 사이드바에 출력하기

🖥️ 구현 내용

• 로그인 기능 구현
• 로그인 여부에 따라 버튼을 누르게 되었을 경우 다르게 보여주는 모달창 구현
• 검색창, 마이버튼, 사이드바 레이아웃 구현
• 네이버 지도의 네이버 마크를 모달 뒤에 올 수 있도록 z-index 수정
• mongoDB 스키마 정의 (유저 id에 대응되는 북마크 리스트, 내일 갈거야 리스트 작성)

{
	"_id": "ObjectId('')",
	"provider": "naver",
	"email": "[email protected]",
	"name": "camper",
	"userId": "1234567890",
	"bookmark": [
		{ "_id": "ObjectId('')", "areaName": "압구정로데오거리" },
		{ "_id": "ObjectId('')", "areaName": "강남역" },
		{ "_id": "ObjectId('')", "areaName": "남산공원" }
	],
	"내일갈거야": [
		{ "_id": "ObjectId('')", "areaName": "압구정로데오거리" },
		{ "_id": "ObjectId('')", "areaName": "강남역" },
		{ "_id": "ObjectId('')", "areaName": "남산공원" }
	]
}

// 순위를 매기는 방법 

{
	"_id": "ObjectId('')",
	"area_id": "ObjectId('')",
	"user_id": "ObjectId('')"
}

📖 학습 내용

• URL의 이해 부족

  • URL의 이해 → 포트 번호(3000)이후에 ‘/’가 자동적으로 생기는 이유 → https://cotak.tistory.com/45
  • 결론적으로, 프로토콜 → host → port 이후에 path나 query string이 붙는 경우 무조건 ‘/’를 붙여야 한다.
  • protocol과 host(domain)을 나누는 단위는 ‘://’이고, host(domain)과 port를 나누는 단위는 ‘:’, 그리고 port와 path를 나누는 단위는 ‘/’, 마지막으로 path와 query string을 나누는 단위는 ‘?’이다.

• authType: ‘reprompt’

  naverPassportLogin: passport.authenticate('naver', {
      authType: 'reprompt'
    }),
  

  • 이전에는 anthType란 프로퍼티가 옵션에 없어 사용할 수 없었지만 오늘은 왜인지 생김

  • authType: ‘reprompt’로 설정하게 되면, 로그인을 진행할 때마다 동의 화면이 나타나게 된다. 이 때, 동의를 눌러주면 자동적으로 로그인을 하는 것이 가능해지게 된다.

    

🩺 의사결정

논의가 필요한 내용을 서술합니다.

h2 단락으로 나눕니다.

🚧 Trouble Shooting

네이버로 로그인 후 네이버로 다시 로그인 시 deserializeUser가 여러 번 호출하는 이유

• deserializeUser은 api server로 접근을 할 경우 미들웨어처럼 동작함
  • 모든 api 접근에 호출되고 세션에 저장된 유저 id를 기반으로 request 객체에 user 객체 저장해줌
• 네이버 로그인 후 이후 로그인 할 경우 deserializeUser가 여러번 동작하는 문제가 발생
• 하지만 일반적인 경우 로그인 후 로그인을 계속 반복하지 않기 때문에 이 경우에 대해서는 그냥 넘어가도 된다고 판단함

git commit -am이 부분적으로 적용되지 않는 이슈

• git add . + git commit -m “commit message” = git commit -am “commit message”
• 이 에러는 한번 조사를 해보아야 할 것 같다. → 그냥 단순한 git 에러인 지, 아니면 명백한 이유가 있는 것인

z-index 이슈

• z-index를 수동적으로 설정한 대상은 modal, filter였고, 자동화된 부분은 네이버 지도(z-index: 0), 그리고 하단의 네이버 아이콘 (z-index: 100)이었음
• modal보다 filter의 z-index를 낮게 설정했음에도 불구하고, filter의 z-index가 modal보다 높아져서, modal을 filter가 가리는 현상 발생
• 원인: modal 컴포넌트 내부에 filter 컴포넌트가 들어있었음 → filter는 modal 컴포넌트에 추가적으로 z-index를 더하게 됨

Modal 컴포넌트에 기본적으로 z-index가 설정되었고, 여기에 ModalFilter의 z-index가 추가적으로 설정되어 있었던 상황임. SideBarLayout(modal)의 경우에는 반대로 아무런 z-index도 걸려있지 않은 상황이었음

❓ 궁금한 점

• jotai에서 atom을 만들 때, 파일 단위가 지나치게 잘게 쪼개져 있는 것이 아닌가 하는 생각이 들었습니다. 혹시 그 이유가 있는 것인 지, 추상적인 관심사별로 하나로 합칠 수 있는 지 궁금합니다.