[WIL] 0527 ~ 0602

☑️What I Learn

좋아요 개수 count(*)로 likes 테이블의 행의 개수를 계산한다.

 

서브쿼리 Sub Query

하나의 쿼리 `메인 쿼리`에 포함된 또다른 쿼리 `서브쿼리` . 메인쿼리의 조건을 만족시키기 위해 사용된다.

주로 테이터 필터링, 정렬, 그룹화 등과 같은 방법으로 사용한다.

보통 SELECT, INSERT, UPDATE, DELETE 문 내에서 사용된다.

SELECT의 경우 SELECT, FROM, WHERE, HAVING 및 JOIN 절에서 사용된다.

비교연산자와 집계함수 GROP BY 절 등을 포함한 유효한 SQL문을 사용해 작성할 수 있다.

 

유형

• 단일 행 서브쿼리 (Single Row Subquery): 한 행만 반환하는 서브쿼리 `=`
• 다중 행 서브쿼리 (Multiple Row Subquery): 여러 행을 반환하는 서브쿼리 `IN`
• 단일 열 서브쿼리 (Single Column Subquery): 한 열만 반환하는 서브쿼리
• 다중 열 서브쿼리 (Multiple Column Subquery): 여러 열을 반환하는 서브쿼리
• 상관 서브쿼리 (Correlated Subquery): 메인 쿼리의 각 행에 대해 서브쿼리가 다시 실행되는 서브쿼리 `>`

 

컬럼명이 중복될 경우, 데이터를 덮어씌우는 에러가 발생한다! 독립성 체크

 

...spread 스프레드 연산자

강의에서, selected가 배열로 들어오는데, 이걸 sql에서 적용하는 방법으로 언급했다. (근데 다른 방법으로 적용함)

전개 구문 - JavaScript | MDN

 

배열이나 객체를 펼쳐서 형식을 자유롭게 변형할 수 있다. 일부분을 사용하거나, 인자를 한번에 넘기거나, 연결하거나 합치는 등의 방식. 문자열을 한번에 배열로 변환하는 메서드이기도 하다.

그런데 기존 배열이나 객체로 전개 구문 적용한 배열과 객체를 비교하면, 똑같은 모양의 프로퍼티를 갖게 되지만, 두 객체를 비교할 경우 false가 출력된다.

 

///ex
const myObject1 = {
    laptop: 'MacBook Pro',
    tablet: 'iPad Pro 11'
}

const myObject2 = {...myObject1};

console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}

console.log(myObject1 === myObject2); // false

 

auto - increment id 번호 초기화

truncate로 테이블 데이터 삭제 > auto - increment 번호 순서 초기화

SET foreign_key_checks=0;
TRUNCATE 테이블명;
SET foreign_key_checks=1;

 

테이블 데이터 삭제하지 않고, auto - increment 번호 초기화하는 방법

SET @count=0;
UPDATE 테이블명 SET id=@count:=@count+1;
ALTER TABLE 테이블명 AUTO_INCREMENT=12;

 

LAST_INSERT_ID() 대신 MAX(id)

auto-increment 필드를 사용하는 테이블에서 사용해야 한다.

MAX(id) 가 트랜잭션의 일관성을 유지하는데 더 명확하게 사용된다.

 

BULK INSERT

튜플이 100,000개 미만이라면 쿼리가 금방금방 이루어진다.
(DB가 올라가있는 하드웨어가 좋지 않거나, 쿼리가 복잡하거나 제외하고)

하지만 튜플이 1,000,000개 가량 되거나 그 이상이되면, 사람이 체감할 수 있을 정도로 쿼리에 시간이 걸린다고 한다.

이때! 대량의 데이터를 한번에 DB에 적용할때 사용한다. 이차원 배열을 사용한다.

강의에서 INSERT 를 두번 연속 사용하면 BULK 로 처리한다고 설명했는데 정확히 말하면, INSERT문을 여러번 실행하는 대신 BULK INSERT를 사용하는게 더 효율적인 방식이라고 보아야 한다.

BULK INSERT Employees
FROM 'C:\Data\employees.csv'
WITH (
    FIELDTERMINATOR = ',',
    ROWTERMINATOR = '\n',
    FIRSTROW = 2,
    TABLOCK
);

이런식으로 대량의 데이터 파일을 구분해서 한번에 INSERT 하는 방법이다.

 

강의에서 사용한 forEach를 돌면서 여러개의 데이터를 한번에 삽입하는 것도 BULK로 처리했다고 할 수 있다.

sql = `INSERT INTO orderedBook (order_id, book_id, quantity) VALUES ?;`;
  values = [];
  items.forEach((item) => {
    values.push([order_id, item.book_id, item.quantity]);
  });
  conn.query(sql, [values], (err, results) => {
  ///...

 

비동기 promise - aysnc - await

특정 작업이 완료될 때까지 코드 실행을 차단하지 않고(기다리지 않고), 다음 코드를 실행할 수 있도록 해주는 프로그래밍 패턴이다.

async function - JavaScript | MDN

 

논블로킹 non-blocking

비동기 작업은 코드 실행을 차단하지 않고, 다른 작업을 계속할 수 있도록 한다. 이는 다른 코드가 실행되는 동안 비동기 작업이 백그라운드에서 실행되고, 작업이 완료되면 콜백 함수가 호출되어 결과를 처리한다.

콜백 Callback

대부분의 비동기 작업은 콜백 함수를 사용하여 작업이 완료되었을 때 호출될 함수를 지정한다. 이를 통해 비동기 작업의 결과를 처리하거나 다음 작업을 수행할 수 있다.

이벤트 Event

비동기 작업을 처리하는 동안 이벤트가 발생할 수 있다. 이러한 이벤트는 특정 작업의 진행 상태를 나타내거나 작업이 완료되었음을 알리는 역할을 한다.

 

예시

1. 네트워크 요청 시

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

2. setTimer 함수

console.log('시작');
setTimeout(() => {
  console.log('타이머가 종료되었습니다.');
}, 2000);
console.log('끝');

//console
시작
끝
타이머가 종료되었습니다.

 

3. 이벤트 처리

const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('버튼이 클릭되었습니다.');
});

 

 

 

이 영상을 시리즈로 3편을 보고 이해하게 되었다.

사실.. 강의에서는 에러도 발생하고 엄청 정신없었어서.. 추가 공부가 더 필요하다고 느껴지는 부분이다!

 

☑️Liked, Learned, Lacked, Longer for

서브쿼리, JOIN, IN() 등 SQL 문법 다양하게 직접 사용하고 적용할 수 있어서 좋았다.

auto - increment로 고생한 TIL이 많았는데 강의에서 다뤄주어서 좋았다. 그 덕에 데이터 삭제 없이 해결하려고 방법을 추가적으로 찾아보았잖아~~

 

비동기 활용에 대한 이해가 부족하다고 느껴졌다. 프로젝트가 작던 크던, 언젠가 어디에서든 다양하게 활용되는 것이 async - await 이다. 이론과 사용법은 대략 알겠는데, 프로젝트의 코드 고도화, 활용같은건 아직 잘 모르겠다. 강의 외에 틈틈히 활용법 학습할것!

 

✔️ Nav Bar 열리고 닫히면서 컴포넌트로 구현했는데, 사소한 상태관리 실수때문에 구현이 살짝 안되가지고 열받았다ㅜㅜ 팀원 덕분에 문제점을 발견할 수 있었다. 앞으로 더 꼼꼼해지자!