Atelier BiCute

#3. Vue 3 기본 문법

# Template 문법 Vue.js에서는 HTML과 유사한 형태의 템플릿 문법을 사용하여 UI를 작성합니다. 템플릿 문법은 Vue.js의 핵심 요소 중 하나이며, 다음과 같은 기능을 제공합니다. 보간(Interpolation): 중괄호({{}})를 사용하여 데이터 값을 표시할 수 있습니다. 이를 통해 Vue.js는 데이터와 UI를 자동으로 동기화할 수 있습니다. 디렉티브(Directive): v- 접두사를 사용하여 Vue.js의 특수한 기능을 사용할 수 있습니다. 예를 들어, v-if 디렉티브를 사용하여 조건부 렌더링을 할 수 있습니다. 이벤트(Event): v-on 접두사를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 예를 들어, v-on:click 디렉티브를 사용하여 클릭 이벤트를 처리할 수 있습..

Vue 개발 환경 세팅하기에도 비슷한 글을 작성한 적이있었는데 이때는 Vue CLI를 이용한 설치 방법을 설명하였었습니다. 하지만 현재는 Vue CLI가 Maintenance Mode에 진입하면서, Vue.js 공식 문서에서는 Vite를 기반으로 하는 create-vue를 사용하여 새로운 Vue.js 프로젝트를 생성할 것을 권장하고 있습니다. 이를 위해 Vue의 설치 와 설정 과정은 다음과 같은 단계를 따릅니다. 1. Node.js 설치: create-vue를 사용하려면 Node.js가 설치되어 있어야 합니다. Node.js를 설치하려면 공식 웹사이트(https://nodejs.org/)다운로드하여 설치합니다. 2. create-vue 설치: npm(Node.js 패키지 매니저)를 사용하여 create-..

# Vue란 무엇인가? Vue는 웹 애플리케이션을 개발하기 위한 JavaScript 프레임워크 중 하나입니다. Vue.js는 사용자 인터페이스(UI)를 개발하기 위한 직관적이고 간결한 API를 제공합니다. Vue.js는 컴포넌트 기반 아키텍처를 사용하여 복잡한 애플리케이션을 작은 조각으로 분할하여 관리할 수 있습니다. 이는 코드 재사용성을 높이고 유지보수를 용이하게 만들어줍니다. Vue.js는 리액트(React)와 앵귤러(Angular)와 함께 세 가지 가장 인기 있는 웹 프론트엔드 프레임워크 중 하나입니다. 또한 Vue.js는 다른 라이브러리나 프레임워크와 쉽게 통합되며, 개발자 커뮤니티에서 높은 평가를 받고 있습니다. ※ 앵귤러는 이미 죽었으니 새롭게 배우신다면 잊으셔도 됩니다. # Vue.js의 특..

#1. 자바스크립트 소개 자바스크립트란 무엇인가? 자바스크립트의 역사 자바스크립트의 작동 방식 #2. 기본 자바스크립트 문법 변수(Variables) 데이터 타입(Data Types) 연산자(Operators) 표현식(Expressions) 구문(Statements) 예약어(Keywords) #3. 자바스크립트 함수 함수 만들기 함수 호출 함수의 매개변수(Parameters)와 인수(Arguments) Return 값 익명 함수 고차 함수 #4. 자바스크립트 객체 객체란? 객체 만들기 속성 액세스 속성 추가 및 수정 속성 제거 객체 리터럴 this 키워드 #5. 자바스크립트의 배열과 반복문 배열(Array) 배열의 반복 forEach 메소드 map 메소드 필터 메소드 reduce 메소드 #6. 조건문 및..

# let 및 const를 사용한 코드 구성 및 모듈성 "let" 및 "const"는 자바스크립트에서 변수를 선언하는 데 사용되는 키워드입니다. "let"은 재할당이 가능한 변수를 선언할 때 사용됩니다. 예를 들어: let myVariable = 10; myVariable = 20; // 가능 "const"는 재할당이 불가능한 상수를 선언할 때 사용됩니다. 예를 들어: const myConstant = 10; myConstant = 20; // 불가능 이러한 키워드를 사용하여 코드를 작성할 때, 모듈성을 높일 수 있습니다. 모듈성이란 코드를 작은 논리적 단위로 분리하여 이해하기 쉽고 유지 보수하기 쉽게 만드는 것입니다. 예를 들어, 변수를 전역 범위에서 선언하면 다른 함수에서도 그 변수를 사용할 수 있으..

# DOM (Document Object Model)이란? DOM은 HTML 또는 XML 문서의 구조를 프로그래밍적으로 접근할 수 있는 표준 방법입니다. DOM은 문서의 각 요소를 객체로 만들어서, 객체 구조를 통해 문서의 구조를 표현합니다. DOM은 문서를 객체 트리로 표현하고, 각 객체에 대한 속성과 메소드를 제공하여 프로그래머가 HTML 또는 XML 문서를 동적으로 수정할 수 있도록 합니다. # JavaScript로 HTML 요소 조작 JavaScript를 사용하여 DOM을 통해 HTML 요소를 조작할 수 있습니다. 예를 들어, JavaScript를 사용하여 HTML 요소의 텍스트, 스타일, 내용 등을 동적으로 변경할 수 있습니다. document.getElementById("myHeading")...

# 조건문(if/else) 자바스크립트에서 if/else문은 특정 조건이 참인지 거짓인지 판단하여 코드의 실행 여부를 결정하는 구문입니다. 기본적인 구조는 다음과 같습니다. if (condition) { // condition이 참인 경우 실행되는 코드 } else { // condition이 거짓인 경우 실행되는 코드 } condition은 특정 조건을 나타내는 부울 표현식입니다. 표현식이 참이면 if 블록이 실행되고, 거짓이면 else 블록이 실행됩니다. # Switch 문 Switch 문은 여러 개의 조건을 검사하여 하나의 값에 대한 여러 가지 처리를 제공하는 데 사용됩니다. 기본 구조는 다음과 같습니다. switch (expression) { case value1: // expression이 va..

# 배열(Array) JavaScript에서 배열(Array)은 같은 유형의 여러 개의 값을 가지는 객체입니다. 배열의 각 요소는 인덱스를 기준으로 접근할 수 있습니다. JavaScript에서 배열은 다음과 같이 생성할 수 있습니다. var arr = [1, 2, 3, 4, 5]; # 배열의 반복 JavaScript에서 배열의 각 요소를 처리하는 가장 일반적인 방법은 반복문(loop)을 사용하는 것입니다. 다음은 for 반복문을 사용하여 배열의 각 요소를 출력하는 예제입니다. var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } # forEach 메소드 forEach 메소드는 JavaScript에서 ..

# 객체(Object)란? 객체(Object)는 자바스크립트에서 가장 기본적인 데이터 타입 중 하나입니다. 객체는 키-값 쌍의 컬렉션으로 구성되어 있습니다. 키는 문자열 혹은 심볼(Symbol) 타입이 될 수 있고, 값은 어떠한 타입의 값(숫자, 문자열, 불리언, 함수, 다른 객체 등)이 될 수 있습니다. 객체를 생성할 때는 객체 리터럴 방식 또는 객체 생성자 함수를 사용할 수 있습니다. 객체 리터럴은 {}로 감싸지며, 키-값 쌍을 콤마(,)로 구분하여 생성할 수 있습니다. 객체 생성자 함수는 "new Object()"와 같이 사용합니다. 객체는 수학적인 개념인 개체(entity)를 모방한 것으로, 여러 개의 데이터 요소를 하나의 집합체로 관리하는 것이 가능합니다. 예를 들어, 사람을 나타내는 객체가 있..

# 함수를 만드는 방법 함수는 JavaScript 코드 블록을 감싸는 구조로, 일련의 작업을 수행하고 결과를 반환하는데 사용할 수 있습니다. 함수는 다음과 같이 정의할 수 있습니다: function functionName(parameters) { // 실행할 코드 return value; } # 함수 호출 함수를 사용하려면, 함수의 이름을 사용하여 함수를 호출해야 합니다. 함수 호출 시 필요한 인수를 전달할 수 있습니다: 예: functionName(arguments); # 함수 매개변수 및 인수 함수 매개변수는 함수를 호출할 때 전달되는 입력 값을 나타내는 변수입니다. 아래는 함수 매개변수의 예입니다: function add(a, b) { return a + b; } 함수를 호출할 때, 전달되는 입력 ..