구현 사항 카카오 소셜 로그인(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 에서 관리 로그인, 로그아웃 로직과 회원가입 로직은 이미 끝낸 상태였지만, 회원가입 후 자동 로그인된 상황에서 로그아웃을 했을때 메인페이지의 작동이 잘 안되는 현상이 발생했다...

구현 사항 회원가입 후 자동 로그인 일반 로그인/로그아웃 컴포넌트들로 구성된 페이지의 경우 Props 를 이용하여 로그인 상태 변경 메소드와 로그인 상태를 전달하는 방식으로 구현했다. 로그인 상태를 전달하고 그 props 를 자식 컴포넌트에서 사용해야 리렌더링이 된다는 것을 깨닫는데 오랜 시간이 걸렸다. (상태가 업데이트 되어야 실행이 된다.) 결국 useEffect 함수를 사용하여 페이지를 렌더 시키는 방법인데, 로그인 상태와 토큰을 session storage 에 저장하여 useEffect 함수 안에서 사용하기 때문에, 새로고침을 해도 화면 상태가 유지된다. 예시는 회원가입 후 바로 로그인할 경우의 상태인 isSignUpIn 도 포함하고 있다. useEffect(() => { const isLogin..

금일 구현 사항 회원가입 로직 구현 로그인 유무에 따른 페이지 구성 변경 반응형 웹 개선 1. 회원가입 로직 구현 기존의 모달창을 이용하여 유효성 검사 메세지를 보여주는 방식의 경우 완료 버튼을 눌러야만 잘못된 부분을 확인할 수 있기 때문에사용자의 입장에서 매우 불편할 것으로 판단했다. 이를 개선하기 위해 잘못된 형식의 정보를 기입하거나 동일한 정보(이메일, 전화번호, 닉네임)가 존재할 때, 글자를 입력할 때마다 해당 유효성 검사를 하여 사진 밑과 같이 메세지를 노출시켜 유저가 확인하기 용이하게 구현했다. 특히, 팀 전체의 의견을 수렴하여 별명/전자우편/전화번호의 경우, 글자를 입력할 때마다 동일한 정보가 데이터베이스에 존재하는지 서버에 확인하여 response 에 따라 유저에게 사용가능 여부 메세지를 ..