EnJinnier

REST: REpresentational State TransferREST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라고 표현한다. 44.1 REST API의 구성REST API는 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성됨. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음. 44.2 REST API 설계 원칙REST에서 가장 중요한 기본적인 원칙은 2가지이다. 1. URI는 리소스를 표현해야 한다.리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다. 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.HTTP요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적(리소..

스프레드문법(x전개문법)...은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상 : Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCo1.lection), arguments와 같이 for... of 문으로 순회할 수 있는 이터러블에 한정이때 1 2 3 은 값이 아니라 값들의 목록이므로, 스프레드 문법의 결과는 값이 아니다. 따라서 스프레드 문법의 결과는 변수에 할당할 수 없고,다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.35.1 함수 호출문의 인수 목록에서 사용하는 경우스프레드 문법을 사용하면 간결하고 가독성좋게 해결할 수 있다. ** R..

클래스는 새로운 객체 생성 매커니즘으로 볼 수 있다. 25.2 클래스 정의클래스는 class 키워드를 사용하여 정의한다. 클래스는 일급 객체로 다음과 같은 특징을 가진다. 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세가지가 있다.- constructor는 인스턴트를 생성하고 초기화하기 위한 특수 메서드로, 이름을 변경할 수 없음.- constructor는 클래스 내에 최대 한개만 존재할 수 있음.(생략 가능하며 생략하면 암묵적으로 정의됨)-constructor 내부에서는 return문을 반드시 생략해야 한다.클래스에서는 메서드에 static 키워드를 붙이면 정적 메서드(클래스 메서드)가 된다.클래스는 클래스 정의가 평가되는 시점에 함수 객체가..

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 24.1 렉시컬 스코프자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하며이를 렉시컬 스코프(정적 스코프)라 한다.위 예제를 봤을때 bar함수를 foo함수 안에서 호출했더라도정의를 전역에서 했기 때문에 두 함수의 상위 스코프는 모두 전역이 된다.즉, 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다. 23장 '실행 컨텍스트'에서 보았듯이 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다.이 렉시컬 환경은 자신의 "외부 렉시컬 환경에 대한 참조"를 통해 상위 렉시컬 환경과 연결된다. 이것이 바로 스코프 체인이다. 24.2 함수 객체의 내부 슬롯 [[Environm..

실행컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다.실행 컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.구체적으로 말하면 실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.23.1 소스코드의 타입ECMAScript 사양은 소스코드를 4가지 타입으로 구분하며 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다.위 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 달라진다. 1. 전역 코드- 최상위 스코프인 전역 스코프 생성- 전역 객체와 연결됨- 전역 실행 컨텍스트가 생성됨 2. 함수 코..

22.1 this 키워드객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.이때 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 하며이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 언제나 클래스가 생성하는 인스턴스를 가리키는 자바나 C++같은 클래스 기반 언어와 다르게자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인..

21.1  자바스크립트 객체의 분류자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다.1. 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체. 실행 환경에 관계없이 언제나 사용가능. 2. 호스트 객체 : ECMAScript 사양에 정의 x. 자바스크립트 실행 환경에서 추가로 제공하는 객체. 3. 사용자 정의 객체 : 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체 21.2 표준 빌트인 객체자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet,Function, Promise, Reflect, Proxy, JSON, Error ..

20.1 strict mode란?위와 같은 코드를 실행하면 어떤 결과가 나올까? x 변수의 선언이 존재하지 않지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다.이때 전역 객체의 x 프로퍼티는 마치 전역 변수처럼 사용할 수 있으며 이러한 현상을 암묵적 전역이라 한다.개발자의 의도와는 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크다. 따라서 반드시 var, let, const 키워드를 사용하여 변수를 선언한 다음 사용해야 한다. 그럼에도 불구하고 실수로 인해 발생하는 오류를 줄이기 위해 ES5부터 strict mode(엄격 모드)가 추가되었다.strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립..

자바스크립트는 객체 기반의 프로그래밍 언어이며 원시 타입의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체다.19.1 객체지향 프로그래밍: 여러개의 독립적 단위, 즉 객체(속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조)의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임추상화abstraction : 다양한 속성 중에서 프로그램에 필요한 속성만 간추려내어 표현하는 것. 이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라고 부름. 19.2 상속과 프로토타입상속 : 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것.자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. 예를들어, 생성자 함수를 만들때 동일한 메..

지금까지 공부한 것을 활용해 블로그를 만들어보는 프로젝트를 진행해보자. 전반적인 FE개발 과정을 담을 계획이다. 1. 기획하기(기능정리)항상 어떤 제품을 개발하기 전에는 기획과 필요한 기능, 전체 디자인에 대해 간단하게 정리해야 한다.이번 미니 블로그에는 다음과 같은 기능이 필요하다. - 글 목록 보기 기능 (리스트 형태)- 글 보기 기능- 댓글 보기 기능 - 글 작성 기능- 댓글 작성 기능 2. 디자인하기전체 화면 디자인을 위와 같이 간단히 정리해둔다. 3. 개발-프로젝트 세팅하기3.1 프로젝트 생성하기Create React App을 사요하여 프로젝트를 생성한다.프로젝트를 만들 폴더에서 터미널을 열고 다음과 같은 명령어를 실행하여 미니 블로그라는 이름의 React 애플리케이션을 생성한다.$ npx cr..