Javascript
웹의 뼈대와 살인 HTML과 CSS를 조작하는 개발 언어.
HTML 태그와 내용을 추가하거나 삭제하는데 쓰일 수 있음.
JQuery
Javascript 라이브러리 중의 하나. 사람이 이해하기 좀 더 쉬움. 읽으면 있는 그대로 이해할 수 있음.
Javascript만으로 웹을 조작하면 코드가 길어지고 힘들어지기 때문에 반복되는 작업을 쉽게 처리할 수 있게 만들어둔 모음집 같은 녀석.
Fetch
API 데이터를 조회하고, 가져와서 조작할 수 있는 친구.
Key Takeaways
- 기억이 나지 않아도 좌절하지 말자. 기억하려고 노력하지만, 안되면 우선 가져다쓰면서 익숙해지자.
- 기본적으로 변수 설정 시에는
let을 주로 쓴다. - HTML을 바꾸고 싶을 때는 초기화 또는 빈값으로 설정, 삭제한 다음에 추가하는 방향으로 처리한다고 생각하면 쉽다.
- API로 처음에 데이터를 가져올 때는 console에 보내봐서 확인하자. (웹브라우저 > 개발자모드 > console 탭으로 보냄)
- 코드 중간중간에 console.log를 찍어서 데이터가 잘 조작, 전달되고 있는지도 확인 가능.
- 생각하는 순서
- Trigger가 무엇인가 (HTML 또는 스크립트에 존재)
- Action이 무엇인가 (어떤 HTML을 어떻게 바꾸는가)
- 데이터를 어디서 가져오는가
- 가져오는 데이터의 원본은 어떻게 되어있는가 파악 (JSON 값)
- 필요한 데이터를 변수(let)에 담아두자 (필요한 정보의 최상위 수준부터 담자)
- 필요한 데이터를 쪼개서 여러 변수에 담자
- 담아둔 변수를 최종 변수(상자라고 생각)에 넣자
- append 또는 text를 사용하자
- JQuery로 HTML을 조작하는 예시
$('#html_id').append(variable_name)- HTML 태그의 id가
html_id인 곳에variable_name의 값을 추가한다(append).
- 변수에 HTML을 담을 때는 백틱(Backtick)을 사용 (``)
- 변수를 담기 전에 예시 HTML을 먼저 넣어보면 이해가 더 쉽다.
- 조건문을 사용해서 2개 이상의 HTML을 처리할 수 있다.
- 백틱 안에 변수를 가져올 때는
${let_name}이렇게 쓴다. - 반복되는 작업은
forEach를 쓴다.forEach용법은 이유를 찾기보다 그대로 받아들이자.
