반응형 IT/FrontEnd8 [JS] Bootstrap Table 라이브러리 html에서 표를 그리기 위해서 사용하는 태그는 이라고는 다 알고 있을것이다. 이번 포스팅에서는 Bootstrap 에서 제공하는 테이블 라이브러리를 소개하고자 한다.(Bootstrap에 대해서는 아래 참고 포스팅 참고)https://bootstrap-table.com/ Bootstrap Table · An extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, SBootstrap Table An extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootst.. 2024. 10. 28. [Javascript] 확인창, 경고창 띄우는 법 - confirm 예시 코드는 아래와 같다...이상 생략..이하 생략위처럼 사용시 아래와 같이 보이게 된다. if 절 이하는 확인을 눌렀을 경우이고else는 취소를 누를 경우이다. 자세한 내용은 아래 사이트 참고 바란다.https://developer.mozilla.org/ko/docs/Web/API/Window/confirm Window.confirm() - Web API | MDNWindow.confirm() 메서드는 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄웁니다.developer.mozilla.org 2024. 4. 26. Vue.js 에서의 Axios 이전 포스팅에서 vue 에 대해서 다룬적이 있다. 자세한 사항은 아래 참고 포스팅을 확인바란다. Vue에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)이다다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양한게 특징이자 장점이다. 설치는 간단하게 npm을 사용하여 가능하고 npm에 대해서는 아래 참고 포스팅을 참고하도록 하자. npm install axios 라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 되고 axios 변수를 이용하여 아래와 같이 HTTP GET 요청을 날리는 코드를 작성한다. html 부분 axios js 부분 new Vue({ el: '#app', methods: {.. 2023. 1. 26. Vue.js 실습 part.4 저번 포스팅에서는 header, home, about 페이지를 만들었고, 이 페이지들을 app.vue에서 보여주려고 까지 하였다. 그럼 이번 포스팅에서는 이것들을 조합하여 페이지로 보여지도록 해볼것이다. 저번 포스팅에서 app.vue에 router-view를 명시해두었는데, 이것을 사용하기 위해서는 또 다른 작업이 필요하다. router를 설치는 하였고, 다음은 라우터의 동작을 제어할 파일을 만들것이다. /test/src/router.js 파일을 만들어보자. 여기에는 다음과 같이 작성을 한다. import Home from "./views/Home-test"; import About from "./views/About-test"; import { createRouter, createWebHistory }.. 2022. 3. 2. Vue.js 실습 part.3 저번 포스팅까지 완료가 되었다면 프로젝트 내에서 모든것이 생성이 되어있고, 작성을 하기만 되면 되는 상태가 된다. 앞서 말한것처럼 페이지가 바뀔때마다 전체가 바뀌는것이 아니라 예를들어 네이버 뉴스라고 본다면 위에 빨간 박스는 변경될 필요없이 아래 내용만 바뀌면 된다. 이럴때는 header, sidebar, footer 등의 이름으로 레이아웃을 설정하는데 이렇게 저장될 레이아웃 폴더를 하나 만들도록 하겠다. /test/src/components 안에 layout 이라는 폴더를 하나 생성 하도록 하자. 그리고 그 안에는 Header.vue라는 파일을 만들어보자. 그리고 그 파일 안에는 자신이 있다면 꾸며도 되지만 나는 프론트엔드에는 자신이 없어서.... 부트스트랩을 그대로 가져다 쓸 예정이다. 부트스트랩이 .. 2022. 3. 1. Vue.js 실습 part.2 저번 포스팅에서는 각 프론트엔드 프레임워크에 대한 설명과 vscode 설치까지 마칠수 있었다. 이번 포스팅에서는 이어서 설치를 해보도록 할것이다. vscode에서 터미널을 열고 vue cli 를 설치해보도록 할것이다. npm install -g @vue/cli 라고 npm global 설치를 한다. 그럼 아래 이미지와 같이 설치가 된다. 다음은 프로젝트를 생성할 디렉토리로 이동하여 프로젝트를 만들어본다. 프로젝트 생성은 vue create package명 으로 작성을 하고 나는 vue create test 라고 하였다. 그럼 옵션이 나온다. manually를 눌러보면 다른방식으로 생성도 되지만 이번엔 default로 해서 기본 설치를 해볼것이다. 메뉴얼을 눌러보고 뭐가 있는지 확인도 한번 해보면 나중에 .. 2022. 2. 28. Vue.js 실습 part.1 (React, Vue, Angular 소개) frontend란 backend의 반대되는 말로 한 페이지를 웹브라우져 상에 표시하기 위해서는 데이터베이스 등에서 데이터를 가져오고 그 가져온 데이터를 보기 쉽도록 화면에 표현을 해주어야하는데, 데이터를 가져오는부분을 백엔드, 표현해주는부분을 프론트엔드라고 생각을 하면 편하다. 예전의 프로그래밍의 프론트엔드로는 서블릿언어 쪽에서 jsp나 자바스크립트, jquery 등을 많이 사용하였는데, 현재는 다양하게 많은 언어가 자바스크립트 기반으로 생겨났고, 그들중 가장 많이 사용하는 프론트엔드 프레임워크 top3는 현시점에서는 다음과 같다. React Vue angular 이미지는 다음과 같다. 특징은 SPA개발을 위한 프레임 워크로 복잡한 페이지 개발에 유용하다. SPA 란 Single Page Applicat.. 2022. 2. 27. bootstrap 오픈데이터 사용법 프론트 작업을 많이 하지는 않지만 취미로 사이트를 한두개 만들면 항상 문제는 보여지는 ui부분이었다. 언제까지나 투박한 버튼과 각진 네모를 사용할수가 없는 사람들을 위해 한 사이트를 소개한다. https://startbootstrap.com/ Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap Landing Page A clean, functional landing page theme startbootstrap.com bootsrtrap오픈데이터? 들이 모여있는곳이다. 들어가서 맘에드는 것들 다운로드 하면 zip파일로 받아지는데 이걸 압축을 풀면 assets, css, js 폴더와 index.html파일 이렇게 총 4개가 나온.. 2021. 12. 19. 이전 1 다음 반응형
