본문 바로가기

전체 글

-2주차 끝& 숙제- 2주차 숙제가 아주 간단해보이면서도 막상 할려니 뭐부터 해야 할지 몰랐다. 그래서 구글링을 통해 복습을 먼저 하였다. Ajax 기본 골격 $.ajax({ type: "GET", // GET 방식으로 요청한다. url: "여기에 url을 입력", data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둡니다) success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 } }) 출처: https://velog.io/@jisoolee11/Ajax%EB%A1%9C-%ED%99%98%EC%9C%A8-API-%EC%A0%81%EC%9A%A9%ED%95%B4%.. 더보기
-2주차 Quiz_Ajax 연습하기(1)- 서울시 미세먼지 상태 페이지를 만들고 난 뒤, 바로 연습에 들어갔다. 이렇게 세 칸으로 자전거 현황을 만드는 것인데, 전에 작성한 코드를 따라 갔기 때문에 어려움은 없었다 하지만 표 안에 어떻게 api를 넣는지 몰라서 이런식의 결과물이 나왔다.. 해답은! 태그를 붙혀주는 것 temp_html = `${station_name} : ${station_tot}: ${station_bike}` 초기에 이렇게 코드를 집어넣으니 직관적으로 표에 들어가지 못하고 표밑에 : : 이런식으로 표기되었다. 이것을 해결하기 위해 html 테이블 태그를 사용해야 한다. (리스트 태그를 쓴 내가 왕초보 ㅠㅠ) tr은 'table row'의 약자로, 테이블의 행을 표현한다. td는 'table data'의 약자이다. 사실 위에서는.. 더보기
-2주차 Ajax 연습하기- 참고! Ajax는 Jquery가 import되야 쓸 수 있다. - 미세먼지 OpenAPI를 활용한 Ajax 다뤄보기 Ajax(클라이언트와 서버간에 데이터를 주고받게 해준다.) 를 이용해 서울 구 별 미세먼지를 볼 수 있는 화면을 만들었다. 일단 Ajax기본골격은 복붙했지만 하나씩 리뷰해보자면 Type은 기본적인 조회기능을 하는 "GET"을 썼다. Url 주소에는 서울미세먼지 오픈API를 복붙, data는 뭔 지 모르겠으나 빈값이다. success: function 는 아직 잘 모르겠다. 더보기
-2주차 Ajax란? - Ajax란? Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다. ※ 비동기(async)방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 .. 더보기
2주차 서버-클라이언트 통신 이해하기 -Json이란? 딕셔너리와 리스트 for문이 쓰일것 같다? - API란? 은행 창구와도 같은 것 같은 예금창구에서도 개인 고객이냐 기업고객이냐에 따라 요구하는 것과 처리하는 것이 다른 것처럼, 클라이언트가 요청할때에도, "타입"이라는 것이 존재함 * Get -> 통상적으로 데이터 조회를 요청 할 때 ex) 영화 목록 조회 *서버 프로그래머와 클라이언트가 미리 약속해 논 코드를 입력했을때 올바르게 수행된다! * Post -> 통상적으로! 데이터 생성(create), 변경(update), 삭제(delete) 요청 할 때 ex) 회원가입, 회원탈퇴, 비밀번호 수정, 싸이월드 같은기능 더보기
-2주차 Jquery 복습 function q3() { let txt = $('#input-q3').val(); let temp_html = `${txt}` $('#names-q3').append(temp_html) } function q3_remove() { $('#names-q3').empty() } 어제 Jquery quiz를 풀면서 강사님을 따라 만든 코드가 이해가 잘 안되어서 하나하나 다시 복습을 해보도록 했다. (아직은 부트캠프처럼 시간이 촉박한 강의가 아니니 하나하나 자세히 이해하고 가는게 좋다고 판단했다.) 우선 이코드를 완성하면 다음과 같은 화면이 구현되는데 무엇 때문에 작동하는지 차근차근 알아봐야겠다..;; 1. 우선 txt라는 변수명에 인풋박스3 제이쿼리를 변수선언 한다. 2. 우선은 변수명 temp_html .. 더보기
2주차 -Jquery 연습하기- 사실 3일정도 강의의 진도를 나갈 수가 없었다. jquery와 Java script를 이용한 Quiz를 풀 수가 없었기 때문이다. 함수부터 자바스크립트 제이쿼리까지 이해하기 까지 다시 강의를 보고 구글링도 해보고, 현업에서 일하는 개발자(여자친구)의 자문(제일 많은 도움이 되었다.)을 들으며 겨우 겨우 이해가 되었다. 하지만 그마저도 퀴즈1번까지는 풀수 있었으나 2번부터는 풀 수 없었다 ..ㅠㅠㅠㅠㅠ 1번 퀴즈는 if문과 alert을 적절히 사용하면 비교적 어렵지 않게 풀 수 있었다. function q1() { let blank = $('#input-q1').val() if (blank == "") { alert("입력하세요!"); } else { alert(blank); } 변수지정 -> 변수가 빈값.. 더보기
-2주차 Jquery 적용하기- - 포스팅박스 열기/닫기 만들어보기 포스팅박스 열기 a onclick 부분이 잘 이해가 되지 않아 애를 먹어 구글링을 많이 했다. 그 결과 더보기

티스토리툴바