20210311 23일차 카카오, 구글 소셜 로그인 구현 완료(OAuth)
·
BootCamp_Codestates/Final Project
구현 사항 카카오, 구글 소셜 로그인 및 로그아웃 메인 페이지(로그인 화면) CSS 리팩토링 (파트별 크기) 카카오, 구글 소셜 로그인 및 로그아웃 구현 1. 카카오 카카오는 SDK 를 이용하여 구현했는데, 카카오 OAuth 의 경우, 유저의 이메일 제공 여부가 선택사항이기 때문에 아래와 같은 경우의 수가 발생한다. Email 이 제공되지 않았을 경우엔 바로 추가정보 기입 모달로 보내고, Email 이 제공된 경우는, 구현 상 크게 어려운 부분은 의외로 없었는데, 소셜 로그인 모달에서 추가정보 기입 모달로 이동 시킬때 상태 끌어올리기를 사용했는데, 좀 헷갈렸다. 유저가 로그아웃을 할 경우에는, 아래 로직으로 로컬 스토리지에 저장되어 있던 카카오 인증 엑세스 토큰을 삭제해준다. if (window.Kaka..
20210310 22일차 카카오 소셜 로그인 구현(중)
·
BootCamp_Codestates/Final Project
구현 사항 카카오 소셜 로그인(OAuth) 구현 중(Kakao SDK for JavaScript(이하 JavaScript SDK)를 사용한 카카오 로그인 구현 방법) 메인 페이지의 소셜 로그인 버튼을 누르고 모달의 카카오 아이콘을 클릭하면 아래와 같이 개인정보 제공 동의 여부를 묻는 카카오 오어쓰 서비스가 실행된다. 동의를 하고 확인 버튼을 누르면 카카오로부터 받은 토큰을 이용하여 개인 정보(이 경우, 닉네임과 이메일)을 받아온다. 그림일기장 서비스를 이용하기 위해서는 이메일을 제출이 필수적이기 때문에 다음 모달창을 띄워 추가정보 기입을 요청한다. 카카오톡으로부터 받은 이메일과 닉네임을 렌더링 해준다. 로직은 아래와 같다. const kakaoLogin = () => { window.Kakao.Auth...
20210309 21일차 그림일기장 수정 로직 구현
·
BootCamp_Codestates/Final Project
구현 내용 그림판/일기장 로직 구현 완료 그림 일기장 수정 로직 구현 중 나의 일기 페이지에서 수정하고 싶은 일기의 수정 버튼을 누르면 수정이 가능한 일기 쓰기 페이지가 열린다. 다른 로직과 마찬가지로, App 으로의 상태 끌어올리기를 통해 해당 글의 모든데이터를 일기쓰기 페이지의 컴포넌트의 필요한 부분 에 전달한다. function App(): ReactElement { const [contentInfo, setContentInfo] = useState(0); ... const conveyContent = (e: any) => { setContentInfo(e); console.log(contentInfo); }; ... 각 컴포넌트에서는 useEffect 를 사용하여 이 데이터의 유무에 따라 상태를 ..
20210308 20일차 그림판/일기장 로직 구현(99% 완성)
·
BootCamp_Codestates/Final Project
오늘은 그림판/글작성 페이지의 에러핸들링, 리팩토링을 했다. 그 중에 발생한 에러가 있는데 구글링을 해보니, useEffect 함수 내에서 비동기 함수를 사용하여 발생하는 문제였다. cleanup 함수를 사용하여 해당 함수를 제거하면 된다고 하는데, 자세한 사항은 더 공부해야겠다. 느낀점 오늘은 뭔가 진행이 더뎠다. CSS 적인 부분과 중간중간 발생하는 에러를 수정하느라 하루를 다 썼다. CSS 적인 부분은 날씨나 감정 등의 항목을 선택했을때 메세지가 출력되는데 이를 비동기 settimeout 을 사용하여 일정시간이 흐른뒤 안보임 처리를 해주는 것을 포함한다. 제출 버튼을 눌러 데이터베이스를 확인해보니 데이터가 잘 들어가는 것을 확인했다. 그 이외에도 로그인을 하지 않았을 경우, 제출 버튼을 사용하지 못..
20210307 19일차 그림판/일기장 로직 구현(85% 완성)
·
BootCamp_Codestates/Final Project
수도 로직 Paint Page: 그림그리기 완료 여부를 상태끌어올리기로 app 으로 올리고 diary 페이지에 props로 전달. - Diaryinfo component: 날씨 정보 저장 및 상태끌어올리기로 page 로 전달 - Title: isLogin 상태에 따라 (손님) 의 행복한 하루 또는 (유저이름) 의 행복한 하루 로 구현 - Cpaint component: 그림의 좌표 데이터/url 을 저장하고 이를 diary 에 전달. 실제 구현 1. 로그인, 로그아웃, 회원가입 코드 리팩토링. 로그인 상태를 최상위의 app.tsx 에서 관리 로그인, 로그아웃 로직과 회원가입 로직은 이미 끝낸 상태였지만, 회원가입 후 자동 로그인된 상황에서 로그아웃을 했을때 메인페이지의 작동이 잘 안되는 현상이 발생했다...
20210306 18일차 로그인/로그아웃 로직 구현 완료
·
BootCamp_Codestates/Final Project
구현 사항 회원가입 후 자동 로그인 일반 로그인/로그아웃 컴포넌트들로 구성된 페이지의 경우 Props 를 이용하여 로그인 상태 변경 메소드와 로그인 상태를 전달하는 방식으로 구현했다. 로그인 상태를 전달하고 그 props 를 자식 컴포넌트에서 사용해야 리렌더링이 된다는 것을 깨닫는데 오랜 시간이 걸렸다. (상태가 업데이트 되어야 실행이 된다.) 결국 useEffect 함수를 사용하여 페이지를 렌더 시키는 방법인데, 로그인 상태와 토큰을 session storage 에 저장하여 useEffect 함수 안에서 사용하기 때문에, 새로고침을 해도 화면 상태가 유지된다. 예시는 회원가입 후 바로 로그인할 경우의 상태인 isSignUpIn 도 포함하고 있다. useEffect(() => { const isLogin..