윤자이 기술블로그

Ajax란? 웹 브라우저를 근대적인 웹과 그 이전으로 나누는 중요한 기술이 바로 Ajax이다. 웹 브라우저에 내용이 바뀔때 마다 새로고침을 해서 변경하지 않아도 Ajax는 브라우저와 서버가 내부적으로 데이터 통신을 하게해 주어서 변경된 결과를 웹 페이지에 프로그래밍적으로 반영하게 해준다. 이러한 기술은 매번 보지 않아도 되는 기술을 매번 웹 페이지에 나타내지 않아도 되므로 서버에게는 부담이 줄고 클라이언트에겐 데이터를 적게 사용하게 되므로 양쪽다 이득을 보게된다. Ajax는 Asynchronous JavaScript and XML의 약자다. 직역하자면 비동기적 자바스크립트와 xml이 된다. 즉 비동기적으로 자바스크립트를 통해서 서버와 통신하는 방법을 의미한다. 이대 사용하는 API가 XMLHttpRequ..

이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 먼저 이러한 이벤트들에 관한 용어들을 정리하고 가도록 하겠다. event target target은 이벤트가 일어날 객체를 의미한다. 예를 들어 버튼을 누르면 새로운 창이 열리는 객체가 있다고 하자. 그렇다면 여기서 버튼은 event target이 된다. event type 이벤트의 종류를 의미한다. 위의 예에서는 click이 이벤트의 타입이 된다. 그 외에도 스크롤이나 마우스가 움직였을 때 발생하는 것들도 이벤트 타입이다. event handler 이벤트가 발생했을 때 동작하는 코드를 의미한다. 이벤트 등록방법 inli..

Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 제어 대상 찾기 getElement document.getElementsByTagName : 문서 전체에 해당 tag를 찾는다. document.getElementsByClassName : 문서 전체에서 해당 class를 찾는다. document.getElementById : 문서 전체에서 해당 id를 찾는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 HTML CSS JavaScript var li..

Window 객체 Window 객체는 모든 객체가 소속된 객체이고, 전역 객체이면서, 창이나 프레임을 의미한다. 그러므로 위의 그림에 나와있듯이 document객체나 BOM에 location객체 등 모든 것이 window객체 안에 있다. 위의 이미지와 같이 window객체는 window라는 식별자를 통해서 얻을 수 있다. 또한 생략이 가능하다. (window.document를 그냥 ducument로 입력해도 결과는 같았을 것이다.) 위의 그림에 나와있는 객체뿐만 아니라, 우리 만드는 변수나 함수 역시 모두 window객체에 안에 포함된다. 즉, 객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다. 사용자와 커뮤니케이션 하기 alert 경고창이라고 부른다. 사용자에게 정보를 제공하거..

html은 정적인 문서이다. 이러한 html을 동적으로 제어하기 위해서는 자바스크립트를 사용해야 한다. 웹 브라우저는 브라우저의 여러 구성요소들을 객체로 만들어서 제공해주는데 이것을 Object Model이라고 한다. 자바스크립트는 이러한 객체들을 제어해서 웹 브라우저를 제어할 수 있게된다. 객체들은 서로 계층적인 관계로 구성되어 있는데 그중 가장 큰 틀이 BOM과 DOM이 있다. DOM (document object modjel)의 document객체는 태그나 태그 같은 웹 페이지에 있는 다양한 태그들을 객체로 제어한다. BOM(browser object model)은 현재 이 웹 브라우저가 가르치고있는 url을 알아낸다거나, 현재 웹 브라우저가 표시하고 있는 페이지를 reload 한다거나 또는 경고창..

convention 이란? code convention이란 코드를 짤 때 어떻게 코드를 짤지 다수가 합의한 약속이다. code convention을 지키지 않는다고 해서 에러가 나는 것은 아니지만, 팀 프로젝트에서 통일된 코드는 읽기가 쉽고 유지보수 측면에서 뛰어나다. 아래는 code convention을 지킨 것과 지키지 않은 것들인데 모두 같은 결과 값을 출력한다. 변수를 만들 때에는 = 양옆으로 띄어쓰기를 하자 O : my_list = [] X : my_list=[] 상수는 대문자로 만들자 O: MY_CONSTANT = 300 X: myconstant = 300 주석을 쓸 때에는 # 뒤에 공백 문자를 하나 넣자 O: # 2를 곱한다 X: #2를 곱한다 코드로 개성을 드러내지 말자. conventio..

REST API 서버에 요청을 보낼 때는 주소를 통해 요청의 내용을 표현한다. 주소가 /index.html이면 서버에 index.html을 보내달라는 뜻인 것처럼 말이다. 하지만 요청이 항상 html일 필요는 없다. 예를 들어 /login이라는 주소를 통해 html을 요청하는 대신 세션 저장이라는 동작을 취할 수 있다. 이렇게 요청이 주소를 통해 들어오므로 서버가 이해하기 쉬운 주소를 사용하는 것이 좋다. 이기서 이번 포스팅의 주제인 REST API가 등장한다. REST API란 REpresentational State Transfer의 약자이다. 네트워크 구조의 한 형식으로 서버의 자원을 정의하고, 자원에 대한 주소를 지정하는 방법을 가리킨다. 주소는 의미를 명확히 전달하기 위해 명사로 구성된다. 예를..

기술 블로그들을 소개하기에 앞서 기술 블로그 구독 서비스를 소개하고자 한다. 네이버 개발자 분이 만드셨다고 하는데 입력한 메일로 하루에 한 번 기술 포스팅을 메일로 보내주는 서비스이다. Daily DevBlog - http://daily-devblog.com/ IT 기술블로그 구독서비스 본 서비스는 Awesome-DevBlog에서 제공받은 피드를 기준으로 발송합니다. 공유를 목적으로 만들게 되었고, 문의사항은 메일로 연락바랍니다. 또한 개인적인 사정으로 인해 서비스가 중단될수도 있음을 알려드립니다. daily-devblog.com Naver D2 https://d2.naver.com/home KaKao tech https://tech.kakao.com/ kakao Tech 카카오는 사람과 사람, 사람과 ..

SELECT문은 테이블을 구성하는 튜플들 중에서 전체 또는 조건을 만족하는 튜플을 검색하여 주기억장치에 임시 테이블로 구성하는 명령문이다. SELECT문 형식 SELECT [PREDICATE] [테이블명.]속성명[AS 별칭][,[테이블명.]속성명 ...] FROM 테이블명[, 테이블명 ...] [WHERE 조건] [GROUP BY 속성명[, 속성명 ...] [HAVING 조건] [ORDER BY 속성명 [ASC | DESC][, 쏙성명[ASC | DESC] ...]]; SELECT절 PREDICATE : 검색할 튜플을 제한할 목적으로 사용되는 조건 ALL : 모든 튜플들을 검색할 때 사용되며, 기본값이다. DISTINCT : 중복된 튜플을 제거할 때 사용된다. DISTINCTROW : 중복된 튜플을 제거..

DDL (Data Definition Language)의 개념 DDL은 스키마(Schema), 도메인(Domain), 테이블(Table), 뷰(View), 인덱스(Index)를 정의하거나 변경 또는 제거할 때 사용하는 언어이다. DDL로 정의한 내용은 메타데이터(Metadata)가 되며, 시스템 카탈로그(System Catalog)에 저장된다. DDL의 유형 명령문 기능 CREATE 스키마, 도메인, 테이블, 뷰, 인덱스를 정의 ALTER 테이블에 대한 정의를 변경 DROP 스키마, 도메인 테이블, 뷰, 트리거, 인덱스를 제거 CREATE SCHEMA 스키마를 정의하는 명령문이다. 스키마는 하나의 사용자에 속하는 테이블과 기타 구성 요소 등을 그룹 짓기 위한 것이다. 스키마의 식별을 위한 스키마 이름고 ..