Final Project Contact Points배포 주소: royaldiary.ml/깃헙 주소: github.com/codestates/RoyalDiary-client/wiki발표 링크: my works길고도 짧았던 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와 반응형 웹을 더 손봐야겠다..