⭐Back-end

SQL

View

사용자에게 접근이 허용된 자료만을 제한적으로 보여주기 위해 하나 이상의 기본 테이블로부터 유도된, 이름을 가지는 가상 테이블이다.

SELECT N.ID, N.TITLE, N.WRITER_ID, N.REGDATE, N.HIT, N.FILES, M.NAME WRITER_NAME, COUNT(C.ID) CMT_COUNT --N.ID, N.TITLE, N.WRITER_ID, M.NAME WRITER_NAME 이것을 기준으로 집계하겠다는 말
FROM 
    NOTICE N 
    LEFT JOIN MEMBER M ON N.WRITER_ID = M.NICNAME
    LEFT JOIN "COMMENT" C ON N.ID = C.NOTICE_ID
GROUP BY N.ID, N.TITLE, N.WRITER_ID, N.REGDATE, N.HIT, N.FILES, M.NAME
ORDER BY N.REGDATE DESC; 

위의 sql 문장의 일부분을 View로 만들자.

CREATE VIEW NOTICE_VIEW
AS
SELECT N.ID, N.TITLE, N.WRITER_ID, N.REGDATE, N.HIT, N.FILES, M.NAME WRITER_NAME, COUNT(C.ID) CMT_COUNT --N.ID, N.TITLE, N.WRITER_ID, M.NAME WRITER_NAME 이것을 기준으로 집계하겠다는 말
FROM 
    NOTICE N 
    LEFT JOIN MEMBER M ON N.WRITER_ID = M.NICNAME
    LEFT JOIN "COMMENT" C ON N.ID = C.NOTICE_ID
GROUP BY N.ID, N.TITLE, N.WRITER_ID, N.REGDATE, N.HIT, N.FILES, M.NAME;

생성한 뷰를 이용해 기존 sql 문장을 다음과 같이 사용할 수 있다.

SELECT * FROM NOTICE_VIEW --위에서 정의한 뷰 사용
WHERE ROWNUM BETWEEN 1 AND 10 --WHERE, ORDER BY는 되도록 뷰 정의 시 함께 사용하지 않기
ORDER BY REGDATE DESC;

Self Join

동일 테이블 사이의 조인을 말한다. 따라서 FROM 절에 동일 테이블이 두 번 이상 나타나므로 식별을 위해 반드시 테이블 별칭(Alias)을 사용해야 한다.

멤버(M)의 팀장(B), 팀장의 상사(B2)가 함께 나오도록 Self Join하기

SELECT M.*, B.NAME BOSS_NAME, B2.NAME B2_NAME
FROM MEMBER M
    LEFT JOIN MEMBER B ON B.NICNAME = M.BOSS_NICNAME --자식(M)이 부모(B)를 참조하게 하기
    LEFT JOIN MEMBER B2 ON B2.NICNAME = B.BOSS_NICNAME; --자식(B)이 부모(B2)를 참조하게 하기

Cross Join

특정 기준 없이, 두 테이블 간 가능한 모든 경우의 수에 대한 결합을 결과로 보여준다.

SELECT * FROM
MEMBER CROSS JOIN NOTICE; -- MEMBER와 NOTICE 테이블을 Cross Join

---

⭐Front-end

JavaScript - ES6

객체 초기화의 변화

속성명 정의 시 변수를 사용할 수 있게 되었다.

let attr = "kor";

let exam = {
	[attr] : 1,
  	eng: 2
}

console.log(exam.kor); // 1

Object Destructuring

디스트럭처링(Destructuring)은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

예제 1

let exam = {
	kor: 10,
	eng: 20,
	math: 30
};

function printExam(exam){
	let {kor, eng, math} = exam; // destructuring
	
	let total = kor + eng + math;
	console.log(`kor: ${kor}, eng: ${eng}, math: ${math}`);
	console.log(`total is ${total}`);
}

printExam(exam);

결과 화면

예제 2

let exam1 = {
	kor: 10,
	eng: 20,
	math: 30,
	student: {
		name: 'minju',
		phone: '010-1234-5678'
	},
	aa: {
		x: 1
	}
};

let {kor, eng, math, student:{name, phone}, aa:{x}} = exam1;
console.log(name); 
console.log(phone);
console.log(x);

결과 화면

예제 3

let exam = {
	kor: 10,
	eng: 20,
	math: 30,
	student: {
		name: 'minju',
		phone: '010-1234-5678'
	},
	aa: {
		x: 1
	}
};

// exam이라는 객체에서 국어, 영어, 수학 속성을 뽀개서 사용
// 전달할 때 바로 디스트럭처링해서 전달하는 것임
function printExam({kor, eng, math}) { // destructuring
    	/* let {kor, eng, math} = exam; */
	
	let total = kor + eng + math;
	console.log(`kor: ${kor}, eng: ${eng}, math: ${math}`);
	console.log(`total is ${total}`);
}

printExam(exam);

결과 화면

Array Destructuring

예제 1

let lotto = [10, 20, 30, 40, 50];

let [num1, num2, num3, num4, num5] = lotto;
console.log(num1);

결과 화면

예제 2

let lotto = [10, 20, 30, 40, 50];

// 1, 3번째 값만 얻고 싶을 때
let [, num2, , num4] = lotto
console.log(num2);
console.log(num4);

결과 화면

예제 3

let [x, y] = [2, 3];
[x, y] = [3, 4];
console.log(x, y);

// swapping
// y의 값이 x로, x의 값이 y로 바뀜
[x, y] = [y, x];
console.log(x, y);

결과 화면

예제 4

// 중첩된 배열 destructuring하기
let [n1, n2, n3, [n4, n5, n6]] = [1, 2, 3, [4, 5, 6]];
console.log(n1, n2, n3, n4, n5,  n6);

let [, n2, , [n4, n5, n6]] = [1, 2, 3, [4, 5, 6]];
console.log(n2, n3, n4, n5,  n6);

결과 화면

예제 5

let notices = {
	title:"공지사항 목록",
	list:[
		{title: "제목1", content: "좋아요"},
		{title1: "title입니다", content: "good"}
	]
};

let {list:[{title}]} = notices; // 제목1
console.log(title);

let {list:[, {title1}]} = notices; 
console.log(title1);

결과 화면

🐥마무리

오늘 오전 시간에는 SQL의 Self Join, Cross Join 등을 알아보았고, 오후 시간에는 ES6 버전의 자바스크립트 그 중에서도 Destructuring에 대해 배워보는 시간을 가졌다. 오전, 오후에 배운 내용 모두 나에게 생소한 내용들이라 어렵고 헷갈리는 부분이 많았지만, 그래도 계속 코드를 치면서 연습을 하니까 시간이 갈수록 익숙해지는 느낌이다.

지금 진행하고 있는 프로젝트에서 상세 페이지를 보여주는 기능을 구현하고 있는데, 목록 페이지를 구현할 때와는 달리 막히는 부분이 많아서 팀원들과 상의하는 시간을 가졌다. 한 팀원이 나와 같은 문제를 겪고 있었고 비록 해답은 찾지 못했지만 서로 의견을 주고 받으며 이것저것 다시 시도해보기로 했다! 어서 빨리 구현이 완성됐으면...👏

참고 사이트

[DB기초] 뷰(View)란 무엇인가?
디스트럭처링