잡코딩 정보 블로그

*아래 연습문제는 연습문제를 위한 견본데이터베이스가 있어야 실행 가능

★연습문제1

1. 회원관리(EC_Member) 테이블을 이용하여 총회원수를 출력하시오.

SELECT COUNT(*)"총회원수"
FROM   EC_Member;

2. 주문처리(EC_Order) 테이블에서 결제금액(CMONEY)이 제일 적은 금액과 제일 많은 금액을 출력하시오.

SELECT MIN(CMONEY),MAX(CMONEY)
FROM   EC_Order;

3. 주문처리(EC_Order) 테이블에서 결제한 회원의 주문자ID별 결제 금액(CMONEY)의 합계를 계산하여 [주문자ID, 결제합계]를 출력하시오.

SELECT   ORDER_ID "주문자 ID", TO_CHAR(SUM(CMONEY),'L999,999,999')"결제합계"
FROM     EC_Order
GROUP BY ORDER_ID;

4. 상품관리(EC_Product) 테이블의 단가(Unit_Price)를 이용하여 역순으로 상품 단가에 순위를 부여하여 [상품코드, 상품명, 단가, 순위]를 출력하시오.

SELECT PRODUCT_CODE, PRODUCT_NAME, UNIT_PRICE,
         RANK() OVER (ORDER BY UNIT_PRICE DESC) "상품단가순위"
FROM     EC_Product
ORDER BY 3 DESC;

5. 회원관리(EC_Member) 테이블을 이용하여 회원의 시도별 분포 인원수와 전체 인원수를 계산하여 출력하시오. (ROLLUP 연산)

SELECT UNIQUE SUBSTR(ADDRESS,1,2)"시도별",
COUNT(*) "인원수"
FROM EC_Member
GROUP BY ROLLUP(SUBSTR(ADDRESS,1,2))
ORDER BY 1;

6. 주문처리(EC_Order) 테이블에서 결제 년월별 판매금액계를 출력하시오. GROUPING() 함수를 사용하여 '결제년월'이 연산에 사용되지 않을 경우 '합계금액'을 출력한다. (ROLLUP 연산, CASE() 함수 사용)

SELECT CASE GROUPING(SUBSTR(CDATE,1,5)) WHEN 0 THEN SUBSTR(CDATE,1,5)
                                        WHEN 1 THEN ' 합계금액'
       END "결제년월",
       TO_CHAR(SUM(CMONEY),'L999,999,999') "판매금액계"
FROM EC_Order
GROUP BY ROLLUP(SUBSTR(CDATE,1,5))
ORDER BY GROUPING(SUBSTR(CDATE,1,5)),1;

7. 주문처리(EC_Order) 테이블에서 2018년 1/4분기(1월~3월)의 주문자ID, 주문상품, 결제금액을 (주문자ID, 상품코드별), 회원별 집계, 상품코드별 집계, 전체 합계를 계산하여 주문자ID 순으로 출력하시오. (CUBE 연산, CASE() 함수, GROUPING_ID() 함수 사용)

SELECT CASE GROUPING_ID(ORDER_ID, PRODUCT_CODE) WHEN 0 THEN ORDER_ID
                                                WHEN 1 THEN NULL
                                                WHEN 2 THEN ' 상품 집계'
                                                WHEN 3 THEN ' 전체 합계'
       END "주문자_ID",
       CASE GROUPING_ID(ORDER_ID, PRODUCT_CODE) WHEN 0 THEN PRODUCT_CODE
                                                WHEN 1 THEN ' 회원집계'
                                                WHEN 2 THEN PRODUCT_CODE
                                                WHEN 3 THEN NULL
                                                
                                       
       END "주문상품", TO_CHAR(SUM(CMONEY),'L999,999,999') "결제금액"
FROM   EC_Order
WHERE TO_CHAR(CDATE,'YY/MM') >='18/01' AND TO_CHAR(CDATE,'YY/MM')<='18/03'
GROUP  BY CUBE(ORDER_ID,PRODUCT_CODE)
ORDER BY ORDER_ID;

★연습문제2

1. 주문처리(EC_Order) 테이블에서 결제한 결제년월별로 [결제년월, 주문건수, 주문 수량 합계, 결제 금액 합계]를 계산하여 결제년월순으로 출력하시오.

SELECT TO_CHAR(Cdate, 'YYYY/MM') "결제년월", Count(2) "주문건수",
       SUM(Order_QTY) "주문수량 합계", TO_CHAR(SUM(CMONEY),'L999,999,999')"결제합계"
FROM EC_ORDER
WHERE Cdate IS NOT NULL
GROUP BY TO_CHAR(Cdate, 'YYYY/MM')
ORDER BY 1;

2. 회원관리(EC_Member) 테이블에서 남, 여 회원수를 출력하시오. 단, 성별 코드가 1또는 3이면 남자, 2 또는 4는 여자임.

SELECT DECODE(SUBSTR(REGIST_NO,8,1),1,'남자',2,'여자',3,'남자',4,'여자')
"성별", COUNT(*) "회원수"
FROM EC_MEMBEr
GROUP BY DECODE(SUBSTR(REGIST_NO,8,1),1,'남자',2,'여자',3,'남자',4,'여자');

3. 주문처리(EC_Order) 테이블에서 년월별 결제금액이 가장 많은 금액을 결제년월별순으로 출력하시오.

SELECT TO_CHAR(Cdate, 'YYYY/MM') "결제년월", TO_CHAR(MAX(CMoney),'L999,999,999') "결제최대금액"
FROM   EC_ORDER
WHERE  CDATE IS NOT NULL
GROUP  BY TO_CHAR(Cdate, 'YYYY/MM')
ORDER BY 1;

4. 주문처리(EC_Order) 테이블에서 주문자ID, 주문상품코드, 구매횟수, 결제금액을 (주문자, 상품코드별), 주문자별 소계, 전체 합계를 계산하여 주문자ID순으로 출력하시오. (ROLLUP 연산, CASE() 함수와 GROUPING_ID() 함수 사용)

SELECT CASE GROUPING_ID(Order_ID, Product_Code) WHEN 1 THEN NULL
                                                       ELSE Order_ID
            END "주문자_ID",
            CASE GROUPING_ID(Order_ID, Product_Code) WHEN 1 THEN '     소계'
                                                    WHEN 3 THEN '전체합계'
                                                        ELSE Product_Code
            END "주문상품",
            COUNT(*) "구매횟수", TO_CHAR(SUM(Cmoney),'L999,999,999')"결제금액"
FROM       EC_Order
WHERE      CDate IS NOT NULL
GROUP      BY ROLLUP(Order_ID, Product_Code)
ORDER      BY ORder_ID;

5. 주문처리(EC_Order) 테이블에서 주문자ID, 상품코드, 결제금액을 주문자별, 상품코드별로 계산하여 주문자, 상품코드순으로 출력하시오. (GROUPING SETS 연산)

SELECT Order_ID, Product_Code, TO_CHAR(SUM(Cmoney),'L999,999,999') "결제금액"
FROM   EC_Order
WHERE CDAte IS NOT NULL
GROUP BY GROUPING SETS(Order_ID, Product_Code)
ORDER BY 1,2;

6. 주문처리(EC_Order) 테이블에서 결제자의 결제금액을 이용하여 높은 금액부터 순위를 구하여 [주문자ID, 결제일자, 결제방법, 결제금액, 순위]를 출력하시오.

SELECT Order_ID, CDATE "결제일자", Csel "결제방법", TO_CHAR(CMoney,'L999,999,999') "결제금액",
       DENSE_RANK() OVER(ORDER BY CMoney DESC) "순위"
FROM   EC_Order
WHERE  CDate IS NOT NULL
ORDER BY 4 DESC;

7. 수강임시(T_SG_Scores) 테이블에서 성적 취득한 학번별 과목수, 합계와 평균을 계산하여 [학번, 과목수, 총점, 평균]을 총점 내림차순으로 출력하시오.

SELECT Student_ID, COUNT(1) "과목수", SUM(Score) "총점", AVG(Score) "평균"
FROM   T_SG_Scores
WHERE  Score IS NOT NULL
GROUP  BY STudent_ID
ORder  BY 3 DESC;

8. 수강(SG_Scores) 테이블의 학번별 총점과 평균을 구하고, 평균으로 석차를 구하여 [학번, 총점, 평균, 석차]를 석차순으로 출력하시오.

SELECT Student_ID, SUM(Score) "총점", TO_CHAR(AVG(Score), '99.9') "평균",
       RANK()  OVER(ORDER BY AVG(Score) DESC) "석차"
FROM   SG_Scores
GROUP  BY Student_ID
ORDER  BY 4;

9. 자유게시판(Fress_Board) 테이블의 게시물 행을 수를 출력하고, 게시물의 저장하기 위해 게시판 번호(B_ID)를 구하시오. 단, 게시물 번호는 널이면 1, 그렇지 않으면 게시물번호의 최댓값+1로 한다. (CASE문 사용)

SELECT COUNT(*) "총게시물수" FROM FRee_Board;
SELECT CASE WHEN MAX(B_ID) IS NULL THEN 1
                                    ELSE MAX(B_ID)+1
       END "게시물번호"
FROM   Free_BOARD;

*이 게시글은 Do it! 클론 코딩 영화 평점 웹서비스를 보고 정리한 글입니다.

목차

1. create-react-app으로 리액트 폴더 생성

2. 파일 수정

3. git허브에 리액트 앱 업로드 하기

4. src 폴더 정리하기, index.js, App.js 수정

Movie App (nomadcoders.github.io)

우리가 만들고자 하는 사이트는 위와 같은 영화 평점 웹서비스 사이트이다.

1.  create-react-app으로 리액트 폴더 생성

원하는 위치에 이동후 아래와 같은 명령어를 cmd나 shell, 터미널에 입력

보통 폴더를 하나 만들고 그 위치에 만든다.

npx create-react-app movie_app_2020

다 완료되면 아래와 같은 메시지와 함께 폴더에 여러 파일들이 들어가진다.

아래와 같은 명령어를 또 친다.

 cd movie_app_2020
 npm start

그러면 아래와 같은 화면이 뜰 것이다.

준비단계 끝

터미널 창을 끄면 리액트 앱 연결도 끊기니 터미널은 계속 켜놔야한다.

다음으로 해당 폴더를 비주얼코드로 들어간다.

아래와 같이 많은 파일이 보인다.

2. 파일 수정

README.md 파일 다 지우고 아래와 같이 입력

package.json파일에 test, eject 삭제

3. git허브에 리액트 앱 업로드 하기

git없으면 git 설치 먼저 하기

Git - Downloads (git-scm.com)

1) 명령어 입력

cd movie_app_2020 
git init

2) 깃허브에 저장소 만들기

New repository · GitHub

회원 가입 후 위 사이트 접속

아래와 같이 입력후 create repository입력

.git으로 끝나는 주소가 저장소 주소이다.

3) 아래와 같이 명령어 입력

git add .
git commit -m "02-2깃허브에 리액트 앱 업로드하기"
git branch -M main
git remote add origin https://github.com/windbrain/movie_app_2020.git
git push -u origin main

4) 잘 생성된 것을 볼 수 있다.

4. src 폴더 정리하기, App.js 수정

App.css

App.test.js

index.css

logo.svg

reportWebBitals.js

setupTests.js

package-lock.json

삭제

index.js 정리

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

App.js 정리

function App() {
  return <div className="App"/>;
}
export default App;

정리하고 화면 확인

아무것도 안나오는 것이 정상

출처

Do it! 클론 코딩 영화 평점 웹서비스-니꼴라스

*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.

목차

1. Component

2. Props

3. Props의 특징

4. Props의 사용법

5. Component 만들기

6. Component 렌더링

7. Component 합성

8. Component 추출

1. Component

리액트는 Component 기반구조라는 것을 배웠었다.

리액트는 모든 페이지가 컴포넌트로 구성돼있고 그 컴포넌트는 또다른 여러개 컴포넌트의 조합으로 이뤄져있다.

이런 식으로 레고 블록을 조립하듯 컴포넌트들을 모아서 개발할 수 있는 것이다

아래가 바로 컴포넌트로 페이지를 만든 하나의 예시이다.

리액트의 컴포넌트는 개념적으로는 자바스크립트의 함수와 비슷하다.

기본 메커니즘은 자바스크립트의 함수와 동일하지만 입, 출력이 조금 다르다.

리액트 컴포넌트에서 입력은 바로 다음에 배울 Props라는 것이고

출력은 앞에서 배운 React Element가 된다.

즉 리액트는 어떠한 속성을 입력받아서 그에 맞는 element를 생성하여 리턴해주는 것이다.

이는 마치 붕어빵틀을 통해 붕어빵을 만드는데 슈크림, 팥, 고구마등의 앙코(팥소)를 넣어서 각각의 붕어빵을 만드는 것과 비슷하다.

슈크림, 팥, 고구마 등의 앙코가 props(속성)

붕어빵틀이 Component

만들어진 붕어빵이 element인 것이다.

2. Props

props는 prop이 여러개인 것을 의미하는데 prop는 Property를 줄여서 쓴 것으로 

속성이라는 의미이다.

바로 컴포넌트의 속성이다.

아래 붕어빵 그림을 보면 쉽게 이해할 수 있다.

앙코가 props인 것이다.

실제 예시로 Props를 알아보자.

위 컴포넌트를 A컴포넌트라고 하면 다 같은 컴포넌트에서 생성된 녀석들이지만 각기 다른 이미지와 텍스트를 가지고 있는 것은 아래와 같이 Props가 다르기 때문이다.

Props를 다시 정리하면 다음과 같다.

컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체인 것이다. 

우리가 컴포넌트에 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를 렌더링하고 싶을 때 해당 데이터를 부모 컴포넌트에서  props에 넣어서 전달하는 것이다.

3. Props의 특징

1) 읽기전용(Read-Only)

읽기 전용이라는 것은 값을 변경할 수 없다는 것이다.

따라서 새로운 Props를 Component에 전달해줘야한다. 

제대로 이해하기 위해서는 자바스크립트 함수의 속성에 대해 알아야한다

위의 함수는 입력값이 바로 return이 되므로 입력값이 바뀌지 않는다. 이런 것을 Pure(순수)하다고 한다.

아래의 함수는 입력값이 바뀌게 되므로 Impure(순수x)하다고 한다.

React의 공식 문서에는 다음과 같이 설명하는데

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고

같은 Props에 대해서는 항상 같은 결과를 보여줘야한다는 의미이다.

4. Props의 특징

아래의 코드 같은 경우는 JSX코드인데

아래 그림과 같이 

키=값 형태로 props를 넣을 수 있다.

App 컴포넌트가 나오고

그 안에 Profile 컴포넌트가 나오는데

그 컴포넌트의 Props의 값을 넣어주는 형태이다.

Props의 문자열 외의 값을 넣을 때(정수, 변수, 다른 컴포넌트)는 중괄호를 통해 감싸줘야한다.

props를 전달하면 아래와 같은 자바스크립트 객체가 된다.

그리고 다음과 같이 Props에 중괄호를 사용해 다른 컴포넌트도 넣을 수 있다. 

JSX코드를 사용하지 않은 코드는 다음과 같다.

5. Component 만들기

리액트 컴포넌트는 아래 그림과 같이 Function Component(함수 컴포넌트)와 Class Component(클래스 컴포넌트)로 나뉜다. 

리액트의 초기 버전에서는 Class Component를 많이 사용하였으나 쓰기 불편하다는 이야기가 많아 Function Component를 더 많이 사용하게 되었다.

함수 컴포넌트를 개선하는 과정에서 만들어진 것이 Hook이라는 개념이다. 

1) 함수 컴포넌트

아래와 같은 형태가 함수 컴포넌트로 Welcome 컴포넌트 안에 저렇게 props에 name을 '바보'라고 키=값 형태로 props를 넣으면 {props.name}자리에 바보라고 출력되는 것을 볼 수 있다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 
    <Welcome name="바보"/>
 
);

화살표함수로 나타내면 아래와 같이 쓸 수 있다.

const Welcome=(props)=>{
    return <h1>안녕, {props.name}</h1>;
}

2) 클래스 컴포넌트

클래스 컴포넌트는 함수 컴포넌트에 비해서 몇가지 추가적인 기능을 가진다.

아래의 클래스 컴포넌트 코드는 위의 함수 컴포넌트와 동일한 기능을 수행한다.

모든 클래스 컴포넌트는 Component를 상속받아서 만들어진다.

아래와 같이 Component를 import시켜야 사용가능하다.

import {Component} from 'react';

*상속은 객체지향에서 나오는 개념으로 한 클래스에 변수들과 함수들을 상속받아서 새로 자식 클래스를 만드는 방법이다.

★컴포넌트를 만들 때 주의점

Component 이름은 항상 대문자로 시작해야한다

React는 소문자로 시작하는 component를 DOM 태그로 인식하기 때문이다.

6. Component 렌더링

아래 코드는

Welcome 함수 컴포넌트를 선언하고

element를 생성한 후 생성된 element를 root div태그에 렌더링을 한다.

따라서 name="인제"라는 props값이 props.name이 전달된다. 

7. Component 합성

Component안에는 또 다른 Component를 쓸 수 있기 때문에 복잡한 화면을 여러 개의 Component로 나눠서 구현 가능하다.

아래는 Welcome 컴포넌트의 props를 다르게 해서 Welcome 컴포넌트를 여러번 사용하는 것을 볼 수 있다.

이렇게 여러개의 Component를 합쳐서 또 다른 Component를 만드는 것을 Component 합성이라고 한다.

아래와 같은 형태일때 App Component가 Welcome Component의 부모 컴포넌트인데

부모 컴포넌트에서 아래와 같이 props값을 설정할 수 있다.

8. Component 추출

component합성과는 반대로 복잡한 Component를 여러개의 Component로 쪼개는 것을 Component 추출이라고 한다.

Component 추출을 잘 활용하게 되면 재사용성이 올라가는데  컴포넌트가 작아질 수록 컴포넌트의 기능과 목적이 명확해지고 props도 단순해지기 때문에 다른 곳에서 사용할 수 있을 확률이 높아지기 때문이다.

재사용성이 올라가기 때문에 개발속도도 빨라진다.

아래 코드의 정확한 분석이 아닌 흐름만 봐보도록 하자.

아래와 같은 코드가 있다.

Component 추출을 해보자.

아래와 같이 Avator 컴포넌트로 추출을 했다.

아래와 같이 전보다 깔끔해진 것을 볼 수 있다.

마찬가지로 아래코드를 추출했다.

아래와 같이 코드가 직관적이고 가독성도 높게 바뀌었다.

최종적으로 아래와 같은 형태가 되었다.

참고문헌

1. [무료] 처음 만난 리액트(React) - 인프런 | 강의 (inflearn.com)

*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.

목차

1. Elements란?

2. createElement가 동작하는 과정

3. React elements의 특징

4. Elements 렌더링하기

1. Elements란?

Elements의 영단어는 어떤 물체를 구성하는 요소, 성분이라는 뜻인데

마찬가지로 여기서 배우는 Elements도 리액트 앱을 구성하는 요소를 뜻한다.

아래는 공식사이트에서 elements를 설명하고 있는 문장인데 Elements는 리액트 앱에서 가장 작은 블록들이라고 적혀있다.

이렇게 Chrome 브라우저에서 개발자도구의 Elements에서 볼 수 있는 것은 React Elements가 아니라 Dom Elements이다.

리액트를 개발하기 시작한 아주 초장기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했는데 처음에는 Descriptor이라고 불리다가 최종적으로 나타나는 형태는 DOM Elements여서

통일성을 위해 똑같이 Elements라 부르기로 결정했다.

즉, 아래와 같이 createElement(현재는 다른 방식으로 사용됨)의 결과로 객체가 생성되는데 그게 element이다.

React elements는 앞에서 배웠던 Virtual DOM의 Elements를 나타낸다.

Elements는 화면에서 보이는 것들을 기술하는데 아래와 같은 JSX코드를 작성하면 내부적으로는 JS코드로 변환하여

React Elements가 생성된다 

Element는 HTML에서 태그로 적은 노드들을 지칭하므로 가상DOM에 <h1> element가 만들어지는 것이다.

이 React Elements는 앞에서도 말했지만 자바스크립트 객체 형태로 존재하며 

마음대로 변경할 수 없는 불변성을 가지고 있다

아래는 button을 나타내기위한 Element이다

(JSX코드가 JS코드로 바뀌면서 생성되는 자바스크립트 객체인 element)

위 코드를 렌더링하면 아래와 같은 DOM element가 된다

2. createElement의 동작과정

다시 복습을 하면 아래와 같은 JSX코드를 내부적으로는 바벨이 JS코드로 변환시키는데 그 변환시킨 JS코드가 createElement이고 그 createElement를 사용하면 자바스크립트 객체인 React Element가 만들어진다.

아래는 React.createElement의 구조인데

type에는 문자열로된 html태그나 또다른 React Component가 들어간다.

모든 React Component는 최종적으로는 html태그를 사용하게된다.(하나의 컴포넌트는 여러개의 자식 컴포넌트로 구성되며 그 자식 컴포넌트를 분해하면 결국 html태그가 남게 된다)

props는 일단 간단하게 속성이라고 생각하면 되는데 태그에 class나 style같은 속성을 attribute라고 하는데 이 attribute보다 상위에 있는 복잡한 개념이고 일단 대충 속성이라는 것이라고 알고 넘어가자.

children은 해당 element의 자식 element가 여기 들어가게 된다.

아래에는 Button 컴포넌트와 ConfirmDialog 컴포넌트가 있는데

ConfirmDialog 컴포넌트가 Button 컴포넌트를 포함하고 있다

이런 ConfirmDiag 컴포넌트의 element의 형태는 어떻게 될까?

바로 다음과 같이 된다. 

1번째 children은 p태그이고

2번째 children은 리액트 component인 Button component이며

confirmdiag컴포넌트 element는 button컴포넌트의 element를 만들어서 합치게 된다

그래서 최종적으로 confirmDiag 컴포넌트의 element의 형태는 다음과 같다.

3. React elements의 특징

1) 불변성(immutable)

Element가 변하지 않는다면 화면이 어떻게 업데이트되는 것인가 궁금할 것이다.

아래는 붕어빵을 예로 든 것이다.

붕어빵 틀로 붕어빵을 만드는데 안에 있는 붕어빵 앙코(팥소)를 바꿀 수 없는 것과 같은 이치이다.

앙코를 바꿀 순 없으니 새로 붕어빵을 만들어서 바꿔치기 하면 된다.

Virtual DOM의 개념을 다시한번 상기시키면 된다.

바뀐 Element를 업데이트한다.

리액트로 개발을 하다보면 상태관리와 더불어 화면이 얼마나 자주바뀌는지가 성능에 큰 영향을 미친다

4. Elements 렌더링하기

element를 만든 이후 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다

먼저 아래 코드를 보자.

아래 코드는 id가 root인 div태그이다.

아주 간단한 코드이지만 모든 리액트 앱에 들어가는 아주 중요한 코드이다.

실제로 이 div 태그안에 react element가 렌더링되며 이것을 root DOM node라고 한다.

div태그에 들어있는 모든 것이 react element에 의해 관리된다. 

오직 리액트만으로 만들어진 모든 웹사이트들은 단 하나의 root DOM node를 가지며

기존에 있는 웹사이트에 리액트를 추가적으로 연동하게 되면 여러개의 분리된 수많은 root DOM node를 가질 수 있다

아래와 같이 최상단에 있는 node가 Root DOM Node이다

위 같은 div태그에react element를 렌더링하기 위해서는 다음과 같은 코드를 사용한다

element를 먼저 생성하고 생성된 element를 root div태그에 렌더링하는 코드이다.

이때 사용되는  render라는 함수는 render(a , b )의 형태에서

react elements인 a를 

html elements(Dom elements)인 b에 렌더링하는 역할을 한다.

오늘의 핵심은 다음과 같다.

element는 한번 생성되면 바뀔 수 없으므로 업데이트를 하기 위해서는 다시 생성해야한다.

참고문헌

1. [무료] 처음 만난 리액트(React) - 인프런 | 강의 (inflearn.com)

*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.

목차

1. JSX란?

2. JSX의 역할

3. JSX의 장점

4. JSX 사용법

5. React에서 Style 적용하는법

6. 주석 다는법

1. JSX란? 

JSX는 자바스크립트 확장 문법이라는 의미로 자바스크립트의 문법을 확장시킨 것이다.

JSX는 JavaScript와 XML/HTML을 합친 것이라고 보면 된다.

아래는 간단한 JSX코드이다.

왼쪽은 자바스크립트 문법이고 오른쪽은 html처럼 생겼는데 이게 뭔 식이지 생각했을텐데..

이 코드가 자바스크립트코드와 html코드가 결합돼있는 JSX코드인 것이다.

2. JSX의 역할

JSX코드는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 된다.

아래는 Hello라는 이름의 React Component가 나오고 Component 내부에 JSX코드가 사용된 것을 볼 수 있다. 

그리고 이렇게 만든 컴포넌트를 ReactDom의 redner 함수를 이용해 실제 화면에 렌더링을 하고 있다. 

위와 아래 코드는 완전 동일한 동작을 하는 코드이다.

JSX코드도 내부적으로는 createElement를 사용하도록 변환되기 때문이다.

이렇게 JSX코드를 내부적으로는 createElement로 변환해주는 녀석이 Babel이라는 녀석이다.

Babel이라는 JavaScript Compiler가 해주는 역할이며

Babel의 수많은 플로그인 중 JSX를 JS로 변환해주는 것을 일반적으로 JSX Transform이라고 부른다.

createElement의 결과로는 아래와 같은 객체가 생성된다.

객체는 자바스크립트에서 key와 value의 쌍으로 이루어진 집합을 의미한다.

React는 객체를 읽어서 DOM을 만들어서 사용하고 항상 최신 상태를 유지한다.

React에는 이 객체를 element라고 한다.

type은 element의 유형을 나타내고(div태그나 span태그 같은 html태그가 올 수 도 있고 다른 react 컴포넌트가 올 수 도 있음)

props는 속성이 들어가고

children는 이 element가 포함하고 있는 자식 element라고 보면 된다.

이렇게 JSX를 사용하기 위해서는 React.createElement로 의존해야했었는데 성능을 향상시키지 못하는 문제점이 있었다.

그래서 현재 리액트에서는 아래와 같은 형태로 JSX Transform이 별도로 분리되었고

Babel에서는 이것을 이용하여 JSX를 JS로 변환하게 된다.

function App() {
  return <h1>Hello World</h1>;
}

위 같은 JSX코드를 내부적으로는 아래와 같은 JS로 변환해주는 것이다.

import {jsx as _jsx} from 'react/jsx-runtime';
 
function App() {
  return _jsx('h1', { children: 'Hello world' });
}

리액트에서 JSX를 쓰는 것이 필수는 아니지만 JSX를 사용하면 장점들이 많기 때문에 편리해진다.(생산성, 가독성)

3. JSX의 장점

1) 간결한 코드, 가독성 향상, 버그발견하기 쉬움

2) Injection Attacks 방어해서 보안 향상

Injection Attack은 쉽게 말해서 입력창에 문자나 숫자같은 값이 아닌 소스코드를 입력하여 해당 소스코드가 실행되게 만드는 수법으로 예를 들어 아이디를 넣는 입력창에 자바스크립트 코드를 넣었는데 그 코드가 그대로 실행돼버리면 문제가 생길 수 있을 것이다. 

기본적으로 ReactDOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환한다.

그래서 명시적으로 선언되지 않은 값은 괄호사이에 들어갈 수 없다

이것이 결과적으로 XSS를 막을 수 있다. 

*임베딩 :  사람이 쓰는 자연어를 기계가 이해할 수 있는 숫자의 나열인 벡터로 바꾼 결과 혹은 그 과정 전체를 의미한다.

4. JSX 사용법

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸야 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

아래와 같이 최종적으로는 하나의 요소로 감싸줘야한다.

기본적으로 자바스크립트를 확장한 것이므로 모든 자바스크립트 문법을 지원한다.

XML/HTML 코드를 사용하다가 중간에 JavaScript 코드를 사용해야할 때는 {} 중괄호를 사용한다.

태그의 속성에 값을 넣고싶을 때는 큰따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 된다.

5. React에서 Style 적용하는법

html에서 style을 바로 적용하는 방법을 인라인 스타일 시트라고 하는데 

<p style="color: blue">Lorem ipsum dolor.</p>

이런 인라인 스타일링을 리액트에서는 다음과 같이 표현한다.

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어줘야하는 것이다.

자바스크립트 코드니까 중괄호가 있는데 객체형태이므로 또 중괄호가 생겨 이중 중괄호 형태가 된 것이다.

또한 스타일 이름 중에서 background-color처럼 -문자가 포함되는 이름은 -문자를 없애고 카멜 표기법으로 작성한다.

background-color는 backgroundColor로 작성한다.

<p style={{color: blue}}>Lorem ipsum dolor.</p>

일반 HTML에서 CSS 클래스를 사용할때는 class 속성을 사용하지만 JSX에서는 class가 아닌 className으로 설정해줘야한다.

HTML에서는 <input>태그 처럼 닫아주지않아도 작동하지만 JSX에서는 <input/>태그 처럼 무조건 닫아줘야한다.

6. 주석 다는법

JSX 내부에서 주석을 작성할때는 {/*   */} 형식으로 작성한다.

참고문헌

1. [무료] 처음 만난 리액트(React) - 인프런 | 강의 (inflearn.com)

2. babel-plugin-transform-react-jsx - npm (npmjs.com)

3. Introducing the New JSX Transform – React Blog (reactjs.org)

4. 리액트를 다루는 기술-김민준

*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.

목차

1. 직접 리액트 연동하는 법

2. create-react-app

3. create-react-app하면 생성되는 파일 구성

4. react 파일의 기본 구조

1. 직접 리액트 연동하는 법

아래와 같이 index.html 파일을 보면 <div id="root"></div>를 볼 수 있는데

DOM Container(Root DOM Node)으로 

일단은 Virtual DOM의 시작점이라고 알고 넘어가자.

script태그를 이용해 리액트와 리액트 컴포넌트를 가져온다.

<html> <!-- index.html -->
    <head>
        <title>소플의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>소플의 블로그에 오신 여러분을 환영합니다!</h1>
 
        <div id="root"></div>
 
        <!-- 리액트 가져오기 -->
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js " crossorign></script>
 
        <!-- 리액트 컴포넌트 가져오기 -->
        <script src="MyButton.js"></script>
    </body>
</html>

css는 리액트 구동과는 관련없으므로 안해줘도 상관없다.

h1{  /*styles.css*/
    color:green;
    font-style:italic;
 
}

My button.js 파일인데 무슨 말인지 모르겠지만 우선 그냥 타이핑하고 넘어가자.

//My button.js
 
function MyButton(prpos){ 
    const [isClicked, setIsClicked] = React.useState(false);
 
    return React.createElement(
        'button',
        {onClick: () => setIsClicked(true)},
        isClicked ? 'Clicked!': 'Click here!'
    )
}
 
const domContainer=document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton),domContainer);

위의 파일을 실행시키면 아래와 같은 화면이 나오며

Click here! 버튼을 클릭하면 Clicked!로 바뀌는 것을 볼 수 있다

이것은 리액트 컴포넌트의 state가 변경됐기 때문이다

지금까지 한 과정은 HTML로 아주 간단한 웹사이트를 만든 뒤 웹사이트에 <script></script>를 이용해 리액트를 추가한 뒤 실제로 리액트 Component까지 만들어서 렌더링을 해보았다.

리액트로 웹사이트를 만들 때마다 이러한 환경설정을 해야한다면 굉장히 번거롭기 때문에 

곧바로 리액트 프로젝트를 만들 수 있도록 리액트를 자동으로 생성해주는 create-react-app 패키지를 이용한다

2. create-react-app

리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 들어있는 상태로 프로젝트를 생성해주는 도구이다.

(이전에는 웹팩, 바벨과 같은 도구가 필요했다)

이것을 사용하기 위해서는 우선 아래와 같이 Node.js, npm, VS Code가 필요하다

create-react-app은 npx명령어를 사용하면 실행할 수 있다.

명령어는 VS COde의 터미널이나 Powershell, cmd 아무데서나 해도 괜찮다.

npx create-react-app my-app을 하면 아래와 같이 뜨면서 만들어진다.

my-app자리에는 이름 아무거나 해도 상관없다.

실행이 다 됐다면

cd my-app  (엔터)

npm start (엔터)

를 해주면 된다.

cd는 change directory의 약자로 경로 변경을 해준다. 

cd명령어를 이용해 create-react-app으로 만든 my-app폴더안으로 경로를 이동시킨후 npm start(애플리케이션)을 실행시킨다.

아래와 같이 웹 브라우저가 뜨는 것을 알 수 있다.

그 후 VS Code IDE에 들어가면 해당경로에 아래와 같이 파일이 생성된 것을 볼 수 있다.

3. create-react-app하면 생성되는 파일 구성

1) READ.md

프로젝트의 내용을 설명하기 위해 사용하는 파일로써 프로젝트가 어떤 목적에 의해 개발되었는지, 어떻게 사용할 수 있는지 등을 적어 놓는 파일

이 파일은 깃허브 업로드 이후 확인 가능

2) package.json

프로젝트에 대한 설명, 종속성 패키지, 실행 스크립트 등의 정보를 담는 매니페이스(Manifest) 파일

3) favicon.ico

브라우저 제목과 함께 표시되는 아이콘

4. react 파일의 기본 구조

▶import 구문(불러오기)

import는 특정 파일을 불러오는 것을 의미하는데 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import파일을 사용하여 다른 파일들을 불러와 사용할 수 있다.

*이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에 없던 기능인데 이렇게 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다. 

이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용하는데 번들은 묶는다는 뜻으로 파일을 묶듯이 연결한다는 것이다.

리액트 프로젝트에서는 번들러를 주로 웹팩으로 사용하는데 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해준다.

index.js를 시작으로 필요한 파일을 다 불러와서 번들링하게 된다.

웹팩에서 이렇게 파일들을 불러오는 것을 웹팩의 로더 기능이라고 하는데 이 덕분에 SVG, CSS, 웹 폰트, 미디어 파일 등을 불러올 수 있게 되는 것이다.

웹팩의 로더는 원래 직접 설치하고 설정해야 하지만 create-react-app이 번거로운 작업을 모두 대신 해주기에 별도의 설정이 필요 없다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

▶export 구문(내보내기)

export default App;

참고문헌

1. [무료] 처음 만난 리액트(React) - 인프런 | 강의 (inflearn.com)

2. Do it! 클론 코딩 영화 평점 웹서비스-니꼴라스

3. 리액트를 다루는 기술-김민준

*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.

목차

1. 리액트란?

2. 리액트의 장점1-빠른  업데이트와 렌더링 속도

3. 리액트의 장점2-컴포넌트 기반 구조

4. 리액트의 단점

1. 리액트란?

UI를 만들기위한 자바스크립트 라이브러리

사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집

SPA를 쉽고 빠르게 만들 수 있게 해주는 도구

라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것

★프레임워크와 라이브러리

프레임워크는 뼈대나 기반구조를 뜻하는데 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발한다.

앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래스, 메서드등을 구현한다.

라이브러리는 소프트웨어를 개발할 때 컴퓨터 프로그램에 필요한 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다. 

프레임워크와 라이브러리의 차이점은 제어 흐름의 권한이 어디에 있는가인데

라이브러리의 경우 사용자가 개발 시 필요한 기능이 있을경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 쓰는 식으로 직접 코드의 흐름을 제어해야하지만

프레임워크는 애플리케이션의 코드가 있는데 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그안에 필요한 코드를 작성하게 된다. 

즉, 프레임워크는 양식이 있는 글 작성, 라이브러리는 자유양식 글 작성 이렇게 생각하면 될 듯하다.

2. 리액트의 장점1- 빠른 업데이트와 렌더링 속도

렌더링은 사용자 화면에 뷰를 보여 주는 것을 말하는데 이런 렌더링 과정을 리액트에서는 render라는 함수가 담당한다.

render 함수는 뷰가 어떻게 생겼고 작동하는지에 대한 정보를 지닌 객체를 반환한다.

따라서 초기렌더링은 렌더링을 하고 렌더링 작업을 통해 얻은 정보들을 이용하여 HTML 마크업(<div>..</div> 같은거)을 만들고 그것을 실제 페이지 DOM 요소 안에 주입한다.

여기서 말하는 업데이트는 웹사이트에서 화면에 나타나는 내용이 바뀌는 것이라고 생각하면 되는데

업데이트 될 때는 변화에 따라 뷰가 변형되는 것이 아니라 새로운 요소로 갈아끼우는 것이며

새로운 데이터를 가지고 redner 함수가 또 다시 호출돼서 그 데이터를 지닌 뷰가 생성되게 된다.

render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 정보와 현재  render함수가 만든 정보를 비교한다.

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 하는 것이다.

이 것이 뒤에 나오는 Virtual Dom에 대한 기본 개념이다.

Dom부터 차근차근 다시 알아보자.

★Virtual DOM

1> DOM(Document Object Model)이란?

웹페이지를 정의하는 하나의 객체

하나의 웹사이트에 대한 정보를 담고 있는 큰 그릇

웹페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 끔 브라우저가 트리 구조로 만든 객체 모델

DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

Dom의 단점은 잦은 DOM 업데이트는 오류와 UI에 악영향을 미친다

ex) 광고창 하나가 바뀌었다고해도 전체 페이지를 계속 업데이트를 해야한다.

*문서 객체란 html, head, body 같은 태그들을 javacsript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.

*자바스크립트가 html 태그를 조작 할수 있는 이유는 Document라는 전역 객체를 통해 접근하기 때문이다.(window는 document 객체의 상위에 위치)

1-1>웹페이지가 빌드 되는 과정

브라우저가 HTML 파일을 읽어와서 화면에 띄워주는 과정을 'critical rendering path'라고 하는데

이 과정을 2가지로 나누면

(1) 브라우저가 HTML과 CSS를 파싱하여, 화면에 어떤 것이 보여지게 되는지 결정하는 과정

(2) 브라우저가 렌더링하는 과정

으로 나뉜다.

(1)번 과정을 거치면 렌더트리가 만들어지며 렌더트리는 HTML element와 그에 대응하는 스타일을 표현한 것이다.

1-2> DOM은 어떻게 만들어지는가?

DOM은 HTML문서를 객체 기반으로 표현한 것이며

객체기반인 이유는 HTML의 구조와 내용을 바꿔서 다양한 프로그램에서 쉽게 사용할 수 있게 하기 위함이다.

DOM의 객체 구조는 노드 트리라고도 불리는데 DOM을 루트에서부터 여러 노드들이 가지치며 나오는 트리로 생각할 수 있기 때문이다.

1-3>DOM의 특징

①DOM은 원본 HTML이 아니다

DOM은 유효한 HTML문서에 대한 인터페이스이며

HTML을 파싱하며 DOM을 생성하는 과정에서, 브라우저는 HTML에서 문제가 있는 것들을 고칠 수 있다. 

②DOM은 브라우저에서 보여지는 것이 아니다

브라우저 화면에서 보여지는 것은 렌더트리이며 렌더트리는 DOM과 CSSOM을 합쳐져서 구성하게 된다.

1-4> DOM Node와 Element의 차이

DOM은 Node의 계층 구조로 이루어져 있으며 HTML에서 그냥 텍스트도 하나의 노드가 된다.

노드 타입은 여러가지가 있는데 그 타입중 Node.ELEMENT_NODE가 Element를 의미한다.

ELement는 HTML에서 태그로 적은 노드들을 지칭한다.

예를 들어 <html>, <div>, <title>과 같은 태그들은 전부 element이다.

DOM에 대해 더 알고싶으면 아래링크를 참고하기 바란다.

DOM은 무엇인가? DOM Node와 Element의 차이 (velog.io)

1-3> DOM은 느린가?

요즘 흔히 접하는 큰 규모의 웹 애플리케이션(트위터, 페이스북)은 스크롤을 내릴수록 수많은 데이터가 로딩되는데 이런 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 느려지게 되는데

이를 두고 요즘 자바스크립트 엔진은 매우 빠른 반면, DOM은 느리다고 하는데 정확한 말은 아니다

DOM 자체는 빠르고 자바스크립트 객체를 처리할 때의 성능과 비교하여 다르지 않지만

웹 브라우저에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트하는 렌더링 과정에서 시간이 허비되는 것이다. 

이렇게 느려지는 것에 대한 해결책으로 Virtual Dom 방식이 등장하게 되었다.

2>Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

기존 DOM의 복사본을 만들어서 비교후 업데이트 된 부분만 실제 DOM에 적용하는 것이다.

Virtual DOM을 사용한다고 해서 무조건 빠른 것이 아니다.

리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고 또 작업이 매우 간단할 때는 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다.

리액트와 Virtual Dom이 언제나 제공할 수 있는 것은 업데이트 처리 간결성이다.

업데이트하는 과정에서 생기는 복잡함을 해소하고 쉽게 업데이트에 접근할 수 있다

3> Dom과 Virtaul DOM의 차이

Real DOM은 페이지에 업데이트할 사항이 있으면 전체 문서가 업데이트되지만 

Virtual DOM은 기존의 Virtual DOM과 비교하여 변경된 사항만 Real Dom에 업데이트 된다.

3. 리액트의 장점2-컴포넌트 기반 구조

Component는 구성요소라는 뜻을 가지는데 리액트는 모든 페이지가 컴포넌트로 구성돼있고 한 컴포넌트는 또 여러개의 다른 컴포넌트로 이루어져 있다.

마치 레고 블록 조립하듯 컴포넌트들을 모아서 개발하는 것과 같다.

아래는 에어비앤비 사이트를 스크린샷한 것인데 이 웹사이트도 리액트로 만들어져 있다.

아래 사진과 같이 A는 여행할 지역을 나타내는 컴포넌트이고 B라는 컴포넌트는 체험할 지역을 나타낸다.

리액트로 만든 웹사이트는 수많은 컴포넌트의 조합으로 이루어져있다.

★ 컴포넌트 구조의 장점

1) 재사용성(Reusuability)

재사용성은 말그대로 다시 사용가능한 성질을 의미하는데 재활용과는 사뭇 다르다.

재활용은 다시 활용 가능한 자원을 가공하여 새로운 제품을 만드는 것이고 재사용은 계속해서 재사용이 가능한 성질을 의미한다.

물리적인 물질은 쓰면 쓸수록 닳기 때문에 기본적으로 재사용이 불가능해서 주로 소프트웨어 분야에서만 쓰인다.

모든 소프트웨어가 재사용되는 것은 아닌데 그 이유는 의존성이나 다양한 호환성문제가 발생할 수 있기 때문이다.

그래서 소프트웨어 개발을 할 때 재사용성이 높게 개발해야한다고 하는데 이 말의 의미는 해당 소프트웨어의 모듈이 다른 소프트웨어에서도 쉽게 사용할 수 있어야 함을 의미한다.

*재사용성의 장점

4. 리액트의 단점

1) 방대한 학습량

모든 라이브러리 언어가 그렇지만 특히 리액트의 경우 기존과는 다른 방식의 UI 라이브러리라서 배워야할 것이 많다.

2) 높은 상태관리 복잡도

state는 쉽게 말해 리액트 Component의 상태를 의미하는데 웹사이트의 규모가 커져 Component의 개수가 많아지면 상태 관리 복잡도가 증가된다.

앞에서 Virtual Dom이 바뀐 부분만 업데이트 한다고 했는데 여기서 바뀐 부분은 state가 바뀐 Component를 의미한다

그래서 큰 규모의 프로젝트의 경우 상태관리를 위해 외부 상태관리 라이브러리를 사용하는 경우가 많다.

참고문헌

1. [무료] 처음 만난 리액트(React) - 인프런 | 강의 (inflearn.com)

2. [개발상식] 프레임워크(Framework) 와 라이브러리(Library)의 차이 :: 코딩 공부 일지 (tistory.com)

3. [React] DOM이란? 가상 돔 (Virtual DOM )이 나오게 된 이유 (tistory.com)

4. 리액트를 다루는 기술-김민준

5. Virtual dom과 Real dom의 차이 (velog.io)

6. DOM은 무엇인가? DOM Node와 Element의 차이 (velog.io)

★연습문제1

1. 회원관리(EC_Member) 테이블의 주민등록번호를 이용하여 성별을 추출하고, 성별이 '1' 또는 '3'일 때 '남자', '2' 또는 '4'일 때 '여자'로 변환하여 성별순으로 출력하시오.

SELECT NAME, REGIST_NO,DECODE(SUBSTR(REGIST_NO,8,1),'1','남','2','여',
                                                    '3','남','4','여')
                                                    AS 성별
FROM EC_MEMBER
ORDER BY 3;

2. 회원관리(EC_Member) 테이블을 이용하여 각 회원의 [회원명, 주민등록번호, 나이, 기준년월일]을 출력하시오. 단 , 기준녀월일은 SYSDATE로 한다.

SELECT NAME,REGIST_NO,EXTRACT(YEAR FROM SYSDATE)
       -(DECODE(SUBSTR(REGIST_NO,8,1),'1', '19','2','19','20') || 
       SUBSTR(REGIST_NO,1,2)) +1 AS 나이,
       TO_CHAR(SYSDATE,'YYYY/MM/DD') AS 기준년월일
FROM EC_Member
ORDER BY 3;

3. 주문처리(EC_Order) 테이블에서 결제 후 배달하지 않은 상품에 대하여 [주문자ID, 상품코드, 수량, 결제금액, 결제 후 지난 일자, 기준일]을 계산하여 출력하시오. 단, 기준일은 SYSDATE임.

SELECT ORDER_ID, PRODUCT_CODE AS 주문상품,ORDER_QTY AS 수량,
       TO_CHAR(CMONEY,'L99,999,999') AS 결제금액, 
       TO_DATE(TO_CHAR(SYSDATE,'YYYYMMDD'),'YYYYMMDD') 
       - TO_DATE(TO_CHAR(CDATE,'YYYYMMDD'),'YYYYMMDD') "결제 후 일자",
       TO_CHAR(SYSDATE,'YYYY/MM/DD') AS 기준일
FROM EC_Order
WHERE GUBUN='결제' AND MDATE IS NULL;

4. 단가가 100만원 이상인 상품에 대하여 10% 할인하려고 한다. 상품관리(EC_Product) 테이블에서 해당 상품의 10%할인된 금액을 형식에 맞추어 출력하시오.

SELECT PRODUCT_CODE,PRODUCT_NAME,
       TO_CHAR(UNIT_PRICE,'L99,999,999') AS 단가,
       TO_CHAR(UNIT_PRICE*0.9,'L99,999,999') "10%할인된금액"
FROM EC_Product
WHERE UNIT_PRICE>=1000000;

5. 주문처리(EC_Order) 테이블의 구분(Gubun) 칼럼 값이 '배달'을 제외하고, '결제'이면 '배달준비', '미결'이면 '결제대기', '취소'이면 '반품', 그렇지 않으면 '대기'로 변경하여 [주문자ID, 상품코드, 결제금액, 결제일자, 구분]의 처리내용을 출력하시오.

SELECT ORDER_ID,PRODUCT_CODE,CMONEY AS 결제금액,TO_CHAR(CDATE,'YY/MM/DD') AS 결제일자,
       DECODE(SUBSTR(GUBUN,1,2),'결제','배달준비'
                                ,'미결','결제대기'
                                ,'취소','반품','대기')AS 처리내용
FROM EC_Order
WHERE NOT GUBUN='배달';

★연습문제2

1. 회원관리(EC_Member) 테이블에서 '서울' 거주자에 대하여 회원명의 성씨를 출출하여 [회원명, 성, 전화번호, 주소]를 출력하시오.

SELECT NAME, SUBSTR(NAME,1,1) AS 성,TELEPHONE,ADDRESS
FROM   EC_Member
WHERE Address LIKE '서울%'
ORDER BY 1;

2. 상품관리(EC_Product) 테이블에서 모든 컴퓨터 제품의 재고수량을 단위와 결합하여 [상품코드, 상품명, 단위, 재고수량, 생샌처]를 출력하시오. CONCAT()함수

SELECT Product_Code,Standard, CONCAT(Left_Qty,Unit) "재고수량",
Company
FROM Ec_product
WHERE Product_Name LIKE '%컴퓨터%';

3. 주문처리(EC_Order) 테이블에서 결제금액이 100만원 이상 결제한 주문자의 결제일자(CDATE를 년월('YYYY/MM') 형식으로 변환하여 출력하시오.

SELECT Order_ID, Product_Code, CMoney,CDate "결제일자",
       TO_CHAR(Cdate, 'YYYY/MM') "결제년월"
FROM   EC_Order
WHERE  CDATE IS NOT NULL AND CMONEY >=1000000
ORDER  BY CDate;

4. 회원관리(EC_Member) 테이블에서 현재일자(SYSDATE) 기준으로 회원가입기간을 'xx년 xx월'로 계산하여 1년 이상인 회원을 출력하시오.

SELECT Name, REGIST_NO, TimeStamp "가입일자",
       Trunc(MONTHS_Between(Current_DATE,Timestamp) /12) || '년' ||
       MOD(Trunc(MONTHS_Between(Current_Date,Timestamp)),12)||'월' AS 가입기간,
       CURRENT_DATE "기준일자"
FROM   EC_MEMBER
WHERE  Trunc(MONTHS_Between(Current_Date, Timestamp)/12) >=1
ORDER  BY 1;

5. 주문처리(EC_Order) 테이블에서 결제한 회원중 '신용카드'로 결제한 회원에 대하여 EXTRACT() 함수를 이용하여 결제년도와 결제 월을 추출해 보시오.

SELECT Order_ID, CMoney, Csel, Cdate,
       ExTRACT(YEAR FROM CDATE) "결제년도",
       EXTRACT(MONTH FROM CDATE) "결제 월"
FROM   EC_Order
WHERE  CDATE IS NOT NULL AND Csel='신용카드'
ORDER  BY 4;

6. 수강임시(T_SG_Scores) 테이블에서 CASE 함수를 이용하여 등급을 산출하고, [학번, 과목코드, 성적, 등급, 성적취득일자]를 출력하시오.

UPDATE T_SG_Scores
SET    GRADE = CASE WHEN Score BETWEEN 95 AND 100 THEN 'A+'
                    WHEN Score BETWEEN 90 AND 94  THEN 'A'
                    WHEN Score BETWEEN 85 AND 89  THEN 'B+'
                    WHEN Score BETWEEN 80 AND 84  THEN 'B'
                    WHEN Score BETWEEN 75 AND 79  THEN 'C+'
                    WHEN Score BETWEEN 70 AND 74  THEN 'C'
                    WHEN Score BETWEEN 65 AND 69  THEN 'D+'
                    WHEN Score BETWEEN 60 AND 64  THEN 'D'
                                                  ELSE 'F'
                    END
WHERE  GRADE IS NULL;
 
SELECT*FROM T_SG_SCores;
COMMIT;

7. 수강임시(T_SG_Scroes)테이블에서 'C1801'학번의 성적을 5로 나누어 몫과 나머지를 계산하여 [학번, 과목코드, 성적, 몫, 나머지]를 출력하시오.

SELECT Student_ID, Course_ID, Score, Floor(Score/5)"몫",MOD(Score,5)"나머지"
FROM   T_SG_Scores
WHERE  Student_ID='C1801'
ORDER  BY 3 DESC;

8. 수강임시(T_SG_Scores) 테이블에서 CASE 함수를 이용하여 'C1801' 학번의 등급이 'A+'이면 4.5, 'A'이면 4.0, 'B+'이면 3.5, 'B '이면 3.0, 'C+'이면 2.5, 'C'이면 2.0, 'D+'이면 1.5, 'D'이면 1.0, 'F'이면 0.0을 출력하시오.

SELECT Student_ID, Course_ID, Grade,
       CASE Grade When 'A+' THEN '4.5' WHEN 'A ' THEN '4.0'
                  When 'B+' THEN '3.5' WHEN 'B ' THEN '3.0'
                  When 'C+' THEN '2.5' WHEN 'C ' THEN '2.0'
                  When 'D+' THEN '1.5' WHEN 'D ' THEN '1.0'
                            ELSE '0.0'
       END "평점"
FROM   T_SG_Scores
WHERE  Student_ID='C1801';

9. 과목임시(T_Course) 테이블에서 추가수강료(Course_fees)가 널인 행에 대하여 널 값을 0으로 변환하여 출력하시오.

SELECT Course_ID, Title,C_Number,Professor_ID, NVL(Course_fees,0)
FROM   T_Course
WHERE  Course_fees IS NULL;

10. 기준일자(CURRENT_DATE)에 5일을 더하고, 기준시간에 4시간을 더하여 출력하시오.

ALTER SESSION SET NLS_DATE_FORMAT='YYYY/MM/DD HH24:MI:SS';
 
SELECT CURRENT_DATE "기준일자와 기준시간", CURRENT_DATE+5 "5일 후",
       CURRENT_DATE+4/24 "4시간 후"      FROM DUAL;

11. 상품관리(EC_Product)테이블에서 상품명을 '개인용컴퓨터', '노트북컴퓨터', '프린터', 'TV', 기타 출력순서로 1순위, 단가 내림차순을 2순위로 출력하시오.

SELECT Product_Code, Product_Name, Unit_Price, Company
FROM   EC_Product
ORDER  BY CASE Product_Name WHEN '개인용컴퓨터' THEN 1
                            WHEN '노트북컴퓨터' THEN 2
                            WHEN '프린터'      THEN 3
                            WHEN 'TV'         THEN 4
                                              ELSE 5
          END, 3 DESC;