전체 글237

• 

  [DataStructure] 자바스크립트로 구현하는 '트리' 자료구조 (1) 이진트리 트리 자료구조의 필요성 - 트리 자료구조는 결리스트의 검색 시, 노드의 처음부터 찾아가야하는 단점을 보완했음. 이진탐색의 장점을 활용함. 트리 자료구조 실생활 예시 - 회사나 정부의 조직도 - 나라, 지방, 시•군별, 계층적인 데이터의 저장 - 인덱스 - DOM Tree 이진트리의 조건 - 모든 노드는 왼쪽 가지에 포함되는 어떤 숫자보다도 큰 숫자가 된다. - 모든 노드는 그 노드의 오른쪽 가지에 포함되는 어떤 숫자보다 작은 숫자가 된다. 용어 - 노드 - 루트노드 : 가장 꼭대기 노드. - 노드 : 트리 구조에서의 기본 데이터 저장 단위. - 리프 노드 : 차수가 0인 노드, 즉 맨 끝에 달린 노드를 말함. - 관련 용어 - 차수 : 선택한 노드의 부속 트리의 개수를 말함. - 트리의 차수 : 전체 트.. CS/알고리즘 2020. 12. 2.

• 

  [DataStructure] 자바스크립트로 구현하는 '연결리스트(Linkedlist)' 자료구조 리스트의 정의 특정한 순서로 배치된 일련의 항목 배열리스트의 장/단점 바로 바로 해당 요소에 접근할 수 있음. 요소의 삽입/삭제를 위해 상당한 수의 연산이 요구됨. 다시 인덱싱하기 위해, 메모리 상에서 위치를 재조정해줘야 함. 배열리스트보다 링크드리스트로 구현하면 좋은 상황 배열과 리스트로 본다면 삽입과 수정이 자주 이뤄지는 경우 (전화번호부, 성적 등등) 필요한 메소드 add ( ) remove ( ) search ( ) find ( ) 필요한 객체 Node 객체 next data Linkedlist 객체 head tail length index 코드 console.log("좋은 건 한번 더"); // 링크드리스트가 관리해야 할 정보는 this.head, this.tail, this.count func.. CS/알고리즘 2020. 11. 24.

• 

  [DataStructure] 자바스크립트로 구현하는 '스택(Stack)' 자료구조 스택 자료구조로 구현된 것들 웹 브라우저의 방문기록 : 가장 나중에 열린 페이지부터 보여준다. 역순 문자열 만들기 : 가장 나중에 입력된 문자부터 출력한다. 실행 취소 : 가장 나중에 실행된 것부터 실행을 취소한다. 이처럼 평소에 우리가 자주 쓰는 기능들 중 스택 자료구조를 이용하는 것들이 꽤나 많다. 그래서 오늘은 스택 자료구조를 직접 구현해볼 것이다. 상태 표시 top ( ) : 스택의 마지막 요소가 나타내준다. empty ( ) : 스택이 비었다면 1을 반환하고 그렇지 않다면 0을 반환한다. 필요한 메소드 pop ( ) : 스택 가장 마지막 요소를 뺀다. push ( ) : 가장 마지막에 요소를 추가한다. 배열 기반으로 구현하기 console.log("손쉬운 방법으로 스택 자료구조를 구현해봅시다.".. CS/알고리즘 2020. 11. 23.

• 

  [기타] script, script async, script defer의 차이점 우리는 HTML과 Javascript를 활용하여, 웹 프로그래밍을 할 때 아래와 같이 body 태그가 끝나는 지점 바로 위에 script 태그를 지정해준다(외부 파일에서 가져올 떈 그런데 이 방법은 완벽한 해결책이 아니라고 한다. HTML 문서 자체가 아주 큰 경우를 가정해보면, 브라우저가 HTML 문서 전체를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려질 것이기 때문이다. 이에 대한 대안은 script 태그에 defer 속성을 추가하는 것이다. defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드한다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않는다. 그리고 defer 스크립트 실행은 HTML 파싱이 .. Web/HTML 2020. 11. 20.

• 

  (TIR+4) ③ 브라우저는 OS의 프로토콜 스택에 메시지 송신을 의뢰한다 지난 시간에는 DNS 서버와의 통신을 통해, URL에 숨겨져 있는 웹 서버의 IP 주소를 알아내는 것까지 알아보았다. 이번에는 브라우저가 OS 내부에 존재하는 프로토콜 스택에 의뢰하는 과정과 실제 내부 동작에 대하여 살펴볼 예정이다. 이미 프로토콜 스택에 대해서는 다룬 바 있다. 위의 그림을 참조하여 보면, 이미 웹 브라우저는 HTTP를 통해 전송될 HTTP Request 메세지는 작성한 상태이므로 5번 Layer를 지난 상태이다. 그러나 데이터가 실제로 전송되기 위해선, OS 내부의 네트워크 제어용 소프트웨어(프로토콜 스택, 4번&3번&2번 Layer)와 네트워크용 하드웨어(LAN 어댑터, 1번 Layer)가 브라우저에서 받은 메시지를 서버에 송출하여야 한다. 이를 위해 브라우저는 프로토콜 스택에 메시.. CS/Network 2020. 11. 18.

• 

  [Network] 프로토콜 스택이란 무엇인가? 네트워크에 대한 설명을 할 때, 빠지지 않는 것이 있다면 'OSI(Open System Interconnection) 7계층 참조 모델'과 'TCP/IP Protocol'입니다. 둘 다 계층형 구조로 네트워크를 설명한다는 공통점이 있지만, TCP/IP 프로토콜의 계층은 OSI 모델의 계층과 정확하게 일치하지 않습니다. OSI 표준 모델은 장비 개발과 통신 자체를 어떻게 표준으로 잡을지 사용되는 반면, 실질적인 통신을 설명할 땐 TCP/IP 모델을 주로 사용하곤 합니다. 그 중 오늘은 프로토콜 스택에 대해서 알아보겠습니다. 프로토콜 스택이란 데이터 통신에 활용되는 프로토콜의 구조에 관한 개념으로, 계층화된 구조(스택 구조)로 모여 있는 프로토콜의 집합을 의미합니다. 프토토콜 슈.. CS 2020. 11. 17.

• 

  (TIR+3) ② OS에 HTTP 메시지를 송신하기 위해 웹 서버의 IP 주소를 DNS 서버에 조회한다 지난 시간에는 URL에 관하여 알아보았다. 이번 시간에는 브라우저가 URL을 해독하는 방법에 관하여 알아보도록 하자. ⅰ. 브라우저는 웹 서버에 보내는 메시지를 작성하기 위해 URL을 해독한다. ⅱ. 브라우저는 OS에 HTTP 메시지를 송신하기 위해 웹 서버의 IP 주소를 DNS 서버에 조회한다. ⅲ. 브라우저는 OS의 프로토콜 스택에 메시지 송신을 의뢰하며, ⅳ. OS는 데이터의 송/수신 동작을 실행함으로써, 브라우저에게 수신한 정보를 전달한다. 그리고 URL을 통해 원하는 웹 사이트의 정보를 열람할 수 있는 까닭은 다음과 같다고 이야기했다. 웹 클라이언트인 웹 브라우저는 웹 서버로부터 정보(html, css, javascript 파일들)를 받아와, 화면에 해당 정보들을 표시해준다. 이 때 사용되는 네.. CS/Network 2020. 11. 16.

• 

  [Fintech] 핀테크와 테크핀이란 무엇인가? 앞으로 블로그에서 핀테크와 관련된 기술들을 일주일에 하나씩 정리하는 시간을 갖을 것이다. 과거에 내가 공부하였던 '경제학'과 현재 공부하고 있는 'IT' 기술들을 접목시킬 수 있는 분야가 핀테크이기 때문이다. 핀테크란 Finanance와 Technology의 합성어이다. 핀테크는 기존의 금융회사에서 제공하던 송금, 계좌개설, 대출 등의 금융서비스들을 IT 기술을 통해 스마트폰 하나로도 이용할 수 있도록 사용자에게 서비스를 제공한다. 비대면 계좌 개설 서비스를 예로 들어보자. 이는 과거에는 직원과 직접 만나서 해결하여야 할 문제였다. 하지만 보안기술의 발전으로 가능하게 됐다. 테크핀은 핀테크와는 조금 다른 맥락에서 나온 단어이다. 이는 기술 중심의 기업에서 기술을 중심으로 금융 서비스를 제공하는 것에 조금.. 취ㆍ창업ㆍ투자ㆍ칼럼ㆍ멘토링/도메인 (이커머스, 핀테크) 2020. 11. 15.

• 

  [JavaScript] Scroll Event에 자주 쓰이는 변수/메소드 정리 .offsetTop( ) : 해당 HTML 요소의 Y좌표 위치 반환 .scrollY : 현재 스크롤의 Y좌표 위치 반환 .scrollTo( X좌표, Y좌표 ) : 파라미터로 받아온 X, Y 좌표로 스크롤을 이동시킴 Language/JS(Node.js) 2020. 11. 13.

• 

  [CSS3] Animated Sidebar 만들기 이 효과 역시도, :checked를 활용하면 간단하게 만들 수 있다. 기본정보 1. Animation과 연관된 속성으로 transition과 tranform이 있다. 2. Transform은 화면 상에서의 위치, 크기, 회전각도 등을 조절한다. 각각 translate(X, Y), scale, rotate를 사용함으로써 가능하다. 그 외에도 matrix, matrix 3d, perspective, perspective-origin, transform-origin, transform-style를 사용할 수 있다. 3. Transform이 변화를 주는 요소였다면, Transition은 변화가 일어나는 속도, 변화시킬 요소, 움직이는 방법을 결정할 수 있다. 1) :checked 이전 사이드바로 활용할 요소를 .. Web/CSS 2020. 11. 12.

• 

  [JavaScript] 객체란 무엇인가? 객체란 무엇인가? 자바스크립트에서 객체는 여러모로 쓸모가 많다. JSON 파일에서 전송되는 데이터도 객체이고, DOM 조작에 활용되는 document와 BOM 조작과 관련된 전역객체인 Windows 역시 객체이다. 또한 객체지향 프로그래밍으로 소프트웨어를 설계할 때에도 활용되는 것이 객체이다. 객체의 의의 객체란 현실의 사물을 프로그래밍적으로 표현하기 위하여, 활용되는 수단이다. 예를 들어, 나(이준호)라는 사람을 객체로 표현한다면 다음과 같이 표현할 수 있을 것이다. juno라는 객체를 만들고 그 안에 각각 firstname(변수), lastname(변수), body(객체), hobby(배열), eat(함수), boxing(함수), cooking(함수)를 넣었다. 즉, 나라는 객체 안에 사람이 할 수 .. Language/JS(Node.js) 2020. 11. 12.

• 

  [CSS] 버튼 클릭으로 메뉴 화면 보이기/감추기 서론 대상독자 HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자 본론 구현방법 먼저, 정답은 아주 간단합니다! CSS 가상선택자 :checked 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 input의 type을 checkbox을 생성하고 유동적으로 화면에 보여줄 HTML 태그에 대해, 기본 속성으로 display : none을, :checked 상태에서 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!! 또 display: none 처리된 Input 태그를 클릭하기 위해 label 태그를 추가해주고 속성으로 for에 input에 대한 name을 추가하면 됩니다. 그럼 label 태그를 클릭할 때마다, 보여주고 싶은 영역이 사라졌다 .. Web/CSS 2020. 11. 11.