매료매료의 개발 이야기

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조에 따른 지방자치단체조합으로 설치된 경우에는 일반임기제공무원으로 한정하여 정원을 책정한다.

DDL(Data Definition Language : 데이터정의어)

- 데이터를 생성하거나 수정, 삭제 등 데이터의 전체 골격을 결정하는 역할의 언어

- CREATE, ALTER, DROP, TRUNCATE

DML(Data Manipulation Language : 데이터 조작어)

- 데이터베이스에 입력된 레코드를 조회/수정/삭제하는 역할의 언어

- SELECT, INSERT, UPDATE, DELETE

DCL(Data Control Language : 데이터제어어)

- 데이터베이스에 접근하거나 객체에 권한을 주는 등의 역할을 하는 언어

- GRANT, REVOKE, COMMIT, ROLLBACK

테이블스페이스란?

- 데이터 저장 단위 중 가장 상위에 있는 단위

- 데이터 저장 단위는 물리적, 논리적단위로 나뉨. 물리적 단위는 파일을 의미 / 논리적 단위는 데이터블록 -> 익스텐트 -> 세그먼트 -> 테이블스페이스 로 나뉨.

- 오라클에서는 tablespace라고 불리는 테이블이 저장될 공간을 만들고 나서 테이블을 생성(테이블에 실질적으로 저장되는 장소)

- 설정된 용량이 가득차면 오라클 서버가 죽는다 (단, DBA가 아니라 oracle을 활용하는 개발자 수준이면 신경안써도 됨)

// 테이블 스페이스 생성
create tablespace [테이블 스페이스명]
datafile 'D:\oracle' -- 파일 경로
size 10M -- 초기 데이터 파일 크기 설정
autoextendon next 10M -- 초기 크기 공간을 모두 사용하는 경우 자동으로 파일의 크기가 커지는 기능
maxsize 100M -- 데이터파일이 최대로 커질 수 있는 크기 지정 기본값 = unlimited
uniform size 1M -- EXTENT 한개의 크기를 설정

// 전체 테이블 스페이스 조회
select * from dba_tablespaces;

// 전체 테이블 스페이스 경로 및 용량 조회
SELECT    
A.TABLESPACE_NAME "테이블스페이스명",
A.FILE_NAME "파일경로",
(A.BYTES - B.FREE)    "사용공간",
B.FREE                "여유 공간",
A.BYTES               "총크기",
TO_CHAR( (B.FREE / A.BYTES * 100) , '999.99')||'%' "여유공간"
FROM
(
    SELECT FILE_ID,
    TABLESPACE_NAME,
    FILE_NAME,
    SUBSTR(FILE_NAME,1,200) FILE_NM,
    SUM(BYTES) BYTES
    FROM DBA_DATA_FILES
    GROUP BY FILE_ID,TABLESPACE_NAME,FILE_NAME,SUBSTR(FILE_NAME,1,200)
)A,
(
    SELECT TABLESPACE_NAME,
    FILE_ID,
    SUM(NVL(BYTES,0)) FREE
    FROM DBA_FREE_SPACE
    GROUP BY TABLESPACE_NAME,FILE_ID
)B
WHERE A.TABLESPACE_NAME=B.TABLESPACE_NAME
AND A.FILE_ID = B.FILE_ID;

디렉토리란?

- 데이터베이스에서 오브젝트로 등록한 것

- 디렉토리 개체가 expdp / impdp 의 대상

디렉토리 사용 이유

- 오라클DB에서 OS에 있는 파일에 접근할 때 필요
- DB에 디렉토리를 만들어서 사용해야 함
- 과거 exp/imp 사용할 땐 필요없었지만 expdp/impdp를 사용할 땐 꼭 지정해야함

DATA PUMP에 필요한 최소한의 권한

- create session
- create table
- create directory
- read, write on directory

CRUD

// Directory 조회
select * from dba_directories;

// Directory 생성
SQL> create directory DIR1 as 'C:\DUMP';
sys, system 유저가 아닌 일반유저에서 directory 를 생성하려면, create any directory 권한이 있어야 합니다.
grant create any directory to [사용자이름];

// Directory 삭제
SQL> drop directory DIR1;
삭제할때도 sys, system 유저가 아닌 일반유저에서 삭제하려면, drop any directory 권한이 있어야 합니다.
grant drop any directory to scott;
추천 방법 : sys as sysdba로 접근 후 디렉토리를 생성한다. 사용자에게 디렉토리 사용 권한을 부여한다. 

// Directory 변경 (OS위치 변경)
SQL> create or replace directory DIR1 as 'C:\DUMP2';
디렉토리를 다른 유저에서 사용하려면 권한을 부여해야 사용 가능합니다.

// Directory 권한 부여 (읽기/쓰기)
SQL> grant read, write on directory DIR1 to scott;
디렉토리를 다른 유저가 사용하려면 권한이 있어야 한다. 

// Directory 권한 제거
SQL> revoke read, write on directory DIR1 from scott;

시노님이란?
- 시노님(Synonym)은 Alias와 비슷하게 테이블에 별칭을 주는것
- 단순히 테이블명에 별칭을 붙이는것이 아니라, 어떤 유저(스키마)의 테이블인지를 특정하여 지정
- SYNONYM을 통해 유저의 이름과 객체의 이름을 감추어 데이터베이스의 보안을 개선하기위해 사용

접근제한자
- PUBLIC : 해당 테이블에 권한을 가지고 있는 모든 유저가 시노님을 사용가능
- PRIVATE : 시노님을 선언한 해당 유저만 시노님을 사용가능

시노님의 필요성
- 오브젝트명을 짧게하여 SQL문을 단순화
- 스키마, 오브젝트명(테이블명 등)이 변경 되어도 시노님만 재생성하면 SQL문은 변경하지 않아도 됨
- 오브젝트를 외부에 제공할 경우 스키마, 오브젝트명을 숨길 수 있어서 보안에 도움이 됨
- 시노님은 Table뿐 아니라 View, Procedure, Function, Sequence 등의 오라클 오브젝트에도 사용 가능

CRUD

// 조회
SELECT * FROM ALL_SYNONYMS 

// 생성, 변경
CREATE OR REPLACE [PUBLIC / PRIVATE] SYNONYM [사노님명] FOR [스키마명.테이블명] 

// 삭제
DROP SYNONYM employees;
DROP PUBLIC SYNONYM employees;

<<expdp>>
1. full export mode 

expdp [사용자이름]/[사용자비밀번호] directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log full=y

DB 전체 백업, 테이블 스페이스, ROLE 등 다 저장 
마지막에 반드시 full=y를 적어줘야 한다. 

2. schema mode

expdp [사용자이름]/[사용자비밀번호][@서비스이름] schemas=[스키마명] directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log

스키마만 저장한다. 테이블 스페이스, ROLE 등은 따로 저장 안함
@servicename에 sid이름 적어도 됨
스키마를 export할 땐 @서비스이름은 없어도 괜찮음

3. table mode 

expdp [사용자이름]/[사용자비밀번호][@서비스이름] tables=[테이블명] directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log

테이블만 저장하고 테이블 스페이스, ROLE 등은 따로 저장 안 함
테이블을 export할 땐 @서비스이름은 없어도 됨

오류가 나면 폴더가 실제로 있는지? 폴더 권한이 있는지? 확인할 것..
폴더가 자동으로 생기지 않는다. 


<<impdp>>
1. full import mode

impdp [사용자이름]/[사용자비밀번호] directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log

지정 디렉토리에 dmp파일과 log파일 필요

2. shcema mode

// 기본
impdp [사용자이름]/[사용자비밀번호][@서비스명] schemas=[스키마명] directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log

// 스키마명 변경
impdp [사용자이름]/[사용자비밀번호][@서비스명] remap_schema=기존스키마명:변경된스키마명 directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log

// 테이블스페이스 변경
impdp [사용자이름]/[사용자비밀번호][@서비스명] remap_schema=기존스키마명:변경된스키마명 remap_tablespace=기존테이블스페이스명:변경테이블스페이스명 directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log

테이블스페이스나 스키마 이름을 변경하여 불러올 수 있다.
계정 정보 잘 입력되었는지 확인

3. table mode

impdp [사용자이름]/[사용자비밀번호][@서비스명] tables=테이블명 directory=[디렉토리명] dumpfile=[파일이름].dmp logfile=[로그파일이름].log

<< 디렉토리 생성 ~ expdp, impdp >>

1. 디렉토리 생성하기
create or replace directory 디렉토리명 as 'c:\DUMP';

2. 디렉토리 권한 부여
grant read, write on directory 디렉토리명 to 계정명;

3. expdp 사용 (생성)
expdp [사용자이름]/[사용자비밀번호] dumpfile=[파일이름].dmp schemas=[스키마이름]

// 터미널 실행이므로 한줄로 타이핑하여실행해야함
expdp %USER_ID%/\"%USER_PWD%\"@xe // 유저아이디/유저패스워드@SID
schemas=펌프대상스키마
directory=디렉토리 이름 (Alias 이름)
dumpfile={원하는 파일이름}.dmp
logfile={원하는 파일이름}.log
reuse_dumpfiles=y
include=TABLE:"NOT LIKE '%검색어%'"
include=TABLE:"!='테이블이름'"
job_name=잡이름설정가능
filesize=원하는최대파일사이즈EX)5G

4. impdp 사용 (백업)
impdp [사용자이름]/[사용자비밀번호] dumpfile=[파일이름].dmp table_exists_action=replace

// 터미널 실행이므로 한줄로 타이핑하여실행해야함
impdp %USER_ID%/\"%USER_PWD%\"@xe // 유저아이디/유저패스워드
schemas=%SCHEMA_NAME% 
directory=DATA_DUMP_ORGN
dumpfile={파일이름}.dmp
logfile={원하는 파일이름}.log
table_exists_action=replace

REMAP_SCHEMA=exp유저:imp유저 // export한 계정과 import할 계정이 다를때 지정함.
REMAP_TABLESPACE=exp테이블스페이스명:imp테이블스페이스명 // export한 계정의 테이블스페이명과 import할 테이블스페이스명이 다를때 지정함.



* export 할 dba계정 접속 후 기본디렉토리 검색
sqlplus "/as sysdba";
sql> select * from dba_directories;

* 계정 생성
create user 계정명
identified by 비번
default tablespace 테이블스페이스명
temporary tablespace 임시테이블스페이스명
profile default
account unlock;

* 권한 추가
grant connect, resource to 계정명;
grant create view, create synonym to 계정명;

* 유저
select * from all_users; // 유저확인
select * from dba_sys_privs where grantee='사용자명'; // 유저 권한 확인

- 스키마를 사용하는 사용자가 존재
- 사용자는 스키마에 아이디, 비밀번호, 포트, 서비스이름 or SID로 접근
- dump 파일을 저장할 위치를 오라클에 등록(이 저장 위치가 디렉토리)
- 디렉토리를 만들고 사용자가 디렉토리를 만질 수 있게 권한을 부여

사용자는 저장하려는 스키마의 사용자이다.
cmd 창을 띄우고 접근하려는 스키마 이름, 
스키마에 들어가기 위한 사용자 아이디/비밀번호, 
파일을 저장할 위치인 디렉토리
정보를 포함한 명령어를 실행한다. 
불러오기도 같은 원리이다. 

디렉토리를 만들고 디렉토리 권한을 사용자에게 부여한 다음
cmd창에서 만든 디렉토리 이름으로 사용자 정보와 스키마 정보를 넣어서 실행