Vue.js4 [Node.js] Webpack 기본 사용법 베하~! BTC 블랙아웃입니다!! Webpack은 현대적인 프론트엔드 프로젝트에서 모듈 번들링과 자원 관리를 위해 널리 사용되는 도구입니다. Webpack을 사용하면 여러 개의 자바스크립트 파일, CSS, 이미지 등의 리소스를 하나의 번들로 묶어서 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 이제 Webpack의 기본적인 사용법에 대해 알아보겠습니다. 들어가기에 앞서 제가 테스트에 사용했던 버전을 참고하시길 바랍니다. 💡 - Version Info - 💡 vue : v2 vue/cli : v4.5.13 node : v18.15.0 npm : 9.5.0 webpack : ^4.0.0 webpack-cli : ^3.3.12 css-loader : ^3.5.3 style-loader : ^1.3.0 ter.. 2023. 7. 21. [Vue] Vuex 개념 및 설치 베하~! BTC 블랙아웃입니다!! Vue는 각 컴포넌트마다 상태(data)를 가질 수 있고 컴포넌트끼리 props를 이용해 상태를 전달할 수 있습니다. 그러나 이런 구조는 자식 컴포넌트들의 계층 구조가 복잡해지면 일일이 부모 컴포넌트에 저장된 정보를 타고 타고 올라가서 전달해주어야 하기 때문에 복잡합니다. 이를 해결하기 위해서 존재하는 것이 전역적으로 상태를 관리해주는 라이브러리인 Vuex입니다. 오늘은 이 Vuex에 대해 알아보겠습니다! Vuex 란 Vuex란 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 마치 창고와 같아서 어느 컴포넌트에서도 이 vuex를 참.. 2023. 6. 9. Springboot&Vue.js 연동 베하~~~ 안녕하세요 여러분! 일단고 팀입니다!! 즐거운 5월을 보내고 계신가요? 이번주는 Backend를 담당하는 Springboot와 Frontend를 담당하는 Vue.js를 연동하는 방법을 알아보겠습니다. 저만 따라오면 아주 쉽게 연동할 수 있어요. 화이팅! 1. Spring boot 프로젝트 생성 저는 IDE로 Intellij IDEA (Ultimate)를 사용할게요. Community Edition을 사용하고 계시다면 https://start.spring.io/ 해당 링크를 통해 프로젝트를 생성해주세요! Dependencies는 간단하게 Spring Web만 추가할게요. 2. Vue.js 설치 Vue.js CLI 설치 방법은 아래 링크를 참고하세요. https://btcd.tistory.com/.. 2023. 5. 12. [Vue.js] Vue.js 환경 구성하기 베하~! BTC 요정을 맡고 있는 블랙아웃입니다!! 저희는 최근 간단한 프로젝트를 진행해보았는데요! 이때 사용했던 것이 바로 Vue 입니다. 많이들 들어보셨을텐데요. 오늘은 여러분들과 처음 만나는 게시글인 만큼, 이 Vue라는 것이 어떤 것이고, 왜 사용하는지, 어떻게 사용하는지에 대해 간단하게 알아보겠습니다! 0. Vue & React Vue.js와 react.js는 가장 인기 있는 프론트엔드 JS 도구입니다. Vue와 React의 가장 대표적인 차이점은, Vue는 프레임워크이고, React는 UI 라이브러리입니다. 라이브러리의 장점은 사용자가 라이브러리의 필요한 것을 부분적으로 가져다 사용할 수 있으며, 프레임워크는 부분적인 사용이 불가능하며 정해진 문법에 맞춰 작성해야 하지만 기본적으로 제공하는 기.. 2023. 5. 12. 이전 1 다음
