이번 시리즈에서는 JavaScript에서 비동기의 개념을 알아보고 그 동작 원리를 파헤쳐보자.동기와 비동기프로그래밍에서 요청사항을 처리하는 방식으로 "동기적" 또는 "비 동기적인" 처리 라는 개념이 존재한다.동기 처리먼저 동기처리란 사용자가 요청을 하면 서버가 요청을 처리하고 응답을 받을 때까지 사용자는 잠시 대기하게 된다. 즉 서버에서 응답을 받아야만 다음 동작이 가능해진다.일반적으로 동기처리는 "submit"을 처리할 때 발생하며 서버에서는 요청에 따라 화면을 그릴 HTML을 생성해서 회신하게 된다. 결과적으로 동일한 화면이더라도 전체를 새로 그리게 된다. 비 동기 처리반면 비 동기처리는 사용자가 요청을 하고 서버의 처리 결과를 기다리지 않고 바로 다음 동작을 진행한다. 즉 서버에서의 응답 여부에 상..

ajax를 사용하는 과정에서 CORS를 처리하기 위한 근본 대책은 아니지만 아직 backend가 구현되지 않았거나 테스트를 위한 용도라면 브라우저에 플러그인을 설치하고 사용할 수 있다. Allow CORS: Access-Control-Allow-Origin 플러그인 설치 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ko Allow CORS: Access-Control-Allow-Origin Easily add (Access-Control-Allow-Origin: *) rule to the response header. chrome.google.com 사용 플러그인을..

이번 포스트에서는 알쏭 달쏭 헤깔리는 javascript에서의 this에 대해서 살펴보자.  javascript에서의 thisjavascript에서의 this가 어려운 이유는 그때 그때 달라지기 때문이다.다른 언어에서의 this와 그 정의 부터 남다른데 java에서의 this가 현재 실행되고 있는 객체로 고정된 반면 javascript에서의 this는 함수를 호출하는 녀석에 따라 달라진다. 즉 실행 문맥(execution context)에 따라 달라진다. 여기서 실행 문맥이란 JavaScript 코드가 실행되는 환경을 의미하며 전역 실행 문맥, 일반 함수 호출, 생성자 함수 호출, try ~ catch 블록, 모듈등에서 새로운 실행 환경을 구성한다. 객체의 리터럴을 별도의 실행환경을 구성하지 않는다.일..

특히나 javascript는 웹에서 사용되기 때문에 html과 섞어서 쓸 경우가 많은데 문자열 내에서 다시 "" 나 ''를 이용하기가 상당히 번거러웠다. 이제 Template Literal을 이용해보자. ES6에 적용된 ``(백틱 - 키보드의 ~ 와 함께 표현되는 문자)을 이용한 Template Literal은 2 가지 기능을 제공한다. 편리한 문자열 처리 기존의 javascript에서는 문자열을 표현하기 위해서 따옴표(" ", ' ')를 사용할 수 있었다. 따옴표를 이용한 문자열 표현에서는 엔터키를 이용한 개행이 적용되지 않기 때문에 개행 처리를 위해 '\n'을 명시적으로 삽입해야 하는 번거로움이 있었다. 또한 "와 '교차해서 사용할 수 없었기 때문에 사용 순서를 주의해야 했고 내부에서 따옴표를 사용하..

var 키워드는 javascript 에서 변수 선언을 위해 사용되는 녀석이지만 여러가지 혼돈을 가져오기도 한다. var 키워드의 문제점과 es2015에서 소개된 let, const에 대해 알아보자. let, const 키워드 var의 문제점과 let, const의 활용 var는 오랜동안 javascript에서 변수 선언에서 사용되는 키워드 였다. 지금도 대부분의 소스 코드에는 var를 이용한 변수 선언을 심심찮게 찾아볼 수 있다. 하지만 var 키워드를 이용해서 선언한 변수는 java등에서 사용되는 변수와 큰 차이점이 있는데 바로 스코프이다. 일반적으로 로컬 변수의 스코프는 변수가 선언된 {}를 대상으로 하는데 var 변수는 그 변수가 선언된 함수를 scope로 한다. let func = function..

웹 페이지를 사용하다보면 웹에서 생성된 코드등을 복사해서 다른곳에 붙여넣을 일들이 많다. 이때 전체를 드래그로 복사해서 붙여넣기 하는 과정에서 여러 번의 조작이 필요한데 가끕 보면 "복사하기" 같은 버튼이 있어서 손쉽게 내용을 클립보드로 복사하는 페이지들이 있다. 이번 포스트에서는 웹 화면에서 복사하기를 통해 클립보드에 저장하는 방법을 살펴보자. Clipboard API 이전에는 과거에는 document 객체의 execCommand 함수를 이용해서 input 요소의 내용을 복사해서 사용했다. document.querySelector("#cleanCode").select(); document.execCommand("Copy"); 하지만 위의 방식은 deprecate 되고 앞으로는 없어질 예정이다. Clip..

이번 포스트에서는 URL을 통해 get 방식으로 전달된 파라미터를 Javascript 영역에서 추출해서 사용하는 방법을 알아보자. queryString 추출 queryString이란 url 뒤에 ? 부분 부터로 파라미터들로 구성된 부분이다. 이 값을 뽑아내기 위해서는 location 객체가 가진 search 속성을 사용할 수 있다. let url = location.href; console.log(url); //http://127.0.0.1:5501/12_parameterfromurl.html?name=hong&age=30 let queryString = location.search; console.log(queryString); // ?name=hong&age=30 queryString은 통 문장으로 ..

SOP 문제와 처리 AJAX를 생각없이 사용하다 보면 가장 많이 접하는 오류 중 하나가 SOP 오류이다. Access to XMLHttpRequest at 'http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTradeDev?_wadl&type=xml&serviceKey=서비스키&LAWD_CD=11110&DEAL_YMD=201512' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resourc..