전체 글
-
HTTP 통신개발 2020. 5. 19. 09:49
HTTP란 Hyper Text Transfer Protocol의 두문자어로, 웹 브라우저와 웹 서버가 HTML로 작성된 웹 페이지나 동영상, 음성 파일 등등을 주고받기 위한 프로토콜(통신규약)입니다. HTTP 통신 HTTP에서는 클라이언트가 서버에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환합니다. 좀 더 쉽게 풀어보면 "서버야 나는 이렇게 줄 테니 너는 이렇게 받고 나는 너가 준 거 그렇게 받을게" 라고 통신 규약에 맞게 데이터를 주고받는 것입니다. HTTP 프로토콜의 특징 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아갑니다. 이 때 서버는 클라이언트의 상태를 저장하지 않습니다. 즉, HTTP 프로토콜은 상태가 없는 프로토콜 입니다. 여기서 상태가 없다라는 말은 데이터를 주고 받기 ..
-
Object.create()와 constructor개발 2020. 5. 11. 23:35
mdn에서의 Object.create()의 정의 Object.create() 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다. 먼저 Object.create()는 새 객체를 만들어 준다고 정의되어 있습니다. 그렇다면 이 Object.create() 메서드가 어떻게 새 객체를 만들어주는지와 constructor의 사용 법에 대해서 자세히 알아보겠습니다. Object.create()로 새 객체 만들어 보기 // Human 상위 class 생성 function Human(name) { this.name = name } //Human.prototype에 method 추가 Human.prototype.sleep = function() {console.log(`${this.na..
-
ES6 - class로 작성한 OOP개발 2020. 5. 8. 22:33
ES6부터 추가된 클래스 구문은 이 전까지 사용되어 왔던 객체지향 프로그래밍의 생성자 정의문의 문법 설탕 입니다. 클래스 구문을 사용하면 다양한 종류의 생성자 정의문과 생성자 상속 방법을 통일된 문법으로 간결하게 표현할 수 있습니다. 클래스 구문 종류에는 클래스 선언문과 클래스 표현식이 있습니다. 먼저 클래스를 적용하지 않은 다음과 같은 생성자 함수를 살펴보겠습니다. function Person(name, first, second){ this.name = name; this.first = first; this.second = second; } Person.prototype.sum = function(){ return this.first + this.second; } 앞의 코드를 클래스 선언문과 클래스 표..
-
Graph 자료구조자료구조 2020. 5. 7. 22:12
그래프는 노드(Node, 또는 정점 -vertex- 라고도 부릅니다), 그리고 노드와 노드를 연결하는 간선(edge)으로 구성된 자료구조 입니다. 그래프는 무방향(undirected)일 수 있습니다. 이는 간선에 의해 연결된 2개의 노드가 대칭 일 수 있다는 의미입니다. 한편 방향성(directed)을 가질 수도 있는데, 이는 비대칭 관계를 의미합니다. 그래프 G = ( V, E )로 정의하는데, V( Vertex )는 그래프에 있는 정점들의 집합을 의미하고 E( Edge )는 정점을 연결하는 간선들의 집합을 의미합니다. 그래프 용어 정점 (Vertex) : 연결한 객체들을 의미 간선 (Edge) : 정점들을 연결하는 선 차수 (Degree) : 정점에 연결되어 있는 간선의 수, 방향 그래프에서 진입 /..
-
Linked List (연결 리스트)자료구조 2020. 5. 6. 01:04
Linked List ( 연결 리스트 ) 연결 리스트는 그 크기가 동적인 자료구조로, 자료구조를 구성하는 요소( Node )노드의 연결로 이루어진 자료구조 입니다. 연결리스트의 어떠한 임의의 지점에 데이터의 추가와 삭제를 할 경우, O(1) (상수 시간)의 시간 복잡도를 갖습니다. 추가와 삭제에 대해 O(n) (선형 시간)의 복잡도를 갖는 배열과는 다릅니다. 다만 이 추가와 삭제 속도에 대한 대가로, 연결 리스트의 각 노드는 인덱스를 갖지 않습니다. 그래서 어떤 특정 데이터를 연결 리스트에서 검색하고자 할 경우, 처음부터 전체 연결 리스트를 훓어야 하며, 이는 O(n) (선형 시간)의 복잡도를 필요로 합니다. 따라서 Linked List는 그 위치들이 각각 흩어져 있기 때문에 서로 연결되어 있어야 합니다..
-
Stack & Queue자료구조 2020. 5. 3. 22:20
Stack 스택( Stack ) 이란 쌓아올린 다는 것을 의미합니다. 쌓여져 있는 접시 더미와 같이 차곡차곡 쌓아 올린 형태의 자료구조를 말합니다. 접시를 쌓을 때 맨 위에 차곡차곡 쌓고 가져올 때에는 위에서부터 하나씩 가져오는 것과 같은 원리입니다. Stack의 특징 스택은 위의 사진처럼 정해진 방향으로만 쌓을 수 있고, top으로 정한 곳을 통해서만 접근할 수 있습니다. top은 가장 위에 있는 자료가 가장 최근에 들어온 자료를 가리키고 있으며, 삽입되는 새 자료는 top이 가리키는 자료의 위에 쌓이게 됩니다. 스택에서 자료를 삭제하거나 가져올 때에도 top을 통해서만 가능합니다. 스택에서 top을 통해 삽입하는 연산을 push, top을 통해 삭제하거나 가져오는 연산을 pop 이라고 합니다. 따라서..
-
Calendar - 프로젝트를 마치며프로젝트 리뷰/기초 JS로 Calendar 구현하기 2020. 5. 3. 20:00
※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 프로젝트를 하면서 느꼈던 점 구글 캘린더, 네이버 캘린더 등등 평소에 캘린더 웹앱을 사용하면서 막연히 나도 언젠간 이런 웹앱을 만들어보고 싶다는 생각을 했었습니다. 이 캘린더를 구현할 때, 처음부터 이런 저런 기능들을 다 구현해가면서 시작하지는 않았습니다. 빈 js파일을 만들고 new Date()를 통해 날짜를 받아오는 테스트 과정만 따로 진행하여 Date에 대한 메서드들을 능숙하게 사용할 수 있을 때까지 계속해서 빈 페이지에 연습했습니다. 하나가 끝나고 나면 input으로 할일목록 제출하..
-
Calendar 코드리뷰 - JavaScript 적용하기프로젝트 리뷰/기초 JS로 Calendar 구현하기 2020. 5. 3. 16:13
※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 최종 완성본 구현 목표 순서 1. 첫 로딩이 되면 현재 출력하고자 하는 달이 윤년인지 윤년체크를 한다. 2. 윤년 체크가 완료되면 해당하는 달의 일 수만큼 html 요소들을 createElement 메서드로 만들고 필요한 속성들도 setAttribute 메서드로 정의 해준다. 3. 왼쪽 파트에 현재 날짜를 보여주기 위해 함수를 작성하는데 이 함수는 재활용 할 여지가 있으므로 따로 함수로 만들어준다. 4. 첫 로딩이 되면서 해당 날짜에 등록된 할일 목록이 있으면 출력해줄 수 있는 함수를 만들..