concept
-
Browser Security (CORS, XSS, CSRF)concept/server 2020. 5. 24. 22:40
브라우저는 다양한 공격을 받을 수 있다. CORS (Cross-Origin Resource Sharing) https://developer.mozilla.org/ko/docs/Web/HTTP/CORS Cross-Origin Resource Sharing (교차출처자원을 공유한다.) 보안적인 이유로, 브라우저는 스크립트 내에서 시작한 cross-origin HTTP request 를 제한합니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다. => 웹 애플리케이션의 사용자를 보호하기 위한 브라우저만의 자발적인 보안조치 브라우저간의 데이터를 주고받는 과정에서 도메..
-
브라우저, 서버, API, HTTP, Ajax 개념 정리concept/server 2020. 5. 24. 16:33
출처 : 코드스테이츠 서버에 들어가기 앞서 API와 UI의 개념을 알고 넘어가자. API (Application Programming Interface) - 프로그래밍 되어 있는 애플리케이션과 의사소통 가능한 매개체 UI (User Interface) -유저와 의사소통 가능한 매개체 여기서 Interface를 한 마디로 말하자면, 의사소통이 가능하도록 만들어진 매개체(접점)이다! 즉 UI라는 것은 일반인들이 휴대폰, 컴퓨터를 접할 때 가장 많이 접하는 부분이다. 보기 좋게 직관적으로 구성되어 있는 웹사이트에서 클릭할 수 있는 버튼들과 입력할 수 있는 창이 바로 UI의 예라고 볼 수 있다. 그리고 그 일반인들이 UI를 사용할 수 있게 만들어 주는 개발자들이 접하는 것이 바로 API이다. UI를 만들기 위해..
-
Simple Git Command 정리concept/CLI, git hub 2020. 5. 17. 13:56
출처 : 코드스테이츠 git init : git 저장소를 초기화( 생성 ) 합니다. git status : 저장소의 상태를 확인합니다. git add '파일' : 해당 파일을 staging area에 추가합니다. Tip* git add . 을 사용하면 수정한 모든 file 을 추가합니다. !! 무조건 좋은 방법이 아닙니다. !! git commit -m '커밋 메시지' : staging area에서 local repo로 최종적으로 짧은 메시지를 포함해 저장합니다. git clone '저장소url' : 해당 url의 원격저장소를 clone하여 local 환경에 추가합니다. git remote add '저장소별칭 저장소url' : 로컬 저장소와 원격 저장소를 연결합니다. git remote -v : 원격 저..
-
time complexity (시간 복잡도)concept/data structure 2020. 5. 16. 00:29
참고 : 코드스테이츠 이머시브 강의 complexity analysis (복잡도분석) : 알고리즘이 그것을 푸는데 있어서 시간과 공간을 얼마나 차지하는지 나타내는 지표 시간과 공간이 무한정으로 있다면? 알파고는 만들기 쉽다. 플레이 가능한 모든 가짓수를 계산하면 됨 그렇지만 시간과 공간이 어마어마하게 필요하겠지? 바둑판은 19x19 = 381가지 플레이 무한정의 경우의 수가 나올 수 있기 때문이다!!! 그렇기 때문에 시간복잡도를 고려해서 메모리를 적게 쓰는 코드를 쓰는 것이 중요하다는 것을 알고 포스팅을 시작해본다. 시간과 배열이 주어졌다. 여기서 두 수의 가장 큰 차이를 구하라. 주어진 배열 : [2, 5, …, 16] 첫번째 방법 모든 숫자를 비교한다. 2, 5, 6, ... 이렇게 계산했을 때 시간..
-
Graph, Tree, BSTconcept/data structure 2020. 5. 10. 21:27
Graph 그래프는 Node (노드)와 Edge (간선)으로 구성되어 있다. 그래프는 엣지가 노드 자기 자신을 가리킬 수도 있고, 한 노드가 다른 노드만 가리키기도 하고, 서로 가리키기도 하고 복잡한 형태를 가졌다. 그래서 그래프는 무방향(undirected - 대칭), 방향성(directed - 비대칭) 그래프로 나뉠수도 있고 그래프의 엣지가 원을 만드는 cyclic, 그리고 그렇지 않은 Acyclic 그래프로 나뉠 수 있고 그래프를 표현하는 방법 -Adjacency Matrix (인접 행렬 방식) : 그래프를 표에 표현하는 방식 노드끼리 연결이 되었다면 1, 그렇지 않다면 0을 표에 적어서 표현하는 방식이다. -Adjacency list (인접 리스트 방식) : 배열 방에 있는 모든 노드를 집어넣고 ..
-
hash table (해시테이블)concept/data structure 2020. 5. 10. 19:24
출처 : 코드스테이츠 본 포스팅은 코드스테이츠의 immersive course 강의를 정리한 내용입니다. hash table (해시테이블) 은 data structure이다. 어떤 data structure이냐면, 두 가지 관계를 연결시켜주는 것. 그럼 예를 들어서 bat을 넣으면 scary가 나오는 해시테이블 구조를 만들고 싶다면? 이렇게 배열에 인덱스에 하나하나 값을 집어넣어주는 방법이 있다. 그런데 이렇게 했을 때, bat을 찾으려면 0부터 하나하나 다 찾아야하기 때문에 O(n)의 시간복잡도가 나오게 된다. 우리가 원하는 것은 O(1)의 시간복잡도이기 때문에 위 구조는 곤란하겠다. 그러면 배열에 어떤 input을 했을 때, 그 index가 새롭게 나오게 되어 배열의 index에 값이 저장되는 구조를..
-
ES6 - Class / superconcept/javascript - ES6 2020. 5. 10. 02:53
요기서 ES5로 이렇게 만들어줬던 코드를 ES6로는 이렇게 간단하게 표현할 수 있다. class Human { constructor(name) { this.name = name; } sleep() { console.log('zzz') } } let john = new Human('john'); class Student extends Human { constructor(name){ super(name); } learn() { console.log('study hard') } } let oana = new Student('oana'); john.sleep(); // 'zzz' oana.learn(); // 'study hard' oana.sleep(); // 'zzz' 그런데 객체지향에서는 다형성이라는 특징..
-
Subclassing - understanding prototype chain (Object.create()의 활용법)concept/javascript 2020. 5. 10. 01:49
출처 : 코드스테이츠 내가 볼려고 기록해놓는 블로그 이 포스팅은 ES6의 Class가 어떻게 작동하는지 그 원리를 알아보는 포스팅이다. ES6가 나오기 전에는 이런 방식으로 상속관계를 만들어줬다. 먼저 1. 부모-자식 상속관계에 대해서 자세히 알아보고 2. 이것을 HTML에서 활용하는 방법 3. Object.create()를 활용해 상속관계를 만드는 방법을 알아볼 것이다. 1. 부모-자식 상속관계 먼저 부모자식 상속관계에 대해서는 이 2장의 슬라이드로 한 눈에 볼 수 있다. 즉, Human.prototype 과 steve.__proto__가 같은 것이다. __proto__들은 자신의 부모의 특성을 상속받는다. 그런데 모든 객체는 Object 이다! 그래서 객체들은 Object의 특성들을 상속받는 것이다...