WIL|[스파르타코딩클럽] 웹개발 종합반 - 2주차

음... 지난 주에 진즉에 2주차 숙제까지 끝내놨는데, WIL를 아직 작성을 못해서, 3주차로 못넘어 가고 있다.

1. 개발 진행 및 완료상황. 무엇을 더 하면 좋을지.
   1주차에 시작한 Javascript를 복습(?)하고, JQuery, JSON, AJAX에 대해 공부함.
2. 업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용
   첫주차에 Javascript를 처음 접했을 때, 버엉~ 하게 넘어가게 되어서 다시 한번 수업을 듣느라 진도가 더뎌짐.
3. 오늘 새로 배운 내용
   Javascript를 미리 작성해 둔 것이 JQuery. 잘만 이용하면 개꿀~
   API
   JSON은 Key:Value로 이루어짐.
   크롬 익스텐션 JSONView를 이용하면 좀더 보기 편함.
   https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
   AJAX

Ajax 기본 골격

     $.ajax({
       type: "GET",
       url: "여기에URL을입력",
       data: {},
       success: function(response){
         console.log(response)
       }
     })

Ajax 코드 해설

 $.ajax({
   type: "GET", // GET 방식으로 요청한다.
   url: "http://spartacodingclub.shop/sparta_api/seoulair",
   data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
   success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
     console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
   }
 })

$ajax 코드 설명
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
ex) http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행.

4. 참고할 만한 레퍼런스들
   https://www.w3schools.com/jquery/jquery_ref_overview.asp

5. 특이사항(아이디어, 메모 등)

6. 지시사항 및 고객 요구사항(숙제?)

    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    let temp = response['temp']

                    $('#temp').text(temp)
                }

            })
        });
    </script>

7. 회고(반성 또는 피드백 받은 것)
   중간중간 작업하던걸 끊어가며 하는 상황이라.. 머릿속이 빙글빙글...
   그냥 강의는 한번 쭉 듣고.. 다시 듣고 해야지..ㅠㅠ

8. To-do list
   뜬금 없지만, Github 프로필 꾸미기 해보고 싶어졌다..(응?)