본문 바로가기

jquery7

[Web] 서버에 배포하기 - ( week 5 ) 내가 만든 웹페이지를 모든 사람이 접속이 가능하게 하려면 내 컴퓨터에서 배포하고 컴퓨터를 항상 켜놓으면 가능하다. 하지만 컴퓨터를 항시 켜놓을 수 없으며 다른 작업도 해야 하기 때문에 내 컴퓨터 대신 계속 켜놓을 컴퓨터가 필요한데 이를 서버라고 한다. 요즘은 실물 컴퓨터를 대여해서 서버를 사용하는 것보다 인터넷 환경에 세팅되어 있는 가상 컴퓨터를 사용하는 방식을 많이 사용하며 이를 클라우드 서버라고 한다. AWS 아마존 웹 서비스는 클라우드 서버 중 가장 유명한 방식으로 그중 가장 편리한 AWS Elastic Beanstalk를 사용해서 페이지를 배포해 본다. AWS Elastic Beanstalk 페이지에 접속해서 내 계정을 클릭하고 '보안 자격 증명' 페이지를 연다. 그리고 '액세스 키'로 들어가서 .. 2023. 5. 2.
[Web] 복습 ( week - 3) API를 호출하고 데이터를 가공해 브라우저에 나타내본다. html은 저번에 만들었던 것을 사용한다. 사용할 API fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => { let rows = data['movies'] $('#cards').empty() rows.forEach((a) => { let comment = a['comment'] let desc = a['desc'] let image = a['image'] let star = a['star'] let title = a['title'] let temp_html = ` ${title} ${desc} ⭐⭐⭐ ${comment} ` $('#card.. 2023. 4. 19.
[Web] 과제) 서울 날씨 API 적용시키기 - ( week 2 ) 이전에 만든 html을 베이스로 서울 날씨 API를 불러와서 데이터를 브라우저에 나타내본다. 서울 날씨 API 준비 API를 열어서 데이터를 살펴본다. 여기서 temp 데이터를 가져다 쓰면 될 것 같다. 날씨 정보 같은 경우 클릭 이벤트가 발생할 때 html이 생성되는 게 아니라 브라우저가 열릴 때 자동으로 실행되어야 한다. 이 기능을 해주는 함수가 있다. $(document).ready(function () { }) 간단하게 temp 값을 가져다가 해당 태그에 값을 넣어주면 된다. $(document).ready(function () { fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(d.. 2023. 4. 19.
[Web] fetch 연습 - 따릉이API ( week 2 ) 따릉이 API 따릉이 API를 가공하면서 jquery를 연습해 본다. doctype html> Fetch 연습하고 가기! div.question-box { margin: 10px 0 20px 0; } table { border: 1px solid; border-collapse: collapse; } td, th { padding: 10px; border: 1px solid; } function q1() { // 여기에 코드를 입력하세요 } Fetch 연습하자! 2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기 모든 위치의 따릉이 현황을 보여주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 거치대 위치 거치대 수 현재 거치된 따릉이 수 102. 망원역 1번출구 앞 22 0.. 2023. 4. 19.