안녕하세요, 성조입니다.지난 포스트에서 스벨트와 스벨트킷의 차이점을 다뤘는데요이번에는 스벨트 킷 프로젝트를 세팅하고 시작하는 방법을 정리해보려 합니다 🤓 참고로, 이번 프로젝트는 VSCode(IDE)와 Node.js 22.11.0 버전을 기반으로 한 0.6.6ver으로 개발되었습니다🫡프로젝트 생성 cmd프로젝트 생성 명령어는 다음과 같다.npx sv create .npm installSvelte CLI는 세 가지 템플릿을 기본으로 제공한다.1. SvelteKit minimal최소한의 설정만 포함된 기본 구조이며, 프로젝트 구성의 처음부터 끝까지 커스터마이징을 하고 싶을 때 추천된다. 2. SvelteKit demoSvelteKit의 기능을 학습할 수 있도록 기본 구조와 세팅이 되어 있는 데모 템플릿이..
안녕하세요, 성조입니다.요즘 회사에서 웹 프론트 프로젝트를 새로 만드는 담당하고 있다 보니 프레임워크에서 스벨트가 Next.js와 Vue.js 보다 가볍게 개발하기 좋고 준수한 러닝 커브를 가지고 있다는 얘기를 듣고 관심을 가지고 공부하기 시작했어요. 만들고자 하는 프로젝트가 복잡도가 높지 않고, PoC 수준에서 조금 덧 붙인 MVP 레벨의 기능을 목표로 하고 있기 때문에 공부하기 시작했습니다. 스벨트를 도입하려고 공부하다 보니 초기에 관심이 생길 수 있는 부분들을 이번 주제를 정하게 됐습니다.(쉽게 찾을 수 있는 내용이지만, 정리해봤어요 🫡)스벨트(Svelte)와 Sapper, 스벨트 킷(SvelteKit)는 모두 Svelte 생태계에서 웹 애플리케이션을 구축하는 데 사용되는 도구이지만, 다른 목적..
안녕하세요, 성조입니다.오늘은 스벨트에 대해 간략하게 소개하는 시간을 가져보려 하는데요.Next.js를 공부하다가 조금은 뜬금 없이 스벨트를 가지고 온 것 같지만(?) 이번 프로젝트에서 Next 최신 버전을 도입하는 것 보다 가벼운 프로그래밍으로 스벨트를 도입하는 것으로 결론을 지어서 선택하게 됐어요! 🤔🤓😊오늘은 가벼운 개요를 진행하고, 다음 포스팅에서는 세팅과 조금 더 심화된 코드를 구현해보려 해요. 스벨트(Svelte)란?스벨트는 빠르고 가벼운 웹 애플리케이션을 쉽게 만들 수 있게 돕는 자바스크립트 프레임워크다. 컴파일 타임에 코드를 변환해서, 런타임에 불필요한 작업을 줄여주는 것이 특징이다. 다른 프레임워크가 가상 DOM을 사용해 업데이트를 관리하는 것과 달리, 스벨트는 컴파일된 코드로 직접..
안녕하세요, 성조입니다.React에 기본기인 useState에 대해 정리하는 시간을 가져보려 합니다. 🧐 useState 결론- useState는 함수형 또는 클래스형 컴포넌트의 상태를 관리하고, 변경할 수 있도록 도와주는 하나의 React Hook이다.usestate는 리액트에서 상태(state)를 관리하기 위해 가장 많이 사용하는 기능 중 하나입니다. 이번 포스팅에서는 useState의 기본 개념부터 사용 방법, 그리고 실전 예제까지 자세히 알아보겠습니다. 🧐 1. useState란 무엇인가?useState는 리액트에서 제공하는 훅(hook) 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다.기존의 클래스형 컴포넌트에서 this.state와 this.setState를 사용해 ..
안녕하세요. 성조입니다. 예전에 강남에 있는 중소기업 면접 볼 때 인원이 3 자릿수를 넘었고, Java 직군을 지원했는데 JavaScript 관련해서 반복문을 다루는 문제가 나왔던 것이 생각나서 기본기를 다질 겸 겸사겸사 포스팅을 작성했습니다. 혹여나 올바르지 못한 지식을 전달하고 있다면 언제든지 댓글로 피드백 주시면 감사드리겠습니다. 반복문(LooP)이란? 프로그래밍에서 반복문(LooP)이란 동일하거나 유사한 작업을 여러 번 반복 실행할 때 사용하는 구문이다. 이는 코드의 재사용성을 높이고, 코드의 길이를 줄여 효율성을 향상한다. 하지만 부분별 한 중첩 반복문은 반복문 호출의 양이 많아질 때. 기하급수적으로 많아질 수 있으므로 주의하여 사용해야 한다. 사실 자바스크립트 역시 다른 프로그래밍 언어와 반복..
안녕하세요. 성조입니다. 자바스크립트를 사용하면 '...'라는 것을 생각보다 많이 사용하게 됩니다. 다양한 곳에서 사용되는 '...'를 이번 포스팅을 통해 조금 더 정리하고 흡수된 지식으로 만들고자 합니다. 혹여나 올바르지 못한 지식을 전달하고 있다면 언제든지 댓글로 피드백 주시면 감사드리겠습니다. Spread 연산자(문법)란? Spread 연산자로 사용되는 '...'는 배열이나 객체, 문자열과 같은 이터러블한 값을 개별 요소나 속성으로 분해하는 데 사용된다. 이것은 함수 호출 시 인자를 전달하거나 배열, 객체를 합체 또는 복제하는 용도로 사용하기 좋다. [배열 예시] let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; /..
안녕하세요. 성조입니다. 이번 포스팅은 호출 스택(Call Stack) 개념에 대해서 정리해 보려 합니다. 혹여나 잘못된 지식을 전달했다고 생각하시면 언제든지 댓글로 피드백 남겨주시면 감사드리겠습니다! 호출 스택(Call Stack)이란? 호출 스택은 MDN 홈페이지에 다음과 같이 나와있다. "호출 스택은 여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터(웹 브라우저의 자바스크립트 인터프리터 같은 것.)를 위한 메커니즘입니다." [본인 의견] 프로그램에서 함수의 호출 순서를 추적하는 데이터 구조이다. 호출 스택은 현재 어떤 함수가 실행되고 있는지, 그 함수 내부에서 그리고 다음에 어떤 함수가 존재하는지 판별하여 제어한다. 즉, 함수가 동작하면서 다음 함수가 있거나 없..
안녕하세요. 성조입니다. 이번 포스팅에서는 useEffect를 정리 후. 포스팅해 보려합니다. 저는 올바른 정보를 전달하기 위해 학습하고 정리하는 과정에서 많은 노력을 하고 있습니다. 혹여나 잘못된 지식 전달 사항이 있다면 언제든지 댓글로 의견 공유주시면 감사드리겠습니다. useEffect란? useEffect는 React에서 사이드 이펙트(Side Effect)를 관리하는데 사용되는 Hook이다. 즉, 생명 주기를 관리하는 것으로도 볼 수 있다. 사이드 이펙트(Side Effect)는 컴포넌트들이 애플리케이션에서 일어나는 다른 모든 외부와의 상호 작용하는 것을 의미한다. 예를 들어보면 backend 개발자가 구현해 놓은 API들을 호출하거나, 이벤트 리스너를 등록 및 해제, DOM 조작하는 것 등이 존..
