- #Optimization
- #Project
- #ModuReview
- #Optimization
- #Project
2025-08-16
Next.js의 캐싱 기능 활용하기
Next.js에서 제공하는 캐싱 기능 활용하기, 주기적으로 HTML 파일을 생성하는 ISR, On-Demand 방식으로 fetch 캐시 무효화하기
에디터에 이미지 업로드 구현하기
titap으로 만든 에디터에 이미지 업로드 기능 구현하기, presignd url 발급하고 S3에 직접 업로드하기
- #Editor
- #Project
- #ModuReview
- #Editor
- #Project
2025-07-11
tiptap으로 에디터 구현하기
Headless 라이브러리인 Tiptap으로 직접 에디터 구현하기, 내가 react-quill을 선택하지 않은 이유
- #Editor
- #Project
- #ModuReview
- #Editor
- #Project
2025-06-16
zustand 코드 까보기
zustand가 어떻게 함수 레벨에서도 동작하는지 너무 궁금해서 코드를 까보고 내용을 정리해봤습니다..
- #Etc
- #Etc
2025-05-16
효율적인 에러 처리를 위한 몸부림
프론트엔드에서 효율적으로 에러 처리하는 방법 고민한 흔적 남기기.. API 요청 모듈, 리액트 쿼리, zustand를 조합해 에러 중앙화하기.
- #Etc
- #Project
- #ModuReview
- #Etc
- #Project
2025-04-16
프리티어 환경에서 무중단 배포 달성하기
Next.js AWS EC2에 배포하기, 프리티어 환경에서 nginx, pm2, 쉘스크립트를 활용해 Blue-Green 무중단 배포하기.
- #Deployment
- #Project
- #ModuReview
- #Deployment
- #Project
2025-03-27
프론트엔드에서의 에러와 예외
팀 프로젝트에 앞서 프론트엔드에서의 에러와 예외가 무엇이고 어떻게 처리할지 잠시 고민해보기..
- #etc
- #etc
2025-03-11
HTTP - 브라우저의 HTTP 요청
fetch를 이용한 요청 외에 브라우저가 직접 만들어내는 몇 가지 HTTP 요청에 대해 알아보기
- #http
- #http
2025-02-27
HTTP - 쿠키
웹 어플리케이션에서 상태를 위해 사용하는 쿠키 알아보기, 다양한 쿠키 디렉티브 알아보기
- #http
- #http
2025-02-13
HTTP - 컨텐츠 협상
클라이언트와 서버 간의 데이터 요청 사이에 효율적으로 자원을 주고받기 위해 수행하는 컨텐츠 협상 알아보기
- #http
- #http
2025-01-28
HTTP - 기본 흐름 정리하기
http가 어떻게 흘러가는지 기본 흐름과 url의 6가지 구조, 응답, 요청에 대해 알아보기
- #http
- #http
2025-01-17
타입스크립트 - OOP와 타입스크립트
OOP가 무엇인지 정리하기, 타입스크립트를 활용한 객체 지향 프로그래밍 알아보기..
- #typescript
- #typescript
2024-12-31
타입스크립트 - 타입 확장, 좁히기
typeof, instance of, is, in 등 타입을 확장하고 좁히는 여러가지 방법 알아보기...
- #typescript
- #typescript
2024-12-16
타입스크립트 - 고급 타입 정리하기
인덱스 시그니처, 맵드 타입, 템플릿 리터럴, 제네릭 등 타입스크립트의 고급 타입 알아보기
- #typescript
- #typescript
2024-11-29
타입스크립트 - 기본 타입 정리하기
정적 타입 언어와 동적 타입언어인 자바스크립트와 타입스크립트의 기본 개념 정리하기
- #typescript
- #typescript
2024-11-16
S3 + Route53 + CloudFront로 프로젝트 배포하기.
프리티어 끝나고 눈물의 계정 옮기기.. CloudFront OAC 설정하기.
- #Etc
- #Etc
2024-10-16
폴더 구조 리팩토링하기.. 어 나야 FSD
Feature-Sliced Design (FSD)에 맞게 폴더 구조 리팩토링하기..
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-10-02
채팅 서버 배포 파이프라인 구성하기
Next.js로 만든 프로젝트 배포 파이프라인 구성하기..
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-08-21
middleware로 CORS 해결하기
Next-Auth로 로그인 기능 구현하기, middleware로 CORS 문제 해결하기
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-08-10
웹소켓으로 통신해보기..
버거풋에 관리자에게 문의하기 기능 만들기...(웹소켓을 곁들여..)
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-08-02
버거풋에 로그인 기능 도입하기..
JWT 토큰 사용해서 로그인 구현하기.. axios 인터셉터로 헤더에 토큰 넣기
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-06-30
react-hook-form에 rc-slider 곁들이기..
react-hook-form에 rc-slider 곁들이기.. 짱 멋진 슬라이더
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-06-16
버거풋에 react-hook-form 사용하기
react-hook-form으로 input 관리하기.. (끔찍한 코드 개선하기)
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-06-06
HTTP Method가 뭔데요 (5)
남은 메서드 다 알아보고 끝내기... CONNECT랑 OPTIONS랑 TRACE...
- #Etc
- #Etc
2024-05-26
HTTP Method가 뭔데요 (4)
메서드 정의 마저 알아보기... 근데 일단 PUT이랑 DELETE까지만..
- #Etc
- #Etc
2024-05-17
HTTP Method가 뭔데요 (3)
메서드 정의 뭔지 알아보기.. 근데 일단 GET이랑 HEAD랑 POST만...
- #Etc
- #Etc
2024-05-11
HTTP Method가 뭔데요 (2)
공통 메서드 속성 알아보기... 안전한 메서드와 멱등성 메서드가 뭡니까?
- #Etc
- #Etc
2024-05-05
HTTP Method가 뭔데요 (1)
RFC 9110 문서 보고 HTTP 메서드 정리하기. 너무 길어서 개요만 정리하기...
- #Etc
- #Etc
2024-04-30
createPortal로 모달 탈출 시키기
createPortal 사용해서 부모 컴포넌트 DOM 계층 구조에서 벗어나기 (CSS 상속 회피)
- #React
- #React
2024-04-24
Burgerput의 로딩 로직 자동화
cURL과 crontab으로 로딩 로직 자동화하기, ALB idle timeout 설정하기
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-04-17
Burgerput의 로딩 로직
우리 프로젝트는 어떻게 데이터베이스를 업데이트하고 있을까?
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-04-11
Burgerput 프로젝트 회고
Burgerput 프로젝트를 회고하며 작성하는 탄생 배경 및 개발 과정
- #Project
- #Burgerput
- #Project
- #Burgerput
2024-04-04
Sanity에 스키마 정의하기
스키마 파일 생성해 정의하고 Sanity Studio로 데이터 추가해보기
- #Sanity
- #Sanity
2024-03-29
Headless CMS란 무엇일까?
CMS, Headless CMS에 대해 알아보기, Sanity로 프로젝트 생성하기
- #CMS
- #Sanity
- #CMS
- #Sanity
2024-03-21
블로그(7) - Serverless, API Routes 알아보기
API Routes와 node-mailer로 메일 전송하기 근데 Serverless 개념을 곁들인..
- #Blog
- #Next.js
- #Blog
- #Next.js
2024-03-16
블로그(6) - metadata, opengraph 설정
metadata와 opengraph 이해하고 next 13의 metadata 객체로 쉽게 설정하기
- #Blog
- #Next.js
- #Optimization
- #Blog
- #Next.js
2024-03-10
블로그(5) - SEO가 뭔가요?
SEO 이해하기, next 13버전에서 sitemap.xml, robots.txt 설정하기
- #Blog
- #Next.js
- #Optimization
- #Blog
- #Next.js
2024-03-04
블로그(4) - 블로그에 Lottie 사용하기
Lottie 애니메이션으로 칙칙한 내 블로그 예쁘게 만들기, lottie-react 라이브러리 이용하기
- #Blog
- #Next.js
- #Lottie
- #Blog
- #Next.js
2024-02-28
블로그(3) - Dynamic Routing, react-markdown
react-markdown 이용해 마크다운 표시하기 그런데 Dynamic Routing과 @tailwindcss/typhography을 곁들인..
- #Blog
- #Next.js
- #MarkDown
- #Blog
- #Next.js
2024-02-23
블로그(2) - react-multi-carousel로 캐러셀 만들기
react-multi-carousel을 이용해 캐러셀 형태로 게시물 표시하기, 번들 사이즈가 무려 2.5KB..!
- #Blog
- #Next.js
- #Carousel
- #Blog
- #Next.js
2024-02-17
블로그(1) - @next/font, Image 컴포넌트로 최적화하기
Posts 목록 데이터 받아와 사용자에게 표시하기, @next/font와 Image 컴포넌트로 최적화하기
- #Blog
- #Next.js
- #Optimization
- #Blog
- #Next.js
2024-02-12
블로그(Intro) - Next의 중요 컨셉과 렌더링 방식
주인장의 개발 방식 근데 4가지 렌더링 방식과 Next의 중요 컨셉을 곁들인
- #Blog
- #Next.js
- #Rendering
- #Blog
- #Next.js
2024-02-06
블로그(번외) - Next 13버전에 다크모드 곁들이기
결론부터 말씀 드리자면 localStorage에 저장하지 말고 캐시에 저장하세요.
- #Blog
- #Next.js
- #DarkMode
- #Blog
- #Next.js
2024-01-27
기술 블로그 제작기
나는 어째서 수많은 블로그 플랫폼 속에서 블로그를 직접 만들었는가.
- #Blog
- #Next.js
- #Blog
- #Next.js
2024-01-23
