Atelier BiCute

# 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; // 불가능 이러한 키워드를 사용하여 코드를 작성할 때, 모듈성을 높일 수 있습니다. 모듈성이란 코드를 작은 논리적 단위로 분리하여 이해하기 쉽고 유지 보수하기 쉽게 만드는 것입니다. 예를 들어, 변수를 전역 범위에서 선언하면 다른 함수에서도 그 변수를 사용할 수 있으..

#1. HTML 소개 • HTML이란 무엇인가? • HTML의 역사 • HTML 개발 환경 설정 #2. HTML 문서의 구조 • DOCTYPE 선언 • HTML 태그 • Head 태그 • Title 태그 • Body 태그 #3. HTML 제목과 단락 • 제목 (h1에서 h6) • 단락 태그 (p) #4. HTML 텍스트 서식 • 굵은 텍스트 • 기울임꼴 텍스트 • 밑줄 텍스트 • 아래첨자와 위첨자 • 줄임말 태그 #5. HTML 목록 • 순서가 없는 목록 • 순서가 있는 목록 • 정의 목록 #6. HTML 링크 • 앵커 태그 • 상대 URL • 절대 URL • 이메일 링크 • target 속성 #7. HTML 이미지 • 이미지 태그 • 이미지 사이즈 • alt 속성 • 이미지 맵 #8. HTML 테이블 ..

#1. CSS 소개 • CSS란 무엇인가? • CSS를 사용하는 이유 • CSS가 HTML과 작동하는 방식 #2. CSS 선택자 • 유형 선택자(Type selector) • 클래스 선택자(Class selector) • 아이디 선택자(ID selector) • 전체 선택자(Universal selector) • 속성 선택자(Attribute selector) • 자손 선택자(Descendant selector) • 자식 선택자(Child selector) • 인접 형제 선택자(Adjacent sibling selector) • 형제 선택자(General sibling selector) • 의사 클래스 선택자(Pseudo-class selector) • 선택자의 우선순위 CSS(Cascading Styl..

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