우주바다 개발일지

과제 : 나만의 메모장 카드들에 들어갈 데이터를 불러오는 api 적용하기. frontend > index.html 파일로 작업 (나만의 링크 메모장) *코드 스니펫 1. api 2. 로딩 후 바로 실행 $(document).ready(function () { listing(); }); function listing() { console.log('실행확인'); } 로딩 후 바로 실행하는 코드 붙여 넣고 콘솔 창에서 연결 확인. console.log 대신 ajax 기본 코드. $(document).ready(function () { listing(); }); function listing() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/post",..

과제 : 1주 차에 만들었던 원페이지 쇼핑몰에 환율정보 추가하기. *강의에서 제공되는 코드 스니펫 2개 활용. (api 링크, 로딩 되자마자 호출하는 ajax 코드.) 5주 차에 서버 사서 올리는 것까지 끝낸 폴더라서 이것저것 있지만 다 무시하고 복습 파일로 진행! homework > index.html 로 작업했었고 (복습 파일 명은 fake_index.html) 스크립트 태그 자체가 없으니 만들고 그 안에 로딩과 동시에 불러오는 코드 태그 안에 붙여넣고 시작. $(document). ready(function( ){ }) *괄호 짝 주의 $(document).ready(function(){ alert('로딩 완료!') }); 예시 이미지. 브라우저 열어서 아까 연결한 alert 잘 뜨는 거 확인하고 ..

frontend 폴더에 02_ajaxquiz03.html 파일 생성. 내용 지우고 골격 붙여넣기. [예제] 고양이 api , 완성 예시 페이지 참고해서 만들기. Hint : 구글 검색 - jQuery 이미지태그 src 바꾸기 (분명 힌트를 줬지만 ㅋㅋㅋ복습이랍시고 검색 안 하고 혼자 해보다 무한 물음표 지옥에 빠져있다. 근데 그게 즐거운 estj ..^^) 일단 api 부터 열어보기. 새로고침 할 때마다 주소가 바뀌고 list[ { dictionary} ] 구조로 되어있다. 이제 html 전체 코드 위에서부터 보기.. 그런데 css에 처음 보는 게..(견딜수 없음) 인간은 모르는 걸 보면 본능적으로 불편합니다. ( 이고잉님 말씀 음성지원 ㅋㅋㅋㅋ) type 이건 뭐고.. 왜 신경쓰이게 줄이 그어져있으며...

지난번 연습과 비슷한 내용 혼자 풀어보기. 서울시 따릉이 오픈 api (공공데이터)를 이용해서 실시간 업데이트 버튼 기능 만들기. frontend 폴더에 02_ajaxquiz02.html 파일 생성, 기본 골격 붙여 넣고 시작! 과제 내용 : - 표(table) 모양으로 붙여주고, - 주차된 자전거 수가 5 이하면 붉은색으로 표시. 필요한 값 3가지 console.log 부터 차근차근. 한 번 오류났었는데 살펴보니 bike 뒤에 [i] 붙이는거 빼먹었다. 반복문 안에서 선언할 때, 여러 값을 불러올거니까 [i]. 주의 표 내용 부분 복사해서 temp_data로 만들고, .append 붙이기 (콘솔로 테스트) 잘 되면, 맨 위에 empty( ) 추가. 마지막으로 붉은 글씨는 .low-stock { colo..

frontend 폴더에 02_ajaxquiz01.html 파일 만들고 시작. 기본 골격 붙여 넣고, 서울시 실시간 데이터 페이지 참고하면서 http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 버튼 누르면 실시간 업데이트 되는 기능 만들기. 내가 작성한 코드랑 강의 코드. 작동도 잘 되고, 보기에는 같은 내용을 한 줄에 쓴 것 같은데 이렇게 써도 되는 건지 모르겠어서 일단 내 코드는 주석으로 남겨놨다. function q1() { $('#names-q1').empty(); $.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c..

Ajax의 정의, 기초적인 개념에 대한 설명은 없어서 따로 검색하다가 참고하기 좋은 사이트 찾았다. http://www.tcpschool.com/ajax/ajax_intro_basic Ajax (Asynchronous JavaScript and XML) : 빠르게 동작하는 동적 웹 페이지 개발 기법 중 하나. 웹 페이지 전체를 다시 로딩하지 않고도, 일부분만 갱신 가능. 백그라운드 영역에서 서버와 통신하고, 그 결과를 웹 페이지 일부분에만 표시할 수 있다. 서버와 다양한 형태의 데이터를 주고받을 수 있다. (JSON , XML, HTML, 텍스트 파일 등.) *주의* Ajax는 JQuery를 임포트 한 페이지에서만 동작. 구글 검색창, 데이터만 있는 서울시 오픈 api 등에서 콘솔을 열고 ajax를 사용..