매료매료의 개발 이야기

Grid는 html의 디자인을 담당하는 CSS의 기술중 최신기술에 속하는 방법입니다.
CSS 속성을 적용시키기 위해서는 <태그>가 반드시 필요한데, <h1>이나 <p>와 같은 태그들은 의미를 가지고있으므로 남용하면 정보가 꼬일수 있습니다.
이때 사용하는 태그가 <div>와 <span> 태그입니다. 이 둘은 아무 의미없는 무색무취의 태그로 <div>는 block level이, <span>은 inline 속성이 기본값으로 적용되어 있습니다.


Grid를 사용하기 전 선행조건으로는
1. 그리드를 사용하고자 하는 <태그>가 부모 <태그>로 묶여있어야합니다.
2. 부모 태그에 id=" "id값을 넣어줘야 합니다. (혹은 class값)
3. CSS <style> 태그에 #id값={display:grid 를 사용하고 원하는 grid 속성을 넣어주면 됩니다.

// 그리드 형태 정의
grid-template-columns: 20% 20% 20% 20% 20%  // 100을 기준으로 퍼센트, 허용단위(백분율, 픽셀, em, fr)
grid-template-columns: 50px 1fr 1fr 1fr 50px; // pixel percentage ems로 설정시 fr로 설정된 다른 열은 남은 공간에서 비율로 나뉘어짐.
grid-template-rows:  20% 20% 20% 20% 20%  // 100을 기준으로 퍼센트

grid-template: 60% 60% 60% / 200px; // 60%인 row 3개와 200px의 열을 생성 ( grid-template-rows 와 grid-template-columns 을 조합한 속성)

repeat: (3, 1fr); // 1fr 1fr 1fr // (반복횟수, 반복값) *fr(fraction;파편) : 숫자 비율대로 크기를 나눔 // 1fr 1fr 1fr : 1:1:1 비율인 3개의 column/row를 만들겠다

minmax(100px, auto): 최소한 100px, 최대는 자동으로 늘어나게 설정

auto-fill: 컬럼의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움(모자르면 비워둠)
auto-fit: 컬럼의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움(모자르면 채움)

// 그리드 형태를 자동으로 정의
// grid-template-columns(rows)의 통제를 받지 않는 것이 grid-auto-columns(rows)
grid-auto-columns
grid-auto-rows : minmax(100px, auto); // row의 갯수를 미리 알수없을때 사용

// 그리드 간격 만들기(* IE에선 사용불가)
row-gap: 10px;
column-gap: 2rem;
gap: 10px;

// 각 셀의 영역 지정
grid-column-start: 5; // 해당 컬럼에서 시작되는 column을 선택
grid-column-end: 2; // 해당 컬럼에서 종료되는 column을 선택 // start와 end는 순서가 바뀌어도 무관, 기준점이 바뀌어서 음수로 설정되도 무관
grid-column-end: span 2; // span을 이용하여 column의 넓이를 지정할 수 있음(양수만 설정 가능)
grid-column: 4 / 6; // grid 라인의 수직선 번호의 시작과 끝을 나타냄 (grid-column-start, end로 쓰기 불편하므로 이렇게 쓰는것이 더 편리)
grid-row-start:3; // 해당 행에서 시작되는 row를 선택
grid-row: 3/6; // grid 라인의 수평선 번호의 시작과 끝을 나타냄 (grid-row-start, end로 쓰기 불편하므로 이렇게 쓰는것이 더 편리)

// 영역 이름으로 그리드 정의 (* IE에서 미지원)
grid-template-areas:

             "header header header"

             "a a a "

             "footer footer footer";

grid-area: 1/2/4/6; // grid-row-start / grid-column-start / grid-row-end / grid-column-end (grid-column, grid-row 로 쓰기 불편하므로 이렇게 쓰는것이 더 편리)

// 배치순서
order: 5; // 각 아이템들의 시각적 나열 순서를 결정하는 속성, 양수,음수 모두 가능

// 정렬 관련 속성1
- stretch : 꽉채움
- start : 정렬방향의 시작점에 가깝게
- center : 정렬방향의 중앙에 위치하게
- end : 정렬방향의 끝점에 가깝게

// container 영역 전체에 적용(stretch/start/center/end)
- align-items : 세로 방향 정렬 
- justify-items : 가로 방향 정렬
- place-items : align-items와 justify-items 같이 쓸수 있는 속성

// 개별 item에 적용(stretch/start/center/end)
- align-self : 세로 방향 정렬
- justify-self : 가로 방향 정렬
- place-self : align-self와 justify-self 같이 쓸수 있는 속성

// 정렬 관련 속성2
- stretch : 꽉채움
- start : 정렬방향의 시작점에 가깝게
- center : 정렬방향의 중앙에 위치하게
- end : 정렬방향의 끝점에 가깝게
- space-between : 아이템 사의의 공간을 동일하게(margin쪽 여백은 없음)
- space-around : 아이템 양쪽에 같은 크기의 마진을 부여
- space-evenly : 아이템 사의의 공간을 동일하게(margin쪽 여백도 존재)

// container 영역 전체에 적용(Grid 아이템 통째로 정렬)(stretch/start/center/end/space-between/space-around/space-evenly)
- align-content : 세로 방향 정렬 
- justify-content : 가로 방향 정렬
- place-content : align-content와 justify-content 같이 쓸수 있는 속성

// 표준                                            IE

display: grid;                                    display: -ms-grid;
grid-template-rows                           -ms-grid-rows
grid-template-columns                      -ms-grid-columns
grid-row-start                                  -ms-grid-row
grid-column-start                             -ms-grid-column

grid-row: 1 / span 2;
에서 span 2 대신                             -ms-grid-row-span: 2 (-ms-grid-row 같이 써야함)

grid-column: 1 / span 2;
에서 span 2 대신                             -ms-grid-column-span: 2 (-ms-grid-column 같이 써야함)

align-self                                       -ms-grid-row-align
justify-self                                      -ms-grid-column-align

repeat(12, 1fr 20px)                          repeat(1fr 20px)[12]

grid-template, grid-template-areas, gird-area ===> 미지원....!!

1. 역할
	- data() 는 html 엘리먼트 내에 데이터를 저장하고 읽는 역할을 하는 함수

2. 쓰임새
	- 서버에서 조회된 데이터를 추후 ajax 통신을 하기 위한 data 저장
	- data()를 활용하여 Form의 <input> 엘리먼트의 validation 적용
		- 

3. 장점
	- html element에 data를 저장하므로 source code를 깨끗하게 유지
	- 직관적인 문법으로 쉽게 사용가능

var $span = document.createElement("span");
$($span).data("memberName", "홍길동"); // $span 엘리먼트에 {name: "홍길동"} 을 <key, value> json 형식으로 저장 , camelCase로 저장하면
<span data-member-name='홍길동'></span> // html에는 snake_case로 저장

$($span).data("memberName"); // key값이 memberName 인 value를 get
$($span).removeData("memberName"); // key값이 memberName 인 value를 삭제. 단, html에 저장된 data는 지워지지 않고, null로 바꿔줘야함.

$($span).data("member").name = "홍길동"; // <span data-member= '{"name":"홍길동"}'></span>

filter(users, function(user){return user.id === 3
})

위와 같이 함수를 작성했을때, 두번째 인자로 오는 function 을 predicate 라고 한다.
보통 함수는 일정한 로직을 거쳐 답을 내게 된다. 
안에서 사용하는 조건이나 판별식은 동일 할 수 밖에 없다.

하지만 함수형 프로그래밍 에서 predicate 를 사용한다면 이야기가 달라진다.
함수는 흐름 만을 제공할 뿐 결과를 도출해 내는 판별식은 전적으로 predicate 에게 일임한다.
이렇게 우리는 조금 유연하게 함수를 작성할 수 있고 재사용성을 높일 수 있다.

//예시 함수
function filter(arr, predicate){
  let ret = 'non';
  arr.map(v => {
    if(predicate(v)){
      ret = v;
            return;
    }
  })
  return ret;
}

출처 : ddingg.tistory.com/115

1. DOM을 캐싱하라
	- 한번 탐색한 DOM을 다시 탐색하는 것을 비효율적이다.
	- 캐싱된 변수를 통해 요소를 탐색하라

var aa = $('#area');
aa.modal();
aa.addClass('active');

2. 명시적인 $ 식별자를 사용하자(Hungarian Notation)
	- 헝가리안 표기법 : 컴퓨터 프로그래밍에서 변수 및 함수의 이름 인자 앞에 데이터 타입을 명시하는 코딩 규칙
	- jQuery 객체를 참조한 변수 이름 앞에 $를 붙여 jQuery 를 사용 가능한 객체임을 식별하도록 하여 혼란을 감소시키자

var $area = $('#area');
var value = $area.val();

3. 문장을 연결(Chaninng)되도록 묶어서 가독성이 뛰어난 코드를 만들어라

$second
	.html(value)
	.on('click', function(){alert('hello world');})
	.fadeIn('slow')
	.animate({height:'120px'},500);

4. 코드의 양을 줄여라
	- &&, || 를 활용하자

$area = $area || $('.selector');

5. DOM 조작이 많을 경우, 분리하여 적용하자
	- 문서에 붙여진 상태에서 다수의 DOM조작은 비효율적이기 때문에 조작하고 다시 붙이는게 좋다.

var $container = $('.container'),
     $containerLi = $container.find('li),
     $element = null;
$element = $containerLi.first().detach(); // $element에 다수의 조작이 수행
// detach는 remove와 같으나 제거된 요소를 변수에 담아서 저장할 수 있다.

$container.append($element);

6. 프로젝트의 최종단계에서는 jQuery CDN을 사용하라
	- Content Delivery Network 사용시 사용자의 가장 가까운 곳에서 데이터를 가져오기 때문에 속도 향상에 도움이 된다.

$(document).mousemove(function(e){
	$("body").html(e.pageX + ... );
});

정의
- 오라클 자체에서 제공되는 테이블
- 간단하게 함수를 이용해서 계산 결과값을 확인할 때 사용하는 테이블

용도
- 사용자가 함수(계산)를 실행할 때 임시로 사용

예시
- SELECT SYSDATE FROM DUAL;

프로시저
자주 사용되는 Logic이나 여러 Application 이 공통으로 사용하는 모듈을 미리 Compile된 형태로 데이터베이스 내에 저장해놓고 필요할 때 이용하는 것.
ex) 한달간 가장 많은 매출을 올린 상품 리스트를 출력하는 프로시저

트랜잭션
Transaction 은 작업의 단위이다.
한꺼번에 모두 수행되어야 할 일련의 연산들을 의미한다.
하나의 SQL문 또는 여러 SQL문의 묶음으로 이루어져 있다.

배치
사용자와의 상호작용 없이
대량의 데이터를 처리하는
일련의 작업들을 묶어
정기적으로 반복 수행하거나
정해진 규칙에 따라 자동으로 수행하는 것

정기 배치 : 정해진 시점(주로 야간)에 실행
이벤트성 배치 : 사전에 정의해 둔 조건이 충족되면 자동으로 실행
On-Demand 배치 : 사용자의 명시적인 요구가 있을 때마다 실행

예를들어 저녁에 오늘하루 있었던 매출 데이터를 통계내고 정리하는 작업이 있을 수 있다.

트랜잭션과의 차이점 : 트랜젝션은 트랜잭션내의 모든 command가 성공적으로 끝나야 commit되지만 배치는 실행은 한꺼번에 하지만 commit은 배치내의 command별로 한다.

정의
 - 인적자원정보 시스템(Human Resources Information System)
 - HR부서업무(인력, 정책, 절차 etc)를 간편하면서도 효율적으로 관리할수 있게 도와주는 단독형 S/W 또는 SaaS기반 소프트웨어

기능
 - 직원정보관리, 회사문서, 채용 및 지원서 관리, 급여관리, 연차관리, 교육 및 성과 관리

장점
 - 기업의 의사결정 효율성을 개선
 - 반복적인 HR업무 해방

벤더업체
· 아센티스(Ascentis)
· 밤부HR(BambooHR)
· 크리테리온(Criterion)
· 코어HR(CoreHR)
· 데이포스(Dayforce)
· 에피코르(Epicor)
· 인포 클라우드스위트 HCM(Infor CloudeSuite HCM)
· 크로노스 워크포스(Kronos Workforce)
· 오라클 HCM 클라우드(Oracle HCM Cloud)
· SAP 석세스팩터(SAP SuccessFactors)
· 얼티밋 소프트웨어 얼티프로(Ultimate Software UltiPro)
· 워크데이(Workday)

// 사용예제
if (navigator.userAgent.toLowerCase().indexOf("chrome") !== -1 ) {
	...
    비즈니스 로직
    ..
}	

navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체

navigator.userAgent // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36
navigator.appName // Netscape
navigator.appCodeName // Mozilla 

익스플로러 11 버전, 크롬, 파이어폭스와 사파리는 모두 브라우저의 이름을 "Netscape"로 사용

익스플로러 10 이하 버전, 크롬, 파이어폭스, 사파리와 오페라 모두 브라우저 코드명을 "Mozilla"로 사용

// IE 브라우저 체크
var agent = navigator.userAgent.toLowerCase();
var res = false;

res = ((/trident/i).test(agent) || (/msie/i).test(agent));

return res;

 IE6.0 = null
 IE7.0 = null
 IE8.0 = Trident/4.0
 IE9.0 = Trident/5.0
IE10.0 = Trident/6.0

null 과 trident 둘다 체크를 위해 위와 같이 정규식 test를 사용하여 처리한다.

1. Split 기법

문자열을 다수의 string 변수에 잘게 나눈 후 마지막에 재조합하는 방식

var a = "<h";
var b = "</h";
var c = "M";
var d = "1>";
var e = "AT";
var f = "1>";
var g = "AD";
var h = "H";

document.write(a + f + c + g + h + e + b + d); 

2. escape()/ unescape()

escape 함수는 ASCII 형태의 문자열을 ISO Latin-1 형태로 변환해 주는 함수(문자열을 encode)

unescape 함수는 그와 반대로 반환(문자열을 decode; escaping된 문자열을 정상적인 문자로 치환)

알파벳과 숫자, *, @, -, _, +, / 를 제외한 특수문자만 해당

document.write(escape("MADHAT!@#$%^&*"));
document.write(" ");
document.write(unescape("MADHAT%21@%23%24%25%5E%26*"));

3. eval

문자열을 코드로 인식하게 해주는 함수

var a = "document.write('\x4d\x41\x44\x48\x41\x54')";

eval(a);

// \ddd : 2개의 8진수(ddd)로 지정된 Latin-1 문자

4. Hexademical / Decimal

Hexademical 은 16진수를 Decimal은 10진수를 의미.

어떤 문자열이 있을때, 이를 알아보기 어렵게 16진수 혹은 10진수 값으로 바꾸어 입력.

이때, String.fromCharCode 혹은 String.charCodeAt 함수를 사용

String.fromCharCode은 숫자 -> 문자로 변환하는 함수.

String.charCodeAt은 특정 위치의 문자를 아스키코드의 숫자로 변환하는 함수.

Mazilla나 JSDEtox와 같은 툴로 바로 풀리는 난독화임.

Hexademical의 경우 주로 나오는 난독화의 형시은 %(숫자)나 \x(숫자)

\x(숫자)는 %로 치환 후 분석.

document.write('\x4d\x41\x44\x48\x41\x54\x20');
document.write(String.fromCharCode(0x4d,0x41,0x44,0x48,0x41,0x54,0x20));
document.write(String.fromCharCode(77,65,68,72,65,84,32));

document.write(String.fromCharCode("LADHAT".charCodeAt(0) + 1));

5. XOR 기법

XOR 암/복호화 방식 : 평문 ^ KEY = 암호문 // 암호문 ^ KEY = 평문

XOR 연산의 성질

 교환법칙 : A ^ B = B ^ A

 결합법칙 : (A ^ B) ^ C = A ^ (B ^ C)

 항등원 : A ^ 0 = A

 역원 : A ^ A = 0

document.write(String.fromCharCode(92 ^ 17, 80 ^ 17, 85 ^ 17, 89 ^ 17, 80 ^ 17, 69 ^ 17));