JAN's History

안녕하세요! 오늘은 Svelte의 기본 개념인 상태 관리부터 전역 반응성까지 자세히 알아보려고 해요. 각 개념을 이해하고 활용하는 데 도움이 되도록 최대한 친절하게 설명해드릴게요. 그럼 시작해볼까요? 🎉1. 상태 관리 (State)상태란?Svelte에서는 애플리케이션의 데이터를 관리하기 위해 $state라는 개념을 사용해요. 간단히 말해, 상태는 UI에 표시되는 정보를 담고 있는 변수입니다. 상태가 바뀌면 UI도 자동으로 업데이트돼서 사용자가 항상 최신 정보를 볼 수 있죠! 😊 count += 1}>IncrementCurrent count: {count}변수 설명count: 현재 카운트를 저장하는 상태 변수입니다. 초기값은 0으로 설정되어 있고, 사용자가 버튼을 클릭할 때마다 1씩 증가합니다.주의점$..

이번에는 생성자 함수를 사용해 객체를 만드는 방법에 대해 알아보겠습니다! 자바스크립트에서 객체를 만들 때 가장 많이 사용되는 방법 중 하나가 바로 생성자 함수인데요. 이번 글에서는 생성자 함수의 기본 개념과 new.target이란 무엇인지, 그리고 생성자 함수를 사용할 때 주의해야할 점에 대해 살펴보도록 하겠습니다 🙌 :)🎯 1. 생성자 함수란?생성자 함수는 여러 객체를 비슷한 구조로 만들 때 사용되는 함수입니다. 일반 함수와 구분하기 위해 함수 이름의 첫 글자를 대문자로 쓰는 것이 관례입니다. 생성자 함수는 new 키워드를 사용해 호출하며, 이때 함수 내부에서 this가 새로 생성되는 객체를 가리킵니다.📝 예제 코드: 생성자 함수 사용하기아래 코드에서는 Dog라는 생성자 함수를 정의하고 new 키..

안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 Props, 즉 properties에 대해 알아보려고 해요. Props는 부모 컴포넌트가 자손 컴포넌트에 전달하는 데이터로, 컴포넌트 간의 소통을 쉽게 만들어줍니다. 그럼 Props의 기본적인 사용법과 활용 방법을 깊이 있게 살펴볼까요? 😊1. Props란?Props는 부모 컴포넌트에서 자손 컴포넌트로 데이터나 값을 전달할 때 사용하는 특별한 속성입니다. 이를 통해 재사용 가능한 컴포넌트를 만들 수 있고, 데이터 흐름을 관리하는 데에도 큰 도움이 됩니다.2. Props 기본 사용법먼저, Props를 사용하는 기본적인 방법을 알아보겠습니다. 부모 컴포넌트인 App.svelte와 자손 컴포넌트인 Profile.svelte로 예제를 만들어 보겠습니다..

안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 이벤트를 어떻게 다루는지 알아보려고 해요. 스벨트는 UI와 사용자 상호작용을 간편하게 관리할 수 있게 도와주는 아주 강력한 도구입니다. 그래서 이벤트를 통해 UI를 쉽게 다룰 수 있는데요! 그럼 Svelte에서의 이벤트 사용법에 대해 한 단계씩 살펴볼까요? 😊1. Svelte 이벤트 기본 사용법이벤트(event)는 사용자의 특정 동작을 감지하는 기능을 말합니다. 마우스 클릭, 키보드 입력 등 다양한 상황에서 발생할 수 있는데, 스벨트에서는 이러한 이벤트를 쉽게 처리할 수 있습니다.이벤트 문법on:이벤트명={이벤트함수}예를 들어, 버튼 클릭 시 메시지를 출력하는 간단한 예제를 살펴보겠습니다.클릭하세요!이렇게 버튼을 클릭하면 showAlert 함수..

이번에는 객체의 변경을 방지하고, 어떻게 객체를 불변(Immutable)하게 만들 수 있는지에 대해 알아보겠습니다. JavaScript에서 객체는 기본적으로 가변(Mutable)합니다. 하지만 Object 메서드를 사용해 객체의 수정, 삭제, 추가를 제한하여 불변 객체를 만들 수 있습니다. 자, 이제 예제와 함께 불변 객체에 대해 하나씩 살펴볼까요?🙌🏼🎯 1. Object.isExtensible()와 Object.preventExtensions()Object.isExtensible(object): 객체에 속성을 추가할 수 있는지 여부를 확인합니다. 기본적으로 모든 객체는 확장 가능합니다.Object.preventExtensions(object): 객체에 새로운 속성을 추가하지 못하도록 막습니다. 하..

안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 정말 중요한 개념인 반응성 코드에 대해 알아보려고 해요. 스벨트에서는 값이 변할 때 UI가 자동으로 업데이트되도록 해주어서, 개발자가 더욱 직관적으로 상태를 관리할 수 있게 도와줍니다. 자바스크립트만 쓰던 저에게 스벨트는 뭔가 새로운 문법이라 신기하더라고요 ㅎㅎ 그럼 반응성 코드에 대해 한 단계씩 살펴볼까요? 😊1. 반응성 코드란?반응성 코드는 스벨트에서 상태값이 변경될 때 자동으로 UI에 반영되도록 하는 기능이에요. 이를 위해 스벨트는 $: 문법을 제공합니다. 이렇게 $:를 붙여주면, 해당 코드 블록은 스벨트에 의해 감지되고, 값이 바뀌면 자동으로 다시 실행됩니다.온도 증가섭씨: {celsius}°C화씨: {fahrenheit}°F여기서 te..

안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 상태값(State)을 어떻게 관리하는지에 대해서 한 번 이야기해보려고 해요! 그럼 시작해볼까요? 😊1. 상태값(State)란?스벨트에서의 상태값 관리스벨트에서는 상태값이 변수로 선언되고, UI와 쉽게 연동돼요. 예를 들어, 버튼 클릭 시 숫자를 증가시키는 간단한 예제를 볼까요?현재 클릭 수: {count} count++}>클릭!자바스크립트에서의 상태값 관리그렇다면 자바스크립트에서는 상태값을 어떻게 관리하고 있었을지도 같이 비교하며 알아볼게요.가장 기본적인 방법은 변수를 사용하는 것인데요. 위에서 활용했던 버튼 클릭 시 숫자를 증가하는 예제를 자바스크립트 코드로 살펴볼게요 ㅎㅎlet count = 0; // 초기 상태값document.getEle..

안녕하세요! 오늘은 스벨트(Svelte) 애플리케이션이 실행되는 과정과 구조에 대해 정리해보도록 하겠습니다. 😊 스벨트 프로젝트의 흐름을 이해하면 더욱 효율적으로 개발할 수 있답니다!1. VSCode에서 스벨트 프로젝트 시작하기 🚀스벨트를 시작하기 위해서 VSCode를 사용할 수 있는데요! 아래는 스벨트 프로젝트를 생성하고 실행하는 절차입니다:1.1. 스벨트 프로젝트 생성하기먼저 빈 폴더를 하나 만들어주세요.➕ cd 명령어를 통해 만들던, 파일탐색기에서 만들던 상관없지만 cd명령어로는 한글 폴더명이 잘 안되는 것 같아서 저는 파일탐색기에서 그냥 폴더 만드는 편이에요만든 빈 폴더를 VSCode를 열고, 터미널을 띄웁니다.먼저 폴더를 하나 만들어주고, 빈아래 명령어를 입력하여 스벨트 템플릿을 다운로드합니..