REST API REST API 는 웹 통신 규약인 HTTP를 이용한다. 기계와 기계가 HTTP를 통해서 통신할 때, 리소스는 URI로 행위는 Method로 결과는 응답 코드로, HTTP가 본래 가지고 있는 의미를 잘 활용하는 것이다. API는 컴퓨터의 기능을 실행시키는 방법을 의미한다. 자바스크립트를 이용하여 화면에 helllo world를 출력하는 명령어 document.write("hellow world") 또한 하나의 API라고 할 수 있다. 이처럼 REST API도 컴퓨터의 기능을 실행시키는 명령이라고 할 수 있으며, REST API는 내 컴퓨터가 아닌 다른 서버 URI를 통해 자원에 접속하여 CRUD Operation을 적용하게 된다. 1. Resource Resource(자원)은 URI(식..

개요 개발하는 애플리케이션의 크기가 커지면 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 파일을 각각 '모듈(module)'이라 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 즉, 모듈은 단지 각각의 파일 하나에 불과하다. 스크립트 하나는 모듈 하나이다. 일반 스크립트와 모듈의 차이 모듈은 항상 엄격 모드(use strict)로 실행된다. 선언되지 않은 변수에 할당하는 등의 코드는 에러를 발생시킨다. 모듈 레벨 스코프 : 모듈은 자신만의 스코프가 있다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다. 외부에 공개하려는 모듈은 export 해야 하고, 내보내진 모듈을 사용하려면 import 해줘야 한..

HTML 삽입 미리보기할 수 없는 소스 let, const 키워드 추가 (ES6+) 기존 var 키워드는 함수 레벨 스코프(유효범위)를 가지며, 암묵적 재할당이 가능 하였다. 이 단점을 보완하기 위해 블록 레벨 스코프를 가지는 let, const 키워드가 추가되었다. 변수의 중복 사용을 방지하기 위해 변수를 선언할 때 변하지 않는 값(상수)은 const, 변할 수 있는 값은 let 으로 선언해야 한다. let : let 없이 작성 시엔 가장 최근에 쓴 것으로 적용됨. ex) let name = "Sander"; const : 가급적 상수는 변수 이름을 대문자로 표기 ex) const MAX_SIZE = 100; / const PI = 3.14; / const BIRTH_DAY = '2020-01-01';..

HTML 삽입 미리보기할 수 없는 소스 0. 크롬 개발자도구 디버거툴을 이용하여 실습환경 세팅 실습 목표: 한 줄씩 실행하며 키워드와 실행 컨텍스트에 따른 scope와 call stack의 변화를 살펴보자. 실습 코드: https://gist.github.com/egoing/7e8bce3f04542e061629166be91598cc 실행 컨텍스트(Execute Context) 실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념으로, 쉽게 말해 실행 가능한 코드가 실행되기 위해 필요한 환경을 말한다. 여기서 말하는 실행 가능한 코드는 일반적으로 전역 코드와 함수 내 코드이다. 자바스크립트 엔진은 코드 실행을 위해 필요한 여러 정보 (ex: 변수(전역변수, 지역변수, 매개변수, 객체의 프로..

1. 이미지와 텍스트의 배치를 위한 float float 은 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성. inherit : 부모 요소에서 상속 left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름 right : 오른쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none : 요소를 부유시키지 않음 left와 right을 통해 부유 속성을 지정 시 display는 무시된다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이..

content의 높이가 작으면 footer가 맨 아래가 아닌 애매한 중간 위치에 있게 되는 경우가 있다. 관리자 도구를 확인해보면, html 자체의 높이가 작아서 나타나는 문제이다. 컨텐츠만큼 HTML의 height 가 auto로 늘어나있기 때문에 height를 100%로 맞춰준다. 컨텐츠를 감싸고 있는 body에 height: 100% 를 주고 body 자식 요소인 을 min-height: 100% 으로 페이지 최소 높이값을 맞춘다 (wrap이 min-height이 아닌 height을 주면 창의 높이를 낮출 때 footer가 wrap 중간에 오고 만다.) wrap에 position: relative; 를 준다. wrap 안에 담길 footer 자리를 아래에 만든다. -> padding-bottom으로..