나의 기록_나의 다이어리

1. PyCharm ▶︎ Preferences(환경설정) 선택 2. 에디터▶︎ 일반 ▶︎ 마우스 컨트롤 ▶︎ 'Command+마우스 휠로 다음 위치의 글꼴 크기 변경' 체크 ▶︎ 활성화된 에디터 vs 모든 에디터는 본인이 원하는거 선택 ▶︎ 확인 3. PyCharm 창에 커서 한번 찍고, Cmd/Ctrl+마우스 휠 위아래로 조정 시에 글자 크기 변함!

1. 아래 이미지와 같이 팬명록에 '실시간 현재기온' 표시하기 2. 날씨 API http://spartacodingclub.shop/sparta_api/weather/seoul 3. API 연결 확인 먼저 해보기 $(document).ready(function(){ alert('다 로딩됐다!') }); 4. Ajax 코드 추가 후 완성 코드 남주혁 팬명록 현재기온 : 00.0도 닉네임 응원댓글 응원 남기기 늘 새로운 얼굴 너무 멋져요! 호빵맨 늘 새로운 얼굴 너무 멋져요! 호빵맨 늘 새로운 얼굴 너무 멋져요! 호빵맨

1. Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) 2. 르탄이 API http://spartacodingclub.shop/sparta_api/rtan 3. Ajax 연습 (Ajax 코드 넣기 전 골격) 1) PyCharm ➡️ 파일 새로 만들기 ➡️ HTML 파일 형식 선택 ➡️ HTML 파일 새로 생성 2) 새로 만든 HTML 파일 형식에 써있던 기존 내용 다 지우기 3) 아래 형식 그대로 복사-붙여넣기 JQuery+Ajax의 조합을 연습하자! 3. 르탄이 API를 이용하기! 아래를 르탄이 사진으로 바꿔주세요 업데이트 버튼을 누를 때마다 지..

1. Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) 2. 서울시 실시간 따릉이 OpenAPI http://spartacodingclub.shop/sparta_api/seoulbike 3. Ajax 연습 (Ajax 코드 넣기 전 골격) 1) PyCharm ➡️ 파일 새로 만들기 ➡️ HTML 파일 형식 선택 ➡️ HTML 파일 새로 생성 2) 새로 만든 HTML 파일 형식에 써있던 기존 내용 다 지우기 3) 아래 형식 그대로 복사-붙여넣기 jQuery + Ajax의 조합을 연습하자! 2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기 모든..

1. Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) 2. 서울시 미세먼지 OpenAPI http://spartacodingclub.shop/sparta_api/seoulair 3. Ajax 연습 (Ajax 코드 넣기 전 골격) 1) PyCharm ➡️ 파일 새로 만들기 ➡️ HTML 파일 형식 선택 ➡️ HTML 파일 새로 생성 2) 새로 만든 HTML 파일 형식에 써있던 기존 내용 다 지우기 3) 아래 형식 그대로 복사-붙여넣기 jQuery+Ajax의 조합을 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모든 구의 미..

1. Ajax 란? (Asynchronous JavaScript and XML의 약자) Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다. JSON XML HTML 텍스트 파일 등 ❗️참고❗️ Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다. ..

1. OpenAPI 란? 모두가 쓸 수 있도록 open 해놓은 데이터 정보 예) 서울시 OpenAPI http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 2. JSON 이란? 아래와 같은 형태 (서울시 OpenAPI를 크롬주소창에 붙여넣기하여 검색해보면 아래와 같은 데이터를 확인할 수 있음) JSON은 Key:Value로 이루어져 있다. 자료형 Dictionary와 아주- 유사. 예제에서 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있다. 3. Jsonview 확장프로그램 설치하기 크롬 익스텐션 JSONVie..

1. Javascript 자바스크립트란? 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML+CSS+Javascript를 준다 Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요? A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠. Java와 Javascript는 어떤 차이가 있나요? 아무 관련 없음 ('햄'과 '햄'스터 처럼 명칭 앞글자가 그저 겹치는거 뿐임) 2. 자바스크립트 - H..

1. HTML, CSS HTML은 뼈대, CSS는 꾸미기! CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 된다. HTML 크게 head와 body로 구성 head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다. head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. body 안에 들어가는 대표적인 요소들! 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목..

1️⃣ 서버 / 클라이언트 / 웹의 동작 개념 웹의 동작 개념 (HTML을 받는 경우) 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "그려주는" 것 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 것 👉 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것 예) https://naver.com/ → 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것! 2. 웹의 동작 개념 (데이터만 받는 경우) HTML만 내려주냐? NO! 데이터만 내려 줄 때가 더~ 많다. 사실 HTML도 줄글로 쓰면 이게 다 '데이터' 자, 공연 티켓을 예매하고 있는 상황을 상상해봅시다! 좌석이 차고 꺼질때마다..