CATEGORIES
자바스크립트에는 많은 데이터 타입이 존재하며 그 중 하나로 배열(array)이 존재합니다. 배열은 자바를 비롯한 대부분의 언어가 가지는 데이터 타입으로 자바스크립트만의 특별한 자료 구조는 아닙니다. 그렇다면 배열이 사용, 선언되는 경우는 언제일까요?# 배열이 사용되는 경우배열을 선언하는 이유는 배열값이 한개의 값이 아닌 여러개의 데이터값을 동시에 가질 수 있기 때문입니다. 그래서 데이터의 집합을 저장하기 위한 용도로 사용하며 반대로 단일 데이터의 경우에는 문자 및 숫자 등의 타입이 사용됩니다. 이런 이유로 배열을 사용할 경우 아래와 같은 장점이 있을 것입니다.! 배열의 데이터 타입(구조)의 장점 단일 데이터(Single data)가 아닌 다수의 데이터(Multiple data) 저장 연관있는 데이터를 함께
Last Modified : 2019-01-29 12:05:09
자바스크립트가 비동기방식의 ajax가 없었다면 꽃을 피웠다 얘기할 수 있었을까요? 재미있게 시작했지만 분명 자바스크립트에게 ajax, 비동기 방식의 호출은 가장 큰 발전의 계기가 되었음이 틀림없습니다... 아래는 이 중요한 ajax에 대하여 하나하나 알아보려합니다. 먼저, ajax가 무엇인지 알아보고 자바스크립트를 사용해 이를 구현하는 다양한 방법들에 대하여도 함께 알아보도록 하겠습니다.! ajax란 무엇인가?ajax는 비동기식 자바스크립트 통신을 의미합니다. 즉 서버와의 웹통신 방법을 비동기식으로 웹페이지를 리로드하지 않고 필요한 순간에 접속하여 데이터를 가져오는 방법입니다. 비동기 방식을 구현하기위해서는 자바스크립트의 XMLHttpRequest 라는 API가 존재하는데 이는 비동기 방식을 구현해주는 가장
Last Modified : 2019-08-01 08:15:59JSON 객체가 가진 메소드중 stringify()는 객체타입을 JSON 타입으로 변경할 수 있게도와줍니다. JSON.stringify(객체데이터)보시는 것처럼 사용방법은 매우 간단합니다. 매개변수로 객체데이터를 넣으면 이를 JSON 형태로 변환하여줍니다. 사실 객체와 JSON은 매우 흡사합니다. 객체와 JSON의 키값에 따옴표가 있느냐 없느냐만 다를분 동일한 모습을 띄고 있습니다. 아래 두 타입의 데이터를 참고하세요objectStr = {test1: '123', test2,: '456', test3,: '789'};jsonStr = {'test1': '123', 'test2',: '456', 'test3',: '789'};두 데이터를 비교해보시면 무엇이 다른지 한눈에 보이실겁니다. 그럼 위 objectSt
Last Modified : 2017-04-27 08:47:58
오늘은 데이터 타입의 하나로 매우 넓리 사용되는 JSON 타입에 대하여 알아보려한다.json은 데이터의 타입 중 하나로 잘알려진 XML과 함께 많이 사용되고 있다. 이런 json은 서버와의 데이터 통신시 전달되는 데이터로 많이 쓰이고 비동기 방식의 ajax() 메소드들과 함께도 많이 사용된다.처음 json 타입을 보게되면 객체와 차이점을 느끼기 어렵다. json 타입은 객체와 매우 유사한 모습을 띄고 있으며 차이점이라면 사용되는 이름 그리고 값 모두가 따옴표(")를 사용하여 표기된다는 점이다. 이는 자바스크립트 객체와 차이점으로 아래의 코드를 통해 무엇이 다른지 확인이 가능하다./* 자바스크립트 객체의 문법 */{ name: "Webisfree", gender: "male"}/* JSON 형태의 문법 *
Last Modified : 2017-10-20 13:52:06
제이쿼리는 ajax() 함수외에도 다양한 단축메소드가 존재합니다. 이중에서도 getJSON() 메소드에 대하여 알아보고자 합니다. 참고로 ajax 단축 메소드는 이외에는 get(), post(), load()등의 메소드가 존재합니다. getJSON() 메소드는 언제 사용할까요? getJSON()은 비동기식으로 서버와 접속해 데이터를 불러올 때 사용하는 점은 같으나 JSON 타입의 데이터를 불러옵니다. 이는 ajax() 메소드의 dataType: 'json' 과 동일한 역할을 수행합니다.$.ajax({dataType: 'json', ... }) // 왼쪽의 축약형 getSON() 메소드일단 아래에서는 getJSON() 메소드의 간단한 사용 모습을 알아보자.getJSON(url, data[Option], cal
Last Modified : 2016-05-16 20:02:20Ajax등의 비동기 통신으로 받은 데이터가 문자열이나 객체 구조를 띄는 경우가 있습니다. 실제로 데이터베이스 또는 로컬에 저장할때 문자열로 변환 후 저장하기도 하는데 이런 경우 다시 객체 구조로 변환해야 사용할 수 있죠. 이 방법으로 JSON.parse()를 사용합니다.# JSON.parse()를 사용하여 객체로 변환하기아래 예제는 받아온 데이터가 responseText라는 변수에 저장하였고 이를 다시 변환해 사용하는 간단한 예제입니다.먼저 responseText에는 다음과 같은 문자열이 저장되어 있습니다.var responseText = '{ "name": "webisfree", "url": "webisfree.com" }';매우 간단한 예제코드입니다. 이제 위 텍스트를 객체 형태로 변환해볼까요? 아래를
Last Modified : 2017-10-20 14:05:22
요즘의 웹에서 비동기 방식의 ajax 호출이 웹환경에서의 꽃이라 할만큼 중요한 부분을 차지합니다. 그만큼 비동기 방식의 통신이 많이 사용되고 반드시 필요하기 때문이죠. 제이쿼리에서 ajax를 사용한 비동기 방식에 대하여 간단하게 알아보고 어떻게 사용하는지 아래에서 알아보겠습니다.# ajax란 무엇이고 장점은?먼저 ajax에 대하여 알아보겠습니다. ajax를 설명하자면... 동기 방식과 달리 페이지 전체를 다시 불러오지 않고 필요한 부분 일부만 호출하여 웹사이트에 반영하는 기술입니다. 이런 비동기 방식을 사용하면 다음과 같은 장점이 있습니다.! ajax 비동기 방식의 장점 보기비동기 방식의 장점은 무엇인지 알아봅니다. 간단하게 아래와 같은 장점이 있습니다.1. 일부만 불러오므로 호출시간과 페이지 로딩 시간이
Last Modified : 2019-10-21 14:28:51반나절을 헤메다가 100%는 아니지만 어느 정도 해결된 인코딩 문제의 해결 과정에 대하여 이야기하려 합니다. 인코딩 문제는 웹사이트 구축시 매우 자주 발생하는 이슈중 하나죠. 해결도 비교적 간단하지 않습니다.! 문제 발생JSON 타입의 파일을 자바스크립트(jQuery)를 사용해 AJAX로 불러온 후 화면에 출력하려고 코딩 하던 중 뜻하지 않은 오류가 발생했습니다. 이상하게도 불러올 값 중에서 제목은 아무런 문제가 발생하지 않았으나 본문을 불러올때 AJAX 기능에 문제가 생기더군요...!! 증상일단 본문 인코딩 때문이라 생각하고 태그도 없애고 길이도 줄여가고 인용코드인 따옴표등도 삭제하기도 하고... 참 많은 방법을 사용했습니다. 그 결과 일부 문자열 출력시 정상 동작하였으나 원하는 텍스트 전체를 불러올 경우
Last Modified : 2015-11-30 14:01:45이 문제는 웹페이지에서 비동기식 AJAX를 사용하여 호출하기 위한 경우 발생합니다. JSON 타입의 포맷으로 PHP 문서를 만들어 API 형태로 불러오는데 파싱 에러가 발생한다면 아래의 문제일 가능성이 높습니다.- 따옴표에 따른 문법 오류(홀따옴표, 쌍따옴표의 차이)- 따옴표 앞에 escape 문자가 없는 경우- nl2br을 사용하지 않았거나 사용하였음에도 변환되지 않은 경우- JSON 문자에 띄어쓰기 코드 r n 등이 포함된 경우위와 같은 이슈를 해결하기 위하여 대부분의 방법들을 사용해 보았으나 예외 케이스가 가끔씩 나타나는 현상이 발견되어 아래의 방법으로 최종 해결하였습니다.! php의 json_encode() 함수를 사용하여 변환하기이 방법을 사용하면 텍스트를 감싸고 있는 따옴표를 제거한 후 함수 호출
Last Modified : 2017-03-27 08:41:06클라이언트 브라우저에서 Python 서버로 값들을 전송할 수 있습니다. 이때 여러 타입의 값들을 Python에서 전달 받는 방법을 알아봅니다.# Python 서버에서 여러 값들 전달 받는 방법전달 받는 값의 타입은 json, urlencoded, 파일(file) 등등 여러가지가 있겠습니다. 각각의 타입들을 서버에서 받기 위해서는 대부분 request 모듈을 사용합니다. 이때 모듈의 내부 함수는 조금씩 다른데요 하나씩 알아봅니다.! 먼저 GET 방식인 경우get 방식인 경우 주소 파라미터(query parameter, 쿼리 스트링)로 전달됩니다.request.args.get(key)예를들어 아래와 같은 주소로 전달된 경우라면?webisfree.com?sitename=webisfree&no=123request.
Last Modified : 2019-07-31 22:38:18만약 AngularJS에서 JsonPadding을 사용하는데 Undefined가 발생하는 경우 해결하는 방법입니다. 해당 이슈는 jQuery에서는 잘 동작하지만 AngularJS에서 동작하지 않는 경우에 해결될 수 있습니다. 일단 undefined는 아래처럼 메시지가 나타납니다.JSONP_CALLBACK is not defined문제의 원인은 angularJS는 JSONP 방식으로 받게 될 callbak 함수의 이름이 angular.callbacks._0으로 변환되기 때문입니다. 이를 해결하기 위한 방법으로 JSONP가 호출할 Url의 template을 수정하여 해결합니다.! 수정 전JSONP_CALLBACK({JsonData});! 수정 후angular.callbacks._0({JsonData
Last Modified : 2017-08-11 01:25:22
자바스크립트의 객체가 만약 문자열인 경우를 생각해봅니다. 예를들어 input 태그에 문자열로 아래의 값이 저장된 경우를 생각해봅니다.'{ siteName: "webisfree" }'문자열이지만 원래는 객체임을 한 눈에 알 수 있습니다. 그렇다면 위 문자열을 다시 객체로 변환해보려고 합니다. 어떻게 하면 될까요?! JSON.parse()를 사용할 경우가장 먼저 생각하는 방법이 객체로 변환할 수 있는 JSON.parse()입니다. 하지만 에러가 발생합니다. JSON.parse('{ siteName: "webisfree" }');// 아래와 같이 에러가 발생Uncaught SyntaxError: Unexpected token s in JSON at position 2왜 안될까요? 그 이유는 간단합니다. JSON
Last Modified : 2020-03-26 11:49:35