[내일배움캠프-사전캠프 09일차] Web 3주차 ~ 4주차

- TIL 이라 일단은 간단하게 쓴 후에 내가 추후에 필요할 거 같은 부분은 따로 스킵해두어야겠다.

3주차

1. Warming-up

- Bootstrap : 남들이 만든 HTML 코드임

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

- jQery : 남들이 만든 코드 모음, 라이브러리. JavaScript를 더욱 쉽게 조작할 수 있음.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. togle

- 보이고 안 보이고 하는 것. display:none 을 해준다고 보면 됨.

<script>
    function openclose() {
        $('#postingbox').toggle();
     }
</script>

3. Input 요소 추가하기

- 먼저 let으로 값을 선언 후 > $('#id') 를 통해 val()를 가져온다.

- 그후 let temp_html 에 넣을 html 코드를 넣어준 후

- 넣고싶은 갑을 사이사이에 ${} 해주면 된다.

- 마지막으로 $('#id').append() 해주면 추가 된다.

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-muted">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        }

4. 클라이언트 - 서버

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때
• 예) 영화 목록 조회
• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
• 예) 회원 가입, 회원 탈퇴, 비밀번호 수정

- ? : 여기서부터 전달할 데이터가 작성된다는 의미

- & : 전달할 데이터가 더 있다는 뜻

- JSON은 Key:Value로 이루어짐.

5. Fetch 적용하기

- jQery도 연결되어 있어야함.

- Fetch 는 코드를 그대로 가져다가 써야함.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
                console.log(data)
        })
    </script>

6. JSON 코드 값 접근

- 하나의 값 접근

fetch("http://spartacodingclub.shop/sparta_api/seoulair")
    .then(res => res.json()) 
    .then(data => { 
        console.log(data['RealtimeCityAir']['row'][0]);
    })

- 여러 값에 접근

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['MSRSTE_NM'], a['IDEX_MVL'])
        })
    })

- 값을 실제 appen를 이용하여 추가 할 수 있음.

    <script>
        function q1() {
            // url 선언
            let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
            // 기존 값 비우기
            $('#names-q1').empty();

            fetch(url).then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row'];
                rows.forEach(a => {
                    let gu_name = a['MSRSTE_NM'];
                    let gu_mise = a['IDEX_MVL'];

                    let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
                    $('#names-q1').append(temp_html);
                });
            })
        }
    </script>

- if 를 통해서 조건문도 줄 수 있음.

       <style>
        div.question-box {
            margin: 10px 0 20px 0;
        }
        .bad {
            color: red;
        }
    </style>

    <script>
            function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
            $('#names-q1').empty()
                        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) {
                                    temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                                } else {
                                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                                }
                $('#names-q1').append(temp_html)
            });
          })
      }
    </script>

7. Reload 될 때 마다 테이터 업데이트

- 원래는 아래의 코드는 창이 켜질때마다 함수가 실행된다.

       $(document).ready(function() { ... })

- .then(res => res.json()) 반환 된 응답(response)내용을 JSON 형식으로 만들기

- .then(data => { ... }) JSON 데이터를 가져온 후

- temp 값을 변수에 담는다!

- 선택자 선택 후 temp의 값을 문자열로 삽입

   $(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
    fetch(url).then(res => res.json()).then(data => {
        let temp = data['temp'];
        $('#msg').text(temp);
    })
})

4주차

1. Firebase란

- 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌.

- NoSQL임.

- 웹 서버를 대신 만들어주는 서비스라, 서버 개발 없이 제작 가능.

- 컬렉션(Collection): 서랍장 그룹이라고 생각해봅시다. 여러 개의 문서들이 특정한 주제 또는 유형으로 그룹화되어 있습니다. 예를 들어, “albums"이라는 컬렉션 안에는 문서들이 저장될 수 있습니다.

- 문서(Document): 서랍장 안에 들어있는 작은 종이로 생각해봅시다. 하나의 종이는 여러 개의 필드(Field)로 구성되어 있습니다. 필드는 종이에 저장된 데이터를 나타냅니다.

- 필드(Field): 문서 안에 있는 데이터의 작은 부분입니다. 각 필드는 값으로 구성됩니다. 예를 들어, 사용자 문서의 필드로는 "내용", "날짜", "이미지주소", “제목” 등이 있을 수 있습니다.

- 1. 관계형 DB: 정리된 정보를 다룰 때 사용 은행, 대기업 등

- 2. 비관계형 DB: 복잡하거나 유연한 정보를 다룰 때 사용

2. Firebase 세팅

- friebaseConfig 에 정보는 전에 저장해 두었던 각자 정보를 넣어주면 된다.

- Firebase 를 Script에 넣을려면 Scrpit Type이 module 이어야 한다.

<script type=module> </script>

- 타입이 모듈이라는 부분에 대해서 조금 자세히 알아야 한다.

- type=module 이라면, ES 모듈 시스템이 적용되면서 브라우저가 자동으로 defer 속성을 적용한다.

1) defer 가 무엇이냐?

- 원래의 <script> 의 코드의 경우에는 HTML을 읽다가 만나면 즉시 실행이 된다.

- HTML에서 <script> 를 만나면 HTML 로딩을 중단시키고 스크립트를 실행한 다음 다시 HTML을 읽는다는 것이다.

- 이것이defer가 적용 되지 않은 것이고

- Script type이 모듈이라면 defer가 디폴트로 적용이 된다. HTML이 다 로드될 때까지 방해하지 않고, 끝난 후에 Script가 실행이 된다는 것이다

\2) module 의 범위

- <script> 에서는 window 전역 스코프에 등록이 된다.

- <script type="module"> 을 사용하면 모든 코드가 모듈 스코프에서 실행이 된다.

- 따라서 모듈로 할시 onclike 이 전역에서 인식되지 않는다. 따라서 module일시 onclick 으로 다 바꾸어 주는 작업을 해야한다.

- window.handleClick = function () {} 혹은 addEventListener 를 이용해주어야한다.

3. addDoc

- 원래의 경우에는 funtion q1() 을 만든 후, 해당 q1 을 html 요소에 onclike="q1()" 식으로 연결해야한다.

- 위에서 언급했다시피 module 이기 때문에 해당 부분이 $("#id").click 으로 바꾸어져 있는 걸 확인할 수 있다.

- jQuery 이벤트 핸들러를 사용하면 모듈에서도 문제없이 동작하기 때문이다.

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

혹은

  document.getElementById("btn")?.addEventListener("click", async () => {
    console.log("버튼 클릭됨!");

4. addDoc + 화면 새로고침

- 페이지를 새로 고침 함으로써 업데이트 된 데이터를 가져와서 표시 가능

- 원래는 $(document).ready(function (). 이런식으로 화면 새로고침을 구현했다.

- moduel 일 경우에는 전역범위가 아니이기 때문에 리로드 시, window.location.reload() 를 사용하여야 한다.

        $("#postingbtn").click(async function () {
            let image = $('#image').val();
            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);
            alert('저장완료!');
            window.location.reload();
        })

5. 활용

- HTML 이 다 읽고 script가 실행되기 때문에, 따로 $(document).ready(function (). 해주지 않고, <script> 안에 작성해도 된다.

        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();

            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            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-muted">${date}</small>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });

 

---

오늘의 회고

- 내일 오후에 일정이 있어서, 오전에  5주차 강의를 마칠 예정이다.

- 일단 이번 내일 수업을 마무리 후, 목요일 금요일에는 따로 강의를 복습하는 시간을 가지고자 한다.

- 강의가 다소 생략된 개념들이 많아 겉은 따라오기는 쉽지만 개념 속까지는 따라가기 힘든 수준인 거 같다.

- 이런 부분은 복습에서 더욱 채워 두기로 하고.

- 일단 내일까지는 Web 이란 이런거구나 훑는 수준 으로 공부해야겠다.