전체 글

Java Script - this 바인딩

전역 객체(Global Object) 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global객체를 의미하게 됩니다. // in browser console this === window // true // in Terminal this === global // true 전역 객체는 실행 컨텍스트에 컨트롤이 들어가기 이전에 생성이 되며 constructor가 없기 때문에 new 연산자를 이용하여 새롭게 생성할 수 없습니다. 즉 개발자가 전역 객체를 생성하는 것은 불가능합니다. 전역 객체는 전역 스코프(Global Scope)를 갖게 됩니다. 전역 객체의 자식 객체를 사용할 떄 전역 객체의 기술은 생략할 수 있다...

고급 웹 프로그래밍 - 정리 - 2

자바스크립트 객체 자바스크립트에는 사용자가 직접 객체를 만들어 사용할 수도 있지만, 기본적으로 제공되는 객체가 있습니다. 자바스크립트에서 기본으로 제공되는 객체로 Array, Boolean, Date, Math등 기본객체가 있으며 이들을 코어 객체라고 합니다. HTML DOM(Document Object Model)객체는 HTML태그들을 객체화 한것이며 주로, HTML 페이지의 내용과 속성 등을 제어하기 위해 사용됩니다. BOM(Browser Object Model)은 브라우저 관련 객체로 브라우저와 관련된 정보를 얻거나 제어할 수 있도록 해줍니다. 브라우저는 HTML페이지를 로드할때 각 태그에 해당하는 DOM객체를 생성합니다. 또한 태그의 포함관계에 따라 DOM객체의 포함관계도 이루어 집니다. DOM객..

고급 웹 프로그래밍 - 기말 정리 - 1

JavaScript 자바스크립트를 사용하는 가장 주된 목표는, HTML, CSS를 동적으로 DOM API를 사용하여 바꾸기 위함입니다. 또한 ECMAScript는 JavaScript의 표준을 정의하는 곳입니다. 이의 역할에 대해 간단히 서술해 보도록 하겠습니다. 요소의 추가 및 삭제 CSS및 HTML요소의 스타일 변경 : 내용 및 모양 동적 제어 사용자와의 상호작용 : 사용자 입력, 계산 폼의 유효성 검증 마우스와 키보드 이벤트에 대한 스크립트 실행 웹 브라우저 제어 및 쿠키 등의 설정과 조회 웹 서버와의 통신 또한 자바스크립트는 loosely typed이고, dynamic language입니다. 이는 딱 어느 타비으로 선언하자 마자 정해지는 것이 아니라, 변수에 값이 할당될 때 마다 그 타입이 바뀝니..

Java Programming - Socket

TCP/IP 소개 두 시스템 간에 데이터가 손상없이 안전하게 전송되도록 하는 통신 프로토콜입니다. TCP에서 동작하는 응용프로그램의 사례로는 email, FTP, 웹(HTTP)등이 있습니다. 이는 연결형 통신이라는 특징이 있습니다. 한 번 연결 후 계속 데이터가 전송가능합니다. 마치 친구와 전화를 걸고 받을 때처럼 말이죠. 그리고 보낸 순서대로 받아 응용프로그램에게 전달합니다. 소켓 (socket) TCP/IP 네트워크를 이용하여 쉽게 통신 프로그램을 작성하도록 지원하는 기술입니다. 소켓ㅇ리란 두 응용프로그램 간의 양방향 통신 링크의 한쪽 끝 단입니다. 소켓끼리 데이터를 주고받을 수 있으며, 소켓은 특정 IP 포트 번호와 결합합니다. 소켓에는 서버 소켓과 클라이언트 소켓이 존재하게 됩니다. 서버 소켓과 ..

Data Structure - Tree ( Forests )

Forests forest란 n>=0인 disjoint tree들을 말합니다. 우리는 이러한 forest를 가지고 활용을 할 겁니다. 먼저 다음과 같이 S1 = {0, 6, 7, 8}, S2 = {1, 4, 9}, S3 = {2, 3, 5}이렇게 있다고 해 봅시다. 이 들은 모두 disjoint한 set들입니다. 만약에 Si와 Sj가 disjoint한 집합들이면, Si union Sj가 존재하게 됩니다. 만약 S1과S2를 합치게 되면 아래와 같은 두 그림이 될 수 있습니다. Representation of Sets 우리는 이러한 집합들을 표현할 수 있는 방법을 정의해야 합니다. 우리는 root pointer가 각각의 set name에 해당하는 포인터를 가리키게 해야 합니다. 다음 과 같은 예시를 봅시다...

Data Structure - Tree ( Selection Tree )

Selection Tree 우리는 k개의 연속된 sequence가 있게 됩니다. 이를 우리는 runs라고 합니다. 이들은 모두 하나의 배열로 정렬되어 나올겁니다. 그리고 각각의 runs들은 오름차순으로 정렬되어 있습니다. 그리고 그 안의 값들을 key라고 합니다. 그리고 n을 우리는 이제부터 records의 개수로 정의할 수 있습니다. 그리고 위 runs sequence를 가지고 정렬을 하려면 merging task을 수행해 주어야 합니다. 반복적으로 가장 작은 키를 도출해 내면서 말이죠, 이 때 k - 1번의 비교가 필요하게 됩니다. 그리고 k > 2인 상황에서, 우리는 reduction작업을 통해 winner and loser tree를 구성해 낼 수 있게 됩니다. Winner Trees 우리는 이를..

Data Structure - Tree ( BST )

BST ( Binary Search Tree ) BST의 정의에 대해 간간히 정의하고 가겠습니다. 이는 비어 있을 수도 있습니다. 만약 비어 있지 않다면 다음과 같은 조건을 만족하게 됩니다. 각각의 노드는 하나의 key만을 가지고 있습니다. 그리고 tree안에 있는 모든 key들은 distinct즉 다 다릅니다. 그리고 left subtree 에 있는 모든 키는 root의 key보다 작아야 하고, right subtree에 있는 모든 키는 커야 합니다. 그리고 left와 right subtrees는 둘다 BST입니다. disjoint하다고 표현하죠 다음은 BST의 전형적인 예시입니다. 맨 왼쪽은 BST가 될 수 없는데 딱봐도 아니게 생겼습니다. Insertion 이번에는 트리를 insert하고 이를 pr..

Data Structure - Tree ( Heaps )

Heap은 우리가 우선순위 큐를 구현할 떄 빈번히 사용됩니다. 우선순위 큐란, 우선순위가 높은 것 먼저 빠져 나가는 것을 말합니다. Max Heap max(min) tree란 parent의 key가 child의 키보다 작지 않은 것을 말합니다. 그리고 max(min) heap는 complete binary tree로써, max (min) tree인 것을 말합니다. 즉 max (min) tree에서 root의 값은 최댓값이거나 최솟값이 될 수 밖에 없습니다. 또한 이들은 complete binary tree이기 때문에 우리는 array representation으로도 heap을 나타낼 수 있습니다. Insertion into a Max Heap 여기서 저희는 bubble up process라는 것을 정의해..

[ Carrot Market ] #12 Community - 2

Post Detail 이제 가짜로 mock up했던 데이터들을 실제 데이터로 바꾸어 보도록 하겠습니다. 이를 하기 위해서는 community/[id] 의 id에 해당하는 post와 이와 관련된 userData들을 가져와야 합니다. 그리고 이를 SWR으로 api을 불러와 줍니다. /pages/community/[id].tsx import type { NextPage } from "next"; import Layout from "@components/layout"; import TextArea from "@components/textArea"; import Button from "@components/button"; import { useRouter } from "next/router"; import use..

[ Carrot Market ] #12 - Community - 1

Models 먼저 동네생활을 위한 데이터 베이스 스키마를 만들어 주겠습니다. 먼저 Community(동네 생활)에서의 형태는 다음과 같습니다. 이를 하나의 Post라고 하겠습니다. 이 Post의 작성자가 있을 것이고, 이에 대한 답변이 있을 겁니다. 그리고 질문이 있을것이고, 같이 궁금해 하는 사람이 있을 겁니다. 이를 위해서 스키마를 변경해 보도록 하겠습니다. /schema.prisma model User { id Int @id @default(autoincrement()) phone String? @unique email String? @unique name String avatar String? createdAt DateTime @default(now()) updatedAt DateTime @upd..