Language/Javascript 11

[Javascript] var, let, const 비교 분석

Javascript 에는 3가지 변수 선언 방식이 있다. 재선언, 재할당 가능 여부에 따라 구별되어 사용된다. 재선언 재할당 var O O let X O const X X Javascript Code 를 실행하는 방법 참조 링크 : [Javascript] 코드 동작 확인 방법 (technote.kr) var 재선언과 재할당이 가능하다. [Code #1] var a = 1; a = 2; var a = 3; console.log(a); PS D:\workspace\node_test> node main.js 3 let 재할당은 가능하지만 재선언은 불가능하다. [Code #1] let a = 1; a = 2; console.log(a); PS D:\workspace\node_test> node main.js 2..

Language/Javascript 2022.07.03

[Javascript] 코드 동작 확인 방법

Javascript 는 혼자서 동작하는 script 언어라기 보다 html, css 와 같이 동작하기에 자체적인 코드 확인이 쉽지 않아 방법을 확인해 보았다. JSFiddle Node.js (with VS Code) JSFiddle JSFiddle - Code Playground Javascript 뿐만 아니라 HTML, CSS 까지 모두 테스트할 수 있다. Javascript 만으로도 코드를 작성한 후 Run 을 누르면 오른쪽 하단에 Console 창을 통해 코드 동작을 확인할 수 있다. Node.js Node.js 설치 : [Node.js] 설치 및 버전 확인 (technote.kr) 가장 많이 쓰이는 Editor 인 VS Code 기준으로 코드 동작 확인은 다음과 같이 한다. 1) 실행 후 File..

Language/Javascript 2022.06.20

javascript is eating the world.

언제부터 자바스크립트가 이리도 널리쓰였었는지 모르겠다.요즘은 Google Docs, WordPress 등의 서비스도 JavaScript로 구현되는 시대이다.(Node.js 라는 기술로 Server 쪽까지 cover되는 믿을 수 없는 세상이다.) 예전만 하더라도 자바스크립트는 일종의 web 을 위한 보조적인 역할을 하는 간단한 언어였다.자바스크립트를 할 줄 안다고 해도 별로 그다지 자랑거리는 못되었던 일이었다.그런데 언제부터인가 자바스크립트가 주언어 중의 하나로 자리매김하고 있다. "JavaScript is eating the world", Parse의 공통 창업자이자 CTO인 Kevin Lacker가 dublin에서 열린 web submit 에서 한 말이다.솔직히 kevin lacker가 누군지도 잘 모..

Language/Javascript 2015.12.23

ajax POST debugging 방법

Django framework를 server로 하고 ajax post 를 수행했는데, HTTP Response 500 (INTERNAL SERVER ERROR) 가 발생한다. [Client / Chrome Developer Tool (F12)] [Server / Django log] 그런데 500 INTERNAL SERVER ERROR 가 발생하는 건 알겠는데, ajax 여서인지 화면에 별다른 error로그가 출력되지 않고,서버또한 error log가 남지 않아 debugging이 어렵다. ajax post debugging1. Chrome 실행 2. 문제 상황 재현3. F12 - Developer option 실행4. Network tab 선택5. 아래 loading 된 리스트 중 Status 500 ..

Language/Javascript 2015.12.12

ajax를 이용한 async post data 저장

사용자가 grid(slickgrid) cell에 text 입력하면 해당 text가 서버의 database에 사용자 인지 없이 자동 저장되는 Logic 기본 구현 환경 -. Slickgrid -. mysql -. django Client Slickgrid 설정[templates/test/index.html] var columns = [... {id: "comment", name: "Comment", field: "comment", width: 300, editor: Slick.Editors.Text}, ]; var options = { editable: true,... };Slickgrid column 설정 및 option에서 editable 속성을 enable하고 editor를 설정해 준다. Ajax 설..

Language/Javascript 2015.11.16

Slickgrid example1-simple.html 분석

Demonstrates: basic grid with minimal configuration [Slickgrid를 사용하기 위한 기본 설정 포함] line 1 : HTML 5 규격 사용 선언 ([참고자료]) line 6,7,8 : link tag 로 slickgrid, jquery css 연결 ([참고자료]) line 25 ~ 29 : jquery, slickgrid javascript 연결 [Slickgrid의 위치 정의] line 14 : div tag로 실제 slickgrid가 구현될 위치를 선언. [Slickgrid의 구현] line 33 : 실제 grid 저장할 변수 선언 line 35 : slickgrid의 column(열) 정의 - 여기서는 6개의 열을 정의함 (title, duration,..

Language/Javascript 2015.11.16

ajax

Ajax 화면의 reload없이 내가 원하는 Data를 실시간으로 server로 전송할 수 있는 방법..... 화면이 reload될 때마다 생기는 잠시간의 화면 갱신 시간은 사용자로 하여금 사용에 거슬림(?)을 줄수 있는 요소 중 하나이다. 이를 해결할 수 있는 방법이 ajax다. 사실 ajax에 대해 그동안 정확히는 알지 못하고, 화면을 부분적으로 갱신(?)하거나 화면 갱신 없이 원하는 data를 server로 부터 받아 오는 방법으로만 막연히 이해하고 있었다. Question Answer ajax는 새로운 언어인가? 새로운 언어라기 보다 기존의 javascript, XML등의 기술들을 엮어 놓은 기법. Server 기술인가 Client 기술인가? javascript로 이루어진 client 기술. 알고..

Language/Javascript 2015.11.02

Grid - Slickgrid

Slickgrid license : MIT license Document는 부족한 면이 있지만 사용자가 많고, example을 통해 구현방법을 확인할 수 있다. Example : https://github.com/mleibman/SlickGrid/wiki/Examples [comment] 직접 구현을 해보고 있는데 자잘한 버그가 있다. -. scroll을 빠르게 움직이면 grid가 잠시 사라졌다 나타나곤 한다. (아래 링크에서 빠르게 scroll을 움직여 보면 확인할 수 있다. http://mleibman.github.io/SlickGrid/examples/example1-simple.html 이런 현상 때문에 slickgrid를 다른 grid로 교체해야 하나 고민도 했었지만 slickgrid 안의 sc..

Language/Javascript 2015.10.24

Slickgrid 와 django의 연동

현재 사용하고 있는 Django에 Slickgrid를 연동하였다. 기본적으로 slickgrid는 django의 static에 위치시키고 templete에서 호출하여 사용한다. (일반 이미지를 읽어 오듯이) 여기까지는 별다른 문제가 없는데 views.py 에서 templete로 넘기는 data 형식이 아직 감이 잡히지 않는다. 결국에는 json 형식으로 data를 생성하여 slickgrid 생성시에 argument로 넘겨줘야 하는데, django에서 json 형식으로 만들어서 templete로 넘겨 주는냐 아니면 dict 상태에서 templete로 넘겨 javascript에서 json 형태로 만들어서 사용하느냐의 차이일것 같다. grid = new Slick.Grid("#myGrid", data, colu..

Language/Javascript 2015.10.16