채팅 기능 구현을 완료하고 프론트 담당자 분이 프론트와 연결하는 작업을 진행하다가 ` X-Frame-Options ` 오류를 발견해서 이슈 해결 방법을 찾아보게 되었다. 01 . X-Frame-Options 오류 ` X-Frame-Options ` 오류는 처음 보는데 클릭재킹 공격을 막기 위한 설정이라고 한다. frame과 iframe, object 태그 에서의 참조를 제한하는 X-Frame-Options 라는 사양을 제안하고 있다. 주요 브라우저의 최신 버전에 모두 적용이 되어 있다. 위의 태그들을 렌더링 해야하는지 막아야하는지를 알려준다. X-Frame-Options의 값은 3가지가 있다. DENY : 해당 페이지는 frame 내에 표시할 수 없다. SAMEORIGIN : 해당 페이지와 동일한 org..

프로젝트 시작 전, 웹소켓과 프론트를 연결하는 기술에 대해 미리 알아보고 습득했는데, 강사님께서 도움이 될만한 강의를 추천해주셨다 . 노마더코드 줌 구현으로 채팅 기능이 포함이 되어 있다고 하여 프론트 맏으신 분과 함께 내용을 빠르게 들어 보았다. 일단 작업 환경은 조금 달랐는데 프론트와 백앤드 모두 node.js에서 이루어지고 있었다. 강의 속에서 여러 기술들을 소개하고 다루는 방법에 대해 알려주었다. 각 기술들의 장점과 단점에 대해 정리하고 더 맞는 방법을 찾아보다가 프론트에서는 SockJs를 사용하기로 하였다. 1. 채팅 사용기술 정리 - 프론트 1-1. WS 강의에서는 WS와 Socket.io 를 다루고 있었다. 먼저 WS는 websocket 이 기본 브라우저에서 제공하는 기능으로 따로 설치가 없..

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

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