1회독 2주차 개발일지
링크텍스트
함수를 쓰는 방법
JQuery, Ajax 사용 방법
html을 조작하는 javascript를 미리 짜둔것을 제이쿼리라고 하는데, 즉 라이브러리이다.
찾아서 사용하게끔 되어있다.
제이쿼리를 사용할수 있도록 링크를 연결해서 사용해야 하는데, 여전히 백지의 html에 제이쿼리 사용할때 붙여 넣어야 하는 코드들은 직접 해보질 못했다.
제공된 코드를 붙여넣기 해서 사용하였다.
자주쓰는 JQuery는 input 박스 값을 가져오는 것이다.
CSS는 class값을 지칭해주고, JQuery는 id값으로 지정해준다.
제이쿼리의 형태는
$('#id값').명령어()
이다.
명령어로는 val, show, hide, append 등등
박스로 묶어둔 콘텐츠가 보였다가 감춰졌다가 할때 쓰는 제이쿼리이다.
스파르타피디아 페이지를 구현해서 부트스트랩을 이용해 카드형태를 만들고,
영화 별점을 매길수 있는 칸도 만들어서 페이지의 형태를 제작했다.
단순하게 정보만 띄우는 페이지가 아니라 유저의 행동으로 사이트에 적용되게 만들어야 하므로
영화기록하기 버튼을 클릭했을때, 입력창에 입력했을때, 기록하기 버튼을 클릭했을때, 닫기 버튼을 클릭했을 때 등등 상황에 맞는 반응을 하게 코드를 짜야한다.
항상 코드가 잘 작성되었는지 확인을 하는 습관이 중요한것 같다.
console.log()와 alert으로 결과값이 잘 나오는지 확인을 한 뒤에 정규코드를 짜 넣는다.
다양한 함수에 대해서도 배웠는데,
빈칸 체크 함수 : if구문 + 알림띄우기 + 제이쿼리 적용하기
이메일 판별 함수 만들기 : includes를 구글링하여 적용하기
등을 다시 해보았다.
1회차때보다는 조금 덜 걸리긴 했는데, 백지 상태에서는 이게 잘 떠오를지 알수가 없다..
만약, 빈칸이라면, 빈칸이 아니라면으로 나눠야 하고,
이메일의 경우 이메일주소에서 도메인 값만 alert으로 띄우길 원했는데,
@으로 한번 나누고, .으로 또한번 나누어서 .의 앞에 있는 값을 출력해야 한다.
이때 생각해야할 것은
이메일을 쓰지 않았을 때는 '이메일이 아닙니다' 라는 문구를 띄워야 하고,
이메일을 썼다고 해도 도메인을 출력해야 하는데 .이 없으면 어떻게 되는건지 애매했다.
@을 포함하고 있으면 일단 이메일로 인식을 하게 하고, @뒤에 아무말도 없으면 아무말도 없는 alert창이 뜨게 된다.
split의 경우 .으로 계속 연결해 나갈수 있다.
function q2() {
let email = $('#input-q2').val()
if (email.includes('@')) {
let domain = email.split('@')[1].split('.')[0];
alert(domain);
}
else{
alert('이메일이 아닙니다');
}
}
여기서 1회독때도 빼먹은것이... true 확인이다. 단순히 includes만 써도 적용은 됐는데,
if (email.includes('@') == true) 로 참을 확인해야 한다고 한다.
temp_html작성하기
teml_html은 다른것보다도 백틱의 사용이 중요한것 같다.
let temp_html =
이렇게 입력하고, 뒤에 백틱을 쓴뒤 백틱안에 html을 넣어준다.
맥에서는 물결표시와 원화표시밖에 없는데,
한글키에서는 물결이나 원화가 뜨지만 영문으로 해두고 치면 백틱이 뜬다.
작성한 temp_html은 제이쿼리로 불러온다.
$('#id값').append(temp_html)
다음은 서버와 클라이언트 이해하기 인데, 이게 조금 헷갈리고 어려웠다.
우선 오픈api로 제공된 정보를 가지고 와서 열었는데 너무 요지경...
나름 일목요연한 데이터를 확인하고 싶다면, 크롬의 확장 프로그램인 JSONVue 을 설치한다.
정신없이 분산되었던 데이터가 알아보기 쉽게 보인다.
API는 여러타입이 있지만, 초보자이기 때문에 GET, POST 두 타입을 알면 된단다.
GET은 데이터 조회(read)를 요청할때 쓰는 타입,
POST 는 데이터 생성 (Create) 변경 (Update) 삭제(Delete) 를 요청할 때 쓰는 타입.
2주차에서는 GET방식만,
4주차에 POST방식을 배울 예정이다.
뭔가를 검색하기 위해 검색어를 쓰고 엔터를 치는 행위 역시도 GET방식이라고 한다.
기생충 NAVER 영화 페이지를 예로 들면서 설명해주셨는데
https://movie.naver.com/movie/bi/mi/basic.naver?code=161967
movie.naver.com이라는 어떤 컴퓨터에 movie/bi/mi/basic.naver이라는 창구에서
code번호 161967을 들고 갔다 라는 의미란다.
서버와 클라이언트의 약속에 의해서 요청할 때 코드값을 담아서 주면, 원하는 페이지를 출력해준다는 원리인 셈이다.
값을 여러 개 가져갈 때는 &로 연결해준다.
자바스크립트에서는 Ajax를 이용해서 서버에 요청해준다.
Ajax의 기본 골격은
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success : function (response) {
console.log(response)
}
})
이다.
여기에 url을 입력칸에 가지고 오고 싶은 api url을 넣어주면 되는데, url에 요청해서 response를 찍어주겠다라는 의미의 코드이다.
가지고 온 api 값은 서울시 미세먼지 값이었는데, 전체가 리스트로 되어있어서 반복문은 필수 였다.
반복문의 형태를 아직 암기하지 못했는데 사용하면서 점점 익숙해져야 할 것 같다.
i < rows.langth; i++ 를 for 안에 넣는 거였는데...
끄응...
완성된 형태의 ajax 코드는 다음과 같다
function q1() {
$('#names-q1').empty()
이렇게 쓰면 된다.
뭔가 띄워쓰기가 잘 안됐지만.. 여기서 if문을 써서 데이터중 일부값만 추려서 확인해볼수도 있다.
과제는 지난번에 만들었던 팬명록에 날씨 api를 참고해서 붙여보는 것이었다.
1회독때는 서울의 기온을 띄웠지만, 2회독에는 부산의 기온을 띄워보았다.
