Today I Learned ...
오늘은 '웹개발 A to Z' 강의의 3강을 듣고, 처음으로 SQL 과제를 해보았다.
📚 3강 _ JQuery와 Fetch
먼저, JQuery는 누군가가 작성해둔 JavaScript를 모아둔 라이브러리를 말한다.
내가 직접 JavaScript를 작성하게 된다면 길고, 복잡해지게 되지만, JQuery를 사용한다면 더 간편하게 코드를 작성할 수 있다.
이때, JQuery가 동작하게 만들기 위해서는 꼭! 임포트를 시켜야 한다.
<head>
/* 아래 코드 삽입 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>이렇게 JQuery 임포트를 시켜둔 후에 내가 원하는 동작들이 작동할 수 있도록 JavaScript를 작성해주면 된다. 이를 통해 여러가지 작업을 할 수 있는데, 실습에서 다룬 몇가지 예시이다.
① 텍스트 변경하기
<script>
function hey() {
$('#title').text('쥬라기월드');
}
</script>
<body>
<button onclick="hey()">결과 확인하기!</button>
<h1 id="title" class="display-5 fw-bold">킹덤</h1>
</body>html에서 button을 누르면 hey 함수가 작동도록 작성하고, '킹덤'이라는 글자에 'title'이라는 id를 부여했다.
script에서는 function hey() {}를 통해 hey라는 함수가 어떤 역할을 할지 정할 수 있다.
여기에서 나는 title의 텍스트가 '쥬라기월드'로 바뀌도록 함수를 설정해두었다.
② 내용을 지우고, 원하는 내용을 작성하기
<script>
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty();
let a = fruits[3];
let temp_html = `<p>${a}</p>`;
$('#q1').append(temp_html);
}
</script>
<body>
<h2>1. 함수</h2>
<button onclick="checkResult()">결과 확인하기!</button>
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</body>'let fruits'라는 변수에 여러 과일의 리스트를 넣어두었다.
먼저, empty(); 명령을 통해 버튼을 클릭하면 q1의 아이디를 가지고 있는 내용들은 모두 사라진다.
그리고, append(temp_html); 명령을 통해 그 자리에 'temp_html'로 지정해둔 내용들이 들어가게 된다.
지금은 단순히 리스트에서 내가 지정한 문자만 나오지만, 반복문을 사용한다면 리스트 내의 모든 내용들이 나오게도 설정할 수 있다.
이제 Fetch에 대해 이야기하기 전에, 클라이언트와 서버 간의 관계부터 이해해야 한다.
클라이언트인 내가 서버를 통해 무언가를 하고 싶다면, 나는 서버에 데이터를 요청하고, 받게 된다.
이때, 나는 GET 방식으로 서버에 데이터를 요청하고, 서버는 나에게 JSON 형식으로 데이터를 전송해준다.
웹 브라우저는 서버나 API에서 데이터를 가져와 클라이언트에게 그 데이터를 보여주는데,
이때 응답 데이터를 요청하고, 응답을 처리하는 것이 Fetch이다.
Fetch를 사용하기 위한 기본 골격이 있다.
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})사용하고자 하는 API의 url을 입력하여 데이터를 가져오고, 그 데이터를 바탕으로 내가 원하는대로 작업을 할 수 있게 된다.
이번 강의에서는 서울의 미세먼지 정보를 측정한 OpenAPI를 사용하였는데, 이 API는 딕셔너리 자료형으로 구성되어 있었다.
function hey() {
let url = 'https://13.209.69.177.nip.io/sparta_api/seoulair';
fetch(url).then(res => res.json()).then(data => {
// 위 자료형에서 row 아래의 데이터만 따로 분류
let rows = data['RealtimeCityAir']['row'];
// rows 내 데이터 반복 출력
rows.forEach(a => {
// 구 이름, 미세먼지 강도 지정
let gu_name = a['MSRSTE_NM'];
let gu_mise = a['IDEX_NM'];
// 구 이름과 미세먼지 강도 출력
console.log(gu_name, gu_mise);
});
})
}그래서 위와 같은 명령을 사용해 많은 데이터를 보기 쉽게 정리해보기도 했다.
자세한 실습 내용은 노션을 통해 정리해두었다.
Notion 확인하기
🖥️ SQL 문법 연습 퀘스트 #1
SQL의 기초적인 문법을 연습하기 위한 퀘스트를 진행했다.
나는 따로 SQL을 다룰 프로그램을 가지고 있지 않기 때문에, AWS EC2 인스턴스에서 MySQL을 설치해서 실습을 진행했다.
퀘스트의 문제 내용에 맞게 실습 환경을 세팅하는 것부터 시작했다.
사실 이 부분은 ChatGPT의 도움을 받아서 완성했다,,ㅎㅎ
오늘의 문제는 select 에 여러 조건을 붙여서 풀어야하는 내용들이었다.
① distint : 중복 없이 데이터 선택하기
select distinct 컬럼1 from 테이블이름;
그런데, 이때 한 개 이상의 컬럼을 설정한다면, 중복이 제거되지 않은 상태로 결과가 나타나게 된다.
그래서 group by를 사용하기도 한다.
select * from 테이블이름 group by 컬럼1;
group by는 distinct와 달리, 다른 필드의 값을 가져오면서 중복되는 특정 필드의 값을 걸러낼 수 있다.
다만, 중복되는 항목이 있을 때, 가장 위의 값만 남기고 나머지는 지운다는 한계가 있다.
② where : 특정 조건에 맞는 데이터만 조회
select 컬럼1 from 테이블이름 where 조건식;
where에는 함께 사용할 수 있는 조건들이 더 있는데, and, between, or, in 등등 정말 많은 것들이 있다.
자세한 문제와 풀이 내용은 노션을 통해 정리해두었다.
Notion 확인하기
🙃 오늘의 느낀점
오랜만에 오랫동안 책상 앞에 앉아 공부를 하려니 집중력이 바닥이 났다..
나름 기본적인 것들은 배웠었다고 생각했는데, 강의를 들으면 들을수록 처음 보고, 처음 듣는 내용들이 너무 많이 생긴다.
하나씩 정리를 해가면서 천천히 익혀나가야겠다.
