⭐Back-end

Oracle

SELECT 구절

• SELECT문의 구절: SELECT, FROM, WHERE, GROUP BY, HAVING, ORDER BY
• WHERE: 원하는 행을 필터링하기 위한 구절
• GROUP BY / HAVING: 그룹으로 묶어서 조회하기 위한 구절
  GROUP BY: 중복되지 않는 정보를 집계해서 보여줌
• ORDER BY: 정렬을 위한 구절

집계 함수

SELECT COUNT(ID) FROM NOTICE; --1. NOTICE 테이블의 ID 개수 모두 세기
SELECT AVG(HIT) FROM NOTICE; --2. NONTICE 테이블의 조회수 평균 구하기

GROUP BY

SELECT COUNT(ID), WRITER_ID FROM NOTICE GROUP BY WRITER_ID; --1. 작성자 아이디별 게시글 수 조회하기
SELECT COUNT(ID), GENDER FROM MEMBER GROUP BY GENDER; --2. 성별에 따른 멤버 수 조회하기

HAVING

GROUP BY를 통해 집계된 결과에서 원하는 행 필터링하기

SELECT COUNT(ID), WRITER_ID FROM NOTICE GROUP BY WRITER_ID
HAVING COUNT(ID) <= 2; --1. 작성자 아이디별 게시글 수가 2 이하인 행만 조회하기

SELECT COUNT(ID), TITLE FROM NOTICE GROUP BY TITLE
HAVING COUNT(ID) > 2; --2. 제목별 게시글 수가 2 초과인 행만 조회하기

ORDER BY

SELECT * FROM MEMBER ORDER BY NAME DESC; --회원의 이름을 내림차순으로 정렬해서 조회
SELECT * FROM MEMBER WHERE NAME LIKE '박%' ORDER BY NAME; --'박'으로 시작하는 회원의 이름을 오름차순으로 정렬(Default: ASC)
SELECT * FROM MEMBER ORDER BY NAME, NICNAME DESC; --회원의 이름은 오름차순으로, 닉네임은 내림차순으로 정렬해서 조회

서브 쿼리

SQL문을 실행하는 데 필요한 데이터를 추가로 조회하기 위해 SQL문 내부에서 사용하는 SELECT문

SELECT * FROM (
    SELECT ROWNUM NUM, N.* 
    FROM (
        SELECT * FROM NOTICE 
        WHERE TITLE LIKE '%A%'
        ORDER BY REGDATE DESC
    ) N --서브쿼리: 제목에 A가 들어가는 게시글을 최신순으로 조회
) --서브쿼리 결과에 N이라는 별칭 붙이기, 
WHERE NUM BETWEEN 1 AND 5; --ROWNUM에 NUM이라는 별칭을 붙여 서브쿼리 결과 1-5까지 출력하기

⭐Front-end

JavaScript

AJAX를 사용해 비동기형으로 데이터 요청하기

XMLHttpRequest 객체는 상태 정보를 가지고 있는데, readyState 속성은 그 상태정보에 대한 값을 가지고 있다. 이 상태 정보를 보고 응답이 왔는지, 해당 응답이 정상적인 응답인지 확인할 수 있다.

• 0: 요청이 초기화되지 않았다.
• 1: 서버와 연결되었다.
• 2: 요청이 받아들여졌다.
• 3: 요청이 진행 중이다.
• 4: 요청이 완료되고 응답을 받았다.

window.addEventListener("load", function() {
    var section = document.querySelector("#ex10");
    var requestBtn = section.querySelector(".btn-request");

    requestBtn.onclick = function(e) {
        var request = new /*window.*/XMLHttpRequest(); 

        /*request.onreadystatechange = function() { // 옛날 버전
              if(request.readyState == 4) // 데이터가 다 왔을 때 아래 코드 출력
                  console.log(request.responseText); 
          }*/

        request.onload = function() { // 바뀐 버전
          console.log(request.responseText); // 요청한 데이터가 다 도착했을 때 이 코드를 출력해달라
        }

        request.open("GET", "http://localhost:8080/api/notice/list", true); // 무엇을 달라고 할 것인지 명시, true: 비동기 형식으로 요청(기본값, 생략 가능)/ false: 동기 형식으로 요청
        request.send(null);
	}	
});

🐥마무리

이번 주부터는 학원에서 배운 내용들을 github가 아닌 velog에 기록하기 시작했다. 아무래도 하루동안 배우는 많은 내용을 기록하기에는 velog가 더 좋을 것 같아 플랫폼을 옮겼고, 지금 github에는 그 날 배운 코드만 업로드하고 있는 상태이다!
저번 주에는 JDBC를 사용하는 방법을 배웠는데 이번 주에는 그걸 토대로 JSP와 JDBC를 연동해 DB에 담긴 데이터를 화면에 출력하는 코드를 작성해봤다. 또 다양한 SQL문을 배워서 원하는 데이터를 DB에서 출력해보는 연습도 진행했다.

국비지원 수업을 들으면서 이론 공부 뿐만 아니라 팀원들과 함께 반려동물 관리 사이트(petharu)의 프론트 단을 만들고 있는데, 이제 곧 프론트에서 나아가 백단을 작업하게 될 날이 머지 않은 것 같다...! 조금씩이더라도 매일 꾸준히 공부하고, 배운 내용 까먹지 않게 잘 복습하면서 계속해서 실력을 향상시키자👍

참고 사이트

AJAX란? - 이벤트 종류