UI/UX 개념 UI(User Interface, 사용자 인터페이스) 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다. GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다. GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. 따라서 앞으로 말하는 UI는 이 GUI를 의미한다고 생각해도 된다. UX(User Experience, 사용자 경험) 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 ..
API(Application Programming Interface) API란 클라이언트가 리소스를 요청할 수 있도록 서버측에서 제공된 인터페이스(interface)를 말한다. 이러한 API로 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환가능 하도록 한다 REST API 웹의 리소스를 HTTP URI 형식으로 표현하고 HTTP를 통해 요청과 응답을 정의하는 방식 웹 애플리케이션에서는 HTTP 메소드를 이용해 서버와 통신을 하는데, 어떤 요청을 보내고 받느냐에 따라 메소드의 사용이 달라지며 그에 따라 제대로 통신이 가능하도록 일종의 규약이 존재한다. 자원(RESOURCE) - URI 행위(Verb) - HTTP METHOD 표현(Representations) RE..
Chapter1. 웹 애플리케이션 아키텍처 클라이언트(client) : 서버로 요청을 보내고, 요청한 내용 응답(리소스)를 받아 사용하는 역할. (웹/앱을 이용하는 사용자) 서버(server) : 클라이언트의 요청에 따라 적절한 응답(리소스)를 전달해주는 곳 필요에 따라 서버는 데이터베이스에 요청을 보내고, 회신 받은 응답(리소스)을 활용한다. 데이터베이스 : 리소스를 저장하는 공간 (일종의 서버라고 볼 수 있음) 서버의 요청을 따라 적절한 응답(리소스)을 꺼내 서버에게 전달한다. 클라이언트와 서버는 요청과 응답을 주고 받는 관계이다. 요청을 해야 응답이 오고 요청없이 응답이 오는 경우는 없다 리소스를 사용하는 앱 ⇒ “클라이언트” 리소스가 제공(serve)하는 곳 ⇒ “서버” 상품 정보는 서버에서 다루..
자바스크립트에는 객체 지향 언어이지만 클래스가 존재하지 않아 상속 기능도 없다 그대신 프로토타입 이라는 것이 존재한다 =>프로토 타입은 원형(유전자)라는 뜻 함수 객체에는 프로토타입이라는 특수한 유형의 객체 프로퍼티(속성)가 존재하며 (객체 !== 프로퍼티) 이러한 prototype 프로퍼티를 통해 생성자 함수는 인스턴스에게 프로토타입 객체에 있는 데이터, 메소드를 상속한다 Prototype Object 함수를 정의하면 생성되는 객체 Prototype Link (__proto__) 자신을 만들어낸 객체의 원형을 참조 Constructor 함수를 정의하면 부여되는 생선자 자격 new 키워드를 이용해 객체를 만듬 prototype Link 와 Prototype Object, 이 둘을 통틀어 prototype..
Object-Oriented Programming 우리가 실생활에서 쓰는 모든 것을 객체라 하며, 객체 지향 프로그래밍은 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말한다. 객체는 클래스라는 틀에서 생겨난 실체(instance)이다. 객체 지향 프로그램은 객체와 객체 간의 연결로 되어 있으며 각각의 객체 안에 자료구조와 알고리즘이 들어있는 것이다. =객체 지향 모델링은 기능이 아닌 객체가 중심이 되며 "누가 어떤 일을 할 것인가?"가 핵심이 되며 객체를 도출하고 각각의 역할을 정의해 나가는 것에 초점을 맞춘다. 클래스를 이용해 연관 있는 처리부분(함수)과 데이터 부분(변수)을 하나로 묶어 객체(인스턴스)를 생성해 ..
클래스(class) 자바스크립트는 객체 지향 언어 (OOP: Object - Oriented Programming language)이다 JavaScript 에서 클래스는 객체(object)가 아니라 객체를 만들기 위한 템플릿이다. ES6 에서 클래스를 정의할때 class 키워드를 사용한다. class 안에 생성자 함수가 포함되고, 이 생성자 함수는 리턴값을 만들지 않는다. class 의 이름은 일반 함수와 구분하기 위해 대문자로 시작하고, 일반명사의 형태로 만든다. (일반 함수는 소문자, 동사를 사용) ES5 function Car(brand, name, color){ // 인스턴스가 만들어질 때 실행되는 코드 } ES6 class Car{ constructor(brand, name, color){ //..