본문 바로가기

Web

 (12)
[네트워크] REST / REST API / RESTful API REST Representational State Transfer 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것 자원 : 해당 소프트웨어가 관리하는 모든 것 (문서, 데이터 ...) 상태(정보) 전달 데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달합니다. 주로 JSON 또는 XML을 통해 데이터를 주고 받습니다. www 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍쳐의 한 형식으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하므로 웹의 장점을 활용할 수 있는 아키텍쳐 스타일입니다. HTTP URI (Uniform Resource Identifier) 를 통해 자원 (Resource) 을 명시하고, HTTP Method (POST, GET, PUT, D..
[JavaScript] 비동기 처리 asynchronous programming 동기 vs 비동기 동기는 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 비동기는 요청과 결과가 동시에 일어나지 않아도 됩니다. 즉, 요청에 대한 실행이 완료되어 결과가 나올 때까지 기다리지 않고 다음 요청을 먼저 수행하는 것입니다. 예를 들면 카페에서 주문을 하는 상황에서 동기적인 시스템이라면 커피를 주문하고 주문한 커피를 받을 때까지 카운터 앞에서 자리를 지켜야 합니다. 반면 비동기적인 시스템에서는 주문을 하면 진동벨을 받은 후, 장소를 옮기거나 다른 일을 할 수 있습니다. 그리고 주문한 커피가 나오면 진동벨이 울리고 주문자는 커피가 나왔음을 알 수 있습니다. 동기 처리방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 (블록 상태..
[JavaScript] 프로토타입 프로토타입 자바스크립트는 프로토타입 기반 언어 -> 객체를 상속하기 위하여(새로운 객체를 만들어내기 위하여) 객체 원형인 프로토타입을 이용 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줌 프로토타입 객체 함수를 정의하면 다른 곳에 생성되는 프로토타입 객체는 다른 객체의 원형이 되는 객체입니다. 함수가 정의될 때, 1. 해당 함수에 생성자(constructor) 자격이 부여됨 -> new 키워드를 통해 객체를 만들어낼 수 있게됨 2. 해당 함수의 Prototype Object 생성 및 연결 모든 객체는 프로토타입 객체에 접근할 수 있습니다. 프로토타입 객체도 동적으로 멤버(메서드)를 추가할 수 있습니다. 같은 원형을 복사로 생성된 모든 객체는 추가된 멤버를 사용할 수 있습니다. p..
[JavaScript] 객체 지향 클래스, 인스턴스, 객체 클래스(Class) 객체를 만들어 내기 위한 설계도(틀) ES5 에서 클래스는 함수로 정의 function Person(name, age, nationality) { // 인스턴스가 만들어질 때 실행되는 코드 // 속성 this.name = name; this.age = age; this.nationality = nationality; // 클래스 Person.prototype.learn = function() { } } ES6 에서 클래스는 class 라는 키워드를 이용해서 정의 class Person { constructor(name, age, nationality) { // 인스턴스가 만들어질 때 실행되는 코드 // 속성 this.name = name; this.age = ..
[JavaScript] 고차 함수, 내장 고차 함수 일급 객체 변수에 할당할 수 있습니다. 다른 함수의 전달인자로 전달될 수 있습니다. 다른 함수의 결과로서 리턴될 수 있습니다. 대표적인 일급 객체에는 함수가 있고, 함수를 변수에 할당할 수 있기 때문에 함수를 배열 요소나 객체의 속성값으로 저장할 수 있습니다. 즉 함수를 데이터처럼 다룰 수 있습니다. 고차 함수 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수 고차 함수의 전달인자로 전달되는 함수를 콜백 함수 (callback function) 라고 함 커링 함수 : 함수를 리턴하는 함수 내장 고차 함수 js에는 기본적으로 내장된 고차 함수가 있음 배열 메서드 중 일부가 대표적인 내장 고차 함수 -> filter, map, reduce, forEach, find, sort, some, eve..
[JavaScript] 원시 타입(Primitive Type)과 참조 타입(Reference Type) 자바스크립트 변수의 타입 자바스크립트 변수의 타입에는 크게 원시 타입 (Primitive data type)과 참조 타입 (Reference data type)이 있습니다. 원시 타입 (Primitive data type) = 원시 자료형 원시 타입은 모두 하나의 정보를 담고 있습니다. 원시 타입의 변수들은 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장합니다. 값 자체에 대한 변경이 불가능(immutable)하고, 변수를 재할당해도 변수의 해당 값에 영향을 주지 않습니다. number string bigint --> Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체 boolean undefined null sym..
[CSS] CSS Selector CSS Selector란? style을 적용하고자하는 html 요소를 특정하기 위한 목적으로 사용되는 것이 Selector입니다. 1. 전체 선택자 (Universal Selector) 별표(*)로 나타냅니다. html 문서 내의 모든 요소를 선택 * { } 2. 태그 선택자 (Type Selector) 지정된 태그명을 가지는 요소를 선택 복수 선택 가능 h1 { } p { } h1, div { } 3. ID 선택자 (ID Selector) 특정 id 속성값을 갖는 요소를 선택 id 속성값은 중복될 수 없는 유일한 값입니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. #abc { } 4. 클래스 선택자 (Class Selector) class 속성값을 지정하여 일치하는 요소를 선택 class 속성값은..
[CSS] Box Model, CSS 리셋 1. CSS Box Model content : 글씨가 삽입되는 영역 border : 테두리 영역 padding : content와 border 사이 여백 margin : border와 다른 태그 영역 사이 여백 2. box-sizing 속성 content-box 지정한 css width 및 height를 content 영역에만 적용 전체 크기 = content-box + border + padding + margin 컨텐츠 크기 = content-box border, padding, margin은 따로 합산되므로 지정한 width, height보다 태그 영역이 더 커질 수 있음 border-box 지정한 css width 및 height를 전체 영역에 적용 (padding, border, margin ..
[JavaScript] 문자열 자르기 - substr(), substring(), slice() 비교 JavaScript에서 substr(), substring(), slice() 함수는 모두 문자열을 잘라주는 역할을 합니다. 세 가지의 함수 중 상황에 맞는 적절한 함수를 사용하면 됩니다. 1. substr 함수로 문자열 자르는 방법 string.substr(start, length) 또는 string.substr(start) substr() 함수는 시작 위치부터 해당 길이만큼 문자열을 자르는 함수입니다. "길이" 부분을 생략하면 시작 위치부터 문자열을 끝까지 자릅니다. var str = '자바스크립트'; var result1 = str.substr(0, 2); // 결과 : "자바" var result2 = str.substr(2, 4); // 결과 : "스크립트" var result3 = str.su..
[JavaScript] let과 const의 차이 우선 이전에 쓰이던 var 키워드의 문제점 세 가지를 알아보자. 변수 중복 선언이 가능하여 예기치 못한 값을 반환할 수 있다. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. 함수 레벨 스코프 : 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 것 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ES6에서 나온 let과 const 키워드는 위의 세 가지 문제점을 해결했다. 1. 변수 중복 선언 불가 let let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다. let name = 'sue' console.log(name) // output: sue let name = 'abby' // output: Uncaught SyntaxErro..

티스토리툴바