개발(Develop)/웹(Web) _프로젝트project24 웹 / Ajax란? / Ajax를 이용한 미세먼지 API 이용해보기 / Ajax 동작방식/동기 비동기 방식 차이점/ 실습 예제 AJAX란? ( Asynchronous JavaScript and XML ) 자바스크립트를 사용한 '비동기적' 통신을 뜻하며 서버와 클라이언트 간의 XML 데이터를 주고 받는 데 사용한다. 비동기란? 여러 가지 일이 동시적으로 발생한다는 뜻이다. 동기 방식과는 다르게 업무를 처리 하는 중에 다른 업무를 처리할 수가 있다. 통신을 위해 서버에 데이터를 요청을 하는데, 요청 한 후에 멈추어 있는 것이 아니라 프로그램은 계속적으로 작동하고 있는 것이다. AJAX 동작 방식 AJAX를 활용해 클라이언트와 서버가 통신을 한다. 동작 방식에는 서버로부터 데이터를 가져오는 "GET" 요청 방식 서버에 데이터를 등록하는 "POST" 요청 방식이 있다. AJAX의 GET 방식과 POST 방식을 활용하여 클라이언트에서 서.. 2021. 5. 20. 웹 / JSON이란?/ JSON View/ JSON 소프트웨어 / 크롬확장프로그램 JSONView/꿀팁 JSON (JavaScript Object Notation)이란? 데이터를 저장하거나 전송할 때 쓰이는 경량의 데이터 교환 형식이다. 특정 프로그래밍 문법이 아닌 단순히 데이터를 표시하는 표현 방법이기 때문에 깊게 파고들 필요 없이 어떤 식으로 데이터가 정리가 되어 있는 지만 이해하면 될 것 같다. 아래는 미세먼지 API를 그대로 가지고 온 것이다. '구글 크롬(Chrome)'으로 처음 열었을 때 데이터를 한눈에 파악하기 어렵다. 이때 유용하게 쓰일 구글 크롬의 확장프로그램인 'JSONView'를 소개하겠다. JSON View를 다운로드할 수 있는 주소는 아래에 있다. https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefha.. 2021. 5. 19. 웹 / 제이쿼리(jQuery) 자주 쓰이는 함수 모음zip / 제이쿼리 메소드 / 제이쿼리 이벤트 함수/ HTML제어 메소드 매개변수에 따른 이벤트 함수 매개변수가 있을 때의 이벤트 함수는 매개변수를 사용하여 이벤트 함수를 설정한다. 매개변수가 없을 때의 이벤트 함수는 사용자로부터 값을 받아오거나, 사용자가 이벤트를 한 것처럼 설정한다. HTML 제어와 관련된 메소드 .after() 해당 요소 뒤에 내용(html()와 같은 기능)을 추가한다. $("#document").after("뒤에 해당 내용을 추가해주세요."); .before() 선택된 대성의 전에 html을 삽입한다. 해당 요소 앞에 내용( html()와 같은 기능 )을 추가한다. $("#document").before("앞에 해당 내용을 추가해주세요."); .html() .text() 메소드와 기능은 유사하지만 삽입하는 내용에 hmtl 태그가 있다면 태그가 적용되며 .. 2021. 5. 18. 웹 / 제이쿼리(jQuery)란 무엇인가/유용한공부사이트/함께해보는예제/쉬운설명/ w3schools 다음은 자바스크립트보다 더욱 간결하게 웹 기능을 사용할 수 있는 '제이쿼리(jQuery)'에 대해 알아볼 것이다. jQuery 란 무엇인가? 제이쿼리는 '경량의 JavaScript 라이브러리'라고도 한다. 기존과 다른 특별한 소프트웨어가 아니라 자바스크립트를 웹에서 '훨씬 쉽게 사용'할 수 있도록 하는 것이다. jQuery는 자바스크립트 코드로는 길게 작성해야 하는 작업을 한 줄의 코드로 호출할 수 있다. 자바스크립트의 많은 복잡한 작업을 단순화할 수 있다는 이야기이다. jQuery는 다른 사람이 써놓은 자바스크립트를 '가져와서(임포트)' 사용한다고 볼 수 있다. 그렇기 때문에 jQuery를 사용하기 위해서는 태그 사이에 아래 코드를 복사 붙여넣기 해주면 완료이다. 매우 간단하다. jQuery 기본 구문.. 2021. 5. 16. 웹 / 처음 제작해보는 나만의 웹 쇼핑몰 사이트 - HTML CSS JS / 자세한 설명 위의 페이지는 현재까지 공부한 내용만을 바탕으로 제작해본 나만의 쇼핑몰 사이트 주문 페이지이다. 아직까지 공부한 부분이 미약하여 홈페이지도 부실해보이지만.. 그래도 열심히 하고 있다. 쇼핑몰 상단에는 내가 가장 구매하고자 하는 맥북 프로 사진을 URL 주소만 가져와 넣었다. 아래와 같은 제안서를 제안자한테 받았다고 가정하고 웹을 제작해보았다. 직접 제작한 이미지가 아니기에.. 워터마크는 어쩔 수가 없다. 이미지로 되어 있어 보이지 않겠지만 사진을 왼쪽 오른쪽으로 넘기는 화살표가 있다. 화살표를 누르면 다른 사진으로 넘어간다. 이 기능은 쇼핑몰을 가보면 쉽게 볼 수 있는 부분이다. 옷이나 물품들의 다양한 각도의 사진들을 첨부하면 좋은 요소인 것 같다. 요소의 이름은 (1)'Carousel Slide' 캐러.. 2021. 5. 16. 웹 / '제대로 된' 웹 공부를 하고자 한다 이전부터 HTML을 공부를 해왔었다. 그런데 그 공부가 깨작깨작 겉핥기만 할 뿐 제대로된 공부가 아니었음을 최근에서야 깨달았다. 그 이유는 어떠한 홈페이지에 대한 구상은 머릿 속에 떠올리는데, 그것을 개발 언어로 표현을 못 하는 것이었다. 웹 언어의 어떤 기능을 써야 하고 어떤 것을 우선적으로 작성하는지를 하나도 모르는 것이었다. 이제 제대로된 공부를 시작해보려고 한다. 모르는 것은 무조건 찾아보면서 모르고 넘어가지 말자. 인터넷 시대에서 구글링으로 안 나오는 것이 없는데 모르고 넘어갈 필요가 없는 것이다! HTML과 세트로 사용되는 CSS, JavaScript도 함께 공부하고자 한다. 그 다짐이 작심삼일이 되지 않도록 개발일지도 함께 써보고자 한다. 아자아자 화이팅 !! 2021. 5. 15. 이전 1 2 3 다음
