## [Drag and Drop](https://developer.mozilla.org/ko/docs/Web/API/HTML_%EB%93%9C%EB%9E%98%EA%B7%B8_%EC%95%A4_%EB%93%9C%EB%A1%AD_API/Drag_operations)


1. 정의 : 요소를 드래그해서 새로운 요소로 이동하는 것!(HTML 5)

2. 속성 및 이벤트 종류
 - 속성 : dataTransfer
 - 이벤트의 종류
 - drag : 마우스 드래그 했을떄 발생
 - dragend : 마우스 드래그가 종료했을떄(버튼 릴리즈)
 - dragenter : 드래그 한 요소가 다른 요소로 접근했을떄
 - dragexit
 - dragleave : 드래그한 요소가 유요한 곳을 떠날떄
 - dragover : 드래그한 요소를 유요한 곳을 지날때
 - dragstart : 드래그를 발생할 요소에 정의
 - drop : 드래그한 요소를 유효한 곳에 놓을때

3. 사용법
 1. 드래그가 가능한 요소를 만들자

 ```html
 <tag draggable="true"></tag>
 ```

 2. 드래그가 발생할 때 필요한 데이터를 저장

 ```html
 // ondragstart는 drag 발생할때 처음으로 발생하는 이벤트
 // 이유 : 드래그한 요소에 대한 정보를 저장하기 위해
 <tag draggable="true" ondragstart="drag(event)"></tag>
 ```

 ```js
 // 정보를 저장하기 위해 드래그 이벤트 속성에 있는 dataTransfer에 setData(키, 벨류)로 저장
 function drag(ev){
 ev.dataTransfer.setData('키', 벨류);
 }
 ```

 3. 드래그가 발생하면 브라우져에서 기본적으로 삭제를 시도한다 이러한 삭제를 방지하자

 ```js
 ev.preventDefault(); // allowDrop();
 ```

 4. 드랍할 곳!에 이벤트를 정의하자

 ```html
 // ondragover : 브라우져 삭제 방제
 // ondrop으로 드랍된 데이터를 사용하자
 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
 ```

 ```js
 // 정보를 저장하기 위해 드래그 이벤트 속성에 있는 dataTransfer에 setData(키, 벨류)로 저장
 function drop(ev) {
 ev.preventDefault();
 var data = ev.dataTransfer.getData('키');
 ev.target.appendChild(document.getElementById(data));
 
 }
 ```

4. 분석 소스

```html
 <script>
 function allowDrop(ev) {
 ev.preventDefault();
 }
 
 function drag(ev) {
 ev.dataTransfer.setData("text", ev.target.id);
 }
 

 function drop(ev) {
 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
 }
 </script>
 <body>
 <h2>Drag and Drop</h2>
 Drag the image back and forth between the two div elements.
 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
 <img
 src="img_w3slogo.gif"
 draggable="true"
 ondragstart="drag(event)"
 id="drag1"
 width="88"
 height="31"
 />
 </div>

 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 </body>
```

HTML5 API에서 지원하는 Drag and Drop Api 정리

Drag and Drop Api

## Express에서 쿠키와 세션 등록

정의 : HTTP 프로토콜은 한번 요청과 응답을 하면 서버는 클라이언트와 끝이다.
 HTTP 프로토콜의 특징!!(connectionless = 응답을 받은면 연결 해체, stateless = 통신이 끝나면 상태 유지 안함
 로그인 및 장바구니 같이 계속해서 정보를 페이지가 변경이 되더라도 가지고 있어야 하지만, 안된다. 그래서 쿠키와 세션을 이용해서 정보를 가지고 있는다. 여기서 정보란 회원로그인 여부, 장바구니 내용물 등이 될수가 있다.

1. 쿠키란?

 - 정의 : 웹 서버를 통해 사용자의 컴퓨터에 직접 저장
 - 저장장소 : req.header
 - 속성
 - maxAge : 쿠키의 만료 시간을 밀리초 단위로 설정
 - expires : 쿠키의 만료 시간을 표준 시간 으로 설정
 - path : 쿠키의 경로 (default: /)
 - domain : 쿠키의 도메인 이름 (default: loaded)
 - secure : HTTPS 프로토콜만 쿠키 사용 가능
 - httpOnly : HTTP 프로토콜만 쿠키 사용 가능
 - signed : 쿠키의 서명 여부를 결정
 - encode
 - samaSite

 * 사용방법

 ```js
 // 1. 기본적인 쿠키 설정 및 사용 방법
 const express = require("express");
 var cookieParser = require("cookie-parser");
 const app = express();
 app.use(cookieParser());
 app.get("/", (req, res) => {
 // 설정
 res.cookie("rememberme", "1", {
 expires: new Date(Date.now() + 90000000),
 httpOnly: false
 });
 res.send("Hello World!");
 });
 app.get("/user", (req, res) => {

 // 사용방법
 console.dir(req.cookies);
 res.send("cookie parser!");
 });

 // 2. 쿠기 암호화
 app.use(cookieParser("sdfkmsdlfk")); // 파라미터로 자기가 원하는 문자열! 그걸 기준으로 암호화

 // 설정 => signed : true <<< 암호화를 한다
 res.cookie("rememberme", "1", {
 expires: new Date(Date.now() + 90000000),
 httpOnly: false,
 signed: true
 });

 // 사용방법
 req.signedCookies.rememberme
 ```

2. 세션
 - 정의 : 쿠키보다 더 안전하고 많은 데이터를 저장하는 저장 방식
 - 사용이유 : 쿠키의 경우 데이터를 사용자의 컴퓨터에 저장하기 때문에 비밀번호 같은 민감한
 부분이라도 예외없이 그래도 드러납니다. 하지만 세션은 데이터를 서버에 저장하기 떄문에 안전
 - sessing 및 관련 모듈 설치

 ```bash
 $ npm i express-session session-file-store
 ```
 - 사용방법

 ```js

 const session = require("express-session");
 const FileStore = require("session-file-store")(session);

 app.use(
 session({
 secret: "keyboard cat", // 암호화
 resave: false,
 saveUninitialized: true,
 store: new FileStore() // store를 DB와 연결하여 사용 가능
 
 // store: new MongoStore({
 // url: "mongodb://localhost/test",
 // collection: "sessions"
 // })
 })
 );

 app.get("/", (req, res, next) => {
 if (!req.session.num) {
 
 req.session.num = 1;
 } else {
 
 req.session.num = req.session.num + 1;
 }
 });


 ```

쿠키와 세션에 대한 정리 및 node에서 사용법

Exrpess_Cookie_Session_Settion

<h2>엑셀은 csv, xlsx 확장자에 따라 모듈을 사용한다.</h2>
<ol>
<li>csv는 줄을 기준으로 배열을 나누며, <code>콤마</code>를 기준으로 인덱싱을 한다.</li>
<li>xlsx는 첫줄을 key로 지정하며, 아래있는 줄을 value로 인식하여 하나의 Json 객체를 만들어 배열에 담아 리턴한다.</li>
</ol>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const fs = require('fs');

/********** csv 확장자에서 가져오기 **********/
const csv = require('csv-parse/lib/sync');
const file = fs.readFileSync('./excel/파일명.csv');
const rs = csv(file.toString('utf-8'));
console.log(rs);

/********** xlsx 가져오기 **********/
const xlsx = require('xlsx');
const file_xlsx = xlsx.readFileSync('./excel/파일명.xlsx');
//읽어온 파일에서.Sheets.시트명을 하면 첫번째줄을 키 값으로 아래줄을 벨류 값으로 불러온다 
const movie = file_xlsx.Sheets.movie;
const rs2 = xlsx.utils.sheet_to_json(movie);
console.log(rs2);

</code></pre></div>

Jun 개발노트

노드에서 엑셀을 다뤄보자

엑셀은 csv, xlsx 확장자에 따라 모듈을 사용한다.