SMALL Web26 Vite와 Vue.js: 빠르고 현대적인 프론트엔드 개발 Vue.js는 사용자 인터페이스를 구축하기 위한 점진적인 JavaScript 프레임워크로, 많은 개발자들 사이에서 인기가 높습니다. 이 글에서는 Vite를 사용하여 Vue.js 프로젝트를 생성하고, Vue.js의 주요 특징에 대해 설명하겠습니다.Vite란 무엇인가?Vite는 "비테"라고 발음하며, 프론트엔드 개발을 위한 빌드 도구입니다. 특히 빠른 개발 서버와 모듈 번들러로 유명합니다. Vite의 주요 특징은 다음과 같습니다:빠른 개발 서버: Vite는 네이티브 ES 모듈을 이용한 빠른 개발 서버를 제공합니다. 변경 사항이 발생하면 페이지를 즉시 새로고침하는 Hot Module Replacement(HMR) 기능도 지원합니다.최신 JavaScript 지원: Vite는 최신 JavaScript 기능을 지원.. 2024. 7. 11. Vuex로 상태 관리하기: 기본 사용법 Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 강력한 도구입니다. 이 글에서는 Vuex의 기본적인 사용법을 단계별로 설명하겠습니다. 예제 코드를 통해 Vuex를 효과적으로 사용하는 방법을 배워보세요.1. 프로젝트 생성 및 Vuex 설치먼저 Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다.npm install -g @vue/clivue create my-vue-app프로젝트를 생성할 때 기본 설정을 사용하거나 원하는 설정을 선택할 수 있습니다. 프로젝트가 생성된 후, 해당 디렉토리로 이동합니다.cd my-vue-app이제 Vuex 패키지를 설치합니다.npm install vuex@next2. Vuex 기본 설정Vuex를 설정하는 방법을 살펴보겠습니다.store/index.js먼저 s.. 2024. 7. 11. (node.js) express 실행방법 Express 모듈은 node package manager(npm) 를 통하여 설치 가능 Express를 사용하는 구조를 가진 프로젝트를 다양한 방법으로 생성가능 ü 빈 프로젝트에 express를 설치하고 관련된 부분을 직접 설정 ü express-generator를 사용하여 express 관련 설정이 적용된 프로젝트를 생성 npm 빈 프로젝트에 express를 추가하는 방법 $ mkdir [폴더 이름] $ cd [폴더 이름] $ npm init $ npm install --save express ü package.json 파일에 Express가 추가된다. CLI 명령을 사용하여 프로젝트를 생성하는 방법 $ npm install express-generator -g $ express [옵션.. 2020. 11. 15. (Django) 그래프 그리기 Django를 공부하던 중, DataBase의 데이터 분포를 나타내기 위해 그래프를 그릴 방법을 생각해보았다. 그래서 구글링을 통해 아주 매력적인 것을 발견하였다. 바로 FusionCharts !! 이 FusionChart는 Django의 view에서 template으로 그래프 데이터를 넘겨준다. (Json 형식으로)!! 물론 Django뿐 아니라 다른 언어에서도 모두 지원된다. 공식 링크를 첨부한다. https://www.fusioncharts.com/dev/fusioncharts FusionCharts Dev Centre Get started with interactive charts and dashboards for your web and mobile applications www.fusioncha.. 2020. 8. 18. (Django) 사진 적용 STATIC_URL 설정 setting.py에서 STATIC_URL 설정 #setting.py STATIC_URL = '/static/' 2. application dir 하위에 static/image/ 폴더 생성 3. 사용하고자 하는 html 설정 사용하고자 하는 html의 상단에 {% load static %} 선언 ex) #base.html {% load static %} 위와 같이 설정해주면 static 하위 폴더의 image에서 logo2.png를 찾아서 보여준다. 2020. 8. 17. (Django) Filter Filter란? Filter는 파이프 ( | )를 사용하여 이용하는 것으로, 이전 명령에 다음명령을 적용할 수 있습니다. ex) {{ apple | upper }} -> APPLE -> apple에 upper filter를 적용하여서 대문자로 만든 것 필터는 연쇄적으로 사용하여, 필터의 결과를 다음 필터에 적용할 수도 있습니다. 자주 사용되는 filter {{ content | escape | linebreaks }} -> content를 escape한 다음, 행 바꿈을 태그로 바꾸기 위해 종종 사용 {{ list | join: ", " }} -> 쉼표와 공백으로 list를 join : 필터 인자에 공백이 포함된 경우에는 반드시 따옴표 사용! default 변수가 false 또는 비어 있는 경우, 지정된.. 2020. 8. 16. 이전 1 2 3 4 5 다음 반응형 LIST
