회원가입 로직 구현 회원가입 정보 작성 모든 기입 정보를 형식에 맞게 작성해야 회원가입이 가능하다. 만약 하나라도 잘못된 부분이 있거나 누락된 경우, 아래와 같은 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 를 이용하여 상태 관리를 ..

1. GIT MODIFIED 취소 1) 레파지토리 내 모든 수정 되돌리기 $ cd {repository_root_dir} $ git checkout . 2) 특정 폴더 아래의 모든 수정 되돌리기 $ git checkout {dir} 3) 특정 파일의 수정 되돌리기 $ git checkout {file_name} 2. GIT ADD 취소 실수로 git add * 명령어로 모든 파일을 Staging Area 에 넣은 경우, 아래의 명령어를 통해 파일을 Unstage 상태로 변경할 수 있다. git reset HEAD [file] //선택한 파일만 적용 git reset HEAD //모든 파일에 적용 3. GIT COMMIT 취소 // [방법 1] commit을 취소하고 해당 파일들은 staged 상태로 워킹..

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..