내일배움캠프 Spring 2일차 TIL

1. 클라이언트 - 서버 개념

1. 서버 → 클라이언트 : JSON 형식으로 데이터를 보내줌
   • JSON 형식 : key와 value로 구성되어있음
2. 클라이언트 → 서버 : GET 방식을 사용해서 데이터를 가져옴

2. fetch

1. fetch는 웹 개발에서 네트워크 리소스를 가져오기 위한 API이다
2. 주로 HTTP 요청을 보내고 응답을 처리하는 데 사용된다.
3. fetch는 Promise를 반환하며, 비동기적으로 작동한다.
   • 프로미스는 비동기 작업의 결과 또는 실패를 나타내는 객체이다
   • 아래 코드의 결과는 가장 밑에 있는 도발 문구가 먼저 생성된다.

$(document).ready(function () {
            let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
            fetch(url).then(res => res.json()).then(data => {
                let temp = data['temp']
                if(temp > 20){
                    $('#temperature').text('더워요')
                    console.log('더워요')
                }else{
                    $('#temperature').text('추워요')
                    console.log('추워요')
                }
            })
            console.log('내가 먼저 나오지롱~~~')
        })

3. firebase

1. 구글이 제공하는 간편하게 사용하기 좋은 서버
   • 구글이 제공하는 기능은 편하게 사용 가능하지만 새롭게 내가 원하는 것을 만들어 사용하기에는 어려움이 있다
2. 데이터베이스 / 용도에 맞게 사용하자

• 관계형 데이터베이스(SQL) : 정리된 정보를 다룰 때 사용 / 은행, 대기업
  • 비관계형 데이터베이스(NOSQL) : 복잡하거나 유연한 정보를 다룰 때 / 스타트업
  • firebase는 클라우드기반 NOSQL이다. firebase는 테이블을 사용한 관계가 아닌 JSON형식으로 데이터를 저장한다, 이렇게 저장된 데이터는 컬렉션에 그룹화된다.

3. 파이어베이스 의존성 주입을 위한 코드 변경
   • 기존과 무엇이 다른가?

     type="module"과 일반 스크립트의 다른 점

     1. 항상 지연 실행된다.

        모듈 스크립트는 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML이 다 만들어진 후에 실행된다.

        그래서 모듈 스크립트는 항상 완전한 HTML 페이지를 볼 수 있고, 문서 내 요소에도 접근할 수 있다.

        그런데, 이렇게 모듈이 HTML이 모두 로딩된 후에 실행되기 때문에, 모듈 스크립트를 불러오는 동안 Loading Indicator이나 투명 오버레이 등을 넣어주어 사용자의 혼란을 예방해주어야한다.

     2. 인라인 스크립트의 비동기 처리

        일반 스크립트에서 async 속성은 외부 스크립트를 불러올 때에만 유효한데, 모듈에서는 인라인 스크립트에도 적용할 수 있다.

        광고나 카운터 등과 같이 어디에도 종속되지 않는 기능을 구현할 때에 사용할 수 있다.

        <!-- 필요한 모듈(analytics.js)의 로드가 끝나면 -->
        <!-- 문서나 다른 <script>가 로드되길 기다리지 않고 바로 실행됩니다.-->
        <script async type="module">
          import {counter} from './analytics.js';
        
          counter.count();
        </script>

*오늘의 소감

• 하나의 언어를 습득하면서 얻는 비동기 처리와 같은 것이 습득력이 낮았던 프론트 javascript에서 보게되니 이해가 매우 쉬운것 같다. 개발자의 언어는 하나를 마치면 다른언어를 배우기 쉽다는 이야기를 조금이나마 공감하는 하루가 된 것 같다.

• 파이어베이스를 통한 간단한 서버사용은 좋았으나 github pages를 통한 호스팅에서 firebase api key를 감출 수 없었고 기왕 파이어베이스를 사용한 김에 파이어베이스 호스팅을 사용해서 호스팅까지 성공했다. 하지만 api key를 github에 나타나지 않도록 하는 방법이 분명 존재할 것으로 생각이 되어 나중에 해당 방법을 찾아 시도해 보고싶다는 생각이 들었다