CATEGORIES
자바스크립트가 비동기방식의 ajax가 없었다면 꽃을 피웠다 얘기할 수 있었을까요? 재미있게 시작했지만 분명 자바스크립트에게 ajax, 비동기 방식의 호출은 가장 큰 발전의 계기가 되었음이 틀림없습니다... 아래는 이 중요한 ajax에 대하여 하나하나 알아보려합니다. 먼저, ajax가 무엇인지 알아보고 자바스크립트를 사용해 이를 구현하는 다양한 방법들에 대하여도 함께 알아보도록 하겠습니다.! ajax란 무엇인가?ajax는 비동기식 자바스크립트 통신을 의미합니다. 즉 서버와의 웹통신 방법을 비동기식으로 웹페이지를 리로드하지 않고 필요한 순간에 접속하여 데이터를 가져오는 방법입니다. 비동기 방식을 구현하기위해서는 자바스크립트의 XMLHttpRequest 라는 API가 존재하는데 이는 비동기 방식을 구현해주는 가장
Last Modified : 2019-08-01 08:15:59ajax를 사용하여 데이터를 불러올 때 파싱에러가 발생했다면? 일단 인코딩 문제도 아닌 것 같은데 그 이유를 알 수 없다면 아래의 상황을 의심해보자...예전에는 서버에서 데이터를 불러올때 인코딩 문제가 가장 많았다 인코딩은 db, 서버언어, 프론트언어 어디서든 발생할 수 있기 때문이다. 사실 이런 문제로 시간을 많이 보냈지만 지금처럼 SPA(single page app)이 많아 지고 비동기식 호출이 많아 지면서 콘솔에 알지 못하는 파싱 에러가 출력될 수 있다.가장 먼저 의심해야할 부분 중 하나로 비동기식 코드의 ajax를 살펴보자... 예를들어 json 타입의 데이터를 불러올 경우 불러올 데이터에 따옴표(quatation)가 둘어가 있는지 확인해보자.# 서버쪽 따옴표 escape, 프론트는?물론 서버쪽은
Last Modified : 2017-03-05 20:42:31SPA(Single page application)에서 CKEDITOR를 적용하는 방법은 무엇일까요?싱글페이지 어플리케이션의 경우 비동기 방식으로 DOM이 그려지기 때문에 textarea 태그가 언제 그려질지 확실히 알기가 어려울 수 있습니다. 예를들어 해당하는 textarea 태그가 directive의 내부의 내부...에 사용되는 경우라던가 기타 ajax가 추가로 사용되는 경우 등등 이 경우 어떻게 할까요?문제는 document의 onready state 또는 onload등의 이벤트 등을 사용하여도 확인이 안되는데 있습니다. 이 경우 지연시간을 강제로 발생하는 방법도 존재하지만... 예를들어 setTimeout() 등을 사용하는 방법이죠. 아니면 태그에 isLoaded 등의 변수를 할당하고 이를 $watc
Last Modified : 2017-04-14 11:22:15
자바스크립트 ES 6의 async, await에 대하여 알아봅니다. 이 둘은 뭘 할 수 있고 어떤 경우에 사용할까요?# ES 6의 async, await 알아보기자바스크립트를 사용하여 비동기 방식으로 무엇인가를 실행할 때.. 예를들어 api를 호출한다면 호출이 끝난 후 콜백함수를 실행하고 합니다. 그런데 경우에 따라서는 비동기 호출이 하나가 아닌 여러개를 동시에 호출하거나 아니면 다수의 콜백함수를 원하는 순서대로 실행하고 싶을 수 있습니다.이런 경우 Promise(프로미스) 객체를 사용합니다. Promise를 간략하게 알아보면...@ Promise(프로미스)는?프로미스는 약속이라는 사전적 의미로 뭔가를 실행할 콜백함수를 호출하기 위한 목적으로 생성하는 객체입니다. 프로미스 객체는 resolve()와 reje
Last Modified : 2020-07-15 09:53:19React의 state 상태 관리를 변경하기 위해서 setState를 사용할 수 있습니다. 이때 비동기, async로 setState를 호출하려면 어떻게 해야 하는지 알아봅니다.# 비동기로 setState() 호출하기, async먼저 비동기 setState()를 호출하기 위해서 아래에서는 다음의 방법을 사용하려고 합니다.async, await, Promise모두 비동기식 호출에 사용되는 API들입니다. async와 await는 페어로 함께 사용되며 Promise 객체 역시 업데이트 후 다음 코드로 이동, resolve하기 위해서 필요합니다.이제 아래에서 순서대로 알아보려고 합니다. 가장 먼저 상태값을 변경하는 함수 updateState를 만듭니다.updateState = (payload) => { retu
Last Modified : 2020-08-29 09:17:17