본문 바로가기

Web programming65

[JavaScript] JSON JSON을 이해하려면 서버와의 통신에 대해 생각해보자. 웹사이트나 앱과 같은 Client들이 Server와 어떻게 통신할 수 있는지를 정의한 것이 *HTTP이다. * HTTP ( Hypertext Transfer Protocal) : Hypertext를(HTML 문서와 같은 리소스들을) 어떻게 서로 주고받을 수 있는지를 규약 한 프로토콜이다. - Hypertext는 링크만 해당하는 것이 아니라 문서나 이미지 등의 데이터 파일도 해당한다. HTTP는 Client가 Server에게 데이터를 request(요청)하고, 반대로 Server는 요청받은 것에 따라 response(응답)을 Client에 보내 주는 방식을 의미한다. HTTP를 이용해서 Server에게 데이터를 요청해서 받아올 수 있는 방법으로는 *A.. 2021. 4. 14.

[JavaScript] Strict mode 바닐자 자바스크립트는 유연한 언어이기 때문에 개발자가 선언되지 않은 변수의 값을 할당한다던지 기존의 프로토타입을 변경하는 등의 실수를 할 수 있다. 이러한 실수를 방지하기 위해서는 ECMAScript 5에 추가된 Strict mode로 작업하는 것이 좋다. Strict(엄격한) 모드 특징 기존 자바스크립트에는 조용히 무시되던 에러들을 throwing한다. (아래 이미지 참고) JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡으며. strict 모드의 코드는 not-strict 모드의 동일한 코드보다 더 빨리 작동되어 상대적으로 효율적이다. ECMAScript의 향후 버전에서 정의 될 문법을 금지한다. Strict 'use strict'; // 자바스크립트 파일 최상단에 선언 // a.. 2021. 4. 10.

<script>요소 defer와 async : HTML에서 스크립트 불러오기 HTML에서 JavaScript를 포함할 때, 어느 위치에 어떻게 참조시키는 것이 효율적인 방법일까? 브라우저가 HTML을 분석하여 화면에 출력하는 과정을 생각해보자. 우선 브라우저에서는 다운로드한 HTML의 구문을 분석(*parsing)을 하게된다. 브라우저가 HTML을 다운받아서 코드를 한 줄씩 parsing 하다가 를 만나게 되면 parsing 하는 것을 멈추고, script를 서버에서 받아오고 실행(fetching)하게 된다. * parsing HTML 태그에는 시작과 끝이 있고 속성 이름과 값이 있는데, parser는 이 문서에 대한 입력을 parsing(구문 분석)하여 문서 트리를 구축한다. (해당 파일을 브라우저 화면으로 볼 수 있는 일련의 과정) HTML parser는 이미지 같은 non-.. 2021. 3. 29.

window.open(); 윈도우팝업 제작 및 호출 var window = window.open(url, windowName, [windowFeatures]); → url HTML페이지, 이미지 파일 또는 브라우저에서 지원하는 리소스에 대한 경로도나 URL이 될 수 있다. 빈 문자열("")로 지정되면 새 창으로 열린다. → windowName (선택항목) target으로 지정할 경우 , 요소의 속성에 대한 대상으로 사용할 수 있다. 이름에는 공백이 없어야 하며, 이 이름이 창 제목으로 사용되지는 않는다. → windowFeatures (선택항목) 새로 연 창에 대한 항목의 기능들을(창의 기본 크기 및 위치, 도구 모음 포함 여부 등) 정의한다. 기능은 쉼표로 구분하여, 문자열에는 공백이 없어야 한다. 예: window.open('/popup.html', .. 2020. 12. 19.

jQuery 기본 문법 사용, 선택자와 메서드 본 글은 Tutorial Republic을 토대로 작성했습니다. jQuery 표준/기본 구문! 달러 기호($)로 시작하고 세미콜론(;)으로 끝난다. 제이쿼리에서 달러 기호는 jQuery의 별칭이다. 다음 예제는 기본적인 문장을 보여주는 코드이다. ▷ $(document).ready(handler); → document 엘리먼트로 호출 ▷ $( ).ready(handler); → 빈 엘리먼트로 호출 ▷ $(handler); → 특정 엘리먼트 없이 바로 호출 jQuery ready()메서드는 일반적으로 익명 함수와 함께 사용된다. 따라서 위의 예는 다음과 같은 축약 표기법으로 작성 가능하다. ● on 메서드로 알아보는 이벤트 연결 방법 // Syntax $(selector).on(event,childSele.. 2020. 11. 17.

[VS Code] 확장 프로그램 Extensions : 확장 프로그램 설치 확장 프로그램은 좌측 마켓플레이스 아이콘을 클릭하면 검색하여 찾을 수 있다. 원하는 확장 프로그램 페이지 내 Install 버튼을 클릭하면 해당 프로그램이 활성화된다. Material Icon Theme 작업 파일에 해당하는 프로그램(CSS, HTML, React..)의 아이콘을 보여주는 아이콘 테마. 어떤 파일인지 구분이 편해짐 Prettier - Code formatter 단축키(Cmd/Ctrl + Shift + P) 한번으로 코드를 자동으로 형식화하여 일괄 정리. 드래그하여 해당 영역의 코드 정리 또는 드래그 선택 없이 전체 코드 정리 가능 Indent-rainbow 들여쓰기 된 영역을 구분하기 쉽게 보여줌 Auto Close Tag HTML/XML 시작 .. 2020. 10. 28.

[Brackets] 화면 창 분할/단일 보기 화면 분할 (Split screen) 기본 보기에서 창을 분리시켜 여러 파일을 동시에 보고 싶다면, 두 개의 창으로 분할해서 볼 수 있다. 보기 → 수평 분할 또는 보기 → 수직 분할 클릭 (View → Horizontal Split or View → Vertical Split) 또는 다음의 에디터 분할 아이콘을 클릭 기본보기를 분할하면 두 번째 "작업 파일(Working Files)" 목록이 생성되어 어떤 파일이 어떤 창에 열려 있는지 확인할 수 있다. (아래 이미지 참고) 이 두 작업 파일 목록 사이에서 파일을 드래그하여 원하는 창으로 이동할 수도 있다. 브래킷은 각 프로젝트의 보기 레이아웃을 기억하기때문에, 다른 프로젝트로 전환하면 프로젝트를 닫을 때 선택한 레이아웃이 표시된다. 단일 화면(Sing.. 2020. 10. 26.

jQuery란 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.. 2020. 10. 26.

Visual Studio Code 단축키 자주 사용하는 단축키 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.. 2020. 10. 26.

[Brackets] 확장 기능 설치하기 Brackets 확장 기능 설치하기 1. 확장 기능 창 열기 : [파일 → 확장 기능 관리자...] 또는 우측의 도구 모음에서 [플러그인 블록] 아이콘 클릭! 해당 창에서 확장 기능을 검색하고 설치·제거를 할 수 있다. 2. 확장 기능 창에 설치하고자 하는 연관 단어를 검색하고 우측의 설치 버튼을 클릭하면 완료! - 연관 글 : Brackets TortoiseSVN 확장 기능 Brackets TortoiseSVN 확장 기능 (Windows) Brackets TortoiseSVN : Brackets TortoiseSVN은 브래킷용 TortoiseSVN 메뉴 확장 기능이다. (Windows만 지원함) 이 확장 기능은 commit, switch, update, revert, log, diff, blame in.. 2020. 10. 23.

Brackets TortoiseSVN 확장 기능 (Windows) Brackets TortoiseSVN : Brackets TortoiseSVN은 브래킷용 TortoiseSVN 메뉴 확장 기능이다. (Windows만 지원함) 이 확장 기능은 commit, switch, update, revert, log, diff, blame in File 메뉴, 디렉토리 트리 및 작업 세트 컨텍스트 메뉴와 같은 TortoiseSVN 명령을 추가한다. Brackets TortoiseSVN 확장 기능 설치하기 1. 확장 기능 창 열기 : [파일 → 확장 기능 관리자...] 또는 우측의 도구 모음에서 [플러그인 블록] 아이콘 클릭! 해당 창에서 확장 기능을 검색하고 설치·제거를 할 수 있다. 2. 확장 기능 창에 SVN을 검색하여 Brackets TortoiseSVN를 설치한다. 3. 설.. 2020. 10. 23.

SVN(Subversion) SVN, 서브버전 SVN은 서브버전(Subversion) 명령어를 줄인 말이다. 서브버전은 제한이 있던 CVS를 대체하기 위해 2000년부터 콜랩넷에서 개발됐다. 현재는 아파치 최상위 프로젝트로서 전 세계 개발자 커뮤니티와 함께 개발되고 있다. 서버-클라이언트 모델을 따르는 서브버전 서버는, 작업하는 컴퓨터 내에 둘 수도 있고 전산망에 연결된 별도의 컴퓨터에 두고서도 사용할 수 있다. 서브버전 서버와 클라이언트는 http, https, svn, svn+ssh의 규약으로 통신한다. (wikipedia) SVN 설치 1. SVN 사이트를 접속(tortoisesvn.net/downloads.html)하여, 해당 PC에 적합한 설치 파일을 다운로드한다. 2. 다운로드한 설치 파일을 실행하고 Next 버튼을 계속.. 2020. 10. 21.

NullPointerException이 발생하는 이유 본 글은 oracle의 자료에서 발췌했으며, 추후 NullPointerException을 겪으면 업데이트 하겠습니다. NullPointerException은 RuntimeException을 확장한다. - 응용 프로그램 null이 객체가 필요한 경우 사용하려고 할 때 발생한다. - null 객체의 인스턴스 메서드를 호출한다. - null 객체의 필드에 액세스하거나 수정한다. - null의 길이를 배열인 것처럼 취한다. - null을 예외처리 한다. - null을 통해 동기화 한다. 2020. 8. 11.

[VS Code] Integrated Terminal Terminal keybindings 다음은 통합 터미널 내에서 빠르게 탐색 할 수있는 키보드 단축키다. 터미널 보기 및 켜기 : Ctrl +` 터미널 인스턴스 추가 (새 터미널 만들기) : Ctrl + Shift +` 위로 스크롤 : Ctrl + Alt + PageUp 아래로 스크롤 : Ctrl + Alt + PageDown 페이지 위로 스크롤 : Shift + PageUp 페이지 아래로 스크롤 : Shift + PageDown 맨위로 스크롤 : Ctrl + Home 아래로 스크롤 : Ctrl + End 터미널 지우기 : 할당되지 않음 복사 및 붙여넣기 - Linux : Ctrl + Shift + C 및 Ctrl + Shift + V - macOS : Cmd + C 및 Cmd + V - Windows .. 2020. 8. 6.

레이아웃 속성과 배치 : 버튼의 영역과 위치 설정하기 레이아웃 속성을 이용하여 버튼의 영역과 위치를 지정해보자. 1. 우선 버튼을 둘러싼 영역을 선택하고 레이아웃의 너비와 높이를 설정해보자. match_parent을 선택하면 부모의 크기인 화면를 기준으로, wrap_content을 선택하면 컨텐츠인 버튼들의 크기에 맞추는 것을 확인 할 수 있을 것이다. 2. 다음은 특정 버튼을 클릭하여 LinearLayout 속성을 지정해보자. layout_gravity 에서 위치를 선택하면 1번에서 지정한 영역안에서 배치를 하게된다. 1에서 match_parent 했기 때문에 버튼을 bottom하니 아래의 그림처럼 내려갔다. 3. 버튼을 클릭한 뒤 LinearLayout 속성의 layout_weight 의 크기를 키우면 여백에서의 가중치를 늘린다. 따라서 여백을 확인해가.. 2020. 7. 23.

이전 1 2 3 4 5 다음

티스토리툴바