Study/JavaScript

[JavaScript] Restful API

Restful API 자원을 각 이름으로 구분해 해당 자원의 상태를 주고 받는 것. HTTP URI를 통해 자원을 명시하고, HTTP 메서드를 통하여 상태를 주고 받는다. 메서드 메서드 설명 GET 요청받은 URI 정보를 검색한 후에 응답 POST 요청된 자원을 생성 PUT 요청된 자원을 수정 DELETE 요청된 자원을 삭제 HEAD GET과 동일하지만, 응답 코드와 HEAD에만 반응 PATCH PUT과 유사하지만, 일부만 수정 가능 CONNECT 동적으로 터널 모드를 교환하며 프락시 기능을 요청 TRACE 원격지 서버에 루프백 메시지 호출을 위한 테스트용 OPTIONS 웹 서버에 지원되는 메서드 종류를 확인 GET과 POST의 차이점 GET: 지정된 리소스에서 데이터를 요청 (사용하기 위해 얻어 오는 ..

[JavaScript] 객체 지향 프로그래밍(OOP)

객체 지향 절차 지향의 경우에는 기능이 중심이 된다. 무엇을 어떤 절차로 할 것인가? 가 핵심이 된다. 그러나, 객체 지향은 기능이 아닌 객체가 중심이 된다. 누가 어떤 일을 할 것인가? 가 핵심이 되는 것이다. 객체를 도출하고 각각의 역할을 정의해 나가는 것에 초점을 맞춘다. 대형 프로그래밍의 경우, 많은 기능을 수반하기 때문에 객체 지향이 적합하다. 각 객체가 하는 역할이 많더라도, 많은 역할을 객체로 묶을 수 있기 때문이다. 반대로, 소형 프로그래밍의 경우에는 적합하지 않은데, 작은 기능을 객체별로 나누게 되면 오히려 복잡해질 가능성이 있기 때문이다. 객체 지향 프로그래밍(OOP)이란? 객체 지향에 대해서 알아봤다면, 객체 지향 프로그래밍에 대해서 알아 보자. 객체 지향 프로그래밍은 프로그래밍에서 ..

[JavaScript] MVC / MVP / MVVM 패턴

MVC 패턴 MVC 패턴은 Model View Controller의 약어이며, 세 가지가 합해진 것이라고 봐도 무방하다. 구조 Model: 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View: 사용자에게 보여지는 UI 부분 Controller: 사용자의 입력을 받고 처리하는 행동을 하는 부분 동작 사용자의 Action들이 Controller로 들어옴 Controller가 사용자의 Action을 확인 Model 업데이트 Controller가 Model을 나타내 줄 View 선택 View가 Model을 이용해 화면에 나타냄 특징 MVC의 Controller는 여러 개의 View를 선택할 수 있는 1:N 구조 Controller가 View를 선택할 뿐, 직접 업데이트하지 않음 View는 Co..

[JavaScript] 싱글톤 패턴(Singleton Pattern)

싱글톤 패턴(Singleton Pattern) 특정 클래스의 객체를 한 개만 유지하는 패턴이다. 즉, 하나의 클래스에 오직 하나의 인스턴스만 가지는데, 객체 리터럴 {}을 이용한 객체 생성 방법이 싱글톤 패턴과 동일하다. 보통, 객체를 만들 때에 하나의 생성자로 여러 개의 서로 다른 객체들을 만들 수 있는데, 싱글톤 패턴에서는 단 하나의 객체만 존재하는 것이 보장된다. 싱글톤 패턴은 보통 데이터베이스 연결 모듈에 많이 사용한다. 하나의 인스턴스를 다른 모듈들이 공유하면서 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어들어 비용 절감이 가능하지만, 의존성이 높아진다는 단점을 함께 지니고 있다. var obj = { a: 1 }; var obj2 = { a: 1 }; console.log(obj ==..

[JavaScript] 호이스팅(Hoisting)

호이스팅 JavaScript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것을 의미한다. 함수가 실행되기 전, 함수 내에서 필요하는 변수 값들을 해당 함수의 유효 범위 최상단에 선언해 준다. 보통, 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이라고 말한다. 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 된다는 점을 주의해야 한다. 함수 선언에 대한 메모리 할당 선언된 함수는 선언문 상단에서 참조, 호출 가능 함수를 호출하는 코드를 함수 선언보다 앞서 배치 가능 다른 자료형과 변수에도 잘 동작함 변수를 선언하기 전, 먼저 초기화하고 사용..

[JavaScript] 브라우저 저장소

Cookie 매번 서버로 전송됨 객체 정보 저장이 불가능 용량 제한이 있음 영구 데이터 저장이 불가능 Local Storage / Session Storage Local Storage Session Storage 데이터 유지 브라우저 종료 후에도 유지 브라우저 종료 시 삭제 데이터 범위 도메인이 같다면 전역 공유 도메인 별로 별도 생성 같은 도메인이어도 브라우저가 다르다면 도메인이 달라짐

[JavaScript] 브라우저 렌더링 동작 원리

브라우저 렌더링 동작 원리 특정 웹사이트에 접근한다고 했을 때의 단계를 생각해 보면, 1. 사용자가 브라우저를 실행 2. 접속하고 싶은 사이트의 URL을 입력 3. 브라우저가 입력된 URL의 서버에게 사이트 정보를 받아와 화면에 표시 간단하게 말하자면, 보고자하는 페이지를 서버에 요청한 뒤에 받은 응답을 브라우저에 표현하게 된다. 여기서 브라우저는 우리가 알고 있는 크롬, 익스플로러, 사파리, 파이어폭스 등이고 받게 되는 응답은 HTML, CSS, JavaScript, 이미지 등이 될 것이다. 브라우저의 기본 구조 명칭 설명 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을..

[JavaScript] JSON

JSON JavaScript Object Notation(자바스크립트 객체 표기법)의 줄임말로 JSON이라 표현한다. 데이터를 저장하거나 전송할 때 많이 사용되는 Data 교환 형식이며, 객체를 만들 때 사용하는 표현식을 의미한다. 단순히 데이터를 표시하는 표현 방법이며, 데이터 포맷일 뿐이다. 사실상 산업 표준으로 사용하고 있다. Object(객체)의 임시 정의 데이터 이름과 값의 한 쌍으로 구성되며, key와 value의 쌍으로 구성된 자료 구조이다. 하나의 변수 안에 다른 하위 변수를 내장하는 특수한 형태의 변수이며, 하위 데이터에 접근하기 위해서는 점(.)으로 구분한다. 그러므로, JSON은 어떤 변수 안에 하위 변수를 내장시키기 위한 JavaScript의 표기법이라고 할 수 있다. 객체변수이름...

[JavaScript] 배열

배열 배열이란, 같은 자료들을 담는 자료 구조 중 하나이다. 변수에 여러 개의 데이터를 그룹화하여 저장해 놓은 상태이며, 하나의 배열에는 동일한 자료형을 나열하여 사용한다. 1차 배열 배열의 필요성 학급 성적표를 보고 각 학생별로 총점과 평균을 구해야한다고 가정했을 때, 성적표가 아래와 같다면 3명씩 3과목이므로 총 9개의 변수가 필요할 것이다. 만약, 30명의 학생에 대한 20과목에 대한 점수라고 가정한다면 생성해야하는 변수가 더 증가하므로 프로그램은 좀 더 복잡해지게 된다. 배열은 이러한 경우를 해소하기 위한 JavaScript 자료 구조 종류 중 하나로 변수에 여러 개의 데이터를 그룹화하여 저장해 놓은 상태를 말한다. 이름 국어 영어 수학 철수 92 81 77 영희 72 95 98 민혁 80 86 ..

[JavaScript] 기본 문법 활용

기본 문법 활용 조건문, 반복문을 구성하는 블록{} 안에 다른 문법 표현이 포함될 수 있으며, 이런 규칙으로 인해 다양한 문법 중첩 패턴이 생겼다. 자주 사용되는 패턴으로는 if-if, if-for, for-if, for-for 등이 있다. if문 안에 포함된 흐름 제어 1. if-if 구조 특정 조건이 true로 판단되어 블록 안에 진입했을 때, 블록 안의 상세 조건을 판별하는 구조이다. 블록이라는 것이 생기면 밖에서 안으로 진행 후, 그 다음 블록으로 넘어가게 된다. if (조건) { if (조건) { ... } } else if (조건) { if (조건) { ... } else { ... } } else { if (조건) { ... } else if (조건) { ... } else { ... } }..