// 숫자 배열

const arr = [5, 2, 6, 11, 8, 20];

// 오름차순
arr.sort(function(a, b) {
    return a - b;
});

// 내림차순
arr.sort(function(a, b) {
    return b - a;
});

// 문자 배열

const arr = ['cherry', 'peach', 'strawberry', 'apple'];

// 오름차순
arr.sort();

// 내림차순
arr.sort(function(a, b) {
	return (a > b)? -1 : ((a < b)? 1 : 0);
});

// 객체 배열

const arr = [
  { key: 10, value: '휴대폰' },
  { key: 5, value: '이어폰' },
  { key: 21, value: '가방' },
  { key: 8, value: '보조배터리' },
  { key: 16, value: '전화기' },
];

// 객체 내 숫자 기준
arr.sort(function(a, b) {
    return a.key - b.key;
});

// 객체 내 문자열 기준
arr.sort(function(a, b) {
	return (a.value > b.value)? -1 : ((a.value < b.value)? 1 : 0);
});

마우스 우클릭

터치패드 손가락 2개

1. homebrew 설치 - 3.0.0부터 실리콘 맥 지원

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. jdk 설치

// 최신버전
brew install --cask adaptopenjdk

// 특정버전 - 버전정보는 여기서 확인 https://github.com/AdoptOpenJDK/homebrew-openjdk
brew tap AdoptOpenJDK/openjdk
brew install --cask <version>

3. nvm 설치

// C++ 컴파일러와 개발 라이브러리 사전 설치
sudo apt install build-essential libssl-dev
sudo yum install gcc gcc-c++ openssl-devel

// curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
// wget
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

// node.js 특정버전 설치 - 15부터 실리콘 맥을 지원한다
nvm install <version>

// C++ 부터 안되서 그냥 깔았다
brew install node

4. Visual Stuio Code

brew install --cask visual-studio-code

5. Jetbrain Toolbok - IntelliJ, Webstorm, Android Studio etc....

// toolbox
brew install --cask jetbrains-toolbox

// intellij
brew install --cask intellij-idea

// webstorm
brew install --cask webstorm

// intellij community
brew install --cask intellij-idea-ce

// android stuidio
brew install --cask android-studio

a {
  position: relative;
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
}

a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

출처: tobiasahlin.com/blog/css-trick-animating-link-underlines/

1. 선택자

// 기본
$(".box");

document.querySelector(".box"); // 첫번째만 반환함 
document.querySelectorAll(".box"); // 모두 반환함 nodeList 형태라고 하는데 배열이라고 생각하면 편함


// find
var container = $(".container");
container.find(".box");

var container = document.querySelector(".container");
container.querySelector(".box");

2. 기능실행

$(".box").hide();

// 한개
document.querySelector(".box").style.display = "none";
// 여러개
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" })

3. 탐색

$(".box").next();
$(".box").prev();
$(".box").parent();

var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;

4. 요소

// 요소 추가
$("<div/>");
$("<span/>");

document.createElement("div");
document.createElement("span");


// 요소에 텍스트 추가
var element = document.createElement("div");
element.textContent = "Text"

var text = document.createTextNode("div");
element.appendChild(text);


// 요소의 속성 수정 
$(".button").text("New text");

document.querySelector(".button").textContent = "New text";

// 요소의 속성값 가져오기
$(".button").text();

document.querySelector(".button").textContent;


// 요소에 하위 요소 추가
$(".container").append($("<div/>"));

var element = document.createElement("div");
document.querySelector(".container").appendChild(element);

4. 이벤트 추가

// 기본
$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) {  /* handle click event */ });
$(document).keyup(function(e) {  /* handle key up event */  });

document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });


// 동적으로 추가하는 요소에도 이벤트 추가
$(".search-container").on("click", ".search-result", handleClick); // 기존 요소와 추가될 요소까지

var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
searchElement.addEventListener("click", handleClick); // 추가한 요소에 이벤트 추가하기


// Trigger
$(document).trigger("myEvent");
$(".box").trigger("myEvent");

document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

5. Style (CSS)

// 하나라면
$(".box").css("color", "#000");

document.querySelector(".box").style.color = "#000";


// 여러개라면
$(".box").css({
  "color": "#000",
  "background-color": "red"
});

var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";

// Set all styles at once (and override any existing styles)
box.style.cssText = "color: #000; background-color: red";


// Class명 추가/삭제/토글
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");

// 한개
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");

// 여러개
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");

// 상호 베타적인 토글용 2개의 Class를 번갈아가며 써야 한다면
document.querySelector(".box").classList.replace("focus", "blurred");


// Class명을 가지고 있는지 확인
$(".box").hasClass("focus");

document.querySelector(".box").classList.contains("focus");

6. Document Ready

$(document).ready(function() { 
	// 소스
});

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
	// 소스
});

7. Ajax

$.ajax({
	url: "data.json"
}).done(function(data) {
	// ...
}).fail(function() {
	// Handle error
});


fetch("data.json").then(data => {
	// Handle data
}).catch(error => {
	// Handle error
});

출처를 기반으로 다시 정리함

출처: tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

방향키와 페이지 업다운 키를 이용하여 포커스 이동을 구현해보았다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>키보드를 이용한 포커스 이동</title>
</head>
<body>
	<h1>키보드로 이동하기</h1>
	
	<form name="frm">
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a"><input name="b"><input name="c"><br>
		<input name="a">
		
		<button>전송</button>
	</form>
	
	
</body>
<script>
	const inputs = document.querySelectorAll("input");
	const total = inputs.length;

	const cols = 3; // 컬럼수
	//const rows = Math.ceil(total/cols); // 줄수

	function keyevent(event) {
		const keycode = event.keyCode;
		const idx = Array.from(document.querySelectorAll('input')).indexOf(event.target);

		switch (keycode) {
			case (13) : // Enter
				if(idx===(total-1)){ //enter      
					//alert("폼 전송");
				}else{
					document.querySelectorAll('input')[idx+1].focus();
				}
				break;

			case(33) : // PageUp
				document.querySelectorAll('input')[0].focus();
				break;

			case(34) : // PageDown
				document.querySelectorAll('input')[total-1].focus();
				break;
			case(37) : // Left
				if(idx===0){
					return false;      
				}else{  
					document.querySelectorAll('input')[idx-1].focus();
				}
				break;
			case(38) : // Up
				if(idx < cols){
					return false;      
				}else{
					document.querySelectorAll('input')[idx-cols].focus();
				} 
				break;
			case(39) : // Right
				if(idx===(total-1)){ 
					return false;      
				}else{      
					document.querySelectorAll('input')[idx+1].focus();
				} 
				break;

			case (40) : // Down
				if(idx+cols >= total){
					return false;       
				}else{
					document.querySelectorAll('input')[idx+cols].focus();
				}
				break;

			default : 
				return false;
				break;
		}
	}


	
	function formCheck(e) {
		// 문제가 있으면
		// e.preventDefault();
	}
	
	document.querySelector("form").addEventListener('submit', formCheck);
	for(const item of inputs) {
		item.addEventListener('keydown', keyevent);
	}

</script>
</html>

오류

Database "/Users/계정명/test" not found, either pre-create it or allow remote database creation (not recommended in secure environments) [90149-200] 90149/90149

해결

1안 Save Settings를 Generic H2 (Server)로 하고 JDBC URL을  jdbc:h2:tcp://localhost/~/test 로 하고 연결을 누르라고 하길래

난 애초에 여기서 에러가 났다 그래서 더 검색해봤더니

Generic H2 (Embedded) 로 하고 jdbc:h2:~/test 로 하고 연결을 누르라고 하길래

했으나 난 또 여기서 변함없이 에러가 났다.

h2를 지웠다 깔아서 해결하신 분을 봐서 해봤으나 소용이 없는 듯 했으나 언어를 English로 바꾸고 하니까 잘 됐다

한국어 설정이 문제였던 걸로 의심중

출처: kimkkikki.github.io/flask/2019/03/15/flask_react_router.html

테스트하다보니 현재 기준으로 안되는 부분들이 있어서 일부 수정했다.

package.json

{
  "name": "flask_react_router",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1"
  }
}

private: true 추가

App.js

import React from 'react'
import { Route } from 'react-router-dom';
import First from './containers/First';
import Second from './containers/Second';

const App = () => {    
	return (
		<>
			<Route path='/first' component={ First } />
			<Route path='/second' component={ Second } />
		</>
	);
}

export default App;

함수 베이스로 수정

First.js, Second.js

import React, { Component } from 'react';

const First = () => {
	return (
		<div>Hello First</div>
	);
};

export default First;

이것도 함수 베이스로 수정

잘 돌아간다.

css 파일이 없어서 생기는 에러는 import한 css 파일이 없어서 생긴 문제라서 빈 css 파일을 만들어서 import하고 webpack 해주면 flask_react_router.css이 생성되면서 해결된다.

String.prototype.toDate = function(format){
	var normalized      = this.replace(/[^a-zA-Z0-9]/g, '-');
	var normalizedFormat= format.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');
	var formatItems     = normalizedFormat.split('-');
	var dateItems       = normalized.split('-');

	var monthIndex  = formatItems.indexOf("mm");
	var dayIndex    = formatItems.indexOf("dd");
	var yearIndex   = formatItems.indexOf("yyyy");
	var hourIndex     = formatItems.indexOf("hh");
	var minutesIndex  = formatItems.indexOf("ii");
	var secondsIndex  = formatItems.indexOf("ss");

	var today = new Date();

	var year  = yearIndex>-1  ? dateItems[yearIndex]    : today.getFullYear();
	var month = monthIndex>-1 ? dateItems[monthIndex]-1 : today.getMonth()-1;
	var day   = dayIndex>-1   ? dateItems[dayIndex]     : today.getDate();

	var hour    = hourIndex>-1      ? dateItems[hourIndex]    : today.getHours();
	var minute  = minutesIndex>-1   ? dateItems[minutesIndex] : today.getMinutes();
	var second  = secondsIndex>-1   ? dateItems[secondsIndex] : today.getSeconds();

	return new Date(year,month,day,hour,minute,second);
};

Date.prototype.format = function(f) {
    if (!this.valueOf()) return " ";
 
    var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
    var d = this;
     
    return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function($1) {
        switch ($1) {
            case "yyyy": return d.getFullYear();
            case "yy": return (d.getFullYear() % 1000).zf(2);
            case "MM": return (d.getMonth() + 1).zf(2);
            case "dd": return d.getDate().zf(2);
            case "E": return weekName[d.getDay()];
            case "HH": return d.getHours().zf(2);
            case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2);
            case "mm": return d.getMinutes().zf(2);
            case "ss": return d.getSeconds().zf(2);
            case "a/p": return d.getHours() < 12 ? "오전" : "오후";
            default: return $1;
        }
    });
};
 
String.prototype.string = function(len){var s = '', i = 0; while (i++ < len) { s += this; } return s;};
String.prototype.zf = function(len){return "0".string(len - this.length) + this;};
Number.prototype.zf = function(len){return this.toString().zf(len);};

사용법

const str = "2020-12-17";
const d = str.toDate("yyyy-MM-dd");
const dstr = d.format("yyyy-MM-dd");

출처: https://stove99.tistory.com/46

stackoverflow.com/questions/5619202/converting-a-string-to-a-date-in-javascript

GROUP BY DATE(컬럼명), HOUR(컬럼명), FLOOR(MINUTE(컬럼명)/1)