자바스크립트

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

[CSS&JS] 오픈 소스

오픈 소스 어떤 소프트웨어 프로그램을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근하여 열람할 수 있도록 공개하는 것으로, 보통 소스가 공개된 소프트웨어를 오픈 소스 소프트웨어라고 한다. 소프트웨어 말고도 개발 과정이나 설계도가 공개되는 경우, 하드웨어에도 오픈 소스 모델이 적용될 수 있으며, 글꼴고 ㅏ같은 데이터에도 오픈 소스 개발 모델이 적용되는 경우가 있다. 꼭 무료만 있는 것이 아닌 유료도 있으며, 2차 창작을 허용하는 경우가 있고, 상업적 용도로까지 사용 가능한 경우도 있다. 공개만 하고 2차 창작이 불가능한 경우도 있는데, 이 경우는 오픈 소스라고 부르지 않는다. 기술 면접에서서는 오픈 소스에 대하여 오픈 소스를 사용하는 것에 거부감이 없는지, 어떠한 오픈 소스를 사용해 보았는지에 ..

[JavaScript] 브라우저 저장소

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

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

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