분류 전체보기 (179) 썸네일형 리스트형 [#. Node] 관리자 패널, 대시보드를 제공하는 Admin Dashboard AdminBro install 설치 및 사용 1 보통 쇼핑몰 개발을 위해서는 관리자단, 사용자단을 나누어서 개발해왔다 Django에서 쉽게 생성할 수 있는 admin 페이지 때문에 django를 사용하려고 했으나 Node에서 관리자 대시보드를 쉽게 생성해 주는 AdminBro에 대해 찾게 됐다 adminbro.com/index.html An Auto-generated Admin Panel for your Node.js Application You, as a developer, provide database models, and AdminBro generates ReactJS UI which allows you (or other trusted users) to manage content. adminbro.com Express Hapi Koa.js Nes.. [#. ] CSR(Client Side Rendering)과 SSR(Server Side Rendering)이란? 차이점 최근 React로 유튜브 클론, 쇼핑몰 Vue로 Todo 웹을 개발해 보면서 React와 Vue의 공통점과 차이점에 대해 정리해가는 중이었다 그 과정에서 CSR, SSR 개념을 알게 되었고 정리해 보려고 한다 CSR(Client Side Rendering) 최초 한 번 HTML, static, js 등을 다 받아와서 로딩하는 방식 이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 클라이언트가 해석 후 렌더링 클라이언트 요청=> 변화가 필요한 영역만 서버에 전달=> 서버에서 클라이언트로 리소스 전달=> 클라이언트에서 view 처리 SPA(Single Page App) 형식의 프론트엔드 라이브러리(React, Vue)의 방식 (React SSR 라이브러리=Next.js, Vue SSR 라이.. [#. React] react-paypal-express-checkout를 이용해서 React 웹에 Paypal 결제 연동하기 React로 쇼핑몰 웹을 만들고 있는데 여기에 Paypal을 통한 결제를 심어보자 주의할 점은 ₩, 원은 지원을 하지 않는다 $, 달러 를 기준으로 한다 ① react-paypal-express-checkout 설치 npm install react-paypal-express-checkout --save www.npmjs.com/package/react-paypal-express-checkout react-paypal-express-checkout React component that renders Paypal's express check out button www.npmjs.com ② view에 Paypal 버튼 생성하기 import React from 'react'; import PaypalExpres.. [#. JavaScript] forEach와 map의 차이점을 알아보자 forEach vs map forEach를 쓸 때와 map을 쓸 때가 있다 차이점을 알아보자 ① forEach() Array 요소를 제공된 함수로 한 번 실행 아무 값도 반환하지 않는다 기존 배열 변경 가능 const arr = [1, 2, 3] aarrrray.forEach((item, index) => { arr[index] = item * 2 }) console.log(arr)// [2, 4, 6] ② map() 모든 Array 요소가 제공된 함수로 호출될 때 새로운 array를 생성 기존의 배열을 가공하여 새로운 배열을 생성할 때 사용 => 기존 배열은 값이 바뀌지 않고 유지 const arr = [1, 2, 3] const newArray = arr.map(item => { return item.. [#. Vue] Vue Draggable을 이용해서 리스트 드래그로 순서 바꾸기 list drag and sort Vue로 이렇게 Todo 웹 어플리케이션을 만들었는데 할 일 목록 순서를 자유자재로 바꾸고 싶다 Vue.Draggable을 이용해서 list를 drag and drop 해서 순서를 바꿔보자 github.com/SortableJS/Vue.Draggable SortableJS/Vue.Draggable Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating an account on GitHub. github.com ① vuedraggable 설치 npm install --save vuedraggable ② vue 파일 script에 vuedraggable impor.. [#. Vue] [Vue warn]: Unknown custom element: <b-list-group-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option. vue bootstrap 에러 해결하기 Vue에서 UI 프레임워크로 bootstrap를 사용하려고 하는데 에러가 발생했다 버전은 아래와 같고, 버전 문제는 분명 아니다 Vue 2.6.12 bootstrap 4.5.3 bootstrap-vue 2.21.2 처음부터 살펴보자 ① bootstrap, bootstrap-vue 설치 npm install vue bootstrap-vue bootstrap --save ② main.js에 세팅 import Vue from 'vue' import App from './App.vue' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap-vue/dist/bootstrap-vue.. [#. CSS] css gradient 그라데이션 색상 코드 제공해주는 사이트 디자이너 없이 따로 웹을 만들 때 아무래도 UI 쪽에 어려움이 있다 그럴 때 background라도 그라데이션으로 넣게 되면 어느 정도 디자인적인 부분은 보안할 수 있다고 생각한다 그라데이션 색상 조합을 제공해 주는 사이트가 몇 개 있으니 참고하면 좋다 uigradients uigradients.com uiGradients - Beautiful colored gradients uiGradients is a handpicked collection of beautiful color gradients for designers and developers. uigradients.com webgradients webgradients.com/ Free Gradients Collection by itmeo.com Fr.. [#. Vue] Chrome Vue devtools 크롬 Vue(Vue2, Vue3) 확장 프로그램 추가하기 Vue devtools 확장 프로그램을 추가해 보자 Vue2, Vue3은 확장 프로그램이 다르다! 주의해서 추가하도록 하자 Vue 2 chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtools Chrome and Firefox DevTools extension for debugging Vue.js applications. chrome.google.com Vue 3 chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg Vue.js devtools Chrome and Firefox DevTools ex.. 이전 1 ··· 12 13 14 15 16 17 18 ··· 23 다음
