Programming/JavaScript tips (22) 썸네일형 리스트형 setTimeout() && setInterval() 자바스크립트 setTimeout(func, millisec) setTimeout()은 어디선가 그리고 아무래도 익숙한 느낌이다. 뭔가 시간과 관련된 함수일 것 같은 그런 느낌. 그리고 그 느낌이 맞다. 원하는 시간을 설정하면 그 시간이 지난 후 함수를 실행하게 된다. 포인트 setTimeout() 과 setInterval() 은 비동기적으로 작동하는 함수이다. 자바스크립트는 동기적으로, 즉, 스크립트를 순차적으로 읽으며 실행된다. 이 말은 윗라인의 실행이 끝나기 전까지는 아래라인은 실행할 엄두도 내지 못한다는 것이다. 예를 들어보자. 1 2 3 4 5 6 7 console.log('start working'); console.log('still working'); console.log('end working'); /.. Web Architecture Web Architecture 란? 이제는 삶에서 없으면 안될만큼 아주 중요한 부분을 차지하고 있는 것이 바로 인터넷이다. 처음에는 인터넷에 연결이 되기만 하면 둥둥 떠있는 것처럼 원하는 곳으로 헤엄치며 다니면서 원하는 정보를 보고 듣고 가져올 수 있을 거라고 생각했다. 아주 추상적인 생각이다. 이번 블로그에서는 이러한 일을 가능하게 만들어 주는 구성요소에 대해 간략히 알아보자. Application Programming Interface(API) 어떤 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 *인터페이스: 서로 다른 두개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면 Client (=== Browser) 사용자가.. [Algorithms]N-queens (Chess Puzzle) 알고리즘, 연습 또 연습 알고리즘적 사고를 한다는건 정말 어려운 일이다. 인간은 컴퓨터와는 다르게 생각하기 때문이다. 일련의 모든 과정들을 일일이 명령하고 알려줘야만 컴퓨터는 사고할 수 있다. 이번에 다룰 알고리즘 또한 만만치 않은 퍼즐이다. 지난 세기의 대결, 이세돌과 알파고와의 대결은 엄청났다. 알파고는 어떻게 바둑을 뒀을까? 물론 딥러닝과 같은 컴퓨터 기술을 구현하는건 아니지만 체스보드를 활용해서 꽤 유명한 알고리즘 퍼즐을 풀어봤다. 우리는 체스의 규칙을 알지만 컴퓨터는 모른다. 그렇기 때문에 각각의 경우마다 어떻게 체스를 둬야할 지 하나하나 길을 알려주어야 하는 것이다. 그 중, 체스의 가장 강력한 말인 퀸을 구현해본다. 여기서 말하는 N은 체스보드의 크기이며, 어떠한 보드의 사이즈(NxN)가 오.. Prototype? __proto__? constructor? 1. Prototype(프로토타입)과 __proto__(언더바언더바 프로토 언더바언더바) 여러 다른 언어들과 비슷하게 자바스크립트도 객체지향 프로그램 언어 중 하나이다. 사실 이해하는데 있어서 쉽지 않은 부분이기 때문에 콘솔창을 열고 직접 객체를 만들어가면서 공부하면 조금 더 쉽게(?) 이해할 수 있다. 자바스크립트에서 생성되는 모든 객체는 부모의 형태를 본따서 생성되게 된다. 자바스크립트를 객체지향 언어라고 하는 이유는 어떤 객체든 Object.prototype을 최초의 조상으로 이어져 생성되기 때문이다. 그 말은, 즉, 부모 객체의 부모 객체의 부모 객체로부터 프로퍼티나 메소드를 상속받게 된다는 것이다. 이것을 자바스크립트의 Inheritance(상속) 라고 한다. 먼저 생성자 함수를 사용하지 않고,.. if(object[key] !== undefined) VS for(let key in object) VS Object.hasOwnProperty(key) : 누가 더 빠를까? 1. Time Complexity (시간 복잡도) 2. 누가 더 빠를까? 시간 복잡도를 검색하는데 흥미로운 질문을 발견했다. " if(object[key] !== undefined) VS for(let key in object) VS Object.hasOwnProperty(key) " 쉽게 말해 O(1)과 O(n)과의 대결이다. 한번 보는게 낫기 때문에 테스트 사이트를 이용해 확인 할 수 있다. 아래 사이트는 몇년전에 만들어졌기 때문에 최신 브라우저의 성능을 기준으로 결과를 주진 않지만 어떤 방법이 더 빠르게 작동하는지 알 수 있다. https://jsperf.com/double-lookup/4 Double Lookup · jsPerf Test runner Warning! For accurate resu.. Hash Table Data Structure(해시 테이블 자료구조) 1. 해시 테이블(Hash Table) 이란? 데이터의 관리 및 유지하는데 있어서 최대한 빠르게 원하는 데이터에 접근하기 위한 자료구조이다. 검색하고자 하는 Key값을 입력받아 해쉬함수를 통해 HashCode를 생성하고, 그 HashCode를 배열의 index로 환산하여 해당 index에 값(value)을 저장한다. 즉, 인덱스와 값은 언제나 연관성을 가지고 있다. 장점: 빠른 서치 유연한 키값 단점: 비정렬된 구조 한방향 서칭 메모리 비효율적 구조 만약 colision 발생시 대처방법 1) Linear Probing(선형탐사) 해시 함수로부터 얻어낸 주소에 이미 다른 데이터가 입력되어 있으면 현재 주소를 기준으로 고정 폭으로 다음 주소로 이동해 비어있는 주소에 입력한다. 서치방법 : 원하는 데이터를 서.. Tree Data Structure(트리 자료구조) 1. 트리(Tree) 란? 트리는 비선형, 계층적 관계를 표현하는 자료구조이다. 또한 명확한 부모와 자식 관계의 자료구조이다. 구성요소 노드 : 자료, 객체, 각 항목 Path(간선 or edge) : 노드와 노드를 연결하는 선 Root Node : 구조의 최상위 노드 Terminal Node(or leaf Node) : 자식노드를 가지고 있지 않은 노드 Internal Node : 터미널 노드를 제외한 모든 노드(루트 노드 포함) 트리 구조의 종류 General Tree 레벨 0 에 있는 노드는 항상 루트노드다. 같은 레벨에 존재하는 노드는 동일한 관계이고 다른 레벨에 존재하는 노드는 부모-자식의 관계이다. 어떤 노드든 갯수에 관계없이 자식노드를 가질 수 있다. Forests 만약 루트노드를 삭제하면 .. Graph Data Structure(그래프 자료구조) 1. 그래프(Graph) 란? 단순히 노드(또는 vertex)와 그 노드를 연결하는 간선(edge)을 하나로 모아놓은 자료구조이다. 즉, 연결되어 있는 객체 간의 관계를 표현할 수 있는 자료구조로 여러 개의 고립된 부분 그래프(Isolated Subgraphs)로 구성될 수 있다. 방향(directed)/무방향(undirected) 그래프 모두 존재한다. 트리 자료구조는 그래프 자료구조에 포함된다. 2. 그래프의 활용 지하철 노선도의 최단경로 구글맵 최단경로 페이스북 팔로워 등 3. 구현을 위한 의사코드(Pseudo Code) 자바스크립트 그래프 형태 graph = { "data1": { "value": "data1", "from": [], "to": ["data2", "data3"] }, "date2".. 이전 1 2 3 다음
