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

 

'기록' 카테고리의 다른 글

옛날 홈페이지라 메뉴가 어도비 플래시파일인 swf로 되어있고 사이트맵이 없어서 링크를 확인할 수 없는 곳  (0) 2021.04.15
윈도우즈 서버에서 ip차단하는 방법  (0) 2021.04.12
WD my cloud에 설치한 Transmission의 속도가 급격히 저하되었을때  (0) 2017.05.28
LG-5000P에 나스 붙이는 법  (0) 2015.08.07
SONY NWZ-W273 초기화(포맷)하는법  (0) 2015.07.22 
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/

 

Cheat sheet for moving from jQuery to vanilla JavaScript

This reference guide will help you convert jQuery's most common patterns to vanilla JavaScript

tobiasahlin.com

 

'Javascript' 카테고리의 다른 글

fetch로 file download (feat. express)  (0) 2023.05.15
정렬 sort  (0) 2021.04.01
키보드를 이용한 Input text 포커스 이동  (0) 2021.03.15
String to Date / Date to String  (0) 2020.12.17
숫자에 콤마와 언콤마를 편하게  (0) 2016.06.27

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

<!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>

 

 

'Javascript' 카테고리의 다른 글

정렬 sort  (0) 2021.04.01
jQuery to VanillaJS  (0) 2021.03.16
String to Date / Date to String  (0) 2020.12.17
숫자에 콤마와 언콤마를 편하게  (0) 2016.06.27
정규식으로 괄호 안의 문자 추출과 치환하기  (0) 2015.07.09

오류

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로 바꾸고 하니까 잘 됐다

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

 

'오류노트 > Database' 카테고리의 다른 글

Couldn't open file /etc/pki/rpm-gpg/RPM-GPG-KEY-mysql-2022  (0) 2022.06.21
Centos7 /bin/sh: mariadb_config: command not found  (0) 2022.06.02
MDB to MDF  (0) 2018.03.23
MySQL - This application requires Visual Studio 2013 Redistributable. Please install the Redistributable then run this installer again.  (0) 2017.08.21
MSSQL - 테이블 변경내용을 저장할 수 없습니다. 변경내용을 적용하려면 다음 테이블을 삭제하고 다시만들어야합니다.  (0) 2016.08.17

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

 

Kimkkikki Blog

이런저런 개발이야기

kimkkikki.github.io

 

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

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

'Javascript' 카테고리의 다른 글

jQuery to VanillaJS  (0) 2021.03.16
키보드를 이용한 Input text 포커스 이동  (0) 2021.03.15
숫자에 콤마와 언콤마를 편하게  (0) 2016.06.27
정규식으로 괄호 안의 문자 추출과 치환하기  (0) 2015.07.09
숫자에 천단위 콤마 찍기  (0) 2014.10.01

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

'DB > MySQL' 카테고리의 다른 글

CentOS7, MySQL8 에서 root 계정 비밀번호를 분실한 경우  (0) 2022.06.22
SELECT 와 UPDATE 동시에 하기  (0) 2021.06.17
5.7 DB 파일로 복원  (0) 2020.06.04
외부 접근 허용  (0) 2019.10.28
SELECT UPDATE  (0) 2011.06.30

0. MySQL 실행 중지

설치경로\bin\mysqld\mysqladmin -u root -p shutdown

 

1.

기본 경로: C:\ProgramData\MySQL\MySQL Server 5.7\Data\

기존 DB 스키마 폴더와 ibdata1 파일을 덮어 씌우기

 

2. MySQL 재시작

 

'DB > MySQL' 카테고리의 다른 글

SELECT 와 UPDATE 동시에 하기  (0) 2021.06.17
datetime 컬럼을 분단위로 group by 하기  (1) 2020.09.29
외부 접근 허용  (0) 2019.10.28
SELECT UPDATE  (0) 2011.06.30
Create table select, Insert select  (0) 2011.06.17

1. 방화벽

인바운드규칙 / 연결허용 / tcp 3306

 

2. DB의 권한

-- 새 유저 생성할거면 이 구문부터
CREATE USER 계정이름@'%' IDENTIFIED BY '비밀번호';

-- 기존유저 혹은 새유저에 권한 부여
GRANT ALL PRIVILEGES ON 데이터베이스이름.* TO 계정이름@'%';
FLUSH PRIVILEGES;

 

여기까지 해서 해결되었지만 안된다면 이 분 글을 더 참고하면 됨

출처: https://blog.jiktong.kr/2221

'DB > MySQL' 카테고리의 다른 글

datetime 컬럼을 분단위로 group by 하기  (1) 2020.09.29
5.7 DB 파일로 복원  (0) 2020.06.04
SELECT UPDATE  (0) 2011.06.30
Create table select, Insert select  (0) 2011.06.17
스키마내 테이블 수  (0) 2011.06.17

+ Recent posts

티스토리툴바