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

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

회원가입 로직 구현 회원가입 정보 작성 모든 기입 정보를 형식에 맞게 작성해야 회원가입이 가능하다. 만약 하나라도 잘못된 부분이 있거나 누락된 경우, 아래와 같은 notification 모달창이 나오며 에러처리한다. 약관도 마찬가지. 그리고 적절히 기입 했더라도 중복되는 email/mobile/nickname 이 있을경우의 결과를 서버로부터 받아 에러처리한다. 회원가입 정상 처리 회원가입이 정상적으로 처리되면 accessToken 을 받아오는데, 이를 세션 스토리지에 저장할 생각이다. 즉, 페이지를 닫으면 세션 스토리지에 있는 토큰 은 사라진다. 다시 로그인, 회원가입을 하면 토큰을 받을 수 있다. 개선할점 모달창이 너무 많이 뜬다. 중복되는 이메일/닉네임/휴대폰번호가 있을 경우에만 모달이 나타나도록 변..

Sequelize(ORM)을 이용해 CRUD API를 만들었다. 검색 기능이 특히 어려웠는데, 페이지네이션과 검색어에 따른 API 예외처리를 만들어주는게 쉽지 않았다. 로컬에서 완벽하다 생각해서, AWS EC2에 배포하면 다른 오류가 생기고.. 다시 고치고 배포하고.. 반복했다. Multer s3를 이용한 s3업로드와 업로드 된 파일의 url을 DB에 저장하는 작업도 쉽지 않았다. Multer 라이브러리 const multer = require('multer'); const path = require('path'); const AWS = require('aws-sdk'); const multerS3 = require('multer-s3'); const dotenv = require('dotenv'); d..

결과물 오른쪽 페이지에서 그림을 모두 그린 후, 다그렸다버튼을 클릭했을때, 아래와 같이 PNG image data 와 모든 좌표 데이터를 출력하는 것을 확인할 수 있다. PNG 파일은 multer 를 이용하여 S3 이미지 버킷에, url 은 데이터베이스에 저장하고 모든 좌표 데이터 또한 데이터베이스에 저장할 계획이다. PNG 이미지를 이용하는 이유는, 만약 좌표데이터로 이미지를 불러와 렌더한다면 그림이 그려진 순서대로 그림이 완성되어 가는 모습이 노출되기 때문에, 이미지 데이터로 한번에 렌더하는 것이 사용자 입장(경험적인측면)에서 더 쾌적(?)할 것이라 생각하기 때문이다. 하지만 본인의 이미지를 수정할 때에는 react-canvas-draw method 인 loadSaveData(saveData: Str..

필수 개념 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 를 이용하여 상태 관리를 ..