React관련 질문들

React.js 2023. 4. 29. 12:05

1. Modal을 Dom외부에서 렌더링 하려면 ?  ReactDom.createPortal 을 사용한다.

 

2. 하위컴포넌트이 click이벤트가 상위 컴포넌트로 전달되는걸 방지 하려면?  e.stopPropagation() 을 사용.

 

3. redux의 mapDispatchToProps란 ?  redux의 액션을 dispatch하는 함수들을 React컴포넌트의 props로 매핑한다.
    redeux는 보통 store.dispatch()로 디스패치하지만, mapDispatchToProps를 사용하면 props로 바로 받아서 사용가능.

 

4. React.PureComponent의 용도는?  shouldComponentUpdate()를 내장해, props/state 가 바뀔때만 render호출. 

 

5. (React V16.8~) useEffect의 로 window resizing이 가능하다.  : 음, 당연히 되는거 아닌지 study필요.

 

6. Redux container란?  간단하게는 connect()함수를 사용해서 생성 가능하고, 상태를 구독하여 강태각 변경될때마다 Component다시 렌더링 하는 역할.  dispatch함수들을 props로 전달.

 

7. setState의 두번째 파라미터 용도는? default callback 지정.  => state가 업데이트 완료된 후에 수행 됨. 

Posted by yongary
,

react 기본 hooks

React.js 2023. 4. 29. 10:38

1. useState 

2. useEffect      userEffect (()=> {},[])일때 초기화  ,[abc] )일때는 abc의 state가 변할때마다 호출.

3. useContext : props로 여러번 여러군데 넘기는게 불편할때 약간 global 변수의 개념.

=>  Provider 파일을 따로 만들고 children props를 이용하면 특정 컴포넌트만  reload하는 구조로 발전가능하다. (1번방식)
          2번 방식도 동작은 하는데  여러개의 childComponent를 사용할때 문제가 될 수 있다.  모두 다 reload 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2번 방식;
export const MyContext = useContext({a:1, b:2, 함수});

<MyContext.Privider value = 옵셔널 지정> 예: {value, setValue}
  <ChildComponent>
</MyContext.Provider>

===ChildComponent
const [value,setValue] = useContext(MyContext)

 

========== Additional Hooks =============

4. useRef  input같은 것의 반복적인 state호출 방지용.

const inputRef = useRef(null);
const someFunction = () => {
	console.log(inputRef.current.value) //값이 찍힘. inputRef.current.focus()도 많이 씀.
}

<input type="text" ref={inputRef} />

    => 기존방식 대비 value와, onChange 없어도 된다. (값이 바뀔때 마다 뭘 하진 않고, 필요시 전체값만 읽는 경우에 최적)

 

5. useMemo  : cache기능 함수의 return값을 cache해 놓고, state가 바뀔때만 다시 계산함.

const [first, setFirst] = useState('Y ')
const [last, setLast] = useState('K ')
//이 방식은 페이지 로드시마다 매번생성   const name = `${last} ${first}`

const name = useMemo(()=> {
  return first + last
}, [first, last])

 

6. useCallback: useMemo와 거의 같은데 함수 자체를 cache함.
 참고: react-native에서는 useFocusEvent와 결합하여 goBack()으로 이동시에 자동 화면 새로고침에 사용가능.

   useEffect(() => {
        console.log("ConsignDetail consigneeCd", consigneeCd);
        search();

        //아래 H/W키처리 코드 => useCallback으로 대체
        // const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
        // return () => backHandler.remove(); // 컴포넌트 언마운트 시 이벤트 핸들러 제거

    }, [consigneeCd, refreshTime]);


    useFocusEffect(
        useCallback(() => {
            // 화면으로 돌아올 때의 처리
            setRefreshTime(Date.now().toString());
            console.log("ConsignDetail화면 진입")
            return () => {
                // 화면이 벗어날 때의 처리
            };
        }, [])
    );

 

7. useReducer : 몇가지 state를 모아서 한꺼번에 반영. => setState 여러번하는거 보다 효과적.



 

8. useLayoutEffect :  useEffect와 비슷한데, UI를 blocking함,  UI용 좌표계산 같은 걸 할때 효과적.

 

9.  useImperativeHandle  : forwardRef()와 함께사용해서 자식Component가 부모Component에 메소드 노출. 
예제

부모 컴포넌트

    const setPreviewPageNo = (pageNo) => {
        if (refPdfViewer.current) {
            refPdfViewer.current.setPageNo(pageNo);
        }
    };
    
    <PdfViewer file={docGen.previewUrl}
               onLoadSuccess={(count) => {setPreviewPageCount(count)}}
               ref={refPdfViewer}
    />
    
    
 자식 컴포넌트 : setPageNo를 부모에 전달. 
 const PdfViewer = forwardRef(({file, onLoadSuccess, showPagination}, _ref) => {
 
    const [currentPageNo, setCurrentPageNo] = useState(0);
 
    useImperativeHandle(_ref, () => ({
        setPageNo: (pageNo) => {setCurrentPageNo(pageNo)},
    }));
 
 }

 

 

10. useDebugValue: 리액트 devTool에 state컴포넌트 같은걸 출력. 주로 customHook 안에서 사용. 

 

 

Posted by yongary
,

React내 <div style={{

React.js 2023. 4. 16. 00:31

React내의 <div 나 <image에 style을 주는 예제.

<div style={{
	display: "flex",
    flexDirection: "column",
    padding:10,
    border: "1px solid grey",
    widht: "30%",
    marginTop: 10,
    gap: 10,
    justifyContent:"space-between"
    }}
>
 <img
 	src = {product.thumbnail}
    alt = {product.title}
    style = {{ height: 200, objectFit: "cover" }} 
                        //cover는-꽉차게(비율유지), contain-안에포함, fill-꽉차게 비율깨짐)
    />
</div>
Posted by yongary
,

CSS 기본

FRONT-END 2023. 4. 8. 21:21

CSS specicificity:  인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.

 =>  p { color:red;]  .p1 { color:green; } 이면  p는 0.0.0.2 이고  .p1은 0.0.1.0 이라서  .p1이 힘이 우선 적용된다...

   (p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음) => 암기: Inline + ICA(id,class, attribute)

 

CSS Selectors: 

  • Universal Selector:   * {  padding: 10px; }
  • Element Type Selector:    ul {border: solid 1px #ccc;}
  • ID selector:   #myContainer { width: 90px; margin: 0 auto; }  =>  <div id="myClass"/>
  • Class selector:  .box {width: 20px;}  => <div class="box">
  • Descendant 결합:   #container .box{ float:left; }   =>  <div id="container">   <div class = "box">   HI  </div>  </div>
  • 1단계 Child만 결합:  #container> .box{ float:left; }    위예제는 모든 자손들 box 다 포함이지만, > 사용시 딱 1단계 child만 적용
  • 동일레벨(sibiling) 결합: h2 ~ p {font-weight: bold;} =>   <h2> A </h2>   <p> B </p>  도  굵게 됨.
    #container ~ .box  라고 동일 레벨선상의 두 요소에 전체적으로 적용이 됨.
  • 요소(attribute) selector:    input [type="text"]  {background-color:#fff;}    =>  <input type="text"> 에 적용됨.

Internal Style Sheet VS. External  :    (external:  <link rel="stylesheet" href="blabla.css">  )

    html 안에서 직접 CSS사용하고 싶으면 <style> </style> 테그만 있으면 된다.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: darkblue;
    }
  </style>
</head>

 

Posted by yongary
,

함수

javascript 2023. 3. 27. 20:44

function a() { } 보다 ,    const a = () => {} 로 쓰는게 좋다.

==> 이유 1. function은 생성자인지 함수용도인지 헤깔리지만, const는 항상 함수 용도이다.  생성자가 필요하면 class로 쓰면 된다.

         이유 2. const의 우측 ()=>{} 이걸 변수에 대입하는 느낌으로 array안 이나, 함수 parameter등 동일한 방식으로 사용가능하단.

단,

let object= {

    name: 'kim'

    run : ()=> {}   까지는 굿인데, {}안에서 this는 못 쓰는 문제가 있어, 이때는 function써도 되지만 위 문제들 때문에 그냥
    run() {..}        쓰면 된다.

}

 

 

closure: 내부함수가 외부함수의 변수를 access할 수 있다. (상식수준임) =>  예제코드에선 function이 이너함수를 리턴하는 형태가 많음.

 

Javascript map과 forEach의 차이점.  map은 매번 뭔가를 리턴을 한다. 따라서 array를 map시 새 array가 생긴다.

 

[ CSS 로 이동예정]

CSS specicificity:  인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.

 =>  p { color:red;]  .p1 { color:green; } 이면  p는 0.0.0.2 이고  .p1은 0.0.1.0 이라서  .p1이 힘이 우선 적용된다...

   (p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음)

 

 

 

Posted by yongary
,

spread ...

javascript 2023. 3. 21. 00:00

1. let arr = [ [1,2], [2,3] ]

...arr 은  [1,2], [2,3] 을 의미하지만 직접 사용하지는 못하고 [...arr]이나 {...arr} 등으로 사용가능하다.

 

2. let json = {a:1, b:2}

 ...json 은 a:1, b:2 를 의미하지만 위 예제와는 달리 iterable은 아니라서   {...json}형태로 쓰면 복사효과가 있다.

 

 

1에서 let spread = [].concat( ...arr)
  ==>  spread 는  [1, 2, 2, 3] 이 된다. concat이 여러개 array(iterable)를 수용가능.

 

 

Posted by yongary
,

75가지 질문들 :  REF

 

- clickJacking: 

ClickJacking is an attack which lets the developer fool the users into thinking that they are clicking one thing but actually they are clicking the other one.

- Coercion :  javascript 타입변환으로 자동변환과 강제변환(explict coercion)이 있다.   explict 예:) Number('1') 

 

- IIFE :  즉시 실행함수, 아래와 같이 정의즉시 실행됨.

(function(a, b) { return a + b })(1, 2) // 3

 

- srcset: @media css태그와 유사하게  html img 태그안에서, responsive한 image들 지정.

<img
  srcset="images/heropy_small.png 400w,
          images/heropy_medium.png 700w,
          images/heropy_large.png 1000w"
  src="images/heropy.png" />

 

- Mixin : A Mixin is a code block that lets the group of CSS declarations which we can reuse in our site. 

@mixin set-color {
  color: #fff;
  background-color: yellow;
}
 
h1 {
  @include set-color
}

 

- CSP : Content-Security-Policy : 웹 취약점 중 하나인 XSS등의 공격을 방지하기 위한 보안정책입니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'none'">
;로 구분을 주어 사용하면 됩니다.

self : 현재도메인의 리소스만 만 사용하겠다는 뜻.
script-src 'none' : 모든 스크립트는 허용암함.
Posted by yongary
,

fail-fast vs fail-safe

java core 2023. 3. 7. 23:34

대부분의 iterator는 fail-fast이다.

작업중 데이터가 바뀐다면 ConcurrentModification Exception이 발생한다.

 

ConcurrentHashMap같은 몇몇 컬렉션타입은 fail-safe iterator를 지원하는데

이는 복제본을 가지고 작업을 하는 방식이라서

메모리 리소스 단점과 데이타가 부정확할 수 있다는 단점이 있다.

 

 

Posted by yongary
,

ERD 무료 툴 (draw.io)

BACK-END 2023. 2. 28. 19:18

erWin이 가격도 문제이고, 공유기능도 없어서 

초기에 스케치용으로 ERD를 그릴때는 draw.io 가 좋은것 같다. 여러명이서 구글드라이브에 공유해 동시에 그릴 수 있는 장점이 있다.

 

TIP: 

https://drawio-app.com/entity-relationship-diagrams-with-draw-io/ 

 

ERD외에도 다양한 diagram을 그릴 수 있는데,

- 어떤 형태의 Diagram이 좋을까는 여기참고: 

https://velog.io/@yooha9621/UML%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8UML%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8-%EC%A2%85%EB%A5%981

 

 

오라클에서 테이블목록, 엔터티정의서, 테이블정의서 추출 SQL: https://seodaeya.tistory.com/105 

 

# 테이블 목록 조회
SELECT A.TABLE_NAME AS 테이블명 , 
       B.COMMENTS AS 코멘트
  FROM USER_TABLES A
 INNER JOIN USER_TAB_COMMENTS B
    ON A.TABLE_NAME = B.TABLE_NAME
   -- AND A.TABLE_NAME LIKE 'TB_%' -- 네이밍룰 있을경우
   AND INSTR(A.TABLE_NAME,'TEST') = 0  -- TEST 테이블 있으면 제외
 ORDER BY A.TABLE_NAME
 

    
--  테이블 정의서

SELECT
    a.table_name     AS 테이블명,
    --a.tab_cmt        AS 테이블설명,
    a.column_name    AS 컬럼명,
    b.pos            AS PK,
    a.data_type      AS 데이터유형,
    a.DATA_LENGTH    AS 데이터길이,
    a.nullable       AS null여부,
    --,a.column_id      AS 컬럼순서,
    a.data_default   AS 기본값,
    a.col_cmt        AS 컬럼설명
FROM
    (
        SELECT
            s1.table_name,
            s3.comments   AS tab_cmt,
            s1.column_name,
            s2.comments   AS col_cmt,
            s1.data_type,
            CASE
                WHEN s1.data_precision IS NOT NULL THEN
                    data_precision
                    || ','
                    || data_scale
                ELSE
                    to_char(s1.data_length)
            END AS DATA_LENGTH,
            nullable,
            column_id,
            data_default
        FROM
            user_tab_columns    s1,
            user_col_comments   s2,
            user_tab_comments   s3
        WHERE
            s1.table_name = s2.table_name
            AND s1.column_name = s2.column_name
            AND s2.table_name = s3.table_name
            AND S1.TABLE_NAME in (
				SELECT TABLE_NAME from USER_TABLES
    )
    ) a,
    (
        SELECT
            t1.table_name,
            t2.column_name,
            'PK' || position AS pos
        FROM
            (
                SELECT
                    table_name,
                    constraint_name
                FROM
                    user_constraints
                WHERE
                    constraint_type = 'P'
            ) t1,
            (
                SELECT
                    table_name,
                    constraint_name,
                    column_name,
                    position
                FROM
                    user_cons_columns
            ) t2
        WHERE
            t1.table_name = t2.table_name
            AND t1.constraint_name = t2.constraint_name
    ) b
WHERE
    a.table_name = b.table_name (+)
    AND a.column_name = b.column_name (+)
ORDER BY
    a.table_name,
    a.column_id
Posted by yongary
,

react-router-dom

React.js 2023. 2. 25. 20:55

1. 설치는 npm install -save 로  react-router-dom@6 로 하면 6.0.2버전 등이 설치되며 기본사용법은 아래와 같이 <BrowserRouter> 밑에 <Routes>를 두고 그 밑에 여러개의 <Route>를 넣는 방식이다.

 

import {BrowserRouter, Routes, Route> from "react-router-dom"
import SubSystem1 from "./SubSystem1.js" 
import Admin from "./Admin.js"

export default cont HomePage = () => {

	return (
    	<>
        	<BrowserRouter>  //최상단
           		<Routes> //Router 여러개 포함
        			<Route path="/" element={<SubSystem1 />} />   //에전엔 component였는데 6부턴 element로 바뀜
        			<Route path="/admin" element={<Admin />} />
        
        		</Routes>
    		</BrowserRouter>
    	<>
    )

}

 

2. 혹시 첫 페이지에 간단한 링크를 넣고싶다면

<BrowserRouter>와 <Routes>사이에 아래 코드블락 같은걸 넣으면 된다.

Link도 react-route-dom에서 import하는건데,  <a href는 화면을 refresh하면서 가지만 Link는 refresh없이 변경되므로 뛰어나다.

 

 

    <nav>

          <Link to="/"> Home </ Link>

           <Link to="/admin"> admin </Link>   

    </nav>

 

3. <Link> 보다 조금 발전되어 active일 경우 style등을 넣는다던지 className을 넣는다던지 하고싶으면 <NavLink>를 사용하면 된다.  

<NavLink className="myclass" to="/"> Home </NavLink>

 

3.1  className을 좀더 발전시키면 className={({isActive}) => "myClass" + (isActive?"blue":""}

==> 이 경우 styles.scss 를 import를 하고 여기에 아래와 같이 css를 설정할 수 있다.

nav {
	a{
    	padding: 2em;
        font-size: 2em;
        &.blue{background-color: #00f;}
	}
}

3.2 위에서 &는 상위부모 (여기서는 a)를 치환한다고 보면되는데 자세한 설명은 REF참고. 

 

Posted by yongary
,