매료매료의 개발 이야기

// name을 같은 값으로 한 범위 안에서 단일 선택가능
<form method="get" action="example">
    <input type="radio" value="1" name="score"> 1
    <input type="radio" value="2" name="score"> 2
    <input type="radio" value="3" name="score" checked> 3 // checked가 기본값
    <input type="radio" value="4" name="score"> 4
    <input type="radio" value="5" name="score"> 5
</form>

// jquery로 선택된 radio 값 가져오기
$('input[name="score"]:checked').val()

DNS Server의 IP주소 확인하기

1. 반영을 해야할(반영이 필요한) branch로 checkout

git checkout tobe-published

2. 반영할 커밋이력 hash값 확인

ex) 1acfe0cc4e0f6a670cf541663b3f47a1c9de95eb

3. 명령어 입력

git cherry-pick 1acfe0cc4e0f6a670cf541663b3f47a1c9de95eb

SourceTree

- 배열 각 요소에 대하여 reducer 함수(사용자 정의)를 실행하고, 하나의 결과값을 반환
- array의 모든 요소들에 대해 체크하고 누적된 값을 출력하고 싶을 때 용이

- for문이나 count를 위한 별도의 변수를 선언하지 않고도 바로 결과가 출력됨

arr.reduce(callback[, initialValue])

callback function
1. 다음 4가지의 인수를 가집니다.
   accumulator - accumulator는 callback함수의 반환값을 누적
   currentValue - 배열의 현재 요소
   index(Optional) - 배열의 현재 요소의 인덱스
   array(Optional) - 호출한 배열
2. callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환

// initialValue(Optional)
- 최초 callback함수 실행 시 accumulator 인수에 제공되는 값
- 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생

// 예시코드
const number = [1, 2, 3, 4, 5];

function reducer(accumulator, currentValue, currentIndex) {
  const result = accumulator + currentValue;
  console.log('accumulator = ', accumulator, ', currentValue = ', currentValue, ', currentIndex = ', currentIndex, ', result = ', result);
  return result;
}

// initialValue가 없을 경우
number.reduce(reducer);

// 동작
// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3
// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6
// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10
// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

// initialValue가 있을 경우
number.reduce(reducer, 0);

// 동작
// accumulator = 0, currentValue = 1, currentIndex = 0, result = 1
// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3
// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6
// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10
// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

const empDataColumns = [
    'seq',
    'empId',
    'empNm',
    'nickNm',
    'executiveYn',
    'orgId',
    'posCd',
    'posNm',
    'photo'
];
const orgDataColumns = [
    'seq',
    'companySeq',
    'orgId',
    'orgNm',
    'orgNmEn',
    'orgNmZh',
    'sortOrder',
    'upOrgId',
    'orgTypeCd'
];
export const basicData = {
    EMP_LIST: [],
    ORG_LIST: []
};

const limit = {
    orgData: 14,
    empData: 3
};

const orgIdMap = ['F00001', 'MA0001', 'MA0002', 'F00002', 'MB0001', 'MB0002', 'F00003', 'MC0001', 'MC0002', 'F00004', 'MD0001', 'MD0002', 'F00005', 'ME0001', 'ME0002'];
const orgNm = ['마케팅', '상품', '디자인', '상품 관리', '품질', '가격', '컨텐츠', '컨텐츠 개발', '법률', '서포트', '세일즈 마케팅', '방송', '사람과 문화', '고객 가치 발굴', '조직 의사 소통'];
const sortOrder = [1, 1, 2, 2, 1, 2, 1, 1, 2, 2, 1, 2, 1, 1, 2];
const upOrgId = ['CA000', 'F00001', 'F00001', 'CA000', 'F00002', 'F00002', 'CB000', 'F00003', 'F00003', 'CB000', 'F00004', 'F00004', 'CC000', 'F00005', 'F00005'];
const orgTypeCd = [1, 2, 2, 1, 2, 2, 1, 2, 2, 1, 2, 2, 1, 2, 2];

const firstName = ['김', '이', '박', '최', '윤'];
const secondName = ['성', '선', '우', '지', '태'];
const thirdName = ['미', '준', '규', '호', '영'];

const nickFirstName = ['A', 'D', 'B', 'Z', 'P'];
const nickSecondName = ['e', 'a', 'i', 'o', 'u'];
const nickThirdName = ['w', 'r', 'm', 'w', 'q'];

const executiveYn = ['Y', 'N', 'N', 'Y', 'Y'];

const posMap = {
    posCd1: '사원',
    posCd2: '대리',
    posCd3: '과장'
}

let k = 0;
for (let i = 0; i <= limit.orgData; i++) {

    let orgData = {};
    orgDataColumns.reduce((acc, curr) => {
        if (curr.toUpperCase() === 'SEQ') {
            acc[curr] = `${i}`;
        } else if (curr === 'orgId') {
            acc[curr] = orgIdMap[i];
        } else if (curr === 'orgNm') {
            acc[curr] = orgNm[i];
        } else if (curr === 'sortOrder') {
            acc[curr] = sortOrder[i];
        } else if (curr === 'upOrgId') {
            acc[curr] = upOrgId[i];
        } else if (curr === 'orgTypeCd') {
            acc[curr] = orgTypeCd[i];
        } else {
            acc[curr] = `${curr}${i}`;
        }
        return acc;
    }, orgData);

    for (let j = 1; j <= limit.empData; j++) {

        if (orgData.orgId.indexOf('F') > -1) {
            continue;
        };

        let empData = {};
        empDataColumns.reduce((acc, curr) => {

            if (curr === 'orgId') {
                acc[curr] = orgData.orgId;
            } else {
                if (curr.toUpperCase() === 'SEQ') {
                } else if (curr.toUpperCase() === 'COMPANYSEQ') {
                    acc[curr] = `1`;
                } else if (curr === 'empId') {
                    acc[curr] = `E0000${k}`;
                } else if (curr === 'empNm') {
                    acc[curr] = firstName[Math.floor(Math.random() * firstName.length)] + secondName[Math.floor(Math.random() * secondName.length)] + thirdName[Math.floor(Math.random() * thirdName.length)]
                } else if (curr === 'nickNm') {
                    acc[curr] = nickFirstName[Math.floor(Math.random() * nickFirstName.length)] + nickSecondName[Math.floor(Math.random() * nickSecondName.length)] + nickThirdName[Math.floor(Math.random() * nickThirdName.length)]
                } else if (curr === 'executiveYn') {
                    acc[curr] = executiveYn[j]
                } else if (curr === 'posNm') {
                    acc[curr] = posMap['posCd' + j]
                } else {
                    acc[curr] = `${curr}${j}`;
                }
            }

            k++;

            return acc;
        }, empData);

        basicData.EMP_LIST.push(empData);
    }

    basicData.ORG_LIST.push(orgData);
}

// 배열 관련 reduce 예제

var sample = [];

res.SSP_EMP_SIMUL_DATA_BIND_CD.reduce(function (acc, cur) {
    // if(cur.code === 'ddd') // 특정 조건에 따른 비즈니스 로직
    
    acc.push(cur);

    return acc; // 누적된 배열을 return
}, sample); // 초기 배열은 빈값

console.log(sample); // 결과 배열

create-react-app 을 이용한 개발환경 구축

React Development Tools // 크롬확장프로그램에서 설치 -> 개발자도구에 React탭을 활용하면 더 좋다~

JSX

JavaScript를 확장한 문법

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

가독성을 위해 여러줄로 나누면 좋다.

React의 중요파일

src/index.js // 메인 프로그램, html템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시

src/App.js // 컴포넌트를 정의하는 프로그램. 실제로 화면에 표시되는 내용 등은 여기에서 정의, JSX형태로 표시

public/index.html // index.js에 의해 랜더링된 결과가 표시

폴더구조

public // 완성된 js파일들이 출력될 곳

src // 정적 파일

package.json // 프로젝트가 의존하는 패키지들이 나열

package-lock.json // 패키지들이 내부적으로 사용하는 의존성 트리에 대한 정보

CSS사용법

css-module // 컴포넌트 별 스타일 적용시 충돌방지가능

css-in-js // styled-components 사용

scss // node-sass패키지 설치

Component와 Props와 State

컴포넌트는 JavaScript함수와 유사

함수 컴포넌트, 클래스형 컴포넌트가 있음

사용자 정의 컴포넌트는 항상 대문자로 시작해야함

Props는 읽기 전용, 컴포넌트를 외부에서 관리

State는 내부적으로 상태를 관리

함수형 vs. 클래스형 구분

[함수형 컴포넌트]에서는 인수에서 비구조화 할당으로 {value} 를 통해 받아옴

  - hook?

[클래스형 컴포넌트]에서는 this.props.value로 참조.

  - set, setState 사용

react-router-dom 사용법

Browser // history API를 사용해 URL과 UI를 동기화하는 라우터

Route // 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치 시 해당하는 컴포넌트, 함수를 랜더링

Link // to 속성에 설정된 링크(url)로 이동<Link to='/test1'>

Switch // 사용하지 않을 경우 매칭되는 모두를 랜더링 or 사용시 하나의 매칭되는 요소만 랜더링

요소, 생성과정

react는 가상DOM을 이용하며, 실제 DOM과 비교해 변경된 부분만 실제 DOM에 반영

최초의 render단계는 ReactDOM.render에 의해 수행

그 이후의 render단계는 setState가 수행, 비교해서 필요한 부분만 업데이트

생명주기

초기화단계

  - constructor

  - getDerivedStateFromProps

  - render

  - componentDidMount

createRef vs. useRef

createRef // class형 컴포넌트에서 ref를 잡아야하는 경우

useRef // 함수형 컴포넌트에서는 둘다 사용가능하지만 createRef를 사용할경우 리렌더링될때마다 ref값이 초기화되므로 useRef를 사용하자.

Strict Mode

애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구

안전하지 않은 생명주기를 사용하는 컴포넌트 발견

레거시 문자열 ref 사용에 대한 경고

권장되지 않는 findDOMNode 사용에 대한 경고

예상치 못한 부작용 검사

레거시 context API 검사

-> 개발모드에만 영향을 끼치고, 잠재적인 이슈를 발견해줌

-> strict Mode에서 해결되지 않는 오류는 <React.Fragment>로 수정할 경우 해결이 됨.

Hook

16.8에서 추가된 기능

Hook이란? 함수 컴포넌트에서 React State와 생명주기 기능을 연동할 수 있게 해주는 함수

class안에서는 동작x

종류: state hook, effect hook, context hook 커스터마이징 훅

state hook : 상태값을 관리

-> 중복되는 로직을 유틸 함수와 같은 느낌으로 [커스텀 훅]을 만들어서 중복 로직을 최소화 시킬 수 있다.

const [state, setState] = useState(initialState); // state와 setState 의 이름은 임의로 정할 수 있음

예시)
// 커스텀 훅
import { useEffect } from 'react';

// ... 비즈니스 로직
const useINOrg = (orgId, orgWrapId, options = {}, eventCallback = {}) => {

    useEffect(() => {
        // ... 비즈니스 로직
        return () => {
            // componentWillUnmount
            if () {

                // // ... 비즈니스 로직
            }
        }
    }, []);

}

export default useINOrg;

// 위의 훅을 사용
import React from "react";
import useInput from "useINOrg";

// state
const [text, setText] = useInput({
  email: "",
  password: ""
});

return (
  <>
    <input id="email" value={text.email} onChange={setText} />
    <input id="password" value={text.password} onChange={setText} />
  </>
);

effect hook : 어떤 Effect를 발생시키고 싶을 때 사용, useEffect함수의 두 번째 매개변수로 배열을 입력하면, 배열의 값이 변경되는 경우에만 함수가 호출. 즉, componentDidMount와 componentWillUnmount에서만 실행되는 것과 같은 효과가 있음.

context hook : 클래스형 컴포넌트에서 사용했던 contextAPI를 함수형 컴포넌트에서 사용할수있게 해줌.

커스터마이징 훅 : 

규칙 : 최상위 레벨에서만 호출 가능, 함수 컴포넌트 내에서만 호출 가능

useState in Array

값을 할당해서 set array
// const aa = [...checkedNodes, pkey];
// setCheckedNodes(aa);

화살표 문법
// setCheckedNodes(checkedNodes => [...checkedNodes, pkey]);
// setCheckedNodes(checkedNodes => checkedNodes.concat(pkey));

push는 되도록 사용하지 않는다. 
// const newTodos = checkedNodes.slice();
// newTodos.push(pkey);
// setCheckedNodes(newTodos);

------------------------------------------------------

npm run start // VS Code 터미널창에서 개발서버 실행

localhost:3000 에서 화면 보기 가능

npm run build // 해당 react-app 폴더 내 build폴더를 생성(deploy대상)

Taskkill /IM node.exe /F // 켜진 서버 종료 : npm stop으로 안됨...

브라우저 렌더링

1. Load: 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 서버에게 요청하고 응답을 받는다.

2. HTML과 CSS는 렌더링 엔진에 의해 파싱되고 트리구조가 생성되며, 자바스크립트는 자바스크립트 엔진에 의해 파싱되고 AST를 생성된다.

3. 렌더링 엔진은 HTML과 CSS 파일을 로드받은 다음, 파싱하여 DOM과 CSSOM을 생성하고, 그를 결합하여 렌더 트리를 생성한다.

4. 자바스크립트 엔진은 JS 파일을 로드 받은 다음, 파싱하여 AST(Abstract Syntax Tree)를 생성하고, 바이트 코드로 변환하여 실행한다. 자바스크립트는 인터프리터 언어이므로 문 단위로 해석되고 실행된다. 이때 자바스크립트는 DOM API를 통해서 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.

5. 렌더 트리를 기반으로 HTML요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 페인팅 한다.

위 과정에서 4번 과정에 의해서 5번에서 다시 레이아웃을 재계산하는 상황이 `Reflow`

Reflow가 발생하면 Repaint는 필연적으로 발생함.

Reflow는 HTML 요소들의 위치와 크기를 다시 계산해야 하기 때문에 시간이 오래 걸리므로, Reflow가 발생하는 코드는 지양해야함.

1. 디바운스(Debounce)

- 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 것

2. 스로틀(Throttle)

- 이벤트를 일정한 주기마다 발생하도록 하는 것

function throttle(func, wait, debounce) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var throttler = function () {
            timeout = null;
            func.apply(context, args);
        };
        if (debounce) clearTimeout(timeout);
        if (debounce || !timeout) timeout = setTimeout(throttler, wait);
    };
}

3. 레이아웃 스레싱(Layout Thrashing)

- 강제 동기 레이아웃

- 발생 시, reflow 계산을 위해 메인 쓰레드가 블락킹 되므로 성능에 치명적인 원인이 됨.(데스크톱에서는 심하지만, 모바일에서는 심각한 성능 저하가 존재)

- 해결책 : requestAnimationFrame을 사용하여 DOM을 읽는 로직은 현재 프레임에서 실행하고, DOM을 수정하기 위한 로직은 requestAnimationFrame와 함께 사용해 다음 프레임에서 함께 실행하도록 예약

/**
 * @param fn {Function}
 * @param [throttle] {Boolean|undefined}
 * @return {Function}
 *
 * @example
 * // generate rAFed function
 * jQuery.fn.addClassRaf = bindRaf(jQuery.fn.addClass);
 *
 * //use rAFed function
 * $('div').addClassRaf('is-stuck');
 */
function bindRaf(fn, throttle){
  var isRunning, that, args;
  var run = function(){
    isRunning = false;
    fn.apply(that, args);
  };

  return function(){
    that = this;
    args = arguments;

    if(isRunning && throttle){
      return;
    }

    isRunning = true;
    requestAnimationFrame(run);
  };
}

1. multiproxy 기능을 사용하기 위해서는 우선 http-proxy-middleware 설치가 필요

$ yarn add http-proxy-middleware

2. /src/setupProxy.js 파일 을 생성 후 다음과 같이 입력

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
    app.use(
        createProxyMiddleware('/local', {
            target: 'http://localhost:4000',
            changeOrigin: true
        })
    )
    app.use(
        createProxyMiddleware('/api', { // 프록시를 사용할 경로(path)
            target: 'https://dev.abcd.com', // 프록시로 이용할 서버의 주소
            // target: process.env.REACT_APP_PROXY_URL // 주소값을 별도 파일로 활용할수도 있다.(5. 참고)
            changeOrigin: true // 대상 서버의 구성에 따라 호스트 헤더의 변경을 해주는 옵션
        })
    )
};

3. package.json 파일에서 proxy 삭제, http-proxy-middlware 추가

4. 주소(target) 값을 별도 파일로 활용

REACT_APP_API_SERVER_TYPE = local
REACT_APP_API_SERVER_PATH = /atomy
REACT_APP_API_SERVER_URL = http://localhost:4100
REACT_APP_API_SERVER_TIMEOUT = 20000
REACT_APP_LOGIN_USER = atomy_user1
REACT_APP_PROXY_URL = https://master-dev-front.cheezeproject.com

1) 전보

전보(轉補)"란 같은 직급 내에서의 보직 변경 또는 고위공무원단 직위 간의 보직 변경(제4조제2항에 따라 같은 조 제1항의 계급 구분을 적용하지 아니하는 공무원은 고위공무원단 직위와 대통령령으로 정하는 직위 간의 보직 변경을 포함한다)을 말한다.

2) 복수직급직렬

제22조(정원책정의 일반기준) ① 정원은 정원의 관리기관별로 직급을 정하여 책정하며, 다음 각 호의 기준에 따라야 한다.  <개정 2012. 4. 10., 2013. 12. 4., 2021. 12. 16.>

1. 지방자치단체는 인구수 및 다른 지방자치단체와의 균형 등을 고려하여 정원을 책정하여야 한다.
2. 지방자치단체는 업무의 성질ㆍ난이도ㆍ책임도 등을 고려하여 직급별 정원을 책정하여야 한다.
3. 1개의 직위에는 1개의 직급을 부여한다. 다만, 업무의 성질상 일반관리업무가 전체업무의 100분의 50을 넘는 직위는 동일계급 내에서 행정직과 다른 일반직의 복수의 직렬로 할 수 있으며, 업무의 성격이 특수하거나 1개의 직위에 2개 이상의 이질적인 업무가 복합되어 있는 경우에는 4개의 직렬을 초과하지 아니하는 범위에서 복수의 직렬로 할 수 있다.
4. 1개의 직위에 대하여는 일반직과 별정직의 복수직을 부여할 수 없다. 다만, 이 영 또는 다른 법령에서 일반직공무원을 갈음하여 별정직공무원으로 임명할 수 있도록 한 직위에 대해서는 그러하지 아니하다.
5. 1개의 직위에 일반임기제공무원을 임용하는 경우에는 그 일반임기제공무원의 근무기간 동안 그 직위에 상응하는 직급의 정원을 결원으로 유지하여야 한다.
6. 경제자유구역청이 법 제176조에 따른 지방자치단체조합으로 설치된 경우에는 일반임기제공무원으로 한정하여 정원을 책정한다.

1. DNS(Domain Name Server)

- 도메인 이름(google.com) 에서 IP주소(85.129.83.120)로 키/값 조회를 제공

2. 로드 밸런서

- 수평적 확장이 가능하도록 만드는 기술

- 백앤드(웹서버, DB, 기타 등등)들을 각각 다른 서버에서 돌림으로서 서로가 최소한으로 결합할 수 있도록 하는 확장을 의미

- 로드 밸런서는 들어오는 요청을 복제/미러링 된 수많은 서버 중의 하나로 연결하고 서버의 응답을 다시 클라이언트로 보낸다. 로드 밸런서는 이들 서부에 과부하가 걸리지 않도록 들어오는 요청을 적절히 분배해주는 일을 한다.

3. 웹 어플리케이션 서버

- 클라이언트에서 들어오는 요청을 핵심 비지니스 로직을 실행하고 그 결과를 HTML에 담아 브라우저로 보낸다.

4. Database

- 대부분의 웹 어플리케이션 서버는 잡 서버의 역할을 하는 데이터베이스 서버와 직접 통신한다. 거기에 더해서 각각의 백엔드 서비스는 애플리케이션의 다른 영역과 분리된 자신만의 데이터베이스를 가지고 있을 수 있다.

5. 캐싱 서비스

- 클라이언트가 요청하는 html, js, css등에 대해 첫 요청 시 파일을 내려받아 특정 위치에 복사본을 저장하고, 이후 동일한 URL의 요청은 다시 내려 받지 않고 내부에 저장한 파일을 사용하여 더 빠르게 서비스 하기 위한 것

6. Job queue & Server

- 많은 웹/애플리케이션은 사용자에 요청에 의해 응답과는 직접적인 관련이 없는 작업을 백그라운드에서 비동기적으로 실행할 필요가 있다.
- 예를 들어, 구글링 시 결과를 얻기 위해 인터넷에서 데이터를 크롤링하고, 인덱싱 할 필요가 있다. 이럴때 비동기적으로 웹을 크롤링 한다.

7. 전체 텍스트 검색 서비스

- 사용자가 입력을 하면 결과를 보여줌

8. 서비스

- 앱이 특정 규모에 도달하면 별도의 애플리케이션으로 분리해서 운영하기 위핸 ‘서비스’가 생기게 된다.

9. 데이터

- 최근 거의 모든 앱은 특정 규모에 도달하면 데이터를 제어, 저장, 번석하기위해 데이터 파이프 라인을 구축한다. 전형적인 파이프라인은 보통 3개의 주요 단계를 가진다.

- firehose는 데이터를 받아드리고 처리할 수 있는 스트리밍 인터페이스를 제공한다. 가공되지 않은 원시의 데이터는 변형되거나 추가 정보와 함께 다른 firehose로 전달이 된다.
- 원시 데이터와 최종 데이터는모두 클라우드 스토리지에 저장이된다.
- 변형/추가된 데이터는 종종 분석을 위해 데이터 웨어하우스(DW)에서 로드 된다.

10. 클라우드 스토리지

- 인터넷만 존재하면 어디서든 어떠한 기계를 통해서든 파일 및 모든 시스템을 저장 할 수 있고 불러와 사용할 수 있다.

11. CDN(Content Delivery Network)

- html, css, js, 이미지와 같이 정적인 데이터를 웹을 통해 원본서버를 이용하는 거솝다 더 빠르게 제공하기 위한 기술