JSON을 이해하려면 서버와의 통신에 대해 생각해보자. 웹사이트나 앱과 같은 Client들이 Server와 어떻게 통신할 수 있는지를 정의한 것이 *HTTP이다. * HTTP ( Hypertext Transfer Protocal) : Hypertext를(HTML 문서와 같은 리소스들을) 어떻게 서로 주고받을 수 있는지를 규약 한 프로토콜이다. - Hypertext는 링크만 해당하는 것이 아니라 문서나 이미지 등의 데이터 파일도 해당한다. HTTP는 Client가 Server에게 데이터를 request(요청)하고, 반대로 Server는 요청받은 것에 따라 response(응답)을 Client에 보내 주는 방식을 의미한다. HTTP를 이용해서 Server에게 데이터를 요청해서 받아올 수 있는 방법으로는 *A..
바닐자 자바스크립트는 유연한 언어이기 때문에 개발자가 선언되지 않은 변수의 값을 할당한다던지 기존의 프로토타입을 변경하는 등의 실수를 할 수 있다. 이러한 실수를 방지하기 위해서는 ECMAScript 5에 추가된 Strict mode로 작업하는 것이 좋다. Strict(엄격한) 모드 특징 기존 자바스크립트에는 조용히 무시되던 에러들을 throwing한다. (아래 이미지 참고) JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡으며. strict 모드의 코드는 not-strict 모드의 동일한 코드보다 더 빨리 작동되어 상대적으로 효율적이다. ECMAScript의 향후 버전에서 정의 될 문법을 금지한다. Strict 'use strict'; // 자바스크립트 파일 최상단에 선언 // a..
HTML에서 JavaScript를 포함할 때, 어느 위치에 어떻게 참조시키는 것이 효율적인 방법일까? 브라우저가 HTML을 분석하여 화면에 출력하는 과정을 생각해보자. 우선 브라우저에서는 다운로드한 HTML의 구문을 분석(*parsing)을 하게된다. 브라우저가 HTML을 다운받아서 코드를 한 줄씩 parsing 하다가 를 만나게 되면 parsing 하는 것을 멈추고, script를 서버에서 받아오고 실행(fetching)하게 된다. * parsing HTML 태그에는 시작과 끝이 있고 속성 이름과 값이 있는데, parser는 이 문서에 대한 입력을 parsing(구문 분석)하여 문서 트리를 구축한다. (해당 파일을 브라우저 화면으로 볼 수 있는 일련의 과정) HTML parser는 이미지 같은 non-..
var window = window.open(url, windowName, [windowFeatures]); → url HTML페이지, 이미지 파일 또는 브라우저에서 지원하는 리소스에 대한 경로도나 URL이 될 수 있다. 빈 문자열("")로 지정되면 새 창으로 열린다. → windowName (선택항목) target으로 지정할 경우 , 요소의 속성에 대한 대상으로 사용할 수 있다. 이름에는 공백이 없어야 하며, 이 이름이 창 제목으로 사용되지는 않는다. → windowFeatures (선택항목) 새로 연 창에 대한 항목의 기능들을(창의 기본 크기 및 위치, 도구 모음 포함 여부 등) 정의한다. 기능은 쉼표로 구분하여, 문자열에는 공백이 없어야 한다. 예: window.open('/popup.html', ..
본 글은 Tutorial Republic을 토대로 작성했습니다. jQuery 표준/기본 구문! 달러 기호($)로 시작하고 세미콜론(;)으로 끝난다. 제이쿼리에서 달러 기호는 jQuery의 별칭이다. 다음 예제는 기본적인 문장을 보여주는 코드이다. ▷ $(document).ready(handler); → document 엘리먼트로 호출 ▷ $( ).ready(handler); → 빈 엘리먼트로 호출 ▷ $(handler); → 특정 엘리먼트 없이 바로 호출 jQuery ready()메서드는 일반적으로 익명 함수와 함께 사용된다. 따라서 위의 예는 다음과 같은 축약 표기법으로 작성 가능하다. ● on 메서드로 알아보는 이벤트 연결 방법 // Syntax $(selector).on(event,childSele..
Extensions : 확장 프로그램 설치 확장 프로그램은 좌측 마켓플레이스 아이콘을 클릭하면 검색하여 찾을 수 있다. 원하는 확장 프로그램 페이지 내 Install 버튼을 클릭하면 해당 프로그램이 활성화된다. Material Icon Theme 작업 파일에 해당하는 프로그램(CSS, HTML, React..)의 아이콘을 보여주는 아이콘 테마. 어떤 파일인지 구분이 편해짐 Prettier - Code formatter 단축키(Cmd/Ctrl + Shift + P) 한번으로 코드를 자동으로 형식화하여 일괄 정리. 드래그하여 해당 영역의 코드 정리 또는 드래그 선택 없이 전체 코드 정리 가능 Indent-rainbow 들여쓰기 된 영역을 구분하기 쉽게 보여줌 Auto Close Tag HTML/XML 시작 ..
화면 분할 (Split screen) 기본 보기에서 창을 분리시켜 여러 파일을 동시에 보고 싶다면, 두 개의 창으로 분할해서 볼 수 있다. 보기 → 수평 분할 또는 보기 → 수직 분할 클릭 (View → Horizontal Split or View → Vertical Split) 또는 다음의 에디터 분할 아이콘을 클릭 기본보기를 분할하면 두 번째 "작업 파일(Working Files)" 목록이 생성되어 어떤 파일이 어떤 창에 열려 있는지 확인할 수 있다. (아래 이미지 참고) 이 두 작업 파일 목록 사이에서 파일을 드래그하여 원하는 창으로 이동할 수도 있다. 브래킷은 각 프로젝트의 보기 레이아웃을 기억하기때문에, 다른 프로젝트로 전환하면 프로젝트를 닫을 때 선택한 레이아웃이 표시된다. 단일 화면(Sing..
jQuery는 JavaScript 라이브러리이다. jQuery는 다양한 브라우저에서 사용하기 쉽게 작동하는 API를 통해 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 JavaScript 보다 훨씬 간단하게 만든다. jQuery의 모든 기능은 JavaScript를 통해 액세스되므로 코드를 이해하고 구조화하거나 디버깅하려면 JavaScript에 대한 이해가 필수적이다. 따라서 JavaScript와 기본 구문을 먼저 이해 하는 것이 좋겠다. jQuery 작동 원리 알아보기 ↓ How jQuery Works | jQuery Learning Center link jQuery: The Basics This is a basic tutorial, designed to help yo..
자주 사용하는 단축키 Ctrl + K + F : 전체 선택(Ctrl+A)한 후, Ctrl(맥은 커멘드)키를 누른 상태로 K, F 키를 차례로 누르면 코드가 자동으로 정렬되어 정리된다. html:5 : 프로그램에서는 다음 이미지와 같이 필요한 태그 첫 자를 입력하면 자동적으로 뜨게 된다. (첫 자 입력 후 ctrl+space 입력해도 동일하게 뜸) HTML 파일에서 html:5를 입력하면, 기본 태그가 작성된다. 코드 작성 시 (원하는 코드를 드래그하여) 텍스트 커서 + 방향키 : 코드 열에 텍스트 커서를 둔 후, 방향키를 통해 위/아래로 이동 Tab : 내어쓰기 Shift + Tab : 들여쓰기 Ctrl + / : 주석 걸기 및 풀기 Key Command Command ID Ctrl+Shift+Alt+D..
Brackets 확장 기능 설치하기 1. 확장 기능 창 열기 : [파일 → 확장 기능 관리자...] 또는 우측의 도구 모음에서 [플러그인 블록] 아이콘 클릭! 해당 창에서 확장 기능을 검색하고 설치·제거를 할 수 있다. 2. 확장 기능 창에 설치하고자 하는 연관 단어를 검색하고 우측의 설치 버튼을 클릭하면 완료! - 연관 글 : Brackets TortoiseSVN 확장 기능 Brackets TortoiseSVN 확장 기능 (Windows) Brackets TortoiseSVN : Brackets TortoiseSVN은 브래킷용 TortoiseSVN 메뉴 확장 기능이다. (Windows만 지원함) 이 확장 기능은 commit, switch, update, revert, log, diff, blame in..