채팅 기능과 연관되어 있는 알림기능과 파일도 분석하고 DB 설계작업을 했다. 1. 알림 기능 분석 1-1. 기본기능 유저 각자의 알림이 존재한다. 전달되는 메시지가 존재한다. ( 채팅 , 주문 현황에 대해 알림이 전송된다.) 그 메시지와 연관된 사람이 존재한다. 1-2. 추가기능 알림을 선택시 해당 페이지로 이동할 수 있다. 전체 알림을 확인 할 수 있다. 메일로 알림을 확인 할 수 있다. 1-3. 필요한 내용 받는 사람 / 보낸사람 / 알림 숫자 / 알림 구분 (어떤 알림인지) / 메시지 / 이동하는 페이지 / 알림 확인여부 / 받는사람 타입 ( 주문의경우 , 주문받는 사람인지 주문하는 사람인지 구분) 받는 사람 : 본인 보낸사람 : 닉네임 (입장) 일반 유저 : 작가 / 작가 유저 : 주문자 알림 구..

팀 프로젝트로 아트마켓이라는 플랫폼을 제작했다. 아트마켓은 아트가 필요한 고객과 아티스트의 중계 사이트로 팀원들과 프로젝트를 기획하고 어떤 기술들을 사용할지에 대해 정하며, 이전 부터 구현해보고 싶었던 채팅 기능을 추가 하였다. 해당 플랫폼은 가격을 구매자와 판매자가 함께 견적을 내고 합의하에 구매까지 가능하다. 때문에 서로 어떻게 연락을 주고 받는지가 중요한데, 게시판 대신 채팅으로 서로 견적 문의를 할 수 있고 이후 작품을 작업하면서, 작업에 필요한 파일과 컨펌, 완성된 작업물 전달을 까지 가능 할 수 있도록 제작 하였다. 1. 채팅 기능 분석 1-1. 기본기능 유저는 여러 작가와 대화할 수 있다. ( 여러 대화방 있다. ) 하나의 대화방에는 여러 ‘문자’들이 오고갈 수 있다. 하나의 대화방에서는 상..

무료 에디터 사용하기 네이버 구글 등 api가 존재하지만 간편하고 깔끔하게 사용하기 좋은 것 같아서 summernote를 선택했습니다. Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org 1. 필요 파일 설치 경로 : hompage > 'get started > 'download compiled' 사용가능한 소스들이 모두 들어있는데 그 중에서 자신의 프로젝트에 맞는 파일들을 선택해서 넣어주면 됩니다. 부트스트랩과 함께 사용할 수도 있지만 저는..

React 는 각 기능의 컴포넌트를 각각 나눠서 사용해야 재사용성면 그리고 성능 면에서도 효율적이다. 이렇게 나누어진 컴포넌트를 랜더링 할때 변화된 부분만 새로 보여주는 역할을 할수 있도록 해주는것이 Memo 이다. 하지만 항상 사용해서 좋은 것은 아니기 때문에 성능 분석 후 필요시 사용하는 것이 좋다. React는 컴포넌트를 렌더링 한뒤 이전에 렌더링 된 결과와 비교화여 DOM 업데이트를 결정한다. 만약 렌데링 결과가 이전과 다르다면 DOM을 업데이트 한다. 이 과정에서 컴포넌트가 React.memo(컴포넌트)로 둘러쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그다음 렌더링이 일어날때 렌더링하는 컴포넌트의 props가 같다면 React는 메모이징된 내용을 재사용한다. 매개 변수..