VUE7 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 HTTP 통신 웹 앱의 HTTP 통신 방법 요즈음 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능입니다. 과거의 웹 사이트가 정적인 텍스트나 간단한 이미지를 나타내는 데 그쳤다면 이제는 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해 줘야 하기 때문입니다. 여기서 HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜(protocol)입니다. 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작합니다. 서버에 ‘해당 데이터를 보내주세요.’라는 메시지를 보내는 게 바로 ‘HTTP 요청을 보낸다’와 같은 의미입니다. 웹 앱 HTTP .. 2024. 1. 20. 이전 1 2 다음
