[2주차 회고] JavaScript, jQuery, Fetch 배운점, 어려웠던점

JavaScript 맛보기~jQuery 기초

• 배운점:
  • <script></script> 태그 내 함수 선언
  • 해당 함수가 작동 될(event) 개체 지정
  • console.log로 event 없이 테스트 할 수 있음
  • a라는 변수에 선언된 값들을 불러오는것
  • Dictionary는 [{key, value}, {k,v}, … ] 를 불러올 수 있다.
• 어려운 점:
  • Dictionary는 왜배우는지?? (→ JSON의 형식이다)
• 블로그 링크 :
  • https://ohnyong.tistory.com/12
  • https://ohnyong.tistory.com/13
  • https://ohnyong.tistory.com/14

---

서버-클라이언트 통신 이해~Fetch이해하기

 

• 배운점:
  • "서울의 미세먼지" 실시간 데이터를 통한 JSON 형식 확인
  • JSONVue를 설치한 후 확인하면 Dictionary 형태의 데이터임을 볼 수 있음
  • 서버에서 클라이언트로 데이터를 내려줄때 가지고 올 수 있는 포맷이며 이러한 데이터 규칙은 Dictionary 형식으로 되어 있다.
  • Fetch, 공공 데이터 OpenAPI 활용 실습
  • Fetch 기본 골격
  fetch(”URL").then(res => res.json()).then(data => {
• // 데이터 전체가 찍히는지 확인 })
• 어려운 점:
  • JSON 아이템을 뷰페이지로 옮겨본 프로젝트는 진행했지만
  • 이처럼 Dictionary라는 형식이라는 근본적인 이유는 모르고 사용하고 있었음
  • => 화살표 함수(Arrow function)에 대한 추가 스터디
  • 백틱을 사용하는 이유, 사용법 익히기
• 블로그 링크 :
  • https://ohnyong.tistory.com/18
  • https://ohnyong.tistory.com/19
  • https://ohnyong.tistory.com/20

---

Fetch 응용 퀴즈

 

• 배운점:
  • "서울시 실시간 미세먼지 상태”와 같이 OpenAPI 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습했으니 이제 웹페이지에 직접 활용
  • JSON 넣는 공식? 항상 반복되는 사이클 : //데이터를 가져온다 => 데이터중에서 list화시킬 부분을 추린다 => 반복문을 돌면서 => 필요한 정보만 꺼내고 => 조건문을 붙여서 구분한다
  • "서울시 따릉이" 위치를 확인할 수 있는 간단한 서비스페이지를 통해 복
• 어려운 점:
  • 조건문으로 append 부분을 추가 할 때 ' ` ' (백틱) Backtick을 사용하는데 정확한 사용법 익힐 필요
  • 검색을 통해서 확인한것 속성을 바꾸려면 .attr(‘속성’,’값’)을 활용하는것 복습
• 블로그 링크 :
  • https://ohnyong.tistory.com/20
  • https://ohnyong.tistory.com/23
  • https://ohnyong.tistory.com/24

 

---

Fetch 응용 퀴즈 2

 

• 배운점:
  • 하단에 나열되는 "영화포스터+제목+설명+별점+한줄평" 부분이 하드코딩이 아닌 지정한 데이터로부터 추출되어 나열되게 하는 것이 목표이다. (Fetch)
  • 데이터를 입력 하는 반복문에서 아래처럼 섹션을 구분하기 위한 class 명칭을 구분하고 어떤 그룹이 append 될지 구분
  • "영화포스터+제목+설명+별점+한줄평" 부분을 각각 아래 변수로 선언
    • title = 제목
    • desc = 설명
    • comment = 한줄평
    • star = 별점
    • image = 영화포스터
  • 위 변수들에 데이터들이 담기고 ${ … } 형태로 값을 출력 할 수 있다.
  • 별점 추가부분에서 repeat() 함수 사용
• 어려운 점:
  • 전 과정에서 for 루프는 자주 사용했지만 이번 실습 과정에서는 forEach 반복문을 자주 사용
  • 동일한 결과가 나오게 for로 작성해봤지만 두개를 놓고 비교하니 햇갈린다.. 정확한 차이점, 쓰는 이유 등이 있을것 같다. forEach가 경제적이라면 익숙해질 필요가 있다.

  for (i = 0; i < rows.length; i++) {
      console.log(rows[i]);
  }
  

  //--------이 과정에서 주로 사용하는 반복문--------
  rows.forEach((a) => {
       console.log(a)
  )}
  

  • 블로그 링크 :https://ohnyong.tistory.com/25
  • https://velog.io/@bacccine/for와-foreach의-차이

백틱과 ${} 표현의 출처에 대한 질답.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
템플릿 리터럴 공식문서를 통해서 이해
템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용합니다.
템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다.

API란 정확히 무엇인가에 대한 질답
https://aws.amazon.com/ko/what-is/api/
https://ko.wikipedia.org/wiki/API
API(application programming interface 애플리케이션 프로그래밍 인터페이스[*], 응용 프로그램 프로그래밍 인터페이스)는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스
컴퓨터와 인간을 연결시키는 사용자 인터페이스와 반대로, API는 컴퓨터나 소프트웨어를 서로 연결한다.

forEach, 화살표 함수 등 기초 이해 할 때 신뢰도 높은 공식문서 등 찾는 버릇들이기
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://www.w3schools.com/