본문 바로가기

개발(Develop)82

웹 / 쇼핑몰 기능 추가하기 / Ajax와 jQuery로 쇼핑몰에 환율추가 해보기/ 환율 API 활용한 쇼핑몰 이전에 HTML, CSS, JavaScript에 요소들로만 제작하였던 웹 쇼핑몰(?) 비스무리한 것을 다시 한번 더 활용해보고자 한다. HTML, CSS, JavaScript와 함께 이전 글에서 쭉 다뤄왔던 Ajax와 jQuery를 사용해서 쇼핑몰에 기능을 추가하고자 한다. 이전에 간단하게 제작하였던 웹 쇼핑몰 주문 부분에 대한 코드 전부를 맨 아래에 첨부해놓겠다. 아직 미숙한 부분이 많아 불필요한 코드 부분이 있을 가능성이 있으니 복사해서 사용하시는 분은 효율적으로 고쳐서 써보면 좋을 것 같다. 혹시나 못 본 분들을 위해 이전 글에 어떤 방식으로 제작을 해보았는지 참고하면 좋을 것 같다. 웹 / 처음 제작해보는 나만의 웹 쇼핑몰 사이트 - HTML CSS JS / 자세한 설명 웹 / 처음 제작해보는 나.. 2021. 5. 22.
웹 / jQuery와 Ajax 예제 연습/ 고양이 사진 API 랜덤으로 바뀌는/ 강아지 사진 API/ OpenAPI/ 쉬운 예제와 설명 이번에 활용할 API에서는 고양이 사진을 데이터로 주는 API를 활용하는 것이다. 여기서 특이한 점은 해당 API에서 고양이 사진을 랜덤으로 준다. 이를 활용해볼 것이다. 아래의 구조는 API URL을 타고 들어가면 볼 수 있는 구조인데 이전에 다뤘던 API와 다른 점은 여러 개의 딕셔너리가 아니라 리스트 형태로 넘어온다. 그렇기 때문에 사진 주소를 활용하기 위해서는 API 주소는 아래에 첨부해 놓았다. 취향에 따라 고양이, 강아지를 선택하여 활용해보면 좋을 듯하다. 고양이 사진을 랜덤으로 주는 API API URL : https://api.thecatapi.com/v1/images/search 강아지 사진을 랜덤으로 주는 API https://api.thedogapi.com/v1/images/searc.. 2021. 5. 22.
웹 / jQuery와 Ajax 예제 연습/ 따릉이 API 활용해보기/ 서울시 OpenAPI/ 쉬운 예제와 설명 이전 글들에서 다뤘던 jQuery와 Ajax를 사용해보자. 이번에는 서울시에서 사용되고 있는 공유 자전거 '따릉이' API를 활용해 연습을 해볼 것이다. url : 서울시 열린 데이터 광장 / 공공자전거 실시간 정보 http://data.seoul.go.kr/dataList/OA-15493/A/1/datasetView.do 서울특별시 공공자전거 실시간 대여정보 서울특별시 공공자전거 실시간 대여정보입니다. 대여소별 실시간 자전거 대여가능 건수, 거치율, 대여소 위치정보를 제공합니다. 호출시 시스템 부하로 한번에 최대 1,000건를 초과할수 data.seoul.go.kr 위의 주소로 들어가게 되면 '서울 열린 데이터 광장' 사이트가 열린다. 서울특별시 공공자전거인 '따릉이'의 OpenAPI를 가져올 수 있다.. 2021. 5. 22.
웹 / 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/CSS/JavaScript를 개발하는 사람이라면 무조건 알아야 하는 사이트+사용법+자세한설명 내가 하던 웹 공부는 책이나 유튜브 강의가 전부였다. 책이 안내해주는 대로, 유튜버가 말하는 대로만 안내해주고 나온 대로만 하다보니 모르는 내용이 나오면 그냥 "아~ 이렇게 사용하는구나"하고 암기식으로 외우고만 넘어갔다. 어떠한 함수가 나오면 여기에는 어떤 input값이 들어가야 하고, 어떠한 형식으로 써야 하고, 정확히 어떤 기능을 활용하고 싶을 때 사용해야 하는지를 몰랐다. 그러다가 Google에 모르는 내용을 검색을 하고 난 이후로 나의 웹 공부 스타일은 물론 지금까지 무엇을 공부했나 싶었다. 책과 강의를 보며 끌려다니는 것이 아니라 궁금하거나 모르는 내용에 대한 호기심이 생기면 바로 찾아보고, 더욱 정확하게 알게 되고, 필요할 때 사용하는 방법을 알게 되었다. HTML / CSS / JavaScr.. 2021. 5. 16.

티스토리툴바