Vue | SFC, vue-cli, vite

SFC(Single File Component, 단일 파일 컴포넌트)단일 파일 컴포넌트(SFC)는 Vue.js에서 사용되는 특수한 파일 형식으로, 하나의 파일 안에 템플릿, 로직, 스타일을 모두 통합하여 관리할 수 있다.기본적으로 HTML, CSS, JS 파일을 연결하거나 style, script 태그를 이용하여 작성하였다면, SFC는 다음의 3가지 부분으로 구성된다.- 템플릿(template): HTML 마크업을 작성하는 부분(뷰). - 스크립트(script): 컴포넌트의 로직을 작성하는 부분(뷰모델, 모델). - 스타일(style): 컴포넌트의 스타일을 작성하는 부분.각각의 블록을 이용하여 하나의 파일에서 컴포넌트의 뷰, 로직 및 스타일을 캡슐화하고 배치할 수 있다.  {{ greeting }} *..

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 27.
• textsms

Vue | Vue.js 지시자(디렉티브), 버블링과 캡처링

Vuejs의 지시자Vue에는 v- 접두사가 있는 지시자(directive, 디렉티브)라는 속성이 있는데 이 속성의 값은 단일 JavaScript 표현식이 된다.(v-for는 예외.)표현식의 값이 변경될 때 사이드 이펙트를 반응적으로  DOM에 적용하는 역할을 갖는다. 간단한 예제로 v-if 디렉티브를 살펴보자.이제 나를 볼 수 있어요위와 같은 예제를 이용하여 seen이라는 함수를 통해 p태그의 visible 속성을 변경할 수 있을 것이다. 전달인자일부 디렉티브는 콜록으로 표시되는 전달인자를 사용할 수 있다.바닐라 자바스크립트의 onclick는 v-on 디렉티브를 이용하여 다음과 같이 표현할 수 있다. ... //2.6.0 버전 이후에 사용할 수 있는 방법//javascript 표현식을 대괄호로 묶어 디렉..

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 25.
• textsms

Vue | VueJS

미들웨어미들웨어는 요청과 응답을 주고받을 때 처리를 하는데 다음과 같은 일을 처리한다.속성설명요청 전처리요청이 서버에 도착하기 전에 실행하는 작업.(사용자 인증, 폼 내용 검증 등)라우팅 처리특정 URL로 들어온 요청을 미리 만들어 둔 라우트 핸들러로 연결하는데 이러한 라우트 코드를 모듈화하는 라우터 미들웨어가 있음.응답 처리서버에서 클라이언트로 응답을 보낼 때 자료를 적절하게 변환하거나 오류를 처리. express에서 미들웨어에서 사용하는 2가지 미들웨어는 다음과 같다.애플리케이션 레벨 미들웨어애플리케이션 단계에서 사용하는 미들웨어이다.const app = express();app.get("/", (request, response)=>{ //to do});app.post("/:name", (reques..

• format_list_bulleted Frontend/Vue.js
• · 2024. 5. 23.
• textsms