서울시 OpenAPI(실시간 따릉이 현황)을 이용하기 따릉이 OpenAPI: http://spartacodingclub.shop/sparta_api/seoulbike jQuery + Ajax의 조합을 연습하자! 2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기 모든 위치의 따릉이 현황을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 거치대 위치 거치대 수 현재 거치된 따릉이 수 102. 망원역 1번출구 앞 22 0 103. 망원역 2번출구 앞 16 0 104. 합정역 1번출구 앞 16 0 jQuery + Ajax의 조합을 연습하자! 2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기 모든 위치의 따릉이 현황을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 ..

Ajax는 jQuery를 임포트 한 페이지에서만 동작 가능하다. 즉, http://google.com/ 과 같은 화면에서 개발자 도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜬다. Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻. $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, success: function (response) { console.log(response) } }) GET 방식으로 이 URL에 요청해서 response를 찍어주겠다는 뜻! $.ajax({ type: "GET", url: "..

JSON은, Key:Value로 이루어져 있고 자료형 Dictionary와 아주 유사하다. 클라이언트가 요청할 때에도, "타입"이라는 것이 존재한다. GET 통상적으로! 데이터 조회(Read)를 요청할 때. 예) 영화 목록 조회 https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 위 주소는 크게 두 부분으로 쪼개진다. 바로 "?"가 쪼개지는 지점이고, "?" 기준으로 앞부분이 , 뒷부분이 [영화 번호] 이다. * 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn * 영화 정보: code=161967 code라는 이름으로 영화 번호를 주자는 것은 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속이다. GET..

JQuery 강의 내용을 바탕으로 복습하는 시간~ 코딩을 만들어 보자! 더보기 jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기 [완성본]2-3. 이메일 도메인만 얼럿 띄우기 클릭 3. HTML 붙이기/지우기 연습 3-1. 이름을 입력하면 아래 나오게 하기 [완성본]3-2. 다지우기 버튼을 만들기 이름 붙이기 다지우기 세종대왕 임꺽정 1. 빈칸 체크 함수 만들기 버튼..

jQuery 란? HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리! 예를 들어 버튼의 색깔을 바꾸고 싶다면? 예를 들어 div 박스를 하나 감추고 싶다면? → 이런 것들 쉽게 해주는 것이, jQuery! document.getElementById("element").style.display = "none"; $('#element').hide(); 위처럼 Javascript로 길고 복잡하게 써야 하는 것을 jQuery로 보다 직관적으로 쓸 수 있고 편리하다. jQuery를 사용하는 방법 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부르고 사이에 아래를 넣으면 끝! 아래는 오늘 사용할 페이지 코드 더보기 내 생애 최고의 영화들 영화 기록하기 영..

자바스트립 기초 문법 배우기에서 onclick button으로 팝업창을 띄웠던 내용을 복습 2022.09.01 - [개발 공부 일지/웹] - Javascript 기초 문법 배우기 (1) Javascript 기초 문법 배우기 (1) Javascript는 script 안에 코드를 입력해준다. script는 브라우저 개발자툴(f12)에 Console탭과 똑같은 것이다. script를 Console탭에 이어서 코드를 입력하여 실행되는 것을 확인 할 수 있고 Console탭에서 코드 ilsangs.tistory.com 영화 기록하기 영화 기록하기를 클릭하면 안녕! 메시지와 팝업창이 뜬다. 홀짝 판별 onclick 함수 만들기 클릭할 때 마다 홀, 짝, 홀, 짝 팝업 창을 만들어보자. let count = 0 fu..

배열에서 특정 원소 개수 구하기 - map 함수를 사용해서 해결하기 다음에서 '딸기'는 몇 개일까? - 이번엔 자바스크립트 콘솔창에서! let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'] let count = 0; for (let i = 0; i

함축적인 자바스크립트 리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한다! 그렇기 때문에 공식문서를 볼 때 당황하지 않고 적용하기 위해서 그리고 기존 자바스크립트보다 더 함축적이고 간결한 문법을 사용하기 위해 배워보자! 함수를 더 짧게! - 화살표 함수 기존에는 함수를 선언하기 위해서 function 키워드를 사용했다. 이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능하다. [기존 방식] let a = function() { console.log("function"); } a(); [최신 방식] let a = () => { console.log("arrow function"); } a();. 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당 기존에는 객체(딕셔..