SvelteKit로 간단한 어드민 페이지를 만들다가 생각보다 파일이 너무 많아진다는 걸 느꼈다. 폼 하나 만드는데 스키마 파일, +page.server.js, +page.svelte 세 파일을 왔다 갔다 하면서 같은 검증 로직을 두 번 연결하고 있었다. 분명히 더 나은 방법이 있을 것 같아서 찾아보다가 Remote Function을 알게 됐다. Re...

간단한 랜덤 문자열 생성 함수가 필요해 빠르게 코드를 작성했다가, 좀 더 유지보수가 쉽고 깔끔한 코드로 개선하고 싶다는 생각이 들었다. 랜덤한 영문 소문자와 숫자를 각각 뽑아내는 기능을 요구사항으로 두고 리팩토링을 시작했다 처음 버전 처음 작성한 코드는 기능적인 문제 없이 잘 동작했다. generateRandomString과 generateRand...

안녕하세요. 신입 개발자입니다. 최근에 회사에 들어갔는데, 메인 기술 스택이 Svelte더라고요. 사실 저는 아직 React도 제대로 만져본 적이 없어서 좀 걱정했습니다. 😥 그래도 어쩌겠어요! 이왕 이렇게 된 거, 한번 제대로 배워보자 마음먹었습니다. 그래서 Svelte가 대체 뭔지 한번 찾아봤습니다. Svelte, 넌 누구니? 🤔 Svelte는...

개요 Next.js는 현대적인 웹 애플리케이션을 개발하기 위해 다양한 렌더링 방식을 지원한다. Next.js의 SSR(Server-Side Rendering), CSR(Client-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration) 기능을 활용하면 성능과...

렌더링이란? 렌더링은 웹 페이지나 애플리케이션의 코드 (HTML, CSS, JavaScript 등)를 사용자가 볼 수 있는 화면으로 변환하는 과정이다. 이 과정을 통해 서버에서 전달된 코드가 웹 브라우저에서 처리되어, 사용자가 텍스트, 이미지, 버튼 등을 볼 수 있도록 화면에 표시된다. SSR, CSR이란? 렌더링은 어디서 실행되는지에 따라 두 ...

정적 빌드란? 정적 빌드(Static Build)는 웹사이트의 콘텐츠와 페이지를 미리 HTML, CSS, JavaScript 파일로 생성하여 배포하는 방식입니다. 정적 웹사이트는 사용자가 페이지에 접근할 때마다 서버에서 별도의 처리 없이 미리 만들어진 파일을 그대로 제공하므로, 빠른 로딩 속도와 안정적인 성능을 제공합니다. 정적 빌드의 특징 ...

ERD Editor 소개 프로젝트를 진행하다가 ERD를 그릴 일이 생겼는데 vscode에서 그릴 수 있나 찾아보다가 다음 extension을 발견했다. 이 extension을 활용하면 다음과 같이 GUI 형태로 ERD를 편집하고 볼 수 있다. draw.io 같은 툴 보다 UI가 깔끔하고 마음에 들었다. 간단한 사용방법 exte...

HTTP 요청 라이브러리 비교: Axios, Redaxios, Fetch 프로젝트에서 Node.js 환경에서의 크롤링을 위해 HTTP 요청 라이브러리를 사용하게 되었다. 특히 Node.js 18부터 Fetch API가 기본으로 내장되면서, 기존에 많이 쓰이던 Axios와 Redaxios, 그리고 Fetch의 차이점을 비교해봤다. Axios ...