분류 전체보기

플래닛 스케일 (Planet Scale) 정리

PlanetScale 이란? MySQL 과 호환되는 Serverless Database Platform 이다. Serverless Database Platform 이다. 개발자 및 개발자 작업 흐름에 따라 디자인되었다. MySQL 8.0 위에서 작동하여 MySQL 8.0 의 안정성과 오픈소스인 Vitess 의 확장성을 갖춘 완벽히 관리되는 데이터베이스를 10초 안에 배포한다. DB 에 대한 배포, 브랜치, 쿼리를 UI 에서 바로 할 수 있다. 원한다면 CLI 를 다운받아서 실행할 수도 있다. built-in connection pooling 이 있어서 connection limit 을 경험할 일이 없다. Vitess 는 MySQL 의 수평적 스케일링을 제공하는 DB 클러스터링 시스템이다. Youtube ..

샤딩 (Sharding) 이란?

Sharding 이란? 데이터베이스 혹은 검색엔진에서 데이터의 수평적 분할을 말한다. 각각의 샤드는 보통 독립적인 데이터베이스 서버 인스턴스를 갖고 있어 로드를 분산한다. 데이터베이스에 있는 일부 데이터는 모든 샤드에 존재할 수도 있지만, 또 다른 일부 데이터는 단 하나의 샤드에만 존재할 수도 있다. 각각의 샤드 (혹은 서버) 는 데이터의 하위집합에 대한 유일한 출처(Source)로서 동작한다. 레퍼런스 https://en.wikipedia.org/wiki/Shard_(database_architecture)

서버리스 컴퓨팅 (Serverless Computing) 이란?

서버리스 컴퓨팅(Serverless Computing) 이란? 서버리스 컴퓨팅(Serverless Computing) 이란, 클라우드 컴퓨팅 실행 모델 을 말한다. 클라우드 제공자가 리소스를 할당해놓고 고객의 요청에 따라서 대신 응답을 제공하는 것이다. 사실 "서버리스(Serverless)" 라는 표현은 약간 잘못된 표현이다. 클라우드 제공자가 응답을 제공해주는 방식 역시 내부적으로 서버를 사용하기 때문이다. 다만, "서버리스(Serverless)" 라는 표현을 사용하는 이유는 우리가 서버를 관리할 필요는 없기 때문이다. "서버리스(Serverless)" 를 사용하면 실제로 서버를 운영하는 데 필요한 많은 귀찮은 작업을 덜어준다. "서버리스 컴퓨팅(Serverless Computing)" 을 사용하면 아..

Prisma Schema 란?

Prisma Schema 란? 프리즈마 셋업에서 가장 주가 되는 설정파일이다. schema.prisma 라고 불린다. 보통 다음 3가지 파트로 이루어져있다. 구성요소 Data sources: 프리즈마가 연결될 데이터 소스에 대한 세부사항을 명시한다. (ex. PostgreSQL DB) Generators: 어떤 클라이언트가 생성되어야 하는지에 대해 명시한다. (ex. Prisma Client) Data model definition: 애플리케이션 모델(Models) 과 관계(relations) 를 명시한다. Prisma schema API reference 에 각 스키마 섹션에 대한 자세한 정보가 있다. prisma 명령어가 호출될 때마다, CLI 는 스키마 파일에서 정보를 읽어온다. prisma gen..

6월 4주차 회고

자신만의 단권화 학습할 때, 자신만의 단권화가 필요하다. 모든 지식을 단편적으로 생각해선 안된다. 계속 합치고 잘못된 부분을 수정해나가야 한다. ex) Next.js 공식문서의 Layout 가이드를 단순하게 통번역하여 Next.js 공식문서로서 정리하지 말고 Next.js 의 Layout 이라는 단권화된 주제로 만들자 장인정신과 몰입 반 클라이번 콩쿠르를 우승한 임윤찬의 수상 후 인터뷰를 보고 느낀 점이 있었다. 심플하게 본인이 하고 싶으며 잘하는 것 하나를 계속 해나가는 것도 행복의 비결이라고 느꼈다. 나도 방해받지 않고 코딩할 수 있는 지금의 환경에 감사하며 더욱 더 좋은 결과물을 내도록 노력해야겠다. 하기 싫은데도 해야 하는 이유 결국엔 해야 내가 원하는 미래에 다다를 수 있기 때문이다. 편안한 상..

6월 4주차 기술회고

정리한 것들 HTML Element 에 바인딩된 이벤트 가져오기 window.location 이란? 바닐라 자바스크립트를 이용해 이벤트 등록할 때 실수하기 쉬운 부분들 자바스크립트 Promise 알아보기 자바스크립트 FormData 란? 자바스크립트 URLSearchParams 란? MSSQL 날짜와 날짜 사이 모든 날짜 구하기 자바스크립트 Proxy 란? 자바스크립트를 이용해 쿠키 값 구하기 기타 생각해본것들 append() vs innerHTML JS에서 append() 는 신중히 쓰자. 웬만하면 innerHTML 이 낫다. append() 는 문자열을 {HTMLElement} 로 파싱하는 과정도 거쳐야 하고, 만일 매번 초기화된다면 계속 초기화를 시켜주어야 한다. 반면에 innerHTML 은 자동으..

자바스크립트 숫자 범위 배열 만들기

코드 최소 값부터 최대 값까지의 숫자가 들어있는 배열을 만들 필요가 있어서 작성해보았다. /** * min 에서 max 까지의 숫자를 배열로 반환한다. * * @param min * @param max * @return {*} */ function getArrayFromRange(min, max) { return [...Array(max - min + 1).keys()].map((i) => i + min); }

자바스크립트를 이용해 쿠키 값 구하기

코드 쿠키 값을 오브젝트 형태로 불러온다. function getCookieObject() { return document.cookie.split(";").reduce((acc, e) => { const [key, value] = e.trim().split("="); return { ...acc, [key]: value, }; }, {}); }

자바스크립트의 Proxy 란?

프록시(Proxy)란? Proxy 오브젝트는 다른 오브젝트를 감싸 연산을 가로챈다. 이를테면 프로퍼티를 읽고 쓰거나 다른 자체적인 오브젝트 조작 연산등을 가로챈다. 혹은 아무런 핸들러도 등록하지 않아 오브젝트가 프로퍼티를 다루는 것을 투명하게 허용할 수도 있다. 일반적으로는 중간에 get 과 같은 연산을 가로채 프로퍼티 접근 로그를 남기거나 set 으로 값이 입력 되기 전 값 검증하기, 값 포맷팅하기, 입력된 값을 깔끔하게 만드는 등의 작업을 추가하여 해당 연산이 일어날 때마다 개발자가 입력한 추가 작업이 수행되도록 하는 방식으로 많이 사용한다. 많은 라이브러리나 브라우저 프레임워크에서 사용된다. 문법 let proxy = new Proxy(target, handler); target: 감쌀 오브젝트이다..

FormData 란? 그리고 사용법

개요 HTML form 과 값들을 표현하는 key/value 쌍의 집합을 쉽게 생성할 수 있는 방법을 제공하는 인터페이스이다. fetch() 혹은 XMLHttpRequest.send() 메서드에 전달하기 위해 사용될 수 있다. 인코딩 타입이 "multipart/form-data" 로 설정되었다면, form 이 전달하는 포맷을 동일하게 사용한다. 만일 form element 가 하는 방식으로 쿼리 파라미터를 만들어 간단한 GET 요청을 제출하고 싶다면, URLSearchParams 의 생성자에 직접 넘길 수 있다. FormData 를 구현하는 오브젝트는 for...of 구조에서 직접 사용될 수 있다. 굳이 entries() 메서드를 한번 더 불러올 필요 없다. for (const p of myFormDat..

URLSearchParams 란? 그리고 사용법

개요 URLSearchParams 로 URL 뒤에 복잡하게 붙은 파라미터를 쉽게 쪼갤 수 있다. ex. www.example.com?foo=1&bar=2 에서 {foo: 1, bar: 2} 와 같이 뒤에 붙은 파라미터를 쉽게 가져올 수 있다. URLSearchParams 는 URL 의 쿼리 스트링과 관련된 작업을 하는 유틸리티 메서드를 정의하는 인터페이스이다. 주된 사용법: 생성자 URLSearchParams 는 주로 new 키워드를 이용한 생성자를 통해 초기화하고 사용한다. const params = new URLSearchParams("foo=1&bar=2"); console.log(params.get("foo")); // 1 console.log(params.get("bar")); // 2 생성자의..

window.location 이란?

개요 window.location 은 읽기 전용 프로퍼티로 Location 오브젝트를 반환한다. Location 오브젝트에는 현재 문서의 위치와 관련된 정보가 들어있다. window.location 에는 특별한 기능 하나가 있는데 비록 읽기 전용 프로퍼티지만, 주소 문자열을 할당하면 브라우저가 해당 주소로 이동하는 기능이 있다. window.location = "https://naver.com"; // 네이버로 이동 window.location 이 제공하는 다양한 정보들 window.location 은 브라우저의 주소표시줄에 나오는 문자열을 파싱하여 개념별로 제공해준다. 이를테면 https://example.org:8080/foo/bar?q=baz#bang 이라는 주소가 있다고 하면 이는 아래와 같이 파..