개발하는 고라니

브라우저에서 댓글을 작성해 서버로 전송하는 과정 중 만난 문제와 그때의 해결방법을 기록하고자 한다. XMLHttpRequest 'POST' JQuery를 이용하지 않고 JS로 XMLHttpRequest를 만들어 서버로 JSON 데이터를 'POST'하는 과정에서 만난 오류는 다음과 같다. var reply = { content: content, bid: bid }; request.open('POST', url, true); request.setRequestHeader("Content-Type", 'application/json; charset=UTF-8'); request.send(JSON.stringify(reply)); 해당 URL로 JSON 형식의 데이터를 보냈는데, 이를 어떻게 받아야 할까? 우리는..

이벤트 트리거로 파일을 업로드하는 방법도 있다면 요즘엔 드래그 앤 드랍 방식으로도 많이 사용한다. 그 방법을 알아보자. 먼저 이벤트 중에 drag라는 이벤트가 있는데 이를 좀더 자세히 보면 다음과 같이 있다. Drag & Drop 파일 업로드 네모난 박스에 파일을 드래그 했을 때 그 파일의 정보를 가져오는 것을 알아보기 전에 사전 준비를 해보자. HTML과 그에 필요한 Javascript 작성한다. HTML / JS 작성 파일업로드 : DND & Trigger 파일선택 var sec9 = document.querySelector('#ex9'); var btnUpload = sec9.querySelector('.btn-upload'); var inputFile = sec9.querySelector('inp..

일전에 Node를 통해 MongoDB에 데이터를 저장하고, 가져오고, 수정하고 삭제하는 것을 구현해보았다. 우리에게 익숙한 RDBMS와 다르게 NoSQL인 MongoDB는 스키마(Schema)가 없다는 특징이 있었다. 이는 때로는 편리할지도 모르지만, 어쩌면 더 복잡할 지도 모르겠다. 그래서 사용하는 것이 mongoose이다. mongoose는 MongoDB를 사용할 때 스키마를 지정해서 사용할 수 있게 해준다. 스키마 타입 (Schema Type) String 문자열 타입 Number 숫자 타입 Boolean 이진 타입 Array 배열 타입 Buffer 버퍼 타입, 바이너리 데이터를 저장할 수 있다. Date 날짜 타입 ObjectId 각 문서(Document)마다 만들어지는 ObjectId를 저장할 ..

자바스크립트는 함수를 표현할 때 아래와 같이 표현하는 방법이 있다. var f1 = function (a) { } var f1 = (a) => { } ES6 (ECMAScript standard 6)에서 함수 작성을 위한 새로운 구문을 도입했다. 바로 Arrow Function이다. 화살표 함수에 대한 자세한 내용은 여기서는 다루지 않고 하단 링크를 통해 추후 자세히 공부해보도록 한다. 화살표 함수 - JavaScript | MDN 화살표 함수 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함 developer..

일전에 WebSocket(웹소켓)과 SockJS를 사용해 Spring 프레임워크 환경에서 간단한 하나의 채팅방을 구현해본 적이 있다. [Spring MVC] Web Socket(웹 소켓)과 Chatting(채팅) 기존 공부 용도의 게시판(?)에 여러 기능을 추가하던 차, 관리자와 멤버 간 채팅 기능을 구현하고 싶었다. 채팅을 하려면 웹 소켓이 필요하다고 한다. 간단하게 구현하는 것은 어렵지 않으므로 dev-gorany.tistory.com 이때는 무작정 여러 블로그를 참고하면서 채팅이라는 기능을 구현하고 다뤄보는 것에 의의를 두었다. 이번에는 Spring Boot 환경에서 여러개의 채팅방을 구현하고, 채팅이 저장될 수 있게 하기까지를 우선 목표로 설정하고 좀 더 공부하며 진행해보고자 한다. WebSock..

XSS는 Spring Boot의 내용은 아니긴 하나, Web 카테고리를 따로 만들지 않아 어쩔수 없이 여기에 작성한다. XSS XSS는 Cross Site Scripting의 약자이다. 원래대로라면 CSS라고 불리는 것이 맞지만, CSS는 이미 Cascading Style Sheets가 사용하고 있기 때문에 XSS라고 불린다. 이는 웹 해킹 공격 기법 중 하나로 "사용자가 웹 페이지에 접속하는 것으로 올바르지 않은 스크립트가 실행되는 취약점 또는 공격 방법"이라고 설명할 수 있고, "게시판이나 웹 메일 등에 Javascript와 같은 스크립트를 입력해 개발자가 의도하지 않은 동작이 수행될 수 있게 하는 공격 기법"이다 라고 할 수 있겠다. 많이 알려진 웹 해킹 공격 기법 들은 대부분 서버를 노리지만, X..

위와 같은 웹 페이지가 있을 때, 첨부 파일의 이름을 클릭하면 파일이 다운로드 되도록 하는 법을 알아본다. 우선 첨부파일의 정보를 출력하는 웹 페이지의 HTML일부를 보면 다음과 같다. [[${uploadDTO.fileName}]] "th:"와 같은 문자열이 있는데, 이는 thymeleaf라는 Template Engine을 사용하여 그렇다. 어쨋든 [[${uploadDTO.fileName}]] //------------------------------------------------------- 파일이름 '파일이름'을 클릭하면 '/download?fileName=파일이름'이라는 URL에 'GET'요청을 하게된다. 이 때 파일이 다운로드 되도록 하는 것이다. View 단은 이정도면 되었고, Back단을 살..

첨부파일을 다루다 보면, 파일의 종류, 확장자에 따라 다르게 처리해야할 경우가 있다. 이 때 업로드된 파일의 종류를 알아보려면 Content-Type이 무엇인지 알면 간단하게 판단할 수 있다. Content-Type 서버와 클라이언트가 어떤 자원(파일,문서,데이터 등)을 주고받을 때 웹 서버는 HTTP헤더로 파일이나 자원을 포함하는 바이트의 Stream을 앞에 보낸다. 이런 헤더는 클라이언트에게 웹 서버와 커뮤니케이션 세부사항을 묘사한다. 예를 들어, 헤더는 사용되고 있는 웹 서버의 '소프트웨어의 타입', '서버의 날짜와 시간', 'HTTP 프로토콜', '사용중인 커넥션 타입' 등을 지정한다. 헤더는 또한 클라이언트가 이런 가상 패스나 도메인에 대해 저장해야할 쿠키를 포함한다. Content-Type 개..