본문 바로가기

개발/FRONT21

VUE(NUXT) middleware 적용해보기 지난 글에서는 nuxt 프레임워크를 포함한 vue 프로젝트의 개발환경을 설치하였다. 2024.01.28 - [개발/FRONT] - VUE(NUXT) 설치하기 VUE(NUXT) 설치하기 최근들어 VUE 프로젝트를 접할 일이 있어서 봤다가 새로운 세계를 만난 것처럼 눈이 번쩍 뜨였다. 주로 프론트 위주의 업무를 안 해봤기 때문에 더더욱 자바스크립트 예전 버전(es5) 버전에만 머 jamkim-playground.tistory.com 이번 포스팅에서는 middleware에 대해서 알아보자. 전역 middleware 설정은 nuxt.config.js 파일에서 할 수 있고, layout에 설정해서 페이지마다도 별도로 설정할 수 있다. 나는 페이지별로 middleware를 모두 적용시키지 않을 예정이라 레이아웃별로.. 2024. 2. 1.
VUE(NUXT) 설치하기 최근들어 VUE 프로젝트를 접할 일이 있어서 봤다가 새로운 세계를 만난 것처럼 눈이 번쩍 뜨였다. 주로 프론트 위주의 업무를 안 해봤기 때문에 더더욱 자바스크립트 예전 버전(es5) 버전에만 머물렀던 것 같다. 최근 접한 vue는 새로운 공부를 하는 것처럼 느껴지게 하는 부분이 많았고 좀 더 수월하게 느껴지는 방식들이 있어서 작업을 하면서 새로운 것에 대해 알아야 하는 피곤함도 있지만 오랜만에 호기심과 재미도 느낄 수 있어서 유익한 공부였다고 판단한다. (아직 더 공부중이지만..) 그래서 집에서도 vscode로 vue(nuxt) 환경을 구축해봤다. 아래는 필요한 작업들을 순서대로 나열했다. 1. node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaSc.. 2024. 1. 28.
VUE 데이터 바인딩 데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 주요 문법으로는 {{ }} 문법과 v-bind 속성이 있습니다. {{ }} - 콧수염 괄호 {{ }}는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식입니다. {{ }}는 모양이 콧수염과 비슷하다고 하여 콧수염 괄호라고 부릅니다. 뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법(template syntax)입니다. 앞의 예제에서 계속 다뤘기 때문에 많이 익숙하겠지만 간단히 형식을 정리하면 다음과 같습니다. 아래 코드는 data 속성의 message 속성 값인 Hello Vue.js!를 태그 안의 {{ message }}에 연결하여 화면에 나.. 2024. 1. 21.
VUE 템플릿(Template) 뷰 템플릿이란? 뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다. 템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법입니다. 지금까지 예제에서 주로 사용한 t e m p l a t e: H e l l o {{message}}와 같은 코드가 템플릿을 의미합니다. ES5에서 template 속성 여기서 템플릿 속성에 대해 한 가지 알아둘 특징이 있습니다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환.. 2024. 1. 21.

티스토리툴바