20210305 17일차 회원가입 로직 구현 완료
·
BootCamp_Codestates/Final Project
금일 구현 사항 회원가입 로직 구현 로그인 유무에 따른 페이지 구성 변경 반응형 웹 개선 1. 회원가입 로직 구현 기존의 모달창을 이용하여 유효성 검사 메세지를 보여주는 방식의 경우 완료 버튼을 눌러야만 잘못된 부분을 확인할 수 있기 때문에사용자의 입장에서 매우 불편할 것으로 판단했다. 이를 개선하기 위해 잘못된 형식의 정보를 기입하거나 동일한 정보(이메일, 전화번호, 닉네임)가 존재할 때, 글자를 입력할 때마다 해당 유효성 검사를 하여 사진 밑과 같이 메세지를 노출시켜 유저가 확인하기 용이하게 구현했다. 특히, 팀 전체의 의견을 수렴하여 별명/전자우편/전화번호의 경우, 글자를 입력할 때마다 동일한 정보가 데이터베이스에 존재하는지 서버에 확인하여 response 에 따라 유저에게 사용가능 여부 메세지를 ..
20210304 16일차 회원가입 로직 구현(미완)
·
BootCamp_Codestates/Final Project
회원가입 로직 구현 회원가입 정보 작성 모든 기입 정보를 형식에 맞게 작성해야 회원가입이 가능하다. 만약 하나라도 잘못된 부분이 있거나 누락된 경우, 아래와 같은 notification 모달창이 나오며 에러처리한다. 약관도 마찬가지. 그리고 적절히 기입 했더라도 중복되는 email/mobile/nickname 이 있을경우의 결과를 서버로부터 받아 에러처리한다. 회원가입 정상 처리 회원가입이 정상적으로 처리되면 accessToken 을 받아오는데, 이를 세션 스토리지에 저장할 생각이다. 즉, 페이지를 닫으면 세션 스토리지에 있는 토큰 은 사라진다. 다시 로그인, 회원가입을 하면 토큰을 받을 수 있다. 개선할점 모달창이 너무 많이 뜬다. 중복되는 이메일/닉네임/휴대폰번호가 있을 경우에만 모달이 나타나도록 변..
20210302 - 0303 14,15일차 그림판 PNG 저장 구현
·
BootCamp_Codestates/Final Project
결과물 오른쪽 페이지에서 그림을 모두 그린 후, 다그렸다버튼을 클릭했을때, 아래와 같이 PNG image data 와 모든 좌표 데이터를 출력하는 것을 확인할 수 있다. PNG 파일은 multer 를 이용하여 S3 이미지 버킷에, url 은 데이터베이스에 저장하고 모든 좌표 데이터 또한 데이터베이스에 저장할 계획이다. PNG 이미지를 이용하는 이유는, 만약 좌표데이터로 이미지를 불러와 렌더한다면 그림이 그려진 순서대로 그림이 완성되어 가는 모습이 노출되기 때문에, 이미지 데이터로 한번에 렌더하는 것이 사용자 입장(경험적인측면)에서 더 쾌적(?)할 것이라 생각하기 때문이다. 하지만 본인의 이미지를 수정할 때에는 react-canvas-draw method 인 loadSaveData(saveData: Str..
20210301 13일차 그림판 적용
·
BootCamp_Codestates/Final Project
필수 개념 useRef useRef는 우리가 리액트 컴포넌트에서 외부 라이브러리의 인스턴스 또는 DOM 을 특정 값 안에 담을 때 사용합니다. ref 가 null 일 수도 있는 상황에 해당하여, Generics 를 사용하여 표기했다. const firstCanvas = useRef(null); 추가로 공부해야할 내용(반드시 리뷰 및 내용정리해야 함.) 타입스크립트로 리액트 Hooks 사용하기(useState, useReducer, useRef) 출처: velog.io/@velopert/using-hooks-with-typescript Paint component 코드 useRef 를 사용하여 구현했고( 추가적으로 내용정리 필요.) 색 변경 시 hooks 메소드인 usestate 를 이용하여 상태 관리를 ..
20210228 12일차 Sub메뉴바/React 에서 페이지 이동
·
BootCamp_Codestates/Final Project
1. Sub 메뉴바 구현 어디서든 원하는 페이지로 이동할 수 있도록 네비게이션 메뉴바를 만들었다. CSS 를 활용하여 구현. 버튼에 마우스를 올렸을때, 컨텐츠 박스의 display 를 none 에서 block 으로 바꾸어 나타나게 했다. :hover {.dropdown-content {display: block;}} import React, { ReactElement } from "react"; import styled, { keyframes } from "styled-components"; export default function SubNav(): ReactElement { const Main = styled.span` /* border: 3px solid red; */ position: relati..
20210227 11일차 재충전
·
BootCamp_Codestates/Final Project
재충전