[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

태그 안의 속성을 찍고 싶을 땐 → 태그['속성']​)