∠( ᐛ 」∠)＿

🔍 SFC 문법 📍 개요 *.vue 파일 확장자를 사용하는 SFC(Vue 싱글-파일 컴포넌트)는 HTML과 유사한 문법을 사용함 Vue 컴포넌트를 설명하는 커스텀 파일 형식 세 가지 유형의 최상위 언어 블록(, , 예를 들어 컴포넌트 설명서가 될 수 있습니다. 📍 언어 블록 ✅ *.vue 파일은 최상위 블록 하나만 포함할 수 있음!! 컨텐츠는 추출되어 @vue/compiler-dom으로 전달됨 JavaScript 렌더 함수로 사전 컴파일되며, 내보낸 컴포넌트에 render 옵션으로 첨부됨 ✅ *.vue 파일은 하나의 블록만 포함할 수 있음!! 제외 스크립트는 ES 모듈로 실행됨 기본 내보내기는 일반 객체 또는 defineComponent의 반환 값으로 Vue 컴포넌트 옵션 객체여야 함 ✅ *.vue 파일..

🔍 Vue 3 시작 회사 업무에서 프론트엔드 프레임워크로 Vue 3를 사용하는데, 아직 한 번도 다뤄본 적이 없기에 공식문서를 통해 학습을 진행하고자 함! 📍 Vue ? 사용자 인터페이스 구축을 위한 JavaScript 프레임워크 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공함 import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app') 숫자 세기: {{ count }} 선언적 렌더링: Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State..

🔍 자바스크립트의 형 변환(Type Conversion) - 명시적 변환 형 변환이란 자료형을 다른 자료형으로 변경하는 것 (데이터 타입을 변경하는 것!) 앞서 자바스크립트는 상대적으로 데이터 타입이 유연한 언어이며, 이는 데이터 타입이 상황에 따라 변할 수 있음을 의미한다 했음 그 예시로 든 것이 1(숫자) + "2"(문자열) => "1"(문자열) + "2"(문자열) => "12"(문자열) 과 같은 것이었는데, 이렇게 자바스크립트 엔진이 필요에 따라 형 변환을 해주는 것은 "암시적 변환"이라 한다고 함 오늘 정리해 볼 내용은 개발자의 의도에 따라 형 변환을 하는 "명시적 변환"임 암시적 변환, 명시적 변환 이 단어들 자체는 중요하지 않을 수 있지만, 자동으로 형 변환 되는 것과 내가 의도해서 형 변환하..

🔍 자바스크립트의 데이터 타입 자바스크립트는 상대적으로 데이터 타입이 유연한 언어 => 데이터 타입이 상황에 따라 변할 수 있음! ex 1) 숫자와 문자열 간의 유연한 연산 ◽ 1(숫자) + "2"(문자열) => "1"(문자열) + "2"(문자열) => "12"(문자열) ◽ 3(숫자) * "4"(문자열) => 3(숫자) * 4(숫자) => 12(숫자) ex 2) 변수에 다양한 타입의 값으로 재할당 가능 따라서 데이터 타입을 명확하게 이해하고 있어야 함! Why? 💥예상치 못한 결과로 오류가 발생할 수 있으므로 ex) ☁ 8가지의 데이터 타입 ◻ 7가지의 기본형 ◽ Number ◽ String ◽ Boolean ◽ null ◽ undefined ◽ Symbol (ES 2015 추가, 유일한 값을 만들 때 ..

마우스를 올렸을 때 => :hover 이미지 확대 => transform 속성의 scale 함수 scale(x, y): 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 scaleX(n): 요소의 크기를 X축으로 x배 확대 또는 축소 scaleY(n): 요소의 크기를 Y축으로 y배 확대 또는 축소 ex) 마우스를 올렸을 때 1.5배 크기로 확대 a img { ... } a:hover img { transform: scale(1.5); } 추가로, transition 속성을 사용하면 위와 같은 속성 변화의 진행 속도를 정해줄 수 있음 transition: 'property' 'duration' 'timingfunction' 'delay';..

🔍 함수 변수에는 데이터만 저장할 수 있지만 코드는 저장할 수 없음 함수를 사용하면 코드를 메모리에 저장해두고 필요할 때마다 호출하여 사용 가능 ☁ 기본 함수 정의문 //일반 함수 정의 방식 function 함수명(){ 자바스크립트 코드; } //익명 함수 선언 참조 방식 참조 변수 = function(){ 자바스크립트 코드; } 일반 함수 정의 방식은 호이스팅(hoisting) 기술을 지원함, 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출함!! 익명 함수 선언 참조 방식은 X, 오류 발생 ☁ 매개변수가 있는 함수 정의문 function 함수명(매개변수 1, 매개변수 2, ... 매개변수 n){ 자바스크립트 코드; } 함수명(데이터 1, 데이터 2, ... 데이터 n); ☁ 매..

🔍 객체 자바스크립트는 객체(Object) 기반 프로그래밍 언어 객체는 기능(Method)과 속성(Property)을 가지고 있음 ☁ 객체의 메서드와 속성 객체.메서드(); // 객체의 메서드 실행 객체.속성; // 객체의 속성값 가져옴 객체.속성 = 값; // 객체의 속성값 바꿈 ☁ 객체의 종류 🔹 내장 객체 자바스크립트 엔진에 내장되어 있음 ex) 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등 🔹 브라우저 객체 모델 (BOM, Browser Object Model) 브라우저에 계층 구조로 내장되어 있음 ex) window, screen, location, history, navigator 객체 등 🔹 문서 객체 모델 (DOM, Document Object Mode..

자바스크립트 공부를 시작하게 되었다. 그동안 배우고 사용하던 언어 자바, 파이썬 등과 비슷한 부분도 있고 조금 다른 부분들도 있어 전체 내용을 정리하는 것이 아닌, 헷갈리거나 중요하다고 생각하는 부분들을 정리하여 기록하고자 한다. 🔍 기초 문법 ☁ 선언문 선언문: 자바스크립트 코드를 작성할 영역을 선언하는 것 보통 태그 영역에 선언! ( 태그 영역에 선언해도 되긴 함) ☁ 출력 메서드 타 언어의 print(), system.out.println() 등의 출력 메서드 document.write(); ☁ 변수 문자형(String), 숫자형(Number), 논리형(Boolean), 빈(Null) 데이터 변수 선언: var 변수명; 또는 var 변수명 = 값; 🔹 문자형 데이터 문자나 숫자를 "" 또는 &#39..