JDevBlog

길고도 짧았던 4주 간의 대장정이 막을 내렸다. 파이널 프로젝트 28일이라는 시간이 정말 눈 깜빡한 사이에 지나갔고, 어느새 코드스테이츠 수료생이 되었다. 파이널 프로젝트를 해냈다는 것 뿐만 아니라, 5개월의 코드스테이츠 개발자 과정을 해냈다는 점을 내 스스로 칭찬해주고 싶다. 개인적으로 4주동안 많은 것들을 배운 것 같다. 비단, 그림판이나 소셜로그인 등의 새로운 기술 적용 뿐만 아니라 프로젝트의 기획, 역할 결정, 팀회의를 통한 프로젝트 진행 방향 결정 등을 경험하면서 팀플레이어로서의 적극적인 태도, 유연한 의사소통 방법, 효과적으로 의견을 피력하는 법 등을 배울 수 있었던 귀한 시간이었다. 또한 제한된 시간 안에 어떻게든 주어진 과제를 해결 해내고자 하는 책임감을 갖게 되었고, 문제 해결력도 키울 ..

오늘한일 팀 서비스 발표 녹화 PPT 제작 PPT GIF 고화질 업데이트 PPT 수정 사항 GIF 고화질로 변경 미디어쿼리 해야할일 개인 기술 발표 - 구현사항작성, PPT/발표영상 등 업데이트 팀 발표 재녹화 프로젝트 리팩토링

진행 사항 배포 후 에러 핸들링 메뉴얼 페이지 구현 배포 후 에러 핸들링 1. sub 네비게이션 이미지(책모양)와 paint page의 붓모양이 사라지는 현상 font awesome 의 아이콘 이미지를 i 엘리먼트로 가져옴에 따라 배포 환경에서 이미지를 불러오는 것이 불안정해짐. 대신에 직접 이미지를 다운받아 적용. 2. 일기쓰기 완료 후 모달창 제거 그림이 모달창을 침범하는 현상이 발생하여, 모달창을 삭제하고 등록 메세지를 보여주는 것으로 변경. 3. 구글, 카카오 OAuth API의 사이트 도메인 변경 http://localhost:3000 => https://royaldiary.ml . Redirection URI 도 변경(동일) 4. OAuth clientID 를 .env 에 저장하여 사용 환경변..

구현 사항 로딩 구현(완료) CSS 리팩토링(완료) 네비게이션 바를 통해 페이지 이동과 일기 작성 및 수정 시에 아래와 같이 로딩 이미지가 뜨도록 구현했다. 로딩 중에는 마우스 클릭이나 키보드 입력이 불가한데 이는 pointer-events: stroke; 를 이용했다. SVG 형식만 클릭이 가능. 해당 로딩 엘리먼트는 최상위 App 컴포넌트 에 위치시켰는데, useEffect 가 실행될때마다 세션스토리지에 loadingImg 키 값을 확인하고(페이지 이동 버튼을 클릭할 시점에 세션스토리지에 해당 키값을 저장해준다. )visible 일 경우에만 해당 엘리먼트를 찾아 CSS display 값을 flex 로 바꿔준다. 그리고 setTimeOut 을 이용하여 일정 시간이 지난 후 none 으로 바꾸어 주었다...

구현 사항 CSS 리팩토링(버튼 등 디자인 가다듬기) => 완료 미디어쿼리 모두 손보기=> 완료 애니메이션 효과 적용하기 => 완료 개발자 소개 페이지 완성시키기 => 완료 배포 세팅하기 => 명일 예정 기술발표 준비 => 명일 예정 CSS 리팩토링 모든 버튼에 후버 효과 적용. 특히 메인 페이지의 버튼에는 참고사이트(codepen.io/bartekd/pen/qFsDf) 의 4번 효과를 적용했다. 개발자 소개페이지 구현 완료 개발자 소개페이지를 완성했는데, 팀원 소개는 캐릭터를 적용했다. 반응형 웹 구현을 위한 미디어 쿼리 완료 제작자 소개 페이지의 작은 사이즈는 아래 모습과 같다. 480px 이하일때. 백그라운드 이미지 는 아무래도 이 웹서비스와 어울리는 배경을 쓰는 것이 좋을 것 같다. 도움받은 사이..

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

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

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