web

HTTP

HTTP (HyperText Transfer Protocol)는, HTML과 같은 문서를 전송하기 위한 Application Layer 프로토콜이다. 프로토콜은 컴퓨터 간의 통신을 원활하게 하기 위해 지키기로 한 규약이다. Client - Server 아키텍처에서 클라이언트가 HTTP messages 양식에 맞춰 요청을 보내면, 서버도 HTTP messages 양식에 맞춰 응답을 한다. HTTP는 특정 상태를 유지하지 않는 무상태성 (Stateless)의 특징을 갖고 있다. HTTP messages HTTP messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이고 다음의 2 가지 유형이 있다. 요청 ( Request ) 응답 ( Responses ) HTTP messages는 몇 줄의 텍스..

HTTPS 인증/보안 기초 정리

HTTPS Hyper Text Transfer Protocol Secure socket layer(HTTPS)는 HTTP over SSL(TLS), HTTP over Secure라고도 불리며, 통상적인 HTTP 요청을 SSL 혹은 TLS 라는 알고리즘을 통하여 HTTP가 통신하는 과정에서 데이터를 암호화하여 전송하는 방법이다. HTTP + SSL 주목적으로는 '암호화'에 있다. 데이터가 암호화되어 전송되기 때문에 정확한 Key로 decoding 하기 전 까지는 내용을 알 수 없다. HTTPS는 암호화를 위해 [대칭 / 비대칭 키 알고리즘]을 사용한다. handshaking 과정에서 [비 대칭키]를 사용하여 인증서에 [대칭 키]를 보내고 해당 인증서에서 대칭키를 안전하게 확인하였다면 그 이후로는 대칭 키를..

DB 설계

관계형 데이터베이스 구조화된 데이터는 하나의 테이블로 표현할 수 있다. 사전에 미리 정의된 테이블을 Relation이라고 하기 때문에 테이블을 사용하는 DB를 관계형 데이터베이스 (Relation database)라고 한다. 자주 쓰이는 용어들은 다음과 같다. Data: 각 항목에 저장되는 값 Table / Relation: 사전에 미리 정의된 column의 데이터 타입대로 작성된 데이터가 row에 저장된다. Column (field) : 테이블의 한 열 Record (tuple) : 테이블의 한 행에 저장된 데이터 Key : 각 레코드를 구분할 수 있는 값 - 레코드마다 고유의 값을 갖는다 - Key는 아래의 2가지로 나뉜다. Primary Key (PK - 기본키) Foreign Key (FK - 외..

SQL

DB의 필요성 데이터를 저장하는 방법으로 메모리에 임시로 저장한다거나, 실제 파일에 데이터를 만들어 보관하는 등의 방법을 사용하면 되는데 왜 DB가 필요한지 먼저 생각해 볼 필요가 있다. 개인 사용자 입장에서는 (사용자마다 다르지만) 굳이 DB를 사용할 필요 없이 기억장치로도 충분히 데이터를 보관할 수 있다. 하지만 다량의 데이터를 다루는 사용자 (기업이나 큰 규모의 프로젝트 관리 등) 입장에서는 아래와 같은 문제점이 발생할 수 있다. In-Memory 휘발성 - 끄면 데이터 증발 중요한 데이터가 있는데 갑자기 꺼진다면? File I/O (파일 입출력) 원하는 데이터만 가져올 수 없고 항상 모든 데이터를 가져온 다음에 서버에서 필터링을 해야함 파일이 손상되거나, 동시 다발적으로 또 데이터의 크기가 클 경..

MySQL 접속 에러 ERROR 2003 (HY000)

ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost:3306' (10061) 어제 MySQL을 설치하고 오늘 한번 테스트를 하기 위해 CLI상에서 비밀번호를 쳤더니 아래와 같이 뜨고 접속이 되지 않았다. 분명히 잘 되었고 비밀번호도 확실한데 자꾸 위와같은 메시지만 뜨면서 접속이 안돼서 적잖은 당황을 했다. 문득 드는 생각이 아 다시 깔아야 하나.. 였지만 그래도 한번 원인을 찾아보기로 했다. MySQL :: MySQL 8.0 Reference Manual :: B.3.2.2 Can't connect to [local] MySQL server B.3.2.2 Can't connect to [local] MySQL server A MySQL cli..

DB/SQL 관련 명령어

MySQL Cheat Sheet MySQL cheat sheet provides you with the on-page that contains the most commonly used statements that help you practice with MySQL more effectively. www.mysqltutorial.org DB 관련 명령어 DB 생성 CREATE DATABASE 데이터베이스_이름; DB 사용 DB를 이용해서 테이블을 만들거나, 수정 또는 삭제 등의 작업을 수행하기 위해 DB를 쓴다는 것을 알려야 한다. USE 데이터베이스_이름; Table 생성 USE를 이용해 DB를 선택하고 난 뒤에 테이블을 만들 수 있다. Table은 필드(테이블의 column)와 함께 생성한다. [예시]..

브라우저의 작동 원리

택배배달 생각해보기( 판매자 - 포장 - 택배로이동 - 도착 - 포장까기 - 구매자 ) Client - Server 리소스가 존재하는 공간과 리소스를 사용하는 앱을 분리시킨 것 리소스 사용 앱( Client ) / 리소스 존재 공간 ( Server ) 일반적으로 서버는 리소스를 전달해 주는 역할만 한다. 리소스를 저장하는 공간을 별도로 마련해 두는데 이때 이 공간을 Database라고 한다 (DB) // 3-Tier Archietecture 클라이언트는 보통 플랫폼에 따라 구분됨 ( 웹사이트 (웹앱), 스마트폰/태블릿 앱, 데스크탑 앱) 서버는 어떤 작업을 하냐에 따라 종류가 달라짐 (파일서버, 메일서버, DB서버, 웹서버 등) 서버 통신과 API 클라이언트와 서버 간의 통신은 요청과 응답으로 구성됨. ..

웹 기본 정리 maybe TBC

HTML으로 구조설계하고 CSS로 스타일링 HTML 기초 CSS 기초 #Id와 .Class 선택자 Font Box model HTML 레이아웃 리셋하기 Layout with Flex Container flex 컨테이너 (Parent) 의 속성 flex 아이템 (Child)의 속성 와이어프레임 (Wireframe) HTML Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3scho..

와이어프레임

Wireframe 웹 또는 어플리케이션 레이아웃의 도면을 작성하는 단계를 와이어프레임 이라고 한다. 도면이라는 말 처럼 어느구역을 어떤식으로 설계 할것인지, 버튼은 어느 위치에 있을것인지, 화면은 어떻게 나눌 것인지 등 전체적인 틀을 구성하게 되고, 이 와이어 프레임 도면을 바탕으로 디자이너는 완성된 웹 또는 어플리케이션이 실제로 어떤 느낌일지 목업을 구현한다. 현재 내 블로그의 와이어프레임 을 한번 만들어 보았는데 생각보다 이상한 느낌이라 이게 맞나 싶다.

flex 아이템 (Child) 의 속성

Child 박스에서 flex의 속성에 어떠한 값도 설정하지 않으면 자동으로 아래와 같은 기본값이 적용된다. flex: 0 1 auto; //기본 크기를 필요에 따라 늘리고 줄일수 있는 속성값. flex: 속성을 margin 이나 padding 처럼 따로 처리 할수도 있다 flex-grow: 0; flex-shrink: 1; flex-basis: auto; // grow 와 shrink는 단위가 없고 비율에 따라 작동한다. flex-grow > 총량을 기준으로 비율로 크기를 맞춰서 조절한다고 생각하자. .child_grow { flex: 1 1 auto; } .target { flex: 2 1 auto; } ------------------------------------- Element 1 Element..

flex 컨테이너 (Parent) 의 속성

Contents 정렬 본격적으로 html의 레이아웃을 조정할 수 있다 flex-direction (Main Axis) flex-direction: column; column-reverse; row ;(기본값) row-reverse; 방향 1 2 3 3 2 1 1 2 3 4 4 3 2 1 justifty-content 세로 가로 align-items 가로 세로 justifty-content (수평 정렬) align-items (수직 정렬) flex-start flex-start flex-end flex-end center center space-between stretch

Layout with Flex Container

display: flex display: flex 는 부모의 박스요소에 적용시켜, 자식 박스의 방향과 크기를 설정할 수 있는 방법이다. 기본값으로는 자식 element가 왼쪽에서 오른쪽으로 차례대로 이어진다. (.css) .flex-container { display: flex; //부모에서 선언 background-color: blue } .flex-container > div { background-color: lightgreen; margin: 1px; padding: 15px; font-size: 15px; } (.html) //부모 Element 1 //자식1 Element 2 //자식2 Element 3 //자식3 회색부분은 flex container, 즉 부모박스의 영역이고, 초록색 박스들은..