반응형 Vue.js21 Vue.js - Props(속성) Vue.js Props(속성): 컴포넌트 간의 데이터 전달과 효율적인 통신 Vue.js는 컴포넌트 기반의 프레임워크로, 여러 컴포넌트들을 조합하여 웹 애플리케이션을 구축할 수 있습니다. 이때 컴포넌트 간에 데이터를 전달하고 효율적으로 통신하기 위해 Props라는 개념을 사용합니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘을 제공합니다. Props의 기본 사용 Props를 사용하려면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트에서는 받은 Props를 사용할 수 있습니다. 부모 컴포넌트에서 Props 전달하기 자식 컴포넌트에서 Props 사용하기 {{ propName }} 위의 예제에서 propName이라는 Props를 자식 컴포넌트에서 사용하고 있습니.. 2023. 10. 20. Vue.js - Watch Vue.js의 Watch 옵션: 데이터 감시의 핵심 Vue.js는 데이터의 변경을 감지하고 이에 대응하는 여러 가지 방법을 제공합니다. 그 중 하나가 Watch 옵션입니다. Watch는 데이터의 변화를 감시하고 특정 동작을 수행하는데 사용됩니다. 이것은 데이터의 변화에 대응하여 비동기적 또는 계산적인 동작을 수행하는 데 매우 유용합니다. Watch 옵션의 기본 구조 Vue 인스턴스의 옵션 객체 내부에 "watch" 속성을 추가하여 데이터를 감시합니다. 간단한 구조는 다음과 같습니다. new Vue({ data: { message: 'Hello, Vue!' }, watch: { // 감시할 데이터 속성 message: function(newMessage, oldMessage) { // 데이터가 변경될 때 .. 2023. 10. 20. Vue.js - 라이프사이클 Vue.js 라이프사이클: 애플리케이션의 핵심을 이해하기 Vue.js는 현대적인 웹 애플리케이션을 개발하기 위한 강력한 프론트엔드 프레임워크입니다. Vue.js 애플리케이션을 개발할 때, 개발자들은 애플리케이션의 상태 변화와 동작을 이해하고 관리해야 합니다. 이를 돕기 위해 Vue.js는 컴포넌트 라이프사이클을 제공합니다. 라이프사이클은 컴포넌트가 생성되고 업데이트되며 파괴되는 일련의 단계입니다. 1. Creation (생성) beforeCreate: 컴포넌트가 생성되고 데이터가 초기화되기 전에 호출됩니다. created: 컴포넌트가 생성되고 데이터가 초기화된 후에 호출됩니다. 이 단계에서 데이터와 이벤트 리스너를 설정할 수 있습니다. 2. Updating (업데이트) beforeMount: 컴포넌트가 .. 2023. 10. 20. Ajax, axios, fetch 의 차이점 및 장단점 그리고 사용법 Ajax, axios, fetch 웹 개발을 하면 필수적으로 클라이언트와 서버 간의 데이터를 주고받기 위해 비동기 HTTP 통신을 하게 되는데 Ajax, axios, fetch는 모두 웹 개발에서 네트워크 요청을 처리하는 방법이다. Ajax (Asynchronous JavaScript and XML) Ajax는 웹 페이지에서 비동기적으로 서버와 데이터를 교환하는 기술을 의미합니다. XMLHttpRequest 객체를 사용하여 데이터를 요청하고 응답을 처리합니다. 비동기적으로 데이터를 받아와서 현재 페이지를 리로드하지 않고도 데이터를 업데이트할 수 있습니다. 장점 브라우저 내장 기술로 지원되며, 비교적 오래된 브라우저에서도 사용 가능 Error, Success, Complete의 상태를 통해 실행 흐름 조절.. 2023. 8. 1. Vue.js - 단축 문법 v-bind 디렉티브 더보기 v-bind 디렉티브는 엘리먼트의 id 속성을 컴포넌트의 chest 속성과 동기화된 상태로 유지되고 , 바인딩된 값이 null 또는 undefined이면 엘리먼트의 속성이 제거된 상태로 렌더링 문법 단축 문법 v-on 디렉티브 DOM 이벤트를 수신한다. click의 인자는 수신할 이벤트 이름 , v-on은 단축형으로 @를 대신 사용할 수 있다 ... ... 2023. 7. 31. vue-3 Prettier 설정 및 자동완성 정렬 Prettier란? Prettier는 개발자들이 일관된 스타일로 코드를 작성할 수 있도록 도와주는 도구 중 하나입니다. 이를 위해서는 Prettier 설정 파일인 .prettierrc 파일을 작성하여 사용할 수 있습니다. 1. vscode Marketplace 에서 Prettier 라이브러리 다운 2. prettierrc.json 파일 생성 3. prettierrc.json 파일 설정 가장 많이 사용되는 Prettier 설정은 다음과 같습니다. { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracket.. 2023. 7. 26. Pinia 소개 피니아는 컴포지션 API로 Vue용 스토어가 어떻게 생겼는지 재설계하기 위한 실험으로 시작 했고, Vue2 와 Vue3 모두 작동, API는 설치와 SSR을 제외하고 모두 동일 피니아 장점 피니아는 Vue의 스토어 라이브러리로 컴포넌트/페이지 간에 상태를 공유할 수 있다. Devtools 지원하며, actions, mutations를 추적하는 타임라인, 스토어는 사용되는 컴포넌트에 표시됨. 시간 추적 및 더 쉬운 디버깅 핫 모듈 교체 (HMR) 페이지를 새로고침하지 않고 스토어 수정하고, 개발하는 동안 기존 상태 유지 플러그인으로 피니아 기능 확장 TypeScript 지원 SSR 지원 왜 피니아인가? 피니아(pinia)는 스페인어 _pineapple_의 영어 발음과 가장 유사한 _piña_입니다. .. 2023. 5. 23. Vue.js - 라이프 사이클 개념 인스턴스 라이프 사이클(Life Cycle) 개념 인스턴스 라이프 사이클이란? 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(Hook)이라고 한다. beforeCreate Vue 인스턴스가 생성되고 나서 처음으로 실행되는 라이프 사이클 단계, data속성과 method 속성이 아직 인스턴스에 정의되어 있지 않고 돔과 같은 화면 요소에도 접근할 수 없는 상태이다. created data속성과 method 속성이 정의 되어있는 단계 떄문에 this.data 또는 this.fetchData() 와 같은 로직을 이용해서 data속성과 method 속성에 정의된 값에 접근 가능 beforeMount tem.. 2023. 3. 21. Vue.js && Spring - 게시글 조회 수 중복 방지 1. 개요 조회수 중복 방지는 웹사이트나 애플리케이션에서 매우 중요한 기능 중 하나입니다. 중복된 조회수를 제대로 처리하지 않으면, 신뢰성 있는 데이터를 제공할 수 없고, 광고 수익을 추적하는 등의 목적에도 문제가 생길 수 있습니다. 조회수 중복 방지를 위해서는 다음과 같은 방법을 사용할 수 있습니다. 2. 처리 방법 쿠키를 사용한 중복 방지 쿠키를 사용하여 중복된 조회수를 방지할 수 있습니다. 이 방법은 간단하게 사용자의 브라우저에 쿠키를 생성하여, 하루 동안의 중복 조회를 막을 수 있습니다. 이 방법의 단점은 사용자가 쿠키를 삭제하거나 다른 브라우저를 사용할 경우 중복 조회가 가능하다는 점입니다. IP 주소를 사용한 중복 방지 사용자의 IP 주소를 기록하여 중복 조회를 방지할 수 있습니다. 이 방법은.. 2023. 3. 13. Vue.js - pagination(페이지네이션) 처리 방법 Vue.js를 사용하여 게시글 페이지네이션을 처리하는 방법 1. 데이터 가져오기 서버에서 게시글 데이터를 가져옵니다. 이때, 게시글의 총 개수와 한 페이지에 보여줄 게시글의 개수도 함께 가져옵니다. 2. 데이터 처리하기 가져온 게시글 데이터를 Vue 인스턴스의 data 객체에 저장합니다. 이때, 현재 페이지 번호와 총 페이지 수도 계산하여 data 객체에 저장합니다 3. 템플릿 작성하기 게시글 목록을 보여주는 템플릿을 작성합니다. v-for 디렉티브를 사용하여 게시글 목록을 출력합니다. 또한, v-if 디렉티브를 사용하여 현재 페이지에 해당하는 게시글만 출력하도록 처리합니다. 4. 페이지네이션 구현하기 v-for 디렉티브를 사용하여 페이지네이션을 구현합니다. 현재 페이지를 기준으로 이전 페이지와 다음 페.. 2023. 3. 6. 이전 1 2 3 다음 LIST
