My posts
DDL DML DCL
데이터 정의 언어 (Data Definition Language) 컴퓨터 사용자 또는 응용 프로그램 소프트웨어가 컴퓨터 데이터를 정의하는 컴퓨터 언어 또는 컴퓨터 언어 요소 e.g. Document Type Definition (DTD), 데이터베이스 언어 SQL (Structured Query Language) SQL SQL 의 데이터 정의 언어 문장은 관계형 데이터베이스의 구조를 정의한다. SQL…
MySQL
데이터베이스 정의 관련된 데이터가 모여진 집합체 ⇒ 지속적으로 데이터를 입력하고 경신하며, 축적된 데이터를 바탕으로 의미 있는 정보를 추출할 수 있음 통합 데이터 공유 데이터 저장 데이터 운영 데이터 의사 결정 데이터 특징 실시간 접근 지속적인 변화 동시 공유 내용에 의한 참조 데이터베이스 관리 시스템 DBMS DBMS…
Internet Protocol
인터넷 프로토콜 OSI 7계층 개방형 시스템 상호 연결 (Open System Intercon-nection; OSI) 모델 상호 이질적인 네트워크 사이의 연결에 어려움이 많은데 이러한 호환성의 결여를 막기위해 ISO(국제 표준화 기구)에서는 OSI 참조 모델을 제시함 실제 인터넷에서 사용되는 TCP/IP는 OSI 참조 모델을 기반으로 상업적이고 실무적으로 이용될 수 있도록 단순화된 현실화의 과정에서 채택된 모형…
Array Methods
배열 메서드 함수를 알아봅시다. 배열 같은 자료형을 가진 자료들을 나열하여 메모리에 연속적으로 저장하여 만든 자료들의 그룹 자바스크립트의 배열은 가변 객체 (원소를 쉽게 추가, 삭제 할 수 있고 배열 객체는 동적으로 커지거나 작아짐) ⇒ 일부 다른 언어에서는 배열 생성과 동시에 크기가 정해져 원소를 추가하려면 새로 배열을 생성 실행하면 중간에 멈출 수 없다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않음 thisArg…
자료 구조 정리
스택 접시를 쌓듯이 자료를 차곡차곡 쌓아 올린 형태의 자료 구조 스택에 저장된 원소는 top으로 정한 곳에서만 접근 가능 top의 위치에서 원소를 삽입하여 먼저 삽입한 원소는 밑에 쌓이고, 나중에 삽입한 원소는 위에 쌓이는 구조 마지막에 삽입(Last-In)한 원소는 맨 위에 쌓여 있다가 가장 먼저 삭제(First-Out)됨 ⇒ 후입선출 구조 (LIFO, Last-In-First-Out) 큐(Queue…
[Conf] 2019 JS Conf
다마고치로 배우는 제너레이터 를 객체를 사용하여 좀 더 유려하게 개발할 수 있다. 아직 많은 브라우저에서 미지원 기능이 다수 있음 Don't block the event loop! 자바스크립트는 싱글스레드 기반의 언어이기에 하나의 호출 스택을 사용한다. 그래서 이라는 특징을 갖고 있는데 이는 '하나의 함수가 실행되면 이 함수 실행이 끝날 때까지 다른 함수(task)가 수행이 안됨'이라는 뜻이다. JS…
Javascript 동기와 비동기
JavaScript 동기/비동기 자바스크립트의 동기 자바스크립트는 싱글 스레드 기반으로 프로세스를 처리, 그러므로 코드의 실행은 동기 방식으로 실행 자바스크립트의 비동기 처리 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 코드를 먼저 실행 Promise Promise 3 가지 상태 (states) Pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled…
[Conf] Javascript in everywhere
#1 CRA 으로 SSR 을 구현하며 배운 점 (승형수) CSR? SSR? CRS : 초기 로딩 속도가 느리고, 각 브라우저에 따라 자바스크립트 버전 의존도가 높다 SSR : 서버에서 한번, 클라이언트에서 한번 각각 렌더링 : 의 전체 로드가 아닌 부분적으로 업데이트된 부분만 업데이트 Checklist 서버 코드와 클라이언트 코드는 분리 git sub module 사용 빛보다 빠른 굴절 (ts) TS…
Database
…
[Conf] Google Cloud onBoard 후기
GCP Cloud Computing 비지니스에 집중하고 비 비지니스에 대한 라소스를 줄일 수 있는 장점 목적 인프라 비용 최적화 및 확장성 확보 데이터 속에서 가치 있는 정보를 찾아내 비지니스 결과 예측 새로운 앱과 환경 구축 서비스 및 파트너로 구성된 비지니스 플랫폼에 연결 안전한 모바일/기기를 통해 팀 생산성 향상 ⇒ 보안 / 확장 / 제어 컴퓨팅 동향 물리적/코로케이션 ⇒ 가상화 ⇒ 서버리스 확장성/유연성 개발형 API…
그런 REST API 로 괜찮은가
어떻게 인터넷에서 정보를 공유할 것인가? Web, 정보들을 하이퍼텍스트로 연결한다. 표현 형식: HTML 식별자: URI 전송방법: HTTP Protocol 설계 HTTP/1.0 HTTP 업데이트를 안정적으로 Relase 하기 위해 HTTP Object Model 발표 4년 후 명명 REST (Representational State Transfer) Microdoft REST API Guidlines (2016) URI는 HTTPS…
Responsive image with HTTP Request
반응형 이미지와 HTTP 요청 을 사용했을때 HTTP 요청은 어떻게 이뤄질까? 라는 질문에서 시작된 글이다. srcset caniuse (support srcset attribute) Resolution 동일한 사이즈로 다양한 해상도 지원이 가능하게 사용할 수 있으며 두번재 인자 값으로 (ratio)x 작성 할 수 있다. Responsive 또는 속성을 사용하여 breakpoint…
Chromatography
색채학 색채의 이해 색의 3속성 색상(Hue) : 명,채도와 함께 색의 3속성중 하나로 색 자체가 갖는 고유의 특성 1차 색 : 더이상 분열되지 않는 색 (ex. 빨강, 노랑, 파랑) 2차 색 : 인접해있는 1차 색끼리 같은 비율로 섞은 색 (ex. 초속, 주황, 보라) 3차 색 : 1차색(원색)과 2차 색상을 섞은 색 (ex. 진노랑, 자주, 청록) 명도 (Brightness) : 색상의 밝고 어두운 정도 채도 (Saturation…
GPU Acceleration for Web Animation
웹 애니메이션 GPU 가속 GPU 가속을 알아보기 전 먼저 GPU라는 용어부터 짚고 넘어가야 할 것 같은데요. GPU(Graphic Processing Unit) 즉, 그래픽 처리 장치는 메모리를 빠르게 처리하고 화면으로 출력할 프레임 버퍼 안의 영상 생성을 가속하도록 설계된, 전문화된 전자 회로이다. 라고 [위키백과] 에 설명되어 있습니다. 과거의 CPU 혼자 모든 부분을 담당하여 처리했던 부분을 현대엔 GPU…
Compiler vs Interpreter
o5xjh 컴파일러 특정 프로그래밍 언어로 작성한 소소코드를 다른 프로그래밍 언어로 변환하는 프로그램 주로 원시 소스코드를 어셈블리어나 기계어로 변환한다. 직접 기계어로 변환하면 부담이 크기 때문에 어셈블리형식의 목적 파일로 생성하는 경우가 많다. 인터프리터 컴파일러 + 인터프리터 결합형 소스코드를 중간 코드 형태로 변환 후 인터프리터가 읽어드려 메모리에 적재하고 해석하며 실행한다. ex) Java code (.java) > JVM…
Task Runner 'Grunt'
grund-js-opt Grunt 프로젝트에서 반복해서 수행하는 빌드, 테스트, 배포 등의 과정을 하나의 명령어로 간단하게 실행할 수 있는 빌드 툴 package.json을 통해서 선언적인 설정을 통해서 task를 정의하고 이를 task로 연결해서 실행한다. grunt는 외부에서 본체로 정보를 넣고, 본체에서 정보를 끄집어내는 i/o (input-output…
AMD module in Require.js
amd_and_require Require.js AMD 모듈화에 맞춰 개발된 Javascript 파일, 모듈 로더 AMD (Asynchronous Module Definition) 모듈화 AMD 그룹에서 Javascript 모듈을 위한 동적 로딩, 의존성 관리, 모듈화 모델을 제시한 API 로딩 모델(디자인 패턴)…
Browser flows
d2-campus-seminar-27-1024 출처: [D2 campus seminar] png 3bbase6494b952da1044d948 출처: [www.chromium.org] 크롬 브라우저의 웹 페이지 렌더링 처리 과정 브라우저는 HTML이 로딩 되면 파싱한다. HTML node를 DOM 트리로 구성한다. (DOM 트리는 화면에 표현되는 node와 화면에 표현되지 않는 node로 구성된다.) 화면에 구성되는 node…
about CSS Architecture
book-covers * SMACSS (Scalable & Modular Architecture for CSS) SMACSS는 CSS를 5가지로 분류/범주화하여 작명규칙 등 스타일 가이드를 제시한 방법론이다. Bass : 기본스타일(Reset, Default, Variables, Mixins) 등 ID, class 셀렉터의 정의 없이 기본 스타일 구축 Layout 페이지 분할 요소 스타일 구축 l- ,layout-, grid…
Font attribute
css font Attribute 1. font-style value : [ normal / italic / oblique ] italic : 필기체의 기울기 / oblique : 비스듬한 경사 폰트의 이텔릭 스타일이 적합하지 않은 폰트의 경우가 있어, W3C에선 이텔릭 스타일을 쓰기보단 이텔릭버전의 폰트를 사용하길 권장한다. 2. font-variant value : font-variant-css21 = [normal / small-caps…
font-face
1. @font-face css2.1 부터 기술이 되었으나 CSS3 font module 에서 표준화된 규율로 명시되었다. at-rules (@로 시작하는 css규칙 : ex - @import / @media 등등이 있다) 중 하나이다. 웹 상에서의 텍스트에 온라인 폰트를 적용할 수 있다. css 2.1에서 제안된 @font-face는 모든 플랫폼에 충족되는 폰트 포맷에 대한 명확한 합일점이 없었다. W3C…
SVG vs Canvas
*SVG (Scalable Vector Graphics) (벡터 그래픽 기반, 파일에 의존) 메모리 내에서 유지 > 다시 렌더링할 때 코드결과를 통해 조작할 수 있는 유지 모드 그래픽 모델 HTML과 마찬가지로 요소, 특성 및 스타일을 사용하여 문서에 빌드된다. (Javascript 와 css의 조합을 사용하여 조작이 가능하다.) svg가 삽입되면 div처럼 동작하고 HTMLDocument에 속하지만, 추가적인 인터페이스인 SVGDocument…