-- 06_Join
-- 조인(*****)
-- 예제 1) 사원번호(ENO) 7788 인 사원의 부서명(DNAME)은 뭘까요?
-- 사원테이블 : EMPLOYEE
-- 부서 : DEPARTMENT
-- 1) 사원테이블에서 ENO=7788 인 사람의 부서번호(DNO) 를 알아낸뒤
SELECT DNO FROM EMPLOYEE
WHERE ENO = 7788; -- DNO = 20
-- 2) 부서테이블에서 그 부서번호에 해당하는 부서명을 출력하면 됨
SELECT * FROM DEPARTMENT
WHERE DNO = 20;
-- 결과 : 조회 성능이 저하됨( SQL 문 1번 실행하는 것이 가장 좋음)
-- 1) 코딩(SQL) : 해석(시간소요)
-- 2) 네트워크를 통해 접속툴과 DB서버간 통신 (시간소요)
-- 사용법) SELECT 별칭1.컬럼명, 별칭2.컬럼명
-- FROM 테이블 1 별칭1, 테이블 2 별칭2
-- WHERE 테이블1.공통컬럼 = 테이블2.공통컬럼
-- 2) 조인을 사용 : 위의 2번 조회를 1번 조회로 수정할 수 있음
-- 테이블 여러개를 공통컬럼을 이용해서 연결할 수 있음(권장 : 4개이내)
SELECT EMP.*, DEP.*
FROM EMPLOYEE EMP, DEPARTMENT DEP
WHERE EMP.DNO = DEP.DNO; -- 공통컬럼으로 연결 (2개의 테이블)
-- 조인 의미
-- 사원 테이블
SELECT * FROM EMPLOYEE
ORDER BY DNO;
-- 부서테이블
SELECT * FROM DEPARTMENT
ORDER BY DNO;
-- 예제 1) 사원 번호(ENO) 가 7499 또는 7900 인 사원들에 소속된 부서정보를 모두 출력하세요
SELECT EMP.*, DEP.*
FROM EMPLOYEE EMP, DEPARTMENT DEP
WHERE EMP.DNO = DEP.DNO
AND EMP.ENO IN (7499, 7900);
-- 연습 1) 조인하고 아래 조건을 추가하세요
-- 1-1) 사원번호가 7500 ~ 7700 사이에 있는 사원들이 소속된 부서정보를 출력하되
-- 1-2) 부서이름이 SALES 인 부서만 출력하세요
SELECT EMP.*, DEP.*
FROM EMPLOYEE EMP, DEPARTMENT DEP
WHERE EMP.DNO = DEP.DNO -- 공통컬럼 연결(이퀄(Equal(=))조인
AND EMP.ENO BETWEEN 7500 AND 7700
AND DEP.DNAME = 'SALES';
-- 특수한 조인
-- 1) 범위 조인 : BETWEEN A AND B ( A ~ B 사이의 값 )
-- 단점 : 성능이 대폭 하락
-- 급여등급 테이블 : SALGRADE
-- 가장 낮은 등급 : LOSAL 컬럼
-- 가장 높은 등급 : HISAL 컬럼
SELECT ENAME, SALARY, GRADE
FROM EMPLOYEE EMP, SALGRADE SAL
WHERE EMP.SALARY BETWEEN SAL.LOSAL AND HISAL;
-- 2) 아우터 조인(OUTER JOIN) (**) :
-- 이퀄조인(=) : 두 테이블의 공통컬럼에 NULL 값이 있으면 NULL 값을 제외하여 연결됨
-- MANAGER 컬럼 : 관리자 사원번호
-- 용도 : NULL 을 포함한 데이터도 화면에 표시하고 싶을 때 사용함
-- 사용법 : = 조인을 하되 NULL 값이 있는 쪽에 (+) 붙이면 됨
SELECT EMP.ENAME, MAN.ENAME AS MANAGER
FROM EMPLOYEE EMP, EMPLOYEE MAN
WHERE EMP.MANAGER = MAN.MANAGER(+);
-- 3) SQL-99 표준 표기법 : 오라클 DB/MySQL DB 등에서 지원함
-- 전세계 SQL(질의어) 표준 : ANSI SQL(표준 기구)
-- 예제 1) 사원 테이블 부서테이블 조인 : SQL-99 표기법
-- 오라클 조인
SELECT ENO, DNAME, EMP.DNO, DEP.DNO
FROM EMPLOYEE EMP, DEPARTMENT DEP
WHERE EMP.DNO = DEP.DNO;
-- SQL-99 : DB 상에 100% 호환됨
-- 사용법 ) SELECT 별칭1.컬럼명, 별칭2.컬럼명 ...
-- FROM 테이블명 별칭1 JOIN 테이블명 별칭2 ON(별칭1.공통컬럼 = 별칭2.공통컬럼);
SELECT ENO, DNAME, EMP.DNO, DEP.DNO
FROM EMPLOYEE EMP JOIN DEPARTMENT DEP ON(EMP.DNO = DEP.DNO);
-- 레프트 아우터 조인 / WHERE절에 (+)가 없는 쪽을 기준으로 명칭을 부여 : 오라클
SELECT EMP.ENAME, MAN.ENAME AS MANAGER
FROM EMPLOYEE EMP, EMPLOYEE MAN
WHERE EMP.MANAGER = MAN.MANAGER(+);
-- 라이트 아우터 조인 : 오라클
SELECT EMP.ENAME, MAN.ENAME AS MANAGER
FROM EMPLOYEE EMP, EMPLOYEE MAN
WHERE EMP.MANAGER(+) = MAN.MANAGER;
-- SQL-99 아우터 조인
SELECT EMP.ENAME, MAN.ENAME AS MANAGER
FROM EMPLOYEE EMP LEFT OUTER JOIN EMPLOYEE MAN ON (EMP.MANAGER = MAN.MANAGER);전체 글
- 조인 2023.09.14
- 그룹함수 2023.09.14
- 문자열 자료형 2023.09.08 1
- 오라클 내장함수 2023.09.08
- SQL 기본(2) 2023.09.08
- SQL 기본 2023.09.08
- typescript - etc 2023.09.06 1
- typescript - 함수 2023.09.06
- typescript 2023.09.06
- 메모이제이션 2023.09.02
- State(useState) 2023.08.31
- 반복문을 활용한 예제(2) 2023.08.31
조인
그룹함수
-- 05_Group_Func
-- 그룹 함수 : 데이터 전체집계 함수들(총액, 평균, 최고, 최저액, 총개수)
-- 결과 특징) 1건이 나옴
-- SUM(컬럼명), AVG(컬럼명), MAX(컬럼명), MIN(컬럼명), COUNT(컬럼명)
-- 예제 1) 사원들의 급여 총액, 평균액, 최고액 출력하기
SELECT SUM(SALARY) AS 총액
,ROUND(AVG(SALARY)) AS 평균액
,MAX(SALARY) AS 최고액
,MIN(SALARY) AS 최저액
FROM EMPLOYEE;
-- 예제 1) 최근에 입사한 사원과 가장 오래전에 입사한 사원의 입사일 출력하기
SELECT MAX(HIREDATE) AS 최근
,MIN(HIREDATE) AS 오래전
FROM EMPLOYEE;
-- 예제 2) 사원들의 상여금(COMMISSION) 총액 출력
SELECT SUM(COMMISSION) AS "상여금 총액"
FROM EMPLOYEE;
-- 예제 3) 사원들의 총인원을 출력하세요
-- 사용법) COUNT(컬럼명[*])
SELECT COUNT(*) AS 총인원
FROM EMPLOYEE;
-- 예제 4) 상여금(COMMISSION) 받는 사원의 수 계산하기
-- COMMISSION 컬럼 NULL 있음(상여금 못받음)
-- 집계함수는 자동으로 NULL 제외하고 계산
SELECT COUNT(COMMISSION) AS "상여금 받는 사원의 수"
FROM EMPLOYEE;
-- 예제 5) NOT NULL 인 데이터만 계산하기
SELECT COUNT(COMMISSION) AS 사원수
FROM EMPLOYEE
WHERE COMMISSION IS NOT NULL;
-- 예제 6) 직위(JOB) 종류가 몇 개인지 출력하기
-- DISTINCT : 중복제거 키워드
-- 사용법 COUNT(DISTINCT 컬럼명)
-- 컬럼별칭(*) : 컬럼명 AS 별칭
-- 테이블 별칭(*) : 테이블명 별칭
-- 사용법 : 별칭.컬럼명
SELECT COUNT(DISTINCT EMP.JOB) AS 직업개수
FROM EMPLOYEE EMP;
-- 전체 집계 함수 특징 : 1) 1건이 결과로 나옴
-- 2) 일반 컬럼과 같이 사용할 수 없음 : 에러 발생
--SELECT ENAME, MAX(SALARY)
--FROM EMPLOYEE; -- 에러 (일반컬럼(ENAME), MAX(SALARY) 같이 사용불가)
-- 2) 부분(컬럼별)집계하기 : GROUP BY (예약어)
-- 사용법 ) GROUP BY 컬럼명, 컬럼명2, ...
-- 예제 7) 소속 부서별(DNO) 평균 급여를 부서번호와 함께 출력하세요
-- TRUNC() : 버림(절삭)
-- 전체집계시에는 일반컬럼과 같이 사용할 수 없지만
-- 부분집계시에는 일반컬럼과 같이 사용가능 (GROUP BY 사용하기 때문)
SELECT DNO
, TRUNC(AVG(SALARY)) AS 평균급여
FROM EMPLOYEE
GROUP BY DNO; -- 부서번호 컬럼별 집계(부서번호 컬럼은 출력할 수 있음)
-- 주의점 ) 1) 그룹함수와 일반컬럼은 같이 사용불가
-- 단, 컬럼별 집계에서 그 컬럼은 그룹함수와 같이 사용할 수 있음
--SELECT DNO, ENAME
--, TRUNC(AVG(SALARY)) AS 평균급여
--FROM EMPLOYEE
--GROUP BY DNO; -- 에러 : ENAME 컬럼은 GROUP BY 대상 컬럼이 아니므로 그룹함수와 같이 출력할 수 없음
-- 예제 8) 부서번호(DNO)별, 직위별(JOB), 데이터 건수(COUNT) 및 급여(SALARY) 총액(SUM) 구하기
SELECT DNO, JOB
,COUNT(*)
,SUM(SALARY)
FROM EMPLOYEE
GROUP BY DNO, JOB;
-- GROUP BY 사용시 조건을 추가 : HAVING 키워드 // GROUP 함수에만 사용가능
-- 사용법) HAVING 그룹함수(컬럼명) > 값
-- 예제 9) 부서번호별(DNO) 최고급여가 3000 이상인 부서의 번호와 최고금액 구하기
SELECT DNO ,MAX(SALARY)
FROM EMPLOYEE
GROUP BY DNO
HAVING MAX(SALARY) >= 3000;
-- 연습 1) 사원테이블에서(EMPLOYEE) JOB(직위)이 1) MANAGER 인
-- 값을 제외하고 3) 급여(SALARY) 총액(SUM)이 5000 이상인
-- 2) 직급별(JOB) 총액 구하기
SELECT JOB, SUM(SALARY)
FROM EMPLOYEE
WHERE JOB NOT LIKE '%MANAGER%'
GROUP BY JOB
HAVING SUM(SALARY) >= 5000;문자열 자료형
// String : 문자열 자료형
// 0 ~ 다수의 문자들로 구성됨
// ""로 둘러쌈
// String은 참조 자료형임
// 리터럴 방식
String str1 = "Hello Java!";
String str2 = "반갑습니다. 주녘의 블로그입니다.";
// 빈 문자열도 가능
String str3 = "";
// 인스턴스 생성 방식
String str4 = new String("안녕, 나는 주녘이야");
String hi1 = "Hi";
String hi2 = "Hi";
String jv = "Java";
// 리터럴끼리는 == 사용하여 비교가 가능함
boolean bool1 = hi1 == hi2; // true
boolean bool2 = hi1 == jv; // false
String hi3 = new String("Hi");
String hi4 = new String("Hi");
String hi5 = hi4;
// 인스턴스와 비교하려면 == 이 아닌 .equals 메소드를 사용
boolean bool3 = hi3 == hi4; // false
// 같은 Hi 인데 왜 false로 나올까?
// hi3와 hi4 메모리의 다른 주소값으로 인스턴스가 생성되었기 때문!
int result = System.identityHashCode(hi3); // 2074407503
int result2 = System.identityHashCode(hi4); // 999966131
boolean bool4 = hi1.equals(hi2); // true
boolean bool5 = hi1.equals(hi3); // true
boolean bool6 = hi1.equals(hi4); // true
boolean bool7 = hi1.equals(hi2); // true
boolean bool8 = hi4 == hi5; // true
}
'Java > Java 이론' 카테고리의 다른 글
| 클래스 (0) | 2023.09.20 |
|---|---|
| [JAVA 다시보기] 자바기초 (1) | 2023.09.19 |
| [JAVA] 참조변수의 형변환 (0) | 2023.08.11 |
| [JAVA] 인터페이스(interface) (0) | 2023.08.11 |
| [JAVA] String 클래스 (0) | 2023.08.10 |
오라클 내장함수
📌 문자함수 - 대/소문자 변환
📌 문자함수 - 문자열 길이 리턴 함수
📌 문자함수 - 문자열 자르기, 붙이기, 공백제거
📌 숫자함수 - 반올림, 버림, 나머지 연산
📌 날짜함수
📌 자료형 변환함수
SQL 기본(2)

📌 데이터에 조건을 붙여 조회하기(WHERE)
📌 논리연산자와 함께 조건절 사용하기
📌 BETWEEN 예약어
📌 IN 예약어
📌 LIKE 검색
📌 NULL 검색
📌 ORDER BY 정렬
SQL 기본
📌 SQL 기본이론


📌 전체를 의미하는 *
📌 SELECT (컬럼명....) FROM 테이블명 : 해당 테이블에서 해당 컬럼만 조회
📌 alias : 컬럼에 별칭 붙이기
📌 중복을 제거하는 DISTINCT
📌 테스트 테이블 DUAL
typescript - etc
읽기전용(read only)

튜플(tuple)



enum : 열거형, 상수를 대체해서 사용

사용자지정 타입
- 여러 타입을 변수에 저장해서 사용자지정 타입으로 만들기

타입추론
타입(자료형) 단언
'React > 이론' 카테고리의 다른 글
| typescript - 함수 (0) | 2023.09.06 |
|---|---|
| typescript (0) | 2023.09.06 |
| 메모이제이션 (0) | 2023.09.02 |
| State(useState) (0) | 2023.08.31 |
| 리액트의 조건문 : 삼항연산자를 사용한 예제 (0) | 2023.08.31 |
typescript - 함수

typescript에서의 함수 정의
매개변수를 전달받는 함수정의
const 함수명 = (매개변수:자료형...):리턴자료형 => { };
역바인딩(이벤트) 함수 정의
const 함수명 = (event:이벤트자료형) :리턴자료형 => { };
이벤트자료형을 쉽게 알아내는 방법

- html 태그 쪽에 있는 onChange에 마우스를 올리면 VScode에서 이벤트자료형을 추천해주는데 위의 붉은색 박스부분을 복사합니다.

- 복사한 내용을 역바인딩 함수의 이벤트 자료형에 붙혀줍니다.
- 단 ChangeEventHandler 부분의 Handler 부분은 삭제해줍니다.
연습문제

[부트스트랩 cdn]
<!-- bootstrap css link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
[정답]
'React > 이론' 카테고리의 다른 글
| typescript - etc (1) | 2023.09.06 |
|---|---|
| typescript (0) | 2023.09.06 |
| 메모이제이션 (0) | 2023.09.02 |
| State(useState) (0) | 2023.08.31 |
| 리액트의 조건문 : 삼항연산자를 사용한 예제 (0) | 2023.08.31 |
typescript

VS code에서 타입스크립트 프로젝트 생성방법
- 폴더 생성 후 폴더 안에서 터미널 실행
- 터미널에 npx create-react-app 프로젝트명 --template typescript 명령어 입력
- 생성이 완료되면 리액트 서버 실행명령어 입력 npm start


typescript?
자바스크립트는 자료형을 정의하지 않고 자유롭게 변수에 값을 넣어 코딩이 가능합니다. 즉, 코딩이 간략하고 코딩생산성이 증가하지만 코딩시 에러를 잡지 못하고 서비스때 심각한 오류가 발생합니다.
즉 자바스크립트의 자료형을 명시해서 코딩하게 해주는 JS의 확장 언어를 타입스크립트라 합니다.
객체형의 경우 개발자가 따로 정의를 해주어야 합니다.

연습문제

'React > 이론' 카테고리의 다른 글
| typescript - etc (1) | 2023.09.06 |
|---|---|
| typescript - 함수 (0) | 2023.09.06 |
| 메모이제이션 (0) | 2023.09.02 |
| State(useState) (0) | 2023.08.31 |
| 리액트의 조건문 : 삼항연산자를 사용한 예제 (0) | 2023.08.31 |
메모이제이션

React.memo
컴포넌트, 변수, 함수 등을 재렌더링 할 때 제어가 필요한 경우 메모이제이션을 수행합니다.
메모이제이션이란 이전 처리 결과를 저장해둠으로써 처리속도를 높이는 기술입니다.
즉, 필요할 때만 다시 계산하게 하여 불필요한 처리를 줄입니다.
컴포넌트를 메모이제이션해서 부모 컴포넌트가 재렌더링되더라도 자식 컴포넌트의 재렌더링을 방지합니다.
리액트 내의 memo를 사용하며 import를 해주어야 합니다 사용법은 컴포넌트 함수 전체를memo() 로 감싸면 됩니다.
[App.js]
[Child 1, 2, 3, 4]
[실행결과]

* 상단 버튼을 누르면 부모 컴포넌트인 App 부분만 재렌더링 되는 것을 볼 수 있으며 자식 컴포넌트 Child 1, 2, 3, 4는 재렌더링 되지 않는 것을 알 수 있습니다.
useCallback
memo를 사용해 컴포넌트를 메모이제이션 할 수 있습니다.
이번에는 함수 메모이제이션을 알아봅시다!
먼저 Child1에 리셋 버튼을 생성합니다.
리셋 버튼을 클릭하면 카운트 수치를 0으로 되돌리는 기능을 추가하면 됩니다.
카운트 수치의 state는 부모 컴포넌트인 App 이 가지고 있기 때문에 App 안에서 리셋하기 위한 함수를 정의하고 그 함수를 Child1에 전달하는 방식으로 구현합니다.
[App.js]
[Child1.js]
[실행결과]

그러나 앞에서 최적화했던 재렌더링을 다시 확인해보면 카운트 업 할때마다 Child1이 재렌더링 되는 것을 알 수 있습니다.
함수를 Props에 전달할 때 컴포넌트를 메모이제이션해도 재렌더링되는 것은
함수가 다시 생성되기 때문입니다. 일반적으로 우리가 함수를 정의할 때는 아래와 같이 정의합니다.
이렇게 함수를 정의하면 재렌더링 등으로 코드가 실행될 때마다 항상 새로운 함수가 다시 생성됩니다.
따라서 함수를 Props로 받는 Child1 은 Props가 변화했다고 판정해 카운트업 할 때마다 재렌더링을 하게 되는 것입니다.
이 현상을 피하기 위해서는 함수에 메모이제이션을 해주어야 합니다.
리액트는 함수 메모이제이션 기능 useCallback을 제공합니다. useCallback은 첫번째 인수에 함수, 두번째 인수에 의존 배열을 받습니다.
그러면 Child1 에 리셋함수를 아래와 같이 변경해줍니다.
변경 후 실행화면을 볼까요?

변수 메모이제이션
앞에서 컴포넌트 메모이제이션과 함수 메모이제이션에 대해 알아보았습니다.
기본적으로 이 두가지를 사용하면 불필요한 재렌더링을 제어할 수 있습니다.
React.useMemo
memo나 useCallback 만큼은 자주사용하지는 않지만 리액트에서는 변수 메모이제이션으로 useMemo를 제공합니다.
useMemo 사용법은 아래와 같습니다.
'React > 이론' 카테고리의 다른 글
| typescript - 함수 (0) | 2023.09.06 |
|---|---|
| typescript (0) | 2023.09.06 |
| State(useState) (0) | 2023.08.31 |
| 리액트의 조건문 : 삼항연산자를 사용한 예제 (0) | 2023.08.31 |
| map, filter (0) | 2023.08.31 |
State(useState)

State
리액트에서는 화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리합니다.
웹 애플리케이션을 만들 때 화면은 다양한 상태를 가집니다. 예시는 다음과 같습니다.
- 에러가 있는가?
- 모달 창을 열고 있는가?
- 버튼을 클릭했는가?
- 텍스트 박스에 무언가를 입력했는가?
이와 같이 '상태'는 모두 State로 관리하며 이벤트가 실행되는 경우 등에 업데이트 처리를 수행함으로써 동적 애플리케이션을 구현합니다.
useState
useState는 리액트 안에서 제공되므로 사용할 때는 import해야 합니다.
useState 함수 반환값은 배열형태로 되어 있습니다. 첫번째에 State 변수, 두번째에 State를 업데이트하기 위한 함수가 설정됩니다.
버튼 클릭시 카운트업하는 기능을 구현해보겠습니다.

'React > 이론' 카테고리의 다른 글
| typescript (0) | 2023.09.06 |
|---|---|
| 메모이제이션 (0) | 2023.09.02 |
| 리액트의 조건문 : 삼항연산자를 사용한 예제 (0) | 2023.08.31 |
| map, filter (0) | 2023.08.31 |
| 리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정 (0) | 2023.08.30 |
반복문을 활용한 예제(2)

ul-li 태그 반복하여 출력하기

'React > 실습' 카테고리의 다른 글
| 삼항연산자를 이용한 실습 (0) | 2023.08.31 |
|---|---|
| 조건문을 활용한 예제 (0) | 2023.08.31 |
| 반복문을 활용한 예제 (0) | 2023.08.31 |
| useState 이용 4가지 변수 넣기 (0) | 2023.08.31 |
| useState 함수를 이용한 Comment 출력 (0) | 2023.08.31 |