분류 전체보기
-
[Vue] DirectiveJavaScript/Vue 2020. 9. 6. 21:10
Vue에서 제공하는 특수 속성으로 v- 접두어가 붙어있음 렌더링 된 DOM에 특수한 반응형 동작을 지시 종류 1. v-text {{ }}의 기능과 동일 2. v-html HTML 태그를 지원 3. v-show 해당 엘리먼트를 보여줄지 여부(true/false) 4. v-if 엘리먼트의 표시 여부에 대한 조건문 v-else-if, v-else value > 5 5. v-pre 해당 엘리먼트에 지시문이 없다는걸 컴파일러에게 알려 컴파일 타임에 건너뜀 컴파일 속도를 향상 시킬 수 있음 6. v-cloak Vue 인스턴스가 준비되기 전 템플릿을 위한 HTML코드를 숨길 때 사용 value > 5 7. v-for {{ todo.text }} 8. v-on 사용자와 애플리케이션이 상호 작용할 수 있도록 메소드를 호..
-
[WEB] MSA(Microservices Architecture)란?WEB 2020. 9. 1. 09:16
Micro Services Architecture의 약어로 소프트웨어 개발 기법 중 하나 AWS, GCP, Azure, OCI 등의 클라우드 시스템으 제공하는 기업들에서 출시되는 애플리케이션은 거의 MSA를 위해 맞춰가고 있음 Monolithic Architectrue 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어있는 형태로 유지보수가 용이 문제점 프로젝트가 커지면 커질수록 영향도 파악 및 전체 시스템 구조의 파악이 어려움 프로젝트가 커지면 빌드 시간 및 테스트 시간, 배포 시간이 기하급수적으로 늘어남 서비스를 부분적으로 scale out하기 어려움 부분적인 장애가 전체 서비스의 장애로 이어질 수 있음 Monolitic Architecture의 문제점을 해결하기 위해 MSA 도입 MSA란? 전체 서..
-
[Network] TCP와 UDP의 차이Network 2020. 8. 31. 21:44
TCP란? Transmission Control Protocol의 약어 네트워크 계층 중 전송 계층에서 사용하는 프로토콜로 장치들 사이에 논리적인 접속을 성립하기 위하여 연결을 설정하여 신뢰성을 보장하는 연결형 서비스 데이터를 메시지(세그먼트 단위의 블록)로 보내기 위해 IP와 함께 사용하는 프로토콜 특징 연결형 서비스 3-way handshaking을 통해 연결을 설정 양쪽 모두 데이터를 전송할 준비가 되었다는 것을 보장하고 실제로 데이터 전달이 시작하기전에 한쪽이 다른쪽이 준비되었다는 것을 알 수 있음 Client -> Server : TCP SYN Server -> Client : TCP SYN ACK Client -> Server : TCP ACK 4-way handshaking을 통해 연결의 해..
-
[DB] 데이터 시각화(Data Visualization)란?DB 2020. 8. 30. 19:53
데이터 분석 결과를 쉽게 이해할 수 있도록 시각적으로 표현하고 전달하는 과정 도표와 이미지를 통해 명확하고 효과적으로 전달하는 것이 데이터 시각화의 핵심 데이터 시각화를 하는 이유 많은 양의 데이터를 한눈에 볼 수 있음 데이터 시각화는 많은 양의 데이터를 시각적 요소를 활용해 요약하여 표현하여 한눈에 볼 수 있도록 해줌 데이터 분석에 대한 전문 지식이 없어도, 누구나 쉽게 데이터 인사이트를 찾을 수 있음 데이터 시각화 차트에서 시각화 요소의 형태, 크기, 위치, 색상을 통해 수학적, 통계적 전문 지식 없이도 쉽게 데이터 인사이트를 찾을 수 있음 데이터 시각화 차트의 시각적 패턴을 근거로 한 스토리텔링은 사람들의 기억에 오래 남음 요약 통계보다 정확한 데이터 분석 결과를 도출할 수 있음 데이터 시각화는 데..
-
Kafka란?DEV 2020. 8. 27. 21:37
메시지 큐의 일종으로 분산형 스트리밍 플랫폼 메시지를 메모리에 저장하는 다른 메시지 큐와 달리 메시지를 파일 시스템에 저장하여 메시지 유실을 줄일 수 있음 다른 메시지 큐는 broker가 consumer에게 메시지를 push하는 방식이지만 Kafka는 consumer가 broker로부터 직접 메시지를 가지고 가는 pull 방식으로 동작하기 때문에 consumer는 성능 최적화 가능 주요 개념 Topic 메시지는 topic으로 분류됨 Partition topic이 나눠지는 단위 메시지를 병렬로 처리하기위해 topic을 여러개의 partition으로 나눔 Log partition 내의 하나의 메시지 Offset partition의 각 메시지를 식별할 수 있는 유니크한 값 일종의 인덱스 Producer 메시지..
-
[WEB] Elasticsearch 란?WEB 2020. 8. 26. 21:51
Apache Lucene 기반의 오픈소스 분산형 검색 및 분석 엔진 방대한 양의 데이터를 실시간으로 신속하게 저장, 검색, 분석할 수 있음 검색을 위해 단독으로 사용되기도 하고 ELK(Elasticsearch / Logstash / Kibana) 스택으로 사용되기도함 특징 Scale out Shard를 통해 규모가 수평적으로 늘어남 High Availability Replica를 통해 데이터의 안전성을 보장 Schema Free JSON 문서를 통해 데이터 검색을 수행하므로 스키마 개념이 없음 RESTful 데이터 CRUD 작업은 HTTP RESTful API를 통해 수행 ELK Stack Logstash 다양한 소스(e.g. DB, csv ...)의 로그 또는 트랜잭션 데이터를 수집, 집계, 파싱하여 ..
-
[WEB] JWT란?WEB 2020. 8. 25. 21:38
JSON Web Token의 약어 JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim기반의 Web Token으로 RFC-7519 표준 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 전달 구조 Header typ와 alg 두 가지 정보로 구성됨 typ : 토큰의 타입 지정 alg : Signature를 만드는 해시 암호화 알고리즘 지정 Payload 토큰에 담을 Claim 정보를 포함(key-value 쌍으로 이루어짐) Registered, Public, Private의 3가지 유형으로 나뉨 만료일시, 발급일시, 발급자, 권한정보 등이 포함 Signature Payload가 위변조되지 않았다는 사실을 증명하는 문자열 Header, Payload, Secret Key를..
-
[Node.js] Passport.js - 로그인 인증 및 세션 (Typescript)JavaScript/NodeJS 2020. 8. 22. 16:13
Node.js에서 사용하는 인증관련 미들웨어 로그인, 접근 권한 등을 인터셉트해서 권한을 체크 Express, Express-session 미들웨어와 연동 가능하여 유연한 기능 제공 인증을 위한 다양한 Strategy 제공(e.g. Facebook. Google ...) passport.js 적용 1. 모듈 설치 $ npm i passport passport-local -D 2. passport 미들웨어 설정 // app.js import express from 'express'; import bodyParser from 'body-parser'; import session from 'express-session'; import passport from 'passport'; import Passport ..