• 로그인 모달창 띄우기(#41)
• 로그인 모달창 닫기(#46)
• 네이버 소셜 로그인(#45)

• 로그인 모달창과 관련된 UI 레이아웃 생성하기
• 밀도에 사용자가 로그인할 수 있는 기능 구현하기

구현할 구체적인 내용을 체크리스트로 작성합니다.

• ModalFilter 컴포넌트에서 현재 열려있는 모든 모달 닫히게 할지 특정 모달을 닫게하는 콜백 함수를 보낼지 고민하다가 콜백함수를 보내주는 식으로 구현 → 이후 어떻게 할지 더 고민해봐야할듯

새롭게 알게 된 내용을 서술합니다. 길거나 깊은 내용은 따로 페이지를 생성하여 작성합니다.

h2 단락으로 나눕니다.

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

h2 단락으로 나눕니다.

export const createNaverLoginSvg = () => {
  return `<svg>...</svg>`;
};

• 다음과 같이 svg를 문자열로 사용하려고 했지만 HTML이 아닌 문자열 그대로 출력이 되는 문제 발생
• dangerouslySetInnerHTML은 React에서 innerHTML을 사용할 수 있게 할 수 있게 해줌

<NaverLoginBtn dangerouslySetInnerHTML={{ __html: createNaverLoginSvg()}}></NaverLoginBtn>

• 참고 자료

• git commit --amend
• 참고 자료

• 원인: strategy 자체를 만들기만 하고, 실행은 하지 않아서 생기는 오류이다.
• app.ts에서 /passport/index.ts를 실행시켜주어 해결

• client에서 axios를 통해 Naver OAuth2를 접근할 경우 cors 에러가 발생
• 이전 미션에서 a태그의 href에 로그인하는 주소 담아 보내서 해결
• https://gomgomkim.tistory.com/9 → Link와 a href의 차이

• .env 파일에 NAVER_CLIENT_ID에 세미콜론이 붙어있어서 생기는 에러 → 세미콜론을 제거해서 에러를 해결함

• passport.authenticate() 메서드에서 session 속성을 false로 설정해서 에러를 해결함 → 사실 근본적으로 해결하는 게 아니라, 세션을 안쓰게끔 문제를 회피함 → 차후 시간이 남으면 세션을 이용해서 구현해야 될 것 같다.

• 해결하는 방법: 타입을 직접 지정해 주어야 한다. → [https://techbless.github.io/2020/04/07/TypeScript에서-Passport이용시-req-user-타입-문제-해결하기/](https://techbless.github.io/2020/04/07/TypeScript%EC%97%90%EC%84%9C-Passport%EC%9D%B4%EC%9A%A9%EC%8B%9C-req-user-%ED%83%80%EC%9E%85-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0/)

• NaverStrategy에서는 한번만 호출되지만(정상 호출), serializeUser와 deserializeUser가 여러 번 호출되는 문제(비정상)

• serilalizeUser와 deserializeUser가 한 번의 클릭에 순차적으로 클릭되는 문제 발생

• deserializeUser가 여러 번 호출되는 문제 해결 방법

app.use('/api', apiRouter);

// passport 초기화, session 연결
app.use(passport.initialize());
app.use(passport.session());

• passport와 관련된 코드를 serving 해주는 코드보다 뒤에 위치하도록 한다. → 그런데, 이 경우에는 deserializeUser가 호출되지 않는 문제가 발생하게 된다.

• 상세정보 모달과 로그인 모달과 같은 layer에 무수히 많은 빈 div가 들어가 있는 것을 목격

  • 처음엔 마커때문이라고 생각했지만 마커의 태그는 따로 존재하고 있었음
  • 마커 맞습니다!

• 원인과 해결방안: Marker.tsx에서 ‘return

  ;’ → ‘return <></>;’ 으로 바꾸면 안될까..

• → 윤우의 의견 : 컴포넌트가 아니라 메서드로 해결할 수 있지 않을까?

• API로 가져오지 않은 별도 리소스(이미지, 동영상 등)는 비동기로 처리해야 합니다. → 이 말의 의미가 뭘까

interface ModalFilterProps {
  isClickModalFilter: (update: boolean) => void;
  // isClickModalFilter: (update: SetStateAction<boolean>) => void; -> 그럼에도 에러 안남!
}

const ModalFilter: React.FC<ModalFilterProps> = ({ isClickModalFilter }) => {
  return <Filter onClick={() => isClickModalFilter(false)}></Filter>;
};

• SetStateAction이란 정확하게 무엇인가?

• 참고 자료

• 어떻게 하면 네이버 로그인 API를 이용해서 세션을 이용한 로그인을 구현할 수 있을까? → 참고 자료

• 아이콘 관련 이슈로 인해 client에 yarn을 이용해서 react-icons를 설치하였습니다.

// 네이버 로그인 API
// CLIENT_ID=_U1exohhZA7WrCbYqOU7
// CLIENT_SECRET=R0wNo2MaR6