[240102 TIL] 웹개발 기초 3~5주차 완강 / JS 문법 1주차 (Fetch, Firebase, JS 특징과 변수 )
24.01.02 화 TIL ✍ 웹개발 기초 3~5주차 완강 / 자바스크립트 문법 1주차 ~
저번에 TIL을 못 쓰고ㅠㅠ 2024년 새해가 되어서 처음 TIL을 쓰게 되었다..!
드디어 웹개발 기초 3 ~ 5주차까지 모두 완강을 (늦어졌지만) 했다.
JS 문법도 얼른 들어야겠다 ..
웹 (텍스트) 데이터 주고 받을 때
* 서버 -> 클라이언트 : JSON으로 텍스트 데이터 긁어와 주고 받음
JSON은 데이터를 주고 받는, 정해진 표준의 방식으로 자료형 Dictionary딕셔너리와 유사하게 Key:Value로 이뤄져있다
* 클라이언트 -> 서버 : 요청 형태 GET 과 POST 타입
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
- 예) 회원 가입, 회원 탈퇴, 비밀번호 수정
* 예시 : Jquery ___ forEach 반복문 사용해서 Fetch 함수 쓰기 (fetch로 웹 통신 요청해서 데이터 받아오기)
fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
console.log(a)
})
})* 아래 예시: 해당 태그 비워주는 .empty() 메서드 / if 문 활용해서 temp_html 변수로 글자색 바꾸기
<script>
function q1() {
// 버튼 누를 (으로 q1함수 실행으로)때마다 쌓임 > .empty() 쓰기
$('#names-q1').empty();
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
fetch(url).then(res => res.json()).then(data => {
// console.log(data) // 확인
let rows = data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name = a['MSRSTE_NM'];
let gu_mise = a['IDEX_MVL'];
let temp_html = ``; //원래 빈 값을 만들어두고 - ?_초기 최초 선언?!
if (gu_mise > 40 ) { // 농도 40이 넘은 곳만 빨간색 뜨게하기
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`; // ! 근데 여기선 let 붙이면 안됨! 위에서 선언해서 (붙이면 안뜸..)
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
}
// 변수말고 당연히 그대로 a[..]써도 나온다
$('#names-q1').append(temp_html);
});
})
}
</script>
* 주의: 세미콜론 ; 잘 붙여주기 ... ({ 이런거 열릴때는 잘 닫아주기
- $( document ).ready ( function ( ) { .... } ) 함수 : 페이지 다 로딩되면 자동으로 실행할 수 있게 하는 코드
- .text( .....) 메서드 : 해당 태그를 ..... 해당 텍스트로 바꿔준다. (안에 변수를 쓰든, " " 문자열을 쓰든)
* DB(데이터베이스) 의 두 종류
| SQL (관계형) | NoSQL (비관계형) |
| Like '엑셀' 이미 표가 다 그려져 있는 형태 같은 것. (형식이 정해져 있다) => 칸이 정해져있기 때문에, 칸이 안 맞으면 못 넣는다. |
칸이 정해져있지 않고, 줄마다 다 따로따로 놀아서 (ex: 어떤 사람-고객정보-은 휴대폰 번호만 저장, 어떤 사람은 이메일 정보도 .. 들어가있는 등) 자유도가 훨씬 높다 |
| 틀이 짜여져있고 사람의 실수가 나면 안되는 곳에서 주로 쓴다 (은행, 대기업) |
앞으로 바뀔 여지가 많은 곳에서 주로 쓴다 (스타트업) |
* 구글의 FireBase 파이어베이스 활용해보기
- 파이어스토어에 데이터추가 (컬렉션에)
$("#id").click(async function () { // 어떤 id에 클릭을 담아준 것 (어떤태그_버튼등 클릭되면) 그래서 아래를 실행해라
let doc = {}; // 여기서 doc은 넣고싶은 데이터
await addDoc(collection(db, "콜렉션이름"), doc); //addDoc해서 카드 정보 주기
}) $("#postingbtn").click(async function () { // postingbtn 버튼 눌렸을때
let image = $('#image').val(); // 해당 id의 태그 에 들어가 있는 value 값 가져오기 (input에 입력된 값)
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let doc = {
'image': image,
'title': title,
'content': content,
'date': date
}; // 이 정보가 (딕셔너리화되어서)
await addDoc(collection(db, "albums"), doc); //albums 에 저장된다
alert('추억앨범 등록 완료!') // 완료창 띄워주기
window.location.reload(); // 새로고침
})
$("#savebtn").click(async function () {
$('#postingbox').toggle();
})
...- 파이어베이스 사용하기 위해 type="module" 로 바꿔줬으면, onclick() 함수 실행 안되는 문제 발생
> 직접 click 동적으로 바꿔줘야 함. (코드로 클릭을 달아준다)
위의 #savebtn 처럼 .. .click(async function () { 써주기
- 파이어스토어의 데이터 읽기 getDocs - (가져와서 반복문 forEach로 하나씩 꺼내기)
let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
let row = doc.data();
console.log(row);
});
* 파이썬 스크래핑도 해보았다.
(* 스크래핑은 인터넷에서 필요한 정보를 가져오기 위해 웹 페이지의 구조와 내용을 읽어오는 것)
태그 안의 텍스트를 찍고 싶을 땐 → 태그.text
태그 안의 속성을 찍고 싶을 땐 → 태그['속성'])