Play Ground

next.js + recoil + typescript + SCSS(or stylex) 조합으로 사용할 예정. 1. Next.js 설치npx create-next-app@latestWhat is your project named? -> 프로젝트 이름Would you like to use TypeScript? -> 타입스크립트 사용할건지?Would you like to use ESLint? -> ESLint 쓸건지? 아마 airbnb로 쓸거같은데.. 일단 yesWould you like to use Tailwind CSS? -> scss module이나 stylex 사용해볼거같아서 noWould you like to use `src/` directory? -> src 디렉토리 사용할건지? 이건 개취일듯. 하..

https://blog.shako.net/installing-lemp-stack-on-ubuntu-server-16-04/ 이거대로 하면 그냥 바로된다~참고로 오늘기준으로 php-fpm이 7.2 버전으로 깔리기 때문에7.0으로 되어있는 것들을 7.2로 바꿔주고 셋팅해주면 된다.

Vue.js를 Ubuntu(18.04)에 배포하기 본격적인 설명에 앞서, 아주아주 퓨어한 Ubuntu 환경에서 nginx를 설치하고 vue 첫 페이지가 보여지도록 하는 것이 목표이다.환경은 ubuntu 18.04 / nginx 1.14.0 1. 서버 접속ssh root@111.111.11.11언제나 그렇듯 서버에 접속한다.root 계정으로 111.111.11.11 IP를 가지는 서버에 접속한다.비밀번호를 입력하고 서버에 딱 들어옴 2. nginx 설치 $ sudo apt update $ sudo apt upgrade 위와 같이 업데이트/업그레이드를 해준 후, $ sudo apt-get install nginx nginx를 설치한다. 그리고 nginx를 테스트하기 전에 방화벽 소프트웨어를 조정하여 서비스에..

브라우저로 볼 때 자꾸 url 뒤에 #이 붙는다.예를들어 http://127.0.0.1:8080/#/ 이런식으로vue-router 설정인 src/router/index.js에 한 줄만 추가해주면 된다. (vue cli를 이용하여 webpack 사용) import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, ], }); mode: 'history..

이벤트버스는 vuex사용하지 않은 상태로부모자식간에 데이터를 주고받기 위해 사용하였는데,사용하다보니 vuex를 사용하는 것이 가장 베스트일거라는 생각이 들었다. main.js Vue.prototype.$EventBus = new Vue() a.vue (이벤트버스 발송하는 곳) export default {...methods: {sendEventbus: function() {this.$EventBus.$emit("result", "오오")}}...}오오 보내기이런식으로 연결해놓는다. b.vue (이벤트버스 받는 곳)export default {...created() {this.$EventBus.$on("result", function(data){console.log(data)})}...)이벤트버스는 cre..

Previous 1 ... {{ n }} ... {{ results.totalPages }} Next showPagingButton: function(n) { const vm = this var thisPage = vm.results.number + 1 var totalPage = vm.results.totalPages + 1 //[조건] 5페이지가 넘어가면 //[결과] 1 ~ 4페이지 숨겨주기 var cond1 = (thisPage 5) //[조건] 마지막페이지 ~ 마지막페이지-4 까지이면 //[결과] 마지막페이지-4를 제외한 나머지 페이지들 숨겨주기 var cond2 = (thisPage > (totalPage - 5)) && (n < (totalPage - 5)) //[조건]..

promise를 사용하여 api콜하는 부분을 디자인해주었음mixin의 promise부분을 살리고 vm.promise(function)와 같이 사용하면 될듯then 안에서 promise가 리턴되어야 그 결과값을 바탕으로 다음 then으로 넘어감 mixin.js export default { methods: { promise: function(func){ //프로미스 만들기 return new Promise(function(resolve, reject){ resolve(func()) }) }, call: function(action) { var vm = this var successResult vm.promise(function(){ if (action.confirmMsg !== undefined) retu..

여기서 class는 html의 class가 아닌 객체지향 프로그래밍의 class임을 말합니다. 아래 코드는 REST API 방식으로 구현하기 위해 만든 디자인 (참고용) main.js import Vue from 'vue' import Apifrom './services/ApiCall' Vue.prototype.$api = new Api(new Vue()) ApiCall.js import axios from 'axios' import apiUrl from './api.call.js' class ApiCall { constructor (vue) { this.apiInfo = apiUrl.data() this.vueInstance = vue } userData (callBack) { this.callApi(..

지금까지 mixin을 사용하기 위해 각 컴포넌트 마다 export default { ... mixin: mixin ... }을 해주었는데귀찮으니 전역으로 선언을 해주기로 하자 main.js import Vue from 'vue' import myMixin from './mixins/mixins' Vue.mixin(myMixin)

부모 컴포넌트의 부분this.items = [ { "title": data.item_type[100], "img": require("@/assets/img/i-move.png") }, { "title": data.item_type[200], "img": require("@/assets/img/i-rainbow.png") }, { "title": data.item_type[300], "img": require("@/assets/img/i-random.png") } ] 자식 컴포넌트의 부분