미소를뿌리는감자의 코딩
[항해99 웹개발종합반] 2주차 본문
- javascript : 웹을 움직이게 하는 코드
- jQuery : html 뼈대를 선택해서 조작
- Fetch : 짧은 코드로 요청을 보내고 받아온다.
javascript : 언어 중 하나이다. 브라우저가 알아들을 수 있는 언어이다.
console.log("hello") => 콘솔에 log로 기록해줘 라는 의미이다.
<script> 태그를 이용하여 JS 코드를 작성할 수 있다.
var와 같이 let은 변수를 선언하는데 사용해준다.
딕셔너리 선언을 예시로 보아보자.
let b_dict={'name':'bob', 'age':21}
let myemail = 'sparta@gmail.com'
let result = myemail.split('@')
딕셔너리의 경우, 키 값을 중복되어 사용할 수 없다. 물론 적을 순 있지만, 아마 맨 앞의 키값만을 가지고 오게 될 것이다.
split을 이용해서 문자열을 나누어서 list로 저장할 수 있다. split의 경우 연속적으로 사용할 수 있다.
myemail.split('@')[1].spilt('.')[0]forEach
fruits.forEach(element =>{
console.log(element)
})
fruit list에서 각각의 element를 차례로 꺼내어 가져온다.
jQuery
jQuery CDN
jQuery를 google에서 사용할 땐, google의 CDN을 찾아와, <head> 부분에 넣어주도록 한다.
이를 통해서, 다음과 같이 $('#q') 와 같이 사용할 수 있다.
<div id = "q1"> potatoscasmile</div>
let rename = 'potatoscatteringsmile'
$('#q1').text(rename)
1주차에서 배웠듯이 id의 경우 #을 이용하여 나타내기에 #을 이용함을 확인할 수 있다.
$('#q1').empty()
let temp_html = `<p> ${element} </P>`
$('#q1').append(temp_html)empty를 통해서 이전에 적혀 있는 것을 지울 수 있다.
백틱
`을 처음 사용해 보아서 무엇인지 찾아보니, '백틱' 이라는 것이었다.
이에 대해 알아보니, $()를 이용하여 문자열과 자연스럽게 collaborate하여 나타내기 위해 이용함을 알 수 있었다.
서버-클라이언트 통신 이해하기
클라이언트 -> 서버
<-
클라이언트와 서버는 서로 요청과 응답을 반복하면서 사용된다.
클라이언트 -> JS
서버 -> FLASK
를 이용해서 주로 사용된다.
API의 경우,
1. GET: 데이터 조회를 요청할 때
2. POST: 데이터 create, update, delete 요청할 때
로 나뉜다.
https://movie.daum.net/moviedb/main?movieId=161806
라고 할 때 ?를 기준으로 앞뒤로 나뉘게 된다.
?앞 -> 서버 주소
?뒤 -> 영화 번호 즉, 저장되어있는 파일 중에서 위치를 나타내기 위해 사용
JSON을 기본적으로 어떻게 처리하는지 나타내보면,
let weather_url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(weather_url)
.then(res => res.json())
.then(data => {})이런식으로 나타내게 된다.
url을 넣어두고,
fetch 함수를 이용해서, 데이터를 처리한다.
JsonView라는 extension을 설치해 보았는데 정말 좋았다..!! 가독성이 엄청 좋아졌다.
'강의수강 > [웹개발종합반]' 카테고리의 다른 글
| [항해99 웹개발종합반] 팀플; 발표 (1) | 2024.01.15 |
|---|---|
| [항해99 웹개발종합반] 5주차 (0) | 2024.01.12 |
| [항해99 웹개발종합반] 4주차 (1) | 2024.01.11 |
| [항해99 웹개발종합반] 3주차 (1) | 2024.01.10 |
| [항해99 웹개발종합반] 1주차 (1) | 2024.01.09 |
