본문 바로가기

분류 전체보기189

[DB/ORACLE] PIVOT ( UNPIVOT절 예정 ) --PIVOT 절과 UNPIVOT절 -- PIVOT 절은 행을 열로 회전시키고 -- UNPIVOT절은 열을 행으로 회전 시킨다. -- 기본문법 -- PIVOT[XML] -- ( -- AGGREGATE_FUNCTION (EXPR) [ [AS] ALIAS ] [ , AGGREGATE_FUNCTION(EXPR) [ [AS] ALIAS]] -- FOR { COLUMN | (COLUMN [, COLUMN] ... ) } -- IN ({{{ EXPR | (EXPR [, EXPR]... )} [ [AS] ALIAS]}... | SUBQUERY | ANY [ ,ANY]... }) -- ) -- AGGREGATE_FUNCTION : 집계할 열을 지정 -- FOR절 PIVOT할 열을 지정 -- IN 절 PIVOT할 열값을.. 2022. 12. 2.
[React] DOM 엘리먼트 접근 DOM 엘리먼트 접근 - HTML 엘리먼트의 속성이나 메소드에 직접 접근해야할 일이 생길것이다. 자바스크립트의 DOM API를 통해 직접 HTML 엘리먼트를 다루는 일이 '리액트 방식'으로 할 때보다 더 쉬운 경우가 많기 때문이다. - 리액트는 HTML 엘리먼트에 대한 DOM API에 접근할 수 있게 하는, ref라는 도구를 제공한다. - 또한 페이지 안의 어떤 HTML 엘리먼트든 렌더링할 수 있게 하는 포털이라는 기능도 제공한다. -- 예제를 통해 한번 알아보도록 하자 >> ref 와의 첫만남 - 대부분의 경우 render 메소드 안에서 HTML을 닮은 JSX 코드를 작성해왔다. 리액트는 DOM안에서의 최종 HTML 엘리먼트와 JSX 사이를 연결해주는 ref라는 기능을 제공한다. - 위의 render .. 2022. 12. 1.
[REACT] 컴포넌트 생명주기 render - shouldComponentUpdate가 false를 리턴함으로써 업데이트 작업을 건너 뛰지만 않는다면, render 메서드가 다시 호출됨으로써 컴포넌트가 올바로 보이게 보장한다. >> 생명주기 메소드와의 만남 - 컴포넌트의 일생에서 다양한 시점에 호출되는 이벤트 핸들러라고 생각하면된다. >> componentWillMount >> componentDidMount >> componentWillUnMount >> componentWillUpdate >. componentDidUpdate >> shouldComponentUpdate >> componentWillReceiverProps >> componentDidCatch + 생명주기 메소드와 함께 자주 사용할 하나의 메소드가 더있다. 바로 .. 2022. 12. 1.
[DB/ORACLE] 계층 쿼리 고급 ( 노드제거, 다중 루트 노드, 다중 속성 순환관계, 계층 쿼리와 조인) -- 고급주제 -- 노드제거 : CONNECT BY 절이나 WHERE 절에 조건을 기술하면 조건을 만족하지 않는 노드를 제거할 수 있다. -- 아래 쿼리는 CONNECT BY 절에 EMPNO 7698 조건을 기술 했다 -- CONNECT BY 절에 조건을 기술하면 조건을 만족하지 않는 노드와 해당 노드의 모든 하위 노드가 제거된다. -- 계층 전개시점에 노드가 제거되기 때문에 하위 노드까지 제거되는 것이다. SELECT LEVEL AS LV , EMPNO , LPAD(' ', LEVEL -1, ' ') || ENAME AS ENAME , MGR FROM EMP START WITH MGR IS NULL CONNECT BY MGR = PRIOR EMPNO AND EMPNO 7698; -- 다음은 WHERE .. 2022. 12. 1.
[React] 이벤트 1. 이벤트 리스닝하기와 반응하기 - 카운터 예제로 한번 알아보자 - 노란색 화면에 count 숫자와 버튼 하나가 생성된것을 확인할 수 있다. 지금은 + 버튼을 누르더래도 아직 아무 변화가 생기지 않는다. 2. 버튼 작동시키기 - 버튼을 눌렀을때 count를 1씩 증가 시켜야 한다. 1) 버튼 클릭 이벤트를 리스닝 한다 2) 클릭에 반응해 카운더가 의존하는 this.state.count 속성의 값을 증가시킬 이벤트 헨들러를 구현한다. - onClick 을 눌렀을때 increase 함수를 호출하라는 의미이다 - increase 함수 즉 이벤트 핸들러를 구현해 보자 1) increase 함수를 정의한 후 2) increase 함수에 대해서 constructor에서 바인딩 해준다 == 카운터 최종코드 == 3.. 2022. 11. 30.
[React] 데이터에서 UI로 1. 예제를 통해서 알아보도록 하자 -- 지금까지 Circle 컴포넌트 하나를 선언했고, bgColor 속성을 이용해 원의 컬러를 설정했다. 그러나 render 메서드에서 Circle 컴포넌트를 사용하는 일에는 약간의 제약이 따른다. Circle 컴포넌트의 동작에 영향을 주는 데이터를 다루는 경우에는 특히 그렇다 지금 부터는 이문제를 해결하기 위한 방법을 살펴볼 것이다. 2. 어디서든 가능한 JSX - 2 - JSX가 render 함수의 외부에 존재하면서 변수나 속성값으로 사용되는 경우로 봤다. theCircle 변수에는 Circle 컴포넌트를 인스턴스화 하기 위한 JSX가 담긴다. 이 코드의 경우에는 Circle 컴포넌트의 인스터스화가 render 메소드에서 벋어남으로써 좀더 여러가지 일을 할 수 있게.. 2022. 11. 30.
[React] 상태 다루기 - 지금까지의 컴포넌트는 무상태 컴포넌트 였다. 부모로 부터 받은 속성은 있으나, 실행될 때 그 속성에 관한 어떤 변화도 일으키지 않았다. - 하지만 사용자와의 상호작용 결과로 컴포넌트의 어떤 부분은 변경되거나, 서버로부터 데이터를 가지고 오거나, 그밖에 무수히 많은 일들이 일어날수 있다. 즉 .. 우리에게 필요한것은 >> 속성의 수준을 넘어 컴포넌트에 데이터를 저장하는 또 다른 방법이다. >. 이는 변경되는 데이터를 저장해야 한다는 의미이다. 그 데이터를 바로 상태(state) 라고 한다. 1. 상태 사용하기 -- 간단한 앱을 만들어 실습해보도록 하자 (번개친 횟숫 카운트하기) >> LightningCounterDisplay 라는 컴포넌트는 render() 에서 스타일 객체를 만들어 태그에 스타일을 지.. 2022. 11. 30.
[REACT] JSX 특징 1. 표현식 평가 >> JSX는 자바스크립트처럼 취급된다. 즉 동적인 콘텐츠도 다룬다는 말이다. >> 리턴되는 값을 동적으로 생성되게 하려면 { } 중괄호로 감싸주는게 전부이다. >> 중괄호는 표현식 먼저 평가돼그 결과를 리턴하게 만든다. 2. 복수의 엘리먼트 리턴 >> 여태 다른 엘리먼트를 자식으로 두는 상위 엘리먼트 하나만을 리턴한것을 볼수 있는데 복수의 엘리먼트를 리턴할 수 있으며 방법으로는 1) 배열 같은 식의 문법을 사용한다. - 단일한 부모 엘리먼트 없이 p태그 세 개를 리턴하고 있다. - 또한 복수의 아이템을 리턴할 때 다룰수도 있는 사항이 있는데 바로 각 아이템에 key 속성과 고유 값을 지정하는 것. 2) 리액트 v16.2.0부터 추가된 프래그먼트 라는 패턴이 개입된다. - 리턴하고 싶은.. 2022. 11. 30.
[DB/ORACLE] 계층쿼리 -- 계층 쿼리 -- 계층 쿼리를 사용하면 순환 관계를 가진 데이터를 조회 할 수 있다. -- 순환 관계를 가진 데이터는 계층 구조로 표현할 수 있다. -- 부모 노드 : 현재 노드의 직전 상위 노드 -- 자식 노드 : 현재 노드의 직후 하위 노드 -- * 하나의 자식 노드는 하나의 부모 노드만 가질 수 있다. -- 노드는 부모노드와 자식노드의 존재 여부에 따라 -- 루트노드, 브랜치 노드, 리프노드 등으로 구분 된다 -- 루트노드 : 부모 노드가 존재하지 않는 노드 -- 브랜치 노드 : 부모 노드와 자식 노드가 존재하는 노드 -- 리프 노드 : 자식 노드가 존재하지 않는 노드 -- 순환 관계는 깊이에 따라 레벨이 부여 된다. 루트 노드의 레벨은 1이고, 계층이 전재 될수록 레벨이 1씩 증가한다. -- .. 2022. 11. 30.
[React] 속성 전달 >> 리액트는 반드시 부모 컴포넌트에서 직계 자식 컴포넌트로만 속성이 내려가게 하는 연쇄적인 명령 실행만 가능하다. 속성을 전달할 때 중간 계층을 건너 뛸 수 없다는 의미이며, 또한 자식으로부터 부모로 속성을 거꾸로 올려보낼수 없다. 속성은 1개씩 타고 내려가며, root로 부터 color = "red" 가 들어가게 되면 한칸 단계씩 옴겨져야 한다 color = {this.props.color} ~~ 만약 보내야 속성이 1개가 아닌 n개 가 된다면 어떻게 될까? 예제를 통해서 알아보자 ReactDOM.render() 에서 정의된 값이 각 컴포넌트들에게 전달되어 마지막에 있는 곳에서 Display 컴포넌트에서 값을 표시하였다. 즉 목적지를 향하는 경로에 있는 모든 컴포넌트들이 각 속성에 접근하고 재정의해 .. 2022. 11. 29.

티스토리툴바