[TIL] MySQL SELECT 기초, JQuery 활용 (24-12-11)

🤖 사전 캠프 3일차 진행 사항 🤖 

• 엑셀보다 쉽고 빠른 SQL 1주차 수업
  • 1-1 ~ 1-8
  • 숙제
• 웹개발 종합반 3주차 수업
  • 3-1 ~ 3-3

---

엑셀보다 쉽고 빠른 SQL 1주차 수업

1. DBeaver 설치

https://dbeaver.io/download/

Download | DBeaver Community

학습에 사용할 DB 툴로 DBeaver를 사용한다.

위 링크에서 DBeaver를 설치하고, 서버를 연결해준다.

MySQL 서버를 연결하여 실습을 진행한다.

 

서버를 연결했다면 SQL 버튼을 눌러 SQL 편집기를 띄우고, SQL 쿼리를 작성하여 실행할 수 있다.

실행 단축키 ctrl + enter

---

2. SELECT 문

SELECT 컬럼1, 컬럼2, 컬럼3, ...
FROM 테이블명
WHERE 조건

 SELECT * : 모든 컬럼에 대한 조회

 

2-1. 원하는 컬럼만 출력

• food_orders 테이블에서 restaurant_name, addr 컬럼만 출력

 

 

2-2. 컬럼에 별명(alias) 지정하여 출력

• [컬럼명] AS [변경할 컬럼명]또는[컬럼명] [변경할 컬럼명]
• [컬럼명] [변경할 컬럼명] 으로 컬럼명을 변경할 경우, 영어 외의 특수문자나 한글은 큰따옴표("")안에 넣어야 함.

---

3. SELECT의 WHERE절

3-1. 조건에 맞는 데이터만 출력 (WHERE 절)

• customers 테이블에서 age가 21인 컬럼만 출력

• food_orders 테이블에서 cuisine_type이 Korean인 경우만 출력

 

 

3-2. WHERE절 비교연산

• customers 테이블에서 age가 21이상인 컬럼만 출력

• customers 테이블에서 age가 21~23인 컬럼만 출력

• customers 테이블에서 age가 21~23인 컬럼만 출력

• customers테이블에서 age가 15, 21, 32인 컬럼만 출력

• customers테이블에서 name이 '김'으로 시작하는 컬럼만 출력

 

 

3-3. WHERE절에 여러 조건을 지정하여 출력하기 (AND, OR, NOT)

• AND : 조건이 모두 참이어야 출력
  • customers 테이블에서 age가 21과 크거나 같고, gender가 male인 경우만 출력

• OR : 조건이 하나만 참이어도 출력
  • customers 테이블에서 age가 21과 작거나, gender가 female인 경우만 출력

• NOT
  • customers테이블에서 gender가 female인 아닌 경우만 출력

---

4. 숙제

SELECT restaurant_name, customer_id
FROM food_orders
WHERE food_preparation_time BETWEEN 20 AND 30
AND cuisine_type = 'Korean'

---

웹개발 종합반 3주차 수업

1. JQuery 활용

1-1. $('#아이디').toggle();

• 추억 저장하기 버튼을 눌렀을 때, 아래에 있는 박스를 표시 또는 숨기기 기능 구현
  • 추억 저장하기 버튼에 onclick 함수를 지정
  • 함수는 JQuery toggle을 이용해서 id(postingbox)를 지정한 div 영역이 클릭할 때마다 표시 또는 숨겨지도록 함.

function openclose(){
	$('#postingbox').toggle();
}

 

 

1-2. $('#아이디').append(temp_html);

• 기록하기 버튼을 눌렀을 때, input 박스에 입력한 내용으로 카드를 추가로 만드는 기능 구현

1) 기록하기 버튼에 onclick 함수 makeCard() 추가

 

2) input 박스마다 아이디를 지정

 

3) 아이디를 이용해 JQuery로 각 input 박스의 value들을 변수에 넣음

4) 해당 변수들로 카드 div를 만드는 html을 생성하여 카드들이 위치하는 영역의 div에 append 해줌

 

5) 결과

function makeCard(){
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        }