전체 글

Next.js Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org Next.js는 React 기반 프레임워크로 Vercel이 2016년 개발 및 배포하였다. 페이지 단위 라우팅, SSR과 SSG 지원, 이미지 최적화, SEO 개선 등 실무에 필요한 기능을 제공하여 React를 보다 편리하고 효율적으로 사용할 수 있도록 한다. Next.js를 사용하는 이유기본적인 Next.js의 기능들은 React 환경의 로우 레벨 API들을 가지고도 세팅이 가능하다. Next.js는 React나 View와 같은 라이브러리가 아니라 개발을 돕는 프레임워크라는 도구이기 때문..

Restore Dashboard backup | Supabase DocsLearn how to restore your dashboard backup to a new Supabase projectsupabase.com Supabase 90일이 초과된 정지된 프로젝트 복구하기Supabase의 무료 플랜을 사용할 경우 기본적으로 7일 동안 활동이 없으면 프로젝트가 일시 정지 상태로 전환된다. 일시 정지 상태가 적용된 후 얼마 지나지 않았다면 수파베이스 대시보드 내에서 Restore하는 기능을 제공해 주지만, 정지된 상태로 90일이 초과될 경우 직접 백업 파일과 스토리지를 다운받아 새 프로젝트로 복원해 주어야 한다. (또는 유료 플랜으로 전환하여 복구할 수 있다.) 1. 백업 파일 다운로드 및 압축 풀기 복구할..

멀티레포(Multi-repo) 방식의 한계 이커머스 프로젝트 특성상 호스트와 클라이언트의 두 서비스를 제공하게 된다. 이 때 서로 다른 레포지토리에서 여러 개 서비스를 저장하고 관리한다면 프로젝트 규모가 거대해질수록 유지보수가 어려워진다는 단점이 있다. 프로젝트 생성의 번거로움 : 새로운 서비스가 추가될 때마다 프로젝트 초기화를 일일이 하는 것에 대해 DX적으로 이점을 받을 수 없다. (의존성 관리, prettier, eslint, typescript 설정 등)코드 중복 및 낮은 재사용성 : 호스트와 클라이언트 각각에서 유사한 UI를 사용한다면, 어느 한 쪽에서 수정이 발생했을 때 모든 레포지토리에 수정을 해야 하는 번거로움이 발생한다. 모노레포(Monorepo)가 해결하는 멀티레포의 문제 모노레포는 ..

동적 계획법(DP, Dynamic Programming)재귀(再歸)라고 하는 수학적 개념에 기초를 두고 「최적성의 원리」에 따라 다단계의 결정과정을 취급하는 것이며 최대의 목재생산을 위한 간벌계획문제를 비롯해서 각종의 배분문제, 재고문제, 경제문제 등의 여러 가지 결정문제에 유용하게 쓰인다.[네이버 지식백과] 동태계획법 어떤 문제의 해결 과정을 간략화하기 위해, 즉 최적화를 위해 복잡한 문제를 여러 개의 간단한 문제로 나누어 해결하는 방법이다. 백준 1010: 다리 놓기나 4948: 베르트랑 공준이 동적 계획법을 사용해 문제를 해결할 수 있는 예이다. int fib(int n){ if (n == 1 || n == 2) return 1; else return fib(n-2) + fib(..

투 포인터 알고리즘두 개의 포인터(인덱스)를 사용하여 문제를 해결한다. 두 포인터는 일반적으로 시작점(start 또는 left)과 끝점(end 또는 right)를 가리키며, 포인터를 이동시켜 가면서 조건을 만족하는 구간을 찾아낸다. 1. 같은 방향으로 진행하는 투 포인터정수 배열 arr와 정수 target이 주어졌을 때, arr의 연속된 부분 수열 중에서 그 합이 target과 같은 부분 수열의 개수를 구한다.// 정렬되지 않은 배열은 start, end 모두 0에서 시작한다.function countSubarrays(arr, target) { let start = 0, end = 0; let sum = 0; let count = 0; while (end target) { ..

FSD란?FSD는 프론트엔드 애플리케이션을 구조화하기 위한 아키텍처 방법론이다. 아토믹 디자인 방식과 같이 프론트 프로젝트 내에서 컴포넌트를 구조화하고 정리하는 규칙과 관례의 집합이라고 할 수 있다. Welcome | Feature-Sliced DesignArchitectural methodology for frontend projectsfeature-sliced.design공식 문서 기존의 프론트엔드 아키텍처 패턴들은 백엔드 아키텍처에서부터 파생되거나 UI만을 다루는 데에 초점을 맞추는 등의 한계가 있었다. 예를 들어 어떠한 기능에 수정이 필요할 때, 상위 컴포넌트부터 하위 컴포넌트까지 여러 번 타고 들어가서 코드를 수정할 위치를 찾아야 했던 경험이 한 번씩은 있을 것이다. components 폴더 ..

렌더링(Rendering)렌더링은 사용자가 웹사이트 주소를 입력했을 때, 서버로부터 받은 HTML, CSS, JavaScript 등의 파일을 해석하여 최종적으로 화면에 시각적인 웹 페이지를 그려내는 일련의 과정이다. 웹 개발에서 페이지를 사용자에게 보여주는 방식은 크게 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)의 두 가지로 분류할 수 있다.CSR와 SSR의 큰 차이는 렌더링의 주체이다. 웹 페이지를 구성하는 것을 클라이언트에서 담당하는지, 서버에서 담당하는지에 따라 분류한다. 1. CSR (Client-Side Rendering)클라이언트는 사용자 장치의 브라우저 자체를 의미하며, CSR에서 렌더링의 주체는 클라이언트이다. 이 때 클라이언트는 서버에 애플리케이션 코드를 요청하고 서..

Fetch vs Axios기존에 Fetch를 사용하여 데이터를 가져오고 있었으나 새 프로젝트를 진행하면서 Axios를 도입하는 것이 어떤지에 대해 팀원과 논의하는 과정이 있었다. Axios의 경우 인스턴스를 설정하여 공통 헤더나 토큰을 삽입하는 등 api를 손쉽게 전송 가능하며 에러 핸들링 로직 또한 잘 작성되어 있어 도입을 고려하였다. 1. Fetchfetch는 웹 브라우저에 내장된 함수로 별도 라이브러리 설치 없이 바로 사용할 수 있다. Promise 기반의 비동기 통신을 지원하며 ES6부터 표준으로 채택되었다.async function logJSONData() { const response = await fetch("http://example.com/movies.json"); const json..

이전 글 [Next.js] Zod 라이브러리를 이용한 회원가입 Form 유효성 검사 및 에러 메시지 띄우기 (Typescript)Zod 라이브러리zod는 타입스크립트 환경에서 스키마 선언 및 데이터 유효성 검증을 위한 라이브러리이다. 자바스크립트 환경에서도 사용할 수 있으나 공식 문서에서는 TypeScript-first library라고 명pom-pomm.tistory.com react-hook-form이란?인풋 필드의 유효성 검사와 form 데이터 관리를 손쉽게 해주는 라이브러리로, Formik과 더불어서 가장 많이 쓰이는 React 기반 Form 라이브러리이다. React Hook Form - performant, flexible and extensible form libraryPerforma..

'An error occurred in the Server Components render.' 에러An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. 백엔드 api fetching 시에 throw new Error를 사용하여서 예외처리 하는 방식을 사용하였는데, 로컬 환경에서는 오류가 발생하지 않..