PlanetScale은 MySQL과 호환되는 Serverless Database 플랫폼이다. 나는 이전 개인 프로젝트를 진행할 때 Hobby 플랜(무료 버전)을 사용했다. 다른 프로젝트에 집중하느라 한동안 PlanetScale의 데이터베이스를 건드리지 않았더니 slee

Database Seeding은 초기 데이터 셋으로 데이터베이스를 채우는 것을 의미한다. Prisma에서 Database Seed하는 방법을 알아보려 한다./prisma 폴더 안에 seed.js 파일을 생성한다.prisma.schema에서 User, Post 모델을 정

🚀지난번 Prisma를 설치하고 데이터베이스에 연결하는 것을 알아보았다. 오늘은 데이터베이스에 어떻게 접근하고 조작하는지 알아보려 한다. Prisma Client Prisma Client란 데이터베이스 스키마에 맞게 자동으로 생성되는 데이터베이스 클라이언트이다. 쉽게

Prisma Prisma는 직관적인 데이터 모델, 자동 마이그레이션, 타입 안전성 및 자동 완성 기능을 제공하는 차세대 ORM이다. 📌 ORM: Object-Relational Mapping. 객체로 연결해준다는 의미. 어플리케이션과 데이터베이스 연결 시 SQL 언어

C++이나 Java같은 클래스 기반 객체지향 프로그래밍 언어는 클래스를 통해 상속한다. 하지만 자바스크립트는 클래스가 없고, 프로토타입 기반으로 객체 복제를 통해 객체를 생성한다.ES6에서 자바스크립트의 클래스가 도입되었는데, 클래스 기반 객체지향 프로그래밍 언어와 매

클로저는 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. 외부 함수의 실행이 종료된 후에도 중첩 함수는 외부 함수의 변수를 기억하여 참조할 수 있다. 이러한 중첩 함수를 클로저라고 한다. 📌 렉시컬 스코프함수가 정의된 위치에 의해 상위 스코프가 결정되는 스코프함수

자바스크립트는 반복문인 for 문, while 문, do... while 문을 제공한다. 그 외에도 반복문을 대체할 수 있는 다양한 기능을 제공한다. for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다. for 문의 괄호 안에는 세미콜론으로 구분되는

자바스크립트에서 조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. if문은 괄호 안에 들어가는 조건이 true이면 코드 블록이 실행된다. 조건이 참인 경우 실행할 코드가 여러개라면, 중괄호{}로 감싸준다.📢 조건이 참인 경우 실행할 코드가 한

객체란 키(key)와 값(value)으로 구성된 프로퍼티의 집합이다. 자바스크립트에서는 함수, 배열 등 대부분의 것들이 객체이다.

변수를 선언하려면 var, let, const 키워드가 필요하다. 변수를 선언한다는 공통점이 있지만, 서로 다른 특징을 가지고 있다. 개발자라면 필수적으로 알아야 할 var, let, const의 차이점을 자세히 다루어보려 한다. 세가지 키워드를 알아보기 전, 변수 선

🚀 자바스크립트 복습하기 React, TypeScript 등 자바스크립트 기반의 무언가를 배울 때마다 기본기의 중요성을 느끼곤 한다. 자바스크립트를 처음 학습했을 때 어려움을 겪기도 했고, 제대로 설명할 수 있을까 생각해 보았을 때 자신이 없으므로 자바스크립트의 주

바닐라 JS로 SPA를 구현하는 중, a태그 클릭 시 화면 이동이 아닌 같은 페이지에 element들이 중복 렌더링되는 오류가 발생하였다. router.js를 살펴보면, root가 초기화 된 후 view의 component가 렌더링되어야 하는데 초기화가 이루어지지 않는

Console 자바스크립트 개발을 할 때 자주 사용하는 것이 console.log()가 아닐까 싶다. console.log()로 ()안의 값을 콘솔창에 출력하는데, 출력된 값을 확인하여 디버깅(오류를 찾고 수정 )하는 데 주로 사용된다. console에는 우리가 자주

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다.C++나 자바 같은 클래스 기반 객체지향 프로그래밍 언어는 클래스가 있고, 클래스를 통해 상속을 사용한다. 하지만 자바스크립트는 클래스가 없고 객체를 프로토타입 기반으로 복제를 통해 생성한다. (자바스크립트의

function 키워드 대신 화살표 => 를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다. 기존 함수 표현식에서 function 키워드를 삭제하고 매개변수의 () 와 코드블록{} 사이에 화살표 ⇒ 를 넣어준다. 함수 내부에 반환값(return)만

2022.05.10 Today I Learned📚 🙋‍♀️먼저 나의 회고록 아주아주 오랜만에 블로그에 글을 올린다. TIL 작성을 중단했던 가장 큰 이유는 나를 돌아보기 위해서이다. 심적으로 휘둘리는 내 자신을 발견하였다. 나의 힘듦을 이겨내는 방법 중 하나는 모

2022.04.19 Today I Learned📚

checkbox를 설정하면 기본 스타일이 적용되어 나타난다. 하지만 기본 스타일을 그대로 사용하지 않고 원하는 디자인으로 조금 더 예쁘게 커스터마이징 할 수 있다. Checkbox를 이미지로 대체해보자.새로운 checkbox를 만들기 위해 기존의 checkbox를 숨긴

⏱Time flies이번 한 주 유난히 시간이 빠르게 흘렀다. 왜 때문이지? CSS 진도를 거의 다 나갔는데, 아쉬운 마음이 더 크다. HTML과 CSS를 좀 더 깔끔하게 끝내고 JS에 들어가면 좋을텐데 제대로 끝내지 못하고 들어가는 찜찜한 기분이랄까. 특히 flex와

flex item 들의 크기를 지정해준다. axis 방향이 row일 경우 넓이, column일 경우 높이를 설정한다.만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시된다.flex-basis의 값에서 더 늘어나도 되는지 지정하는 값으로,