확인한 내용 구글 엑세스 토큰의 경우, 로컬스토리지에 담기지 않는것 같다. 라이브러리를 사용해서 그런것 같긴한데, 어떻게 로그아웃을 시켜야 할지 좀 더 알아봐야겠다. => 구글 소셜 로그인의 경우 브라우저에서 구글 로그아웃을 해주면 된다.(따로 로직이 필요없다.) 이제와 생각해보니, 유저가 소셜 로그인으로 들어와 추가 정보를 기입할 때 a 이메일(유저 제공)로 들어와서 b 이메일(추가 정보 기입할 때 이메일 변경)로 가입을 하게 될경우 문제가 발생할 것 같다. 생각 좀 해봐야겠다. => 아래와 같은 문구를 추가했다.만약 소셜서비스와 다른 이메일을 등록할 경우, 다음 소셜 로그인 때 해당 모달이 다시 보여질 것이다. 메뉴얼 페이지와 제작자 페이지 구현이 필요하다. 그리고 CSS와 반응형 웹을 더 손봐야겠다..

구현 사항 카카오, 구글 소셜 로그인 및 로그아웃 메인 페이지(로그인 화면) CSS 리팩토링 (파트별 크기) 카카오, 구글 소셜 로그인 및 로그아웃 구현 1. 카카오 카카오는 SDK 를 이용하여 구현했는데, 카카오 OAuth 의 경우, 유저의 이메일 제공 여부가 선택사항이기 때문에 아래와 같은 경우의 수가 발생한다. Email 이 제공되지 않았을 경우엔 바로 추가정보 기입 모달로 보내고, Email 이 제공된 경우는, 구현 상 크게 어려운 부분은 의외로 없었는데, 소셜 로그인 모달에서 추가정보 기입 모달로 이동 시킬때 상태 끌어올리기를 사용했는데, 좀 헷갈렸다. 유저가 로그아웃을 할 경우에는, 아래 로직으로 로컬 스토리지에 저장되어 있던 카카오 인증 엑세스 토큰을 삭제해준다. if (window.Kaka..

구현 사항 카카오 소셜 로그인(OAuth) 구현 중(Kakao SDK for JavaScript(이하 JavaScript SDK)를 사용한 카카오 로그인 구현 방법) 메인 페이지의 소셜 로그인 버튼을 누르고 모달의 카카오 아이콘을 클릭하면 아래와 같이 개인정보 제공 동의 여부를 묻는 카카오 오어쓰 서비스가 실행된다. 동의를 하고 확인 버튼을 누르면 카카오로부터 받은 토큰을 이용하여 개인 정보(이 경우, 닉네임과 이메일)을 받아온다. 그림일기장 서비스를 이용하기 위해서는 이메일을 제출이 필수적이기 때문에 다음 모달창을 띄워 추가정보 기입을 요청한다. 카카오톡으로부터 받은 이메일과 닉네임을 렌더링 해준다. 로직은 아래와 같다. const kakaoLogin = () => { window.Kakao.Auth...

구현 내용 그림판/일기장 로직 구현 완료 그림 일기장 수정 로직 구현 중 나의 일기 페이지에서 수정하고 싶은 일기의 수정 버튼을 누르면 수정이 가능한 일기 쓰기 페이지가 열린다. 다른 로직과 마찬가지로, App 으로의 상태 끌어올리기를 통해 해당 글의 모든데이터를 일기쓰기 페이지의 컴포넌트의 필요한 부분 에 전달한다. function App(): ReactElement { const [contentInfo, setContentInfo] = useState(0); ... const conveyContent = (e: any) => { setContentInfo(e); console.log(contentInfo); }; ... 각 컴포넌트에서는 useEffect 를 사용하여 이 데이터의 유무에 따라 상태를 ..

오늘은 그림판/글작성 페이지의 에러핸들링, 리팩토링을 했다. 그 중에 발생한 에러가 있는데 구글링을 해보니, useEffect 함수 내에서 비동기 함수를 사용하여 발생하는 문제였다. cleanup 함수를 사용하여 해당 함수를 제거하면 된다고 하는데, 자세한 사항은 더 공부해야겠다. 느낀점 오늘은 뭔가 진행이 더뎠다. CSS 적인 부분과 중간중간 발생하는 에러를 수정하느라 하루를 다 썼다. CSS 적인 부분은 날씨나 감정 등의 항목을 선택했을때 메세지가 출력되는데 이를 비동기 settimeout 을 사용하여 일정시간이 흐른뒤 안보임 처리를 해주는 것을 포함한다. 제출 버튼을 눌러 데이터베이스를 확인해보니 데이터가 잘 들어가는 것을 확인했다. 그 이외에도 로그인을 하지 않았을 경우, 제출 버튼을 사용하지 못..

수도 로직 Paint Page: 그림그리기 완료 여부를 상태끌어올리기로 app 으로 올리고 diary 페이지에 props로 전달. - Diaryinfo component: 날씨 정보 저장 및 상태끌어올리기로 page 로 전달 - Title: isLogin 상태에 따라 (손님) 의 행복한 하루 또는 (유저이름) 의 행복한 하루 로 구현 - Cpaint component: 그림의 좌표 데이터/url 을 저장하고 이를 diary 에 전달. 실제 구현 1. 로그인, 로그아웃, 회원가입 코드 리팩토링. 로그인 상태를 최상위의 app.tsx 에서 관리 로그인, 로그아웃 로직과 회원가입 로직은 이미 끝낸 상태였지만, 회원가입 후 자동 로그인된 상황에서 로그아웃을 했을때 메인페이지의 작동이 잘 안되는 현상이 발생했다...