Backend
Supabase Client vs 쿼리 빌더: 비슷해 보이지만 완전히 다른 두 세계
Supabase Client vs 쿼리 빌더: 비슷해 보이지만 완전히 다른 두 세계 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content"Supabase C...
62026. 3. 28.
Backend
데이터 무결성을 지키는 최후의 보루: 트랜잭션과 격리 수준(Isolation Level) 완벽 이해하기
데이터 무결성을 지키는 최후의 보루: 트랜잭션과 격리 수준(Isolation Level) 완벽 이해하기 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content...
22026. 3. 28.
Backend
DB 성능 최적화: N+1 문제부터 데드락(Deadlock)까지 완벽 정복하기
DB 성능 최적화: N+1 문제부터 데드락(Deadlock)까지 완벽 정복하기 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content"ORM을 사용하면서 마주...
52026. 3. 28.
Backend
백엔드 개발자의 영원한 고민: Raw SQL, Query Builder, ORM 완벽 비교 및 레포지토리 패턴
백엔드 개발자의 영원한 고민: Raw SQL, Query Builder, ORM 완벽 비교 및 레포지토리 패턴 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-con...
42026. 3. 28.
Backend
Prisma에는 임베디드 엔티티가 없다? 복합 객체를 다루는 최선의 방법
Prisma에는 임베디드 엔티티가 없다? 복합 객체를 다루는 최선의 방법 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content"TypeORM의 Embedde...
122026. 3. 28.
Backend
NestJS 아키텍처 가이드: 3-Layer부터 CQRS까지 실무 패턴 총정리
NestJS 아키텍처 가이드: 3-Layer부터 CQRS까지 실무 패턴 총정리 <div class="notion-callout"<div class="notion-callout-icon"🏗️</div<div class="notion-callout-content"NestJS에서 프로젝...
22026. 3. 28.
Backend
Supabase RLS 완벽 가이드: anon key가 털려도 내 DB가 안전한 이유
Supabase RLS 완벽 가이드: anon key가 털려도 내 DB가 안전한 이유 <div class="notion-callout"<div class="notion-callout-icon"🔐</div<div class="notion-callout-content"프론트엔드 환경에...
22026. 3. 28.
Backend
Prisma ORM 완벽 가이드: 스키마 설계부터 실무 쿼리까지 총정리
Prisma ORM 완벽 가이드: 스키마 설계부터 실무 쿼리까지 총정리 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content"현대적인 백엔드 개발의 표준으로...
102026. 3. 28.
Backend
TypeORM vs Prisma: Supabase 환경에서의 최적의 ORM 선택과 운영 전략
TypeORM vs Prisma: Supabase 환경에서의 최적의 ORM 선택과 운영 전략 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content"Node....
42026. 3. 28.
Backend
NestJS 환경 변수 검증의 업계 표준: Joi vs class-validator
NestJS 환경 변수 검증의 업계 표준: Joi vs class-validator <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content"NestJS에서 환...
12026. 3. 28.
Backend
NestJS에서 직렬화와 역직렬화 완벽 가이드: DTO와 class-transformer의 마법
NestJS에서 직렬화와 역직렬화 완벽 가이드: DTO와 class-transformer의 마법 <div class="notion-callout"<div class="notion-callout-icon"💡</div<div class="notion-callout-content"Nes...
22026. 3. 28.
기타
검색 성능의 혁신: Elasticsearch 도입으로 검색 지연 시간 40배 개선하기
관계형 데이터베이스의 텍스트 검색 한계를 Elasticsearch의 역색인 구조로 해결하고, 대규모 서비스에서 검색 속도를 2초에서 50ms로 단축한 사례를 공유합니다.
22026. 3. 28.
next.js
Next.js 렌더링 전략 완벽 가이드: SSR, SSG, ISR부터 RSC까지
# Next.js 렌더링 전략 완벽 가이드: SSR, SSG, ISR부터 RSC까지 > **TL;DR** > 성능과 데이터 최신성 사이의 최적의 균형을 찾기 위해 Next.js가 제공하는 다양한 렌더링 전략(SSR, SSG, ISR)의 동작 원리를 파악하고, 최신 패...
12026. 3. 28.
기타
Supabase와 PostgreSQL, 그리고 Prisma: 나에게 맞는 데이터베이스 전략 선택하기
# Supabase와 PostgreSQL, 그리고 Prisma: 나에게 맞는 데이터베이스 전략 선택하기 > **TL;DR** > 백엔드 개발의 핵심인 데이터베이스 관리를 위해 Supabase(BaaS)와 PostgreSQL의 관계를 이해하고, SQL 직접 사용과 Pr...
12026. 3. 28.
nest.js
NestJS 요청 검증의 모든 것: DTO와 Class Validator, Transformer 활용기
클라이언트의 불안정한 요청 페이로드를 안전하게 검증하고 원하는 타입으로 변환하기 위해, NestJS 환경에서 DTO 패턴과
12026. 3. 28.
nest.js
NestJS 시작하기: 컨트롤러, 서비스, 그리고 모듈을 활용한 탄탄한 설계
Express의 자유도 대신, 구조화된 아키텍처를 제공하는 NestJS의 생명주기와 핵심 개념(Controller, Service, Module)을 이해하고, 의존성 주입(DI)을 통해 확장 가능한 Movie API를 구축하는 방법을 알아봅니다.
12026. 3. 28.
nest.js
Nest.js에서 Shell Script로 모듈, 컨트롤러, 서비스 자동 생성하기
Nest.js에서 Shell Script로 모듈, 컨트롤러, 서비스 자동 생성하기
12025. 1. 4.
javascript
Axios 인터셉터로 응답 및 요청 관리하기
Axios를 활용해서 네트워크 요청 및 응답 처리 전에 특정 로직 만들어보기
02024. 12. 23.
nest.js
의존성 주입과 IoC컨테이너
Nest.js의 중요 개념인 의존성 주입과 IoC컨테이너 알아보기
12024. 12. 20.
nest.js
Nest.js의 작동 원리와 핵심 구성 요소
Nest.js의 작동 원리와 핵심 구성 요소 (Service, Module, Controller) 알아보기
12024. 12. 20.
아키텍쳐
JavaScript 컴파일러에 대한 이해
JavaScript 컴파일러를 만들거나 배움으로써 인사이트는 무엇일까??
22024. 11. 25.
react
React 18의 주요 변경 사항
React 18 버전에서의 주요 업데이트 사항은 무엇인가?
12024. 11. 24.
아키텍쳐
서버리스 아키텍처: 미래의 웹 개발 패러다임
코드에만 집중 할 수 있게 해주는 서버리스!
12024. 11. 22.
react
리액트 네이티브의 새로운 아키텍쳐 ( JSI )
브릿지를 사용한 React Native의 아키텍쳐에서 JSI를 사용한 새로운 아키텍쳐
22022. 11. 16.
javascript
Web Workers
worker스레드를 사용하여 무거운 로직 최적화 시키기
12022. 9. 11.
javascript
Event-Driven Programming
event-driven programming의 간단한 정의와 자바스크립트에서 쓰이는 상황에 대한 설명
22022. 9. 10.
CSS
Selector Specificity
선택자 명시도를 사용하여 CSS 우선순위 정하기
12022. 9. 10.
CSS
속성 선택자
속성 선택자에서 구문을 사용하여 조금 더 유연하게 스타일링 하는 방법
02022. 9. 10.
CSS
nth-of-type vs nth-child
자식 요소를 선택하는 가상클래스인 nth-of-type과 nth-child 알아보기
22022. 9. 10.
CSS
CSS Combinators
CSS의 4가지 결합자들 ( space, >, +, ~ ) 알아보기
12022. 9. 9.
HTML
웹접근성 향상시키 (feat : WAI-ARIA)
WAI-ARIA를 사용한 웹접근성 향상시키기
12022. 9. 9.
HTML
Semantic HTML
웹접근성을 높이는 semantic tag들의 종류 살펴보기
12022. 9. 9.
javascript
Event Target Class 만들어보기
Event Target Class를 사용하여 이벤트 등록, 삭제 그리고 dispatch까지 사용해보기
12022. 8. 31.
react
useStateWithHistory 커스텀 훅
과거 상태값들을 기록하여 트랙킹이 가능한 useStateWithHistory 커스텀 훅
12022. 8. 29.
react
useFetch 커스텀 훅 만들기 (feat : reducer )
서버 데이터를 fetch하고 loading과 error상태값을 편리하게 관리하는 useFetch 커스텀 훅
12022. 8. 29.
CSS
how to use counter property of “ol” element
how to specify the order of “ol” element
12022. 8. 27.
HTML
What is the DOCTYPE Declaration in HTML?
This is about the DOCTYPE Declaration at the first line of HTML file
02022. 8. 27.
typescript
Adapter Pattern
Adapter Pattern, which is one of design pattern
12022. 7. 31.
typescript
Facade Pattern
one of design patterns, called facade pattern
02022. 7. 30.
typescript
How to Make Array Grouping in Typescript
Filtering data effectively using the GroupBy function
12022. 7. 29.
react
Basic and Useful React Custom Hooks
Basic and Useful React Custom Hooks. useToggle, useTimeout, useUpdateEffect, useDebounce
12022. 7. 27.
react
React 18 useTransition Hook
Newly introduced hook, “useTransition” at React 18
12022. 7. 24.
nest.js
Authorization Guard 하는 방법
Nest.js에서 편리하게 Authorization Guard하는 방법 알아보기
12022. 5. 29.
nest.js
Custom decorator를 사용하여 header에 있는 jwt 받아오기
nest.js의 custom decorator를 사용하여 request header 의 authorization jwt 유연하게 받아오기
12022. 5. 28.
nest.js
객체안에 객체가 있는 nested object validation 하는 방법
Nest.js에서 Dto를 사용하여 nested object validation 하는 방법
12022. 5. 28.
nest.js
Nest.js에서 dto를 사용하여 validation과 데이터 변형 시켜보기
Nest.js에서 요청이 들어왔을때 적절한 데이터인지 확인하는 validation과 원하는 데이터 형식으로 변형 시키는 transform 작업해보기
22022. 5. 22.
typescript
간단하고 빠르게 객체 데이터 업데이트 하는 방법
타입스크립트에서 간단하게 객체 데이터 업데이트 하는 방법
12022. 5. 20.
typescript
Interface에서 어떠한 key의 value를 타입으로 만드는 방법
타입스크립트에서 Inteface의 내부에 있는 값을 타입으로 정의하는 방법
12022. 5. 20.
typescript
Union Type Guard 하는 방법
타입스크립트에서 유니온타입을 받아 타입 가드 하는 방법
12022. 5. 20.
알고리즘
프로그래머스에서 베스트 앨범 풀어보기
프로그래머스 - 자료수고 해쉬테이블을 사용한 베스트 앨범 문제
12022. 5. 16.
알고리즘
LeetCode에서 Symmentric Tree 풀어보기
Leetcode에서 Symmentric Tree 문제 풀어보기
12022. 5. 14.
알고리즘
LeetCode에서 Binary Tree Inorder Traversal 문제 풀어보기
트리구조의 탐색 방법인 중위 순회를 이용하여 node의 순서 가져오기
12022. 5. 13.
알고리즘
Leetcode에서 Climbing Stairs 문제 풀어보기
DP를 이용하여 LeetCode에서 Climbing Stairs 문제 풀어보기
12022. 5. 13.
알고리즘
Leetcode에서 Maximum Subarray 풀어보기
카데인 알고리즘을 사용하여 최대 부분합 문제 풀어보기
02022. 5. 12.
알고리즘
Leetcode에서 Search Insert Position 풀어보기
이진 탐색을 이용하여 Search Insert Position 풀어보기
02022. 5. 12.
알고리즘
LeetCode에서 Merge Two Sorted Lists 풀어보기
타입스크립트를 사용하여 LeetCode의 Merge Two Sorted Lists 풀어보기
12022. 5. 12.
알고리즘
LeetCode의 올바른 괄호문제 풀어보기
stack 자료구조를 사용하여 Typescript로 LeetCode로 올바른 괄호 문제 풀어보기
02022. 5. 12.
알고리즘
LeetCode에서 Two Sum풀어보기
타입스크립트로 LeetCode에서 Two Sum 문제 풀어보기
12022. 5. 11.
알고리즘
소수 구하기 공식
단일 숫자에 대한 소수구하기와 특정 숫자 범위의 소수들 구하기 공식 함수 알아보기
22022. 5. 10.
CSS
display:grid 사용시 text가 nowrap이 안되는 이슈 해결 방법
display:grid 사용시 자식 요소들의 크기를 단순히 1fr로 줬을대 white-space: nowrap가 먹히지 않아 발생하는 이슈에 해결법 알아보기
12022. 5. 8.
refactoring
마틴파울러의 리팩터링 개정 2판과 함께 클린코드 잘짜는법 배워보자!!(2/2)
마린파울러 리팩터링을 읽고 클린코드 짜기 실습해보기(2/2)
22022. 5. 7.
refactoring
마틴파울러의 리팩터링 개정 2판과 함께 클린코드 잘짜는법 배워보자!!(1/2)
마린파울러 리팩터링을 읽고 클린코드 짜기 실습해보기(1/2)
32022. 5. 7.
typescript
꼭 Enum을 사용해야하는 경우가 아니라면 union 타입을 사용해야하는 이유!!
가능하면 Enum보다 Union Type을 사용하는것이 좋은 이유 알아보기
12022. 5. 4.
typescript
Interface type guard 하는 방법
Interface를 사용할때 type guard를 하는 방법에 대해서 간단하게 2가지 예시를 통해서 알아보기
12022. 5. 3.
javascript
변수로 정규표현식 처리하는 방법
변수로 정규표현식을 만드는 방법 알아보기
02022. 4. 29.
typescript
타입스크립트에서 여러 객체를 상속받을 수 있는 Mixin 패턴을 알아보자!
Typescript에서 여러개의 객체를 상속받을 수 있게 도와주는 Mixin 패턴에 대해 알아보기
12022. 4. 29.
최적화
프론트엔드 성능 최적화를 시켜줄 8가지 방법!!
프론트엔드 성능을 최적화 시켜줄 8가지 방법 알아보기
02022. 4. 28.
esbuild
esbuild로 react app 만들어보기!
esbuild를 사용하여 CRA를 사용하지 않고 처음부터 react 프로젝트 구축해보기
12022. 4. 27.
next.js
getStaticPaths와 fallback 프로퍼티를 알아보자!!
Next.js 내 동적라우팅 정적페이지를 만들때 사용되는 getStaticPaths 메서드와 같이 사용되는 fallback 프로퍼티에 알아보기
02022. 4. 27.
typescript
타입스크립트 Function Overloading을 알아보자!
여러 경우의수의 매개변수를 받을 수 있게 도와주는 함수 오버로딩(overloading)에 대해 알아보기
12022. 4. 27.
next.js
Next.js 에서 facebook comments plugin 적용해보기
페이스북 댓글 플러그인 블로그에 적용시켜보기
12022. 4. 27.
react
react-testing-library를 사용하여 간단한 테스트 코드 작성해보기
react-testing-library를 사용하여 간단한 예제코드들 살펴보기
12022. 4. 27.
javascript
Intersection Observer를 사용하여 lazy loading 해보기
Intersection Observer을 사용하여 lazy loading을 통한 최적화 방법 알아보기
02022. 4. 26.
react
React에서 더 나은 UX를 제공하는 Skeleton 만들어보기!
React에서 Skeleton 컴포너틑 적용하는 방법 알아보기
12022. 4. 26.