분류 전체보기 210

23.08.03 쿠키(Cookie)와 세션(Session)

HTTP는 connectionless(비연결성), stateless(무상태) 특징을 가진다. 비연결성은 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징이며, 무상태는 통신이 끝나면 상태를 유지하지 않는 특징이다. 따라서 서버는 클라이언트가 누구인지 매번 확인해야하고 이는 속도 저하 뿐 아니라 클라이언트에게 매번 불편함을 주게 된다. 그래서 쿠키와 세션을 사용합니다. HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 로컬에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다. 클라이언트에 300개까지 쿠키저장 가능하며, 하나의 도메..

23.08.02 브라우저는 어떻게 보여주는가

브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS..

23.08.01 CORS

CORS는 Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 공유, 출처가 다른 자원들을 공유한다는 뜻이다. 그럼 출처란 URL의 구성 요소 중에서 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 한다. 다시 말하면 하나라도 다르면 출처가 다르다(Cross-Origin) 라고 인식하는 것이다. 그럼 이게 왜 필요하냐면 외형적으로 동일한 사이트를 만들기는 어렵지 않다. 그래서 출처에 상관없이 자원을 공유한다면 다른 사이트를 위조해서 사용자의 정보를 탈취하고 이를 통해 원래 사이트에 가짜 요청을 보낼 수가 있게 되는 문제가 생긴다. 예를 들면 은행 사이트를 위조해서 가짜 사이트를 만든 다음에 모르고 접근한 사용자가 있다. 그 사용자는 평소 ..

23.07.31 HTTP 메서드

HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식을 일컫는다. 쉽게 말하면 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법이다. 총 9종류가 있지만 주로 사용되는 것은 5가지이다. POST : 주로 생성하는데 사용된다 (Create) GET : 리소스 조회 메서드 (Read) PUT : 리소스를 대체(수정)하는 메서드 (Update) PATCH : 리소스 일부 부분을 변경하는 메소드 (Update) DELETE : 리소스 제거하는 메소드 (Delete) CRUD 순서대로 정리했는데 PUT와 PATCH는 왜 구분되었을까? {name : JM, age : 30}이란 데이터가 있을 때..

23.07.30 기본키(Primary Key)와 외래키(Foregin Key)

키(key)는 DB에서 조건을 만족하는 레코드를 찾거나 순서대로 정렬할 때 레코드를 서로 구분할 수 있는 기준이 되는 속성을 뜻한다. 이 때 기본키는 테이블의 각각의 데이터를 구분할 수 있는 유일한 값을 가지는 키이다. 때문에 기본키를 설정하면 다른 테이블의 외래키와 관계를 맺고 상호작용 할 수 있다. 유일성과 최소성을 가지며 이를 풀어 설명하면 아래와 같다. 테이블 내 데이터을 식별할 수 있는 고유한 값을 가져야한다 NULL 값은 허용하지 않는다(중복값이 있으면 안되는 특성상 이는 자연스럽다) 키 값이 변하지 않아야 한다 최대한 적은 수의 속성을 가진 게 좋다 외래키는 다른 테이블의 기본키 혹은 기본키 역할을 할 수 있는 유일한 값을 통해서 관계를 설정해주는 속성입니다. 하지만 사실 외래키를 사용하는 ..

23.07.29 RDBMS의 정규화

정규화의 기본 목표는 테이블 간에 중복된 데이타를 허용하지 않는다는 것이다. 중복된 데이터를 허용하지 않음으로써 무결성(Integrity)를 유지할 수 있으며, DB의 저장 용량 역시 줄일 수 있다. 즉, 쉽게 풀이하면 테이블을 분리하여 저장하는 것이다. 이런 테이블을 분리하는 정규화에도 단계가 있다. 제1정규화 : 모든 속성 값이 원자 값을 갖도록 분해한다. 제2정규화 : 제1정규형을 만족하고, 기본키가 아닌 속성이 기본키에 완전 함수 종속이도록 분해한다. (완전 함수 종속이란 기본키의 부분집합이 다른 값을 결정하지 않는 것을 의미한다.) 재3정규화 : 제2정규형을 만족하고, 기본키가 아닌 속성이 기본키에 직접 종속(비이행적 종속)하도록 분해한다. (이행적 종속이란 A->B->C가 성립하는 것으로, 이..

23.07.28 MVC 패턴

MVC란 Model, View, Controller의 약자이며 이를 활용한 디자인 패턴이 MVC 패턴이다. Model: 데이터를 가진 객체 지징하며, 다음과 같은 규칙이 있다. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다. 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 한다. 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야만 한다. View: HTML/CSS/Javascript들을 모와둔 컨테이너로 사용자에게 보여지는 부분이다. 마찬가지로 다음과 같은 규칙이 있다. 모델이 가지고 있는 정보를 따로 저장해서는 안됩니다. 모델이나 컨트롤러와 같이 다른 구성 요소들을 몰라야 됩니다. 변경이 일어나면 변경통지에 대한 처리방법을 구현해야만 합니다. Controller : 사용자의 조작에 ..

23.07.27 ORM( 그 중에서 Sequelize)

ORM이란 Object Relational Mapping(객체 관계 매핑)의 약자이다. 우리가 사용하는 객체 지향 프로그래밍에선 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용하기 때문에 객체 모델과 관계형 모델간에 불일치가 생긴다. 이 문제를 ORM을 이용하여 해결하고 우린 객체를 통해 간접적으로 데이터 베이스의 데이터를 다룰 수 있게 된다. 장점으로는 객체 지향적인 코드로 인해 더 직관적이고 비즈니스 로직에 더 집중할 수 있게 도와주며, 그리고 ORM은 객체에 매핑하기 때문에 독립적으로 작성되어있고, 해당 객체들을 다시 가져다가 사용할 수 있다. 그리고 DBMS에 대한 종속성이 줄어든다. 이는 자동으로 SQL문을 생성하고 대부분의 ORM 솔루션은 DB에 종속적이지 않아 서비스가 커져서 DBMS..

23.07.26 자료구조 큐(Queue) 구현

기존에 스택을 구현했기에 그것을 참고하여 이번엔 배열 구조로 구현했다. 큐는 스택과 달리 가장 앞의 데이터와 맨 뒤에 데이터만을 사용하기에 스택과는 조금 다르다. class Queue { constructor() { this.storage = [] } isEmpty() { return this.storage.length < 1 } isSize() { if (this.isEmpty()) return "데이터가 없습니다." return this.storage.length } push(item) { this.storage[this.storage.length] = item } shift() { if (this.isEmpty()) return "데이터가 없습니다." const shiftData = this.sto..

23.07.25 스택(Stack) 구현하기

여기저기 찾아보면서 만들었다. 각자 만든 방식이 다른데 나는 객체에 담아서 구현을 했다. 먼저 내가 구현하기 위해 필요한 것들을 생각해보니 비어있는 경우, 크기 확인, 가장 위에 데이터, 데이터 추가, 데이터 제거가 필요했다. 그래서 아래와 같이 코드를 만들었다. class Stack { constructor() { this.storage = {} this.size = 0 } isEmpty() { return this.size < 1 } isSize() { if (this.isEmpty()) return 0 return this.size } top() { return this.storage[this.size] } push(item) { this.size++; this.storage[this.size] =..