매료매료의 개발 이야기

1.  이슈를  처리하기  위해서  주  브랜치(master/main)에  바로  소스코드를  커밋과  푸시  하지  않아야함
2.  주  브랜치(master/main)에  바로  커밋과  푸시를  지양하며  특수한  경우가  아니면  개별  브랜치를  이용해야함
3. 브랜치 이름은 kebab-case로 작성해야 함 (ex: fix-employee-popup, modify-event-case, add-salary-menu, remove-location-setting 등)
4. 주  브랜치(master/main)에  소스를  반영하려면  개별  브랜치에서  풀-리퀘스트(Pull-reqeust)를  생성하고  리뷰어들의  리뷰를  받아야함
5.  리뷰어들은  풀-리퀘스트의  내용을  검토하고  승인  혹은  개선사항을  피드백해야함
6.  담당자는  리뷰어들의  피드백을  확인하고  수정
7. 마지막  리뷰어가  승인  혹은  개선사항을  점검하고  개선사항(다른  리뷰어들의  개선사항  포함)이  1건도  없으면  해당  풀-리퀘스트를  통해  개 별  브랜치를  주  브랜치(master/main)에  머지
8.  담당자는  풀-리퀘스트를  통해  머지된  개별  브랜치를  제거

<<PR 코멘트 작성법>>

1. (pr 이 들어온 상태를 가정) Files changed 탭에서 파일 별로 검토를 하면서 코멘트는 남길 부분에서 [+] 버튼을 클릭하면 다음과 같은 화면이 나타남

2. write 탭에서 코멘트할 내용을 기입후 [Start a review]를 클릭하면 해당 코멘트 내용이 임시저장[Pending] 된다. 임시저장을 하지않고, 즉시 코멘트를 남기고 싶으면 [Add Single Comment]를 클릭하면 저장과 동시에 바로 pr 요청자에게 notify가 된다.

3. 2에서 [Start a review] 로 pr의 모든 comment를 작성이 완료되었으면, 상단의 [Finish your review]를 클릭하면 다음과 같은 화면이 나타나고, 종합할 comment 내용을 기입후 [Submit review]를 클릭한다.

Comment: comment만 남긴다.

Approve: comment와 함께 merge를 승인한다.

4. merge(squash) 가 완료되면 해당 브랜치를 삭제하겠냐는 메시지가 나오고 delete branch 하면된다.

[TODO] : pr에서 변경된 사항을 내가 고치고 싶거나, merge 시 제외할수있는 쉬운 방법은?

WITH recursive CTE as( -- 재귀쿼리 세팅
    select 0 as HOUR -- 초기값 설정
    union all -- 위 쿼리와 아래 쿼리의 값을 연산
    select HOUR+1 from CTE -- 하나씩 불려 나감 
    where HOUR < 23 -- 반복을 멈추는 용도
)

<when test = 'subOrgYn == "Y"'>
    AND EMP.ORG_ID IN (
            WITH RECURSIVE TEMP AS -- TEMP라는 이름으로 재귀 쿼리 선언
            ( -- 재귀쿼리 시작
                SELECT 	ORG_ID
                FROM 	SSP_ORG
                WHERE 	UP_ORG_ID = #{orgId} -- 검색 성능을 높이기 위해 여기에 WHERE조건을 추가
                        OR		ORG_ID = #{orgId}
                        AND		COMPANY_SEQ = #{companySeq}
                UNION -- 반복 시작. UNION ALL 을 안할 경우 알아서 중복을 제거하고 찾아주나 성능이 저하됨.
                SELECT T.ORG_ID
                FROM	TEMP W
                        JOIN  SSP_ORG T
                        ON T.UP_ORG_ID = W.ORG_ID 
                -- 검색이 끝나면 먼저 찾은 구문에 해당 데이터를 추가
            ) -- 재귀 쿼리 종료
            SELECT ORG_ID FROM TEMP -- 재귀쿼리를 참조하여 SELECT
        )
</when>

-- 오라클의 START WITH, CONNECT BY PRIOR 대신 사용한다.
        WITH RECURSIVE LIST_MENU_ROLE  AS -- 해당 이름으로 재귀쿼리 선언 
        (
        -- 가장먼저 조회할 데이터 SELECT
            SELECT  CONVERT(TB_M.SORT USING latin1) AS ROOT_SORT  -- TB_M 문자열 변환하여 ROOT_SORT 란 이름으로 
                    , TB_M.*
                    , 1 AS LEVEL    -- LEVEL 항목 생성
            FROM    SFI_MENU TB_M
            WHERE   TB_M.PARENT_SEQ IS NULL  -- 부모가 없는 데이터 먼저 SELECT
            -- 검색 성능을 높히기 위해선 여기에 WHERE 문을 통해 조건을 추가한다.
            UNION ALL -- 반복 시작. ALL을 안할 경우 알아서 중복을 제거하고 찾아주나 성능이 저하됨
            SELECT    -- SELET 한다.
                    CONCAT_WS(',', LIST_MENU_ROLE.ROOT_SORT, TB_M.SORT) -- 문자열 합치기. ,를 구분자로 이후 항목을 합친다.
                    , TB_M.*
                    , 1+LEVEL AS LEVEL -- LEVEL 항목 자동 추가
            FROM    SFI_MENU TB_M
                    INNER JOIN LIST_MENU_ROLE
                    ON TB_M.PARENT_SEQ = LIST_MENU_ROLE.SEQ -- JOIN하여 부모의 고유값과 부모키가 같은 것만.
                    -- 검색 성능을 높히기 위해선 여기에 WHERE 문을 통해 조건을 추가한다.
                     
                    -- 검색이 끝나면 먼저 찾은 구문에 해당 데이터를 추가(?)한다.
        ) -- 재귀쿼리 종료
        SELECT -- 재귀쿼리를 참조하여 SELECT
                TB_M.SEQ                AS MENU_SEQ
                , TB_M.ID               AS MENU_ID
                , TB_M.MENU_TYPE_CD     AS MENU_TYPE_CD
                , F_SFI_CODE_NM('KO', 'CMM_MENU_TYPE_CD', TB_M.MENU_TYPE_CD) AS MENU_TYPE_NM
                , TB_M.NAME             AS MENU_NAME
                , TB_M.PARENT_SEQ        AS MENU_PARENT_SEQ
                , TB_M_PA.ID            AS MENU_PARENT_ID
                , TB_M_PA.NAME            AS MENU_PARENT_NAME
                , TB_M.URL              AS MENU_URL
                , TB_M.PARAMETER        AS MENU_PARAMETER
                , TB_M.DESCRIPTION      AS MENU_DESCRIPTION
                , TB_M.SORT             AS MENU_SORT
                , TB_M.USE_YN           AS MENU_USE_YN
                , LEVEL

 

                , CASE WHEN TB_MR.SEQ IS NULL THEN 'N' ELSE 'Y' END AS MENU_ROLE_YN -- oracle의 EDCODE 대신 사용
                , TB_MR.SEQ             AS MENU_ROLE_SEQ
                , TB_MR.ROLE_SEQ        AS ROLE_SEQ
        FROM       LIST_MENU_ROLE TB_M
                -- 그 외 조건.
                LEFT OUTER JOIN SFI_MENU_ROLE TB_MR
                ON TB_MR.MENU_SEQ = TB_M.SEQ        
                AND TB_MR.ROLE_SEQ = '10143'
                LEFT OUTER JOIN SFI_MENU TB_M_PA
                ON TB_M_PA.SEQ = TB_M.PARENT_SEQ
        WHERE      1=1
        AND     TB_M.USE_YN = 'Y'
        ORDER BY TB_M.ROOT_SORT;

위와 같은 오류 일때

<<해결책>>

powershell을 관리자 모드로 실행 후 

Get-ExecutionPolicy 입력 -> Restricted 인 경우

-> Set-ExecutionPolicy RemoteSigned 입력 -> Y

-> Get-ExecutionPolicy 입력 해서 수정된 권한 확인

뷰포트 : 웹페이지가 브라우저 화면상에서 실제로 표시되는 영역

기기에 따라 적절히 보이는 반응형 웹을 만들기 위해 뷰포트 메타 태그를 사용해야함.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="ko">

<head>
    <title>...</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    ...

</html>

<meta> 는 뷰포트 요소로서 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 제공

width=device-width // 랜더링 영역을 기기의 뷰포트의 크기와 같게 함.
initial-scale=1.0 // 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정. 0 ~ 10 값을 가짐
user-scalable // 사용자가 화면을 확대/축소 할수 있는지 여부. yes/no 값을 가짐.
maximum-scale // 늘릴 수 있는 최대 크기 지정. 0 ~ 10 값을 가짐
minimum-scale // 줄일 수 있는 최소 크기 지정. 0 ~ 10 값을 가짐

DAO

- Data Access Object

- DB를 사용해 데이터를 조회하거나 조직하는 기능을 전담하도록 만든 오브젝트

- 실제로 DB에 접근하는 객체

- 서비스 모델과 실제 데이터베이스를 연결하는 역할

- 데이터베이스에 접근 하기 위한 로직 & 비즈니스 로직을 분리하기 위해 사용 ( persistance 계층(db에 data를 crud하는 계층)을 숨기기 위해)

// DAO 예제
public class TestDao {
	public void add(DTOBean dto) throws ClassNotFoundException {
    	...
        
        Connection c = DriverManager.getConnection('jdbc:mysql://~~, );
        
        PreparedStatement ps = c.prepareStatement('~~');
        
        ps.setString(1, dto.getName());
        
        ...
        
        ps.executeUpdate();
        
        ps.close();
        c.close();
    }
}

DTO

- Data Transfer Object

- 계층간 데이터 교환이 이루어 질수 있도록 하는 객체

- 특별한 로직을 가지지 않는 순수한 데이터 객체 (getter & setter 만 가진 클래스)

- 값이 변할 수 있음

// DTO 예제
public class DTOBean {
	private String name;
    
    public String getName(){
    	return name;
    }
    
    public void setName(String name){
    	this.name = name;
    }
}

VO

- Value Object

- 읽기만 가능한 read-only 속성을 가진 객체로서 데이터 그 자체에 의미를 두고 있음

- 값이 변할수 없음(읽기 전용)

GUID(Globally Unique IDentifier, 전역 고유 식별자, 글로벌 고유 식별자)

- 어플리케이션에서 사용하는 유사난수

- 항상 유일한 값이 만들어진다는 보장은 없음

- 적절한 알고리즘이 있다면 같은 숫자를 생성할 가능성은 낮음.

UUID(Universal Unique IDentifier, 범용고유식별자)

- 네트워크상에 존재하는 개체들을 식별하고 구별하기 위해 개발 주체가 스스로 이름을 짓도록 하며 고유성을 충족시킬 수 있는 방법

- 고유성을 완벽하게 보장하는것이 매우 중요

- 실제 사용상에서 중복될 가능성이 거의 없다고 인정되기 때문에 많이 사용되고 있음.

- 총 36개의 문자로 이루어져 있다.(32개의 문자와 4개의 하이픈으로 구성된 총 5개의 그룹)

  - 예시: 550e8400-e29b-41d4-a716-446655440000

  - a~f까지의 알파벳 값들이 대문자인지 소문자인지는 중요하지 않다.(16진수)

- 128비트의 값이다.

- 총 340,282,366,920,938,463,463,374,607,431,768,211,456개의 사용가능한 UUID가 있다고 함

// 샘플 코드1
guid: function () {
    var d,
        guid;

    d = new Date().getTime();

    guid = "xxxxxxxxxxxxxxxxyxxxxxxxxxxxxxxx".replace( /[xy]/g, function ( c ) {
        var r = ( d + Math.random() * 16 ) % 16 | 0;
        d = Math.floor( d / 16 );
        return ( c === "x" ? r : ( r & 0x3 | 0x8 ) ).toString( 16 );
    } );

    return guid;
},
    

// 샘플 코드2

uuid = "".concat(parseInt(Math.random() * 10),parseInt(Math.random() * 10),parseInt(Math.random() * 10),parseInt(Math.random() * 10),parseInt(Math.random() * 10));

https://developer.mozilla.org/ko/docs/Web/HTTP/Caching

/**
 * 조직 내 하위 직원count를 하고자 한다.
 */
makeSubEmpCount: function (orgData) {
    var i, len;
    var data = incmm.util.copyObject(orgData);
    var map = {};
    var sumSubEmpCount = function (key, empCnt) {
    	// param으로 넘어온 pkey가 없으면 새로 totalEmpCount를 할당해주고,
        if (!map[key]) {
            map[key] = {
                totalEmpCount: empCnt
            };
        } else {
        	// param으로 넘어온 pkey가 있으면 기존 totalEmpCount에 값을 더한다.
            map[key].totalEmpCount += empCnt;
        }
        var rkey = map[key].rkey;
        // upOrgId가 있는경우에 다시 sumSubEmpCount를 실행한다.
        if (rkey) {
            sumSubEmpCount(rkey, empCnt);
        }
        return map;
    }
    
    // 개별 data를 돌면서
    for (i = 0, len = data.length; i < len; i++) {
        var row = data[i];
        var pkey = row.orgId; // pkey는 해당 orgId이고,
        var rkey = $.trim(row.upOrgId); // rkey는 해당 upOrgId이다.
        var empCnt = row.empCount - 0;
        // map에 rkey와 totalEmpCount를 할당한다.
        if (!map[pkey]) { 
            map[pkey] = {
                rkey: rkey,
                totalEmpCount: 0
            };
        }
        sumSubEmpCount(pkey, empCnt); // 하위 조직 count를 구하는 함수에 pkey와 empCnt를 param으로 넘겨준다.
    }
    
    return map;
},

$0.getBoundingClientRect()
DOMRect {x: 265, y: 177, width: 969, height: 737, top: 177, …}
bottom: 914
height: 737
left: 265
right: 1234
top: 177
width: 969
x: 265
y: 177

min-content/max-content

- 컨텐츠의 고유 최소 길이

- 담고 있는 컨텐츠에 의해 값이 결정됨.

width: min-content;
height: min-content;

fit-content

- max-content와 auto의 하이브리드 모드처럼 작동

auto

-