⭐Back-end

Oracle

문자열 더하기 연산자

SELECT NAME || '(' || ID || ')' FROM MEMEBER; -- 모든 회원의 이름에 ID를 붙여서 나타내기

비교 연산자

SELECT * FROM NOTICE WHERE WRITER_ID = 'minju'; --1. 게시글 중 작성자가 'minju'인 게시글만 조회
SELECT * FROM NOTICE WHERE HIT > 3; --게시글 중 조회수가 3을 넘는 글만 조회
SELECT * FROM NOTICE WHERE CONTENT IS NOT NULL; --2. 게시글 중 내용을 입력한 게시글 조회

1. 게시글 중 작성자가 'minju'인 게시글만 조회
   
2. 게시글 중 내용을 입력한 게시글 조회
   

관계 연산자

SELECT * FROM NOTICE WHERE HIT BETWEEN 0 AND 2; --1. 조회수가 0이상 2이하인 게시글 조회
SELECT * FROM NOTICE WHERE HIT IN (0, 2, 7); --조회수가 0, 2, 7인 게시글 조회
SELECT * FROM NOTICE WHERE HIT NOT IN (0, 2, 7); --2. 조회수가 0, 2, 7이 아닌 게시글 조회

1. 조회수가 0이상 2이하인 게시글 조회

2. 조회수가 0, 2, 7이 아닌 게시글 조회
   

패턴 연산자

• %: 길이 제한 X
• _: 길이 제한 O(한 글자)

SELECT * FROM MEMBER WHERE NAME LIKE '이%'; --1. 이름이 '이'로 시작하는 멤버 조회
SELECT * FROM MEMBER WHERE NAME LIKE '이_'; --이름이 '이'로 시작하고 '이' 다음에 한 글자만 존재하는 멤버 조회
SELECT * FROM MEMBER WHERE NAME LIKE '이__'; --2. 이름이 '이'로 시작하고 '이' 다음에 두 글자가 존재하는 멤버 조회
SELECT * FROM NOTICE WHERE TITLE LIKE '%I%'; --3. 제목 사이에 'I'가 들어가는 게시글 조회

1. 이름이 '이'로 시작하는 멤버 조회

2. 이름이 '이'로 시작하고 '이' 다음에 두 글자가 존재하는 멤버 조회

3. 제목 사이에 'I'가 들어가는 게시글 조회

⭐Front-end

CSS, JavaScript

함수 다시 사용하기

• util.js에서 정의한 함수(slideIn)를 list.js에서 사용하기 위해서는 html 코드에 다음과 같이 js 링크를 삽입해줘야 한다.

HTML

<script src="../js/util.js"></script> 
<script src="list.js"></script>

util.js

function slideIn(selector) { // slideIn 함수 정의
    var screen = document.createElement("div");
    var aside = document.querySelector(selector);

    screen.style.position = "fixed"; /*absolute가 아닌 fixed로 변경*/
    screen.style.left = "0px";
    screen.style.top = "0px";

    screen.style.width = "100%";
    screen.style.height = "100%";
    screen.style.backgroundColor = "black";
    screen.style.opacity = 0;
    screen.style.transition = ".5s"; /*0.5초 동안 바뀜*/

    setTimeout(function() { /*setTimeout을 하지 않았을 때는 opacity = 0 다음에 opacity = 0.7이 덮어씌워져서 적용됨*/
                            /*opacity = 0과 opacity = 0.7이 동시에 적용되지 않게 하기*/           
        screen.style.opacity = 0.7;
    }, 0);
    
    document.body.append(screen);


    screen.ontransitionend = function() { // screen의 transition이 끝난 후 아래 이벤트 시작하게 하기

        aside.style.position = "fixed"; 
        aside.style.left = "100%";
        aside.style.top = "0px";

        aside.style.width = "70%";
        aside.style.height = "100%";
        aside.style.zIndex = 10;
        aside.style.backgroundColor = "white";
        aside.style.transition = ".5s"; /*0.5초 동안 바뀜*/

        setTimeout(function() {
            aside.style.left = "30%"
        }, 0);
    }

    screen.onclick = function() {
        // 역방향으로 슬라이드 되도록 애니메이션 설정
        screen.remove();
        aside.style = "";
    }
}

list.js

window.addEventListener("load", function() {
    var header = document.querySelector("#header");
    var menuButton = header.querySelector(".icon-menu");

    menuButton.onclick = function(e) {
        e.preventDefault();  
      
        slideIn("#aside"); // util.js에서 정의한 함수 사용
    };
});

JavaScript

DND로 데이터 정보 알아내기

window.addEventListener("load", function() {
    var section = document.querySelector("#ex9");
    var uploadBox = section.querySelector(".upload-box");

    // ondragover
    uploadBox.ondragover = function(e) {
        e.preventDefault(); 
        
        var valid = e.dataTransfer.types.indexOf("Files") >= 0// 배열에 해당 값이 없으면 -1 반환

        if(!valid) // 유효하지 않은 데이터일 때
            uploadBox.style.backgroundColor = "red";
        else // 유효한 데이터일 때
            uploadBox.style.backgroundColor = "green";
    }

    // ondragleave
    uploadBox.ondragleave = function(e) { // 끌고 온 파일이 uploadBox를 벗어났을 때 배경색 초기화
        uploadBox.style.backgroundColor = "initial";
    }

    // ondrop
    uploadBox.ondrop = function(e) { // uploadBox에 파일을 놓았을 때 배경색 초기화
        uploadBox.style.backgroundColor = "initial";
        e.preventDefault(); 

        console.log(e.dataTransfer.types[0]); // 출력 결과: 'Files' 
        console.log(e.dataTransfer.files[0].name); // 끌고 온 file의 이름
        console.log(e.dataTransfer.files[0].size); // file이 가지고 있는 바이트 수
        console.log(e.dataTransfer.files[0].lastModified); // file이 마지막으로 수정된 시점

        for(var k in e.dataTransfer.files[0])
            console.log(k); // file이 가지고 있는 속성들
    }
});

파일 선택 버튼으로 데이터 정보 알아내기

window.addEventListener("load", function() {
    var section = document.querySelector("#ex9");
  
    var selButton = section.querySelector(".btn-sel");
    var fileButton = section.querySelector(".btn-file");
        
    // fileButton을 통해 선택한 파일의 데이터 정보를 알아낼 수 있음
    fileButton.onchange = function(e) { // 파일 선택 버튼을 눌러 원하는 파일을 선택한 후 열기 버튼을 누르거나, 원하는 파일 더블 클릭 시 함수가 실행됨
        console.log("change");
    }; 

    // 파일 정보를 얻어내는 시점: oninput이 더 빠름, 일반적으로 입력상자에서 값을 꺼낼 때는 oninput 사용
    fileButton.oninput = function(e) { // 파일 선택 버튼을 눌러 원하는 파일을 선택한 후 열기 버튼을 누르거나, 원하는 파일 더블 클릭 시 함수가 실행됨      
        for(var k in fileButton.files[0]) // 선택한 file이 가지고 있는 속성들
            console.log(k); 
            
        console.log(e.dataTransfer.files[0]); // 이벤트 객체를 통해서는 선택한 파일을 얻어낼 수 없음
    }; 

    selButton.onclick = function(e) {
        var event = new MouseEvent("click", {
            'view': window,
            'bubbles': true, 
            'cancelable': true
        });

       fileButton.dispatchEvent(event); 
    }
});