coding/JS 29

네이버 지도 API 사용

2022/05/02 네이버 지도를 사용하기 위해선 네이버에서 제공해 주는 API를 이용하면 된다. 유료 서비스지만, 기준 사용량을 넘어야 결제 되는 것이라 사실상 무료라고 볼수 있다.(개인사용자 기준) 먼저 네이버 클라우드 플렛폼에 회원가입과 결제수단을 등록 한다. 네이버 클라우드 플랫폼의 서비스에서 Maps 이용신청하기 Naver cloud platfrom console 페이지에서 Application 등록을 눌러서 Maps를 추가한다 일반적이고 가장 많이 쓰이는 WEB DYNAMIC MAP을 선택 지도를 구현할 사이트의 주소를 입력 하고(http// 포로토콜도 함께) 등록이 됬다면 인증정보에서 Client ID를 복사 해준다. https://navermaps.github.io/maps.js.ncp/ ..

coding/JS 2022.05.02

API / Ajax get / post DB 저장 및 출력

2022.04.29 간단하게 python flask로 로컬 서버를 열고 html에 데이터를 입력하면 post 요청으로 받아 db에 저장하고 db에 저장된 데이터들을 get요청으로 클라이언트에게 출력해 보여주는 기능 기본적인 API Ajax 코드 # GET 요청 API코드 @app.route('/test', methods=['GET']) def test_get(): title_receive = request.args.get('title_give') print(title_receive) return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) # POST 요청 API코드 @app.route('/test', methods=['POST']) def test_post..

coding/JS 2022.04.29

자동실행 함수 $(document).ready()

2022.04.28 Javascript로 페이지 로드 시 자동으로 실행되는 함수를 구현하려면 window.onload 함수를 사용 페이지의 모든 요소들이 로드되어야 호출 됨(페이지가 모두 로드된 시점) 한페이지에는 하나의 window.onload() 가 적용됨 window.onload = function () { alert("hi") } jQuery는 자바스크립트의 window.onload 함수의 문제점을 해결하기 위해 $(document).ready() 함수를 사용 DOM이 모두 로드 되면 실행됨 중복 사용해도 순서대로 모두 실행됨 $(document).ready(function(){ alert("hi") }); // or $().ready(function(){ alert("hi") }); // 참고 ..

coding/JS 2022.04.28

Ajax

2022.04 28 Ajax란 Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나 javascript를 통해서 서버에 데이터를 비동기 방식으로 요청하는것 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다. Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻 Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function..

coding/JS 2022.04.28

문자열에서 특정 문자열 찾기 search()

2002.04.28 Javascript의 search() 함수는 문자열에서 조건 문자열을 찾아서 몇 번째 위치에 확인을 해주는 함수입니다. 매칭이 된다면 첫 번째로 매치되는 인덱스를 반환하게 되지만, 만약 찾지 못한다면 -1을 반환하게 됩니다.(없으면 -1) 쉽게 말하자면 검색되는 문자열의 위치값을 반환하게 됩니다. 영문의 경우 대소문자 구분하니 주의! let test1 = "Hello World"; let test2 = "안녕하세요 스파르타"; console.log(test1.search("W")); console.log(test1.search("w")); console.log(test1.search("Hello")); console.log(test1.search("스")); console.log(te..

coding/JS 2022.04.28

JQuery

2022.04.28 JQuery란, HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔것. 라이브러리 JQuery 사용 예시 // js 코드만 사용 document.getElementById("element").style.display = "none"; // jquery 사용 $('#element').hide(); jquery 사용시 코드가 짧아지고, 더 직관적임 JQuery 사용법 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것입니다! (그렇게 때문에, 쓰기 전에 "import"를 해야합니다!) https://www.w3schools.com/jquery/jquery..

coding/JS 2022.04.28

js 반복

2022.04.26 자바스크립트의 반복문 기본 형태는 for (변수선언; 끝날조건; 루프하고 뭐 할지){ 콘솔로그에 "hi"를 찍어라 } for (let i = 0; i < 10; i++){ console.log("hi") } 식으로 사용함 맨처음 i =0 인데 10보다 작으니까 콘솔을 찍고 i++ i에 1을 더함 그럼 이제 i는 1이 되고 10보다 작으니까 콘솔을 찍고 i에 1을 더함 ... i는 10이 되면 10보다 작지않으니까 반복문이 종료댐 보통 이렇게 딕셔너리가 들어있는 리스트인 mise_list를 돌면서 조건문과 함께 미세먼지가 40 초과 이면 구 이름과 미세먼지를 찍어라 하면서 돎 for (let i = 0; i < mise_list.length; i++){ let gu_name = mise..

coding/JS 2022.04.26