분류 전체보기181

• 

  프론트엔드 면접 질문 정리 ① HTML 질문 doctype은 무엇을 하나요? doctype은 docuemnt type의 약자이다. 이는 웹 브라우저에게 해당 문서의 HTML 버젼을 알려주는 역할을 한다. 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요? 여러 언어로 제공되는 페이지를 제공하기 위해선 페이지 내의 내용이 하나의 일관된 언어로 표시되어야 한다. 브라우저가 HTTP 요청을 서버에 보내면, 대게 Accept-Language와 같은 기본 언어에 대한 설정 정보를 보낸다. 서버는 이 정보를 확인하고 해당 언어에 맞는 문서를 반환한다. 이 때 태그의 lang 속성을 선언해줘야 한다. 서버는 일반적으로 백엔드 프레임워크의 도움을 받아, 특정 언어로 HTML 마크업에서 YML 또는 JSON 형식의 특정 언어에 대한 placeholder와.. Web/HTML 2021. 5. 10.

• 

  [JavaScript 내장함수 다루기 ①] Array.Prototype.Sort, 자바스크립트로 정렬하기 Array.Prototype.sort(sortFunc) JavaScript로 코딩테스트 문제를 풀다보면, sort 함수를 사용해서 값들을 정리하는 경우가 많다. 배열의 내장함수인 sort 함수에 대해서 알아보자. 문자열 정렬은 ASCII 문자 순서대로 // 문자열 정렬 const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] // 숫자 정렬 const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(.. Language/JS(Node.js) 2021. 5. 6.

• 

  [핀테크] 마이데이터란 무엇인가? 마이데이터 용어의 등장배경 2020년 8월 5일부터 개정된 데이터 3법(개인정보보호법·정보통신망법·신용정보법 개정안)이 시행되자, 마이데이터(MyData)시대가 열리게 되었다는 기사가 연이어 등장하기 시작했다. 왜 마이데이터인가? 대부분의 사람은 자신의 데이터가 어디에 저장돼서 어떻게 이용되고 있는데, 그 까닭은 데이터가 곳곳에 흝어져 있기 때문이다. 문제는 기업들이 소비자의 정보를 활용해, 광고에 이용하고 있었다는 점이다. 또한 소수의 금융기업들이개인 정보들을 독/과점하는 형태가 오래 지속되었다. 이러한 문제들을 해결하기 위해, 정부도 ‘마이데이터’ 개념을 활용해 개인이 데이터를 주도적으로 관리할 수 있도록 법적, 기술적 기반을 마련했고 이 법을 통해 개인이 데이터를 통제하고 주고 싶은 기업에 마음대로.. 취ㆍ창업ㆍ투자ㆍ칼럼/핀테크 2021. 5. 4.

• 

  2020년 회고록, "프로그래머로 도전한 해" 뒤늦게 작성하는 2020년 회고록 2021년이 16일 지난 시점에서 블로그 회고록을 기록하려 한다. 그동안 나를 괴롭히던 프로젝트가 어느정도 완성되가고 있기 때문이다. 2020년은 내게 여러모로 특별한 해이다. 대학교를 졸업했고 공기업 인턴을 6개월 간 경험했으며, 다양한 사람들과 다양한 대화를 나누고 또 내면적으로 성숙해질 수 있던 한 해였다. 100권 가까운 책을 읽으며, 다른 이들로부터 정말 많은 지혜와 노하우들을 전수 받을 수 있던 해이기도 했다. 그래서 이번 포스팅에서는 키워드 별로 올 한 해를 정리해보고자 한다. 2020년은 '좋은 습관의 만들기의 해'였다. 특히 생활적으로 잘한 점은 나의 삶을 더 발전시킬 수 있는 다양한 습관들을 갖은 것이다. 이 습관들은 내 삶 속에서 너무 중요한 역할을 .. 생각정리/회고 2021. 1. 16.

• 

  [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.