Seonglae ChoStpano 프로젝트 Front End Nuxt Migration
- Vuex 사용해서 Nuxt Store Folder에 데이터 정리
- Page 이동시 State Variable 유지
참고해야할
Projects
- stpano-cli
- geosvr-cli
Vuex
example-vuex-store
example-vuex-store using nuxt
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/vuex-store?from-embed
nuxt 안에 vuex 가 있는 듯 하다
일단 따라했는데 store 가 안나오는듯
오류 찾은면 금방 나올 듯 하다
오류 ui 마저 이쁜 nuxt 그는 도덕책..
Discussion: Removal of Vuex store "classic mode" · Issue #4912 · nuxt/nuxt.js
Dismiss GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up Assignees manniL changed the title Vuex store example outputs warning: Classic mode for store/ is deprecated and will be removed in Nuxt 3 Discussion: Removal of Vuex store "classic mode" Mar 14, 2019 You can't perform that action at this time.
https://github.com/nuxt/nuxt.js/issues/4912
nuxt 의 end to end blackbox 식 개발
적어도 나는 맘에든다 store에서 모듈형식을 따라라는 토론현장인데 아주 맞는 말
위 예제 그대로 였다
nuxt project 에서 vuex를 store folder에서 모듈을 가져와 데이터를 공유한다
ESLint Prettier
ESLint(TSLint)와 Prettier 함께 사용하기
코드 분석기인 ESLint와 formatter인 Prettier를 함께 사용하기 위해 필요한 사항을 알아보자 TypeScript 도구인 TSLint에도 동일하게 적용할 수 있다 ESLint는 현재 가장 많은 사용자가 있는 JavaScript linter이다. ESLint에도 formatting 관련 규칙들이 있지만, Prettier는 formatting에 특화되어 있다. 이 둘을 각각 설치해서 사용할 수도 있겠지만, 충돌 없이 깔끔하게 사용하기 위해서는 약간의 설정이 필요하다.
https://pravusid.kr/javascript/2019/03/10/eslint-prettier.html
ESLint(TSLint)와 Prettier 함께 사용하기
코드 분석기인 ESLint와 formatter인 Prettier를 함께 사용하기 위해 필요한 사항을 알아보자 TypeScript 도구인 TSLint에도 동일하게 적용할 수 있다 ESLint는 현재 가장 많은 사용자가 있는 JavaScript linter이다. ESLint에도 formatting 관련 규칙들이 있지만, Prettier는 formatting에 특화되어 있다. 이 둘을 각각 설치해서 사용할 수도 있겠지만, 충돌 없이 깔끔하게 사용하기 위해서는 약간의 설정이 필요하다.
https://pravusid.kr/javascript/2019/03/10/eslint-prettier.html
Map
가로로 2개 두기
생각못했지만 막히는 부분은 vuetify 였는데
v-flex 는 row 로 할때 xs6 하면 바로 반 안생기고 xs6 두개 해줘야 생김Vue.js 3.0 + Vuetify로 todolist 만들기 - 투두리스트 만들기. 01
예제코드 : https://drive.google.com/file/d/1zgznQ1Jn7fVqs-mosdyhyvMy-4kmaohN/viewnpm install 하여 사용하시면 됩니다.
https://lessipe.com/lesson/548
이르케
그 다음은 높이문제였는데
How to set the height of vuetify card
I am attempting to add a card with vue and vuetify that will take up the space in my container using v-flex to create a horizontal card that acts the same way vertically. I have attempted to add a ...
https://stackoverflow.com/questions/49949548/how-to-set-the-height-of-vuetify-card/49953110
vueitfy 간격은 grid와 container 로 함
함수 모듈화 정리
How can I access a method in a different page in Nuxt · Issue #3221 · nuxt/nuxt.js
Dismiss GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up lock bot locked as resolved and limited conversation to collaborators Nov 2, 2018 You can't perform that action at this time. You signed in with another tab or window.
https://github.com/nuxt/nuxt.js/issues/3221
여기서 영감을 얻어서 하는데 render 관련이라 안되는건지
codesandbox.io
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/plugins-vendor?from-embed
ssr 을 해서 보내면 안되는 plugins 커스컴이라 그런 듯 하다
아름답게 import vue.mixin 기능은 쩔지만 이름관리를 잘해야할듯
그냥 overwrite됨 같은이름
왜 interaction 을 안하는지...
너무 어이없게 알아냄
css를 import 안해서 그런건데.. 이럴수도 있구나 ..ㄷㄷ
Is it possible to add OpenLayers library to vue-cli 3
I'm trying to implement Openlayers with vue-cli-3 but it seems that somehow I can't do it right, I'm missing something. First, I installed vue cli npm install @vue/cli -g Then I added additional dependencies or to be more precise OpenLayers library. npm install ol.
https://stackoverflow.com/questions/52284275/is-it-possible-to-add-openlayers-library-to-vue-cli-3
그냥 넣은건데..
함수가 한 곳에 있으니 모듈정리 좀 해야하는데
export import 제대로 된 첫사용
Pano
어떻게 불러올까 하다가
nuxtjs.org
Nuxt.js 어플리케이션의 기본 구조는 작고 큰 어플리케이션 모두를 위해 고안되었습니다. 그렇지만 당연히 여러분이 원하는 대로 자유롭게 구성할 수도 있습니다. assets 디렉토리는 Stylus나 Sass 파일, 이미지나 폰트와 같은 컴파일되지 않은 에셋들을 포함하는 디렉토리 입니다. Assets의 동작에 대한 문서 components 디렉토리는 Vue.js 컴포넌트를 포함하는 디렉토리 입니다. asyncData나 fetch 메소드를 이 컴포넌트에서 사용하실 수 없습니다.
https://ko.nuxtjs.org/guide/directory-structure/
static에 일단 넣어두고
nuxtjs.org
Nuxt.js 에서 외부 리소스를 사용하려면?
https://ko.nuxtjs.org/faq/
이런 방법도 있는데 나는 nuxt 만이 아니라 module에서 불러오고 싶으니 그냥 es6
자바스크립트 CommonJS 모듈 내보내기/불러오기 (require)
자바스크립트 개발을 하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import 는 ES6(ES2015)에서 새롭게 도입된 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 종종 우리를 혼란스럽게 하기도 합니다.
https://www.daleseo.com/js-module-require/
require도 되고 export import 도 되고
그냥 static 처리가 제일 깔끔한 방법인듯 krpano 수정보다
nuxtjs.org
Nuxt.js 에서 외부 리소스를 사용하려면?
https://ko.nuxtjs.org/faq/
stpano 연결
vuex 어려워서 일단 연속적 구현
jquery ajax 왜이리 쓰는지..
XML response from fetch
I'm using fetch in a react-native app. I'm trying to read the response but when I use an alert(response) I get [object Object]. I've tried with other modules such as xml2js, react-native-html-parse...
https://stackoverflow.com/questions/39269863/xml-response-from-fetch
다 바꾸고
공유
Other device can not connect to computer's IP · Issue #512 · nuxt/nuxt.js
When I run the command npm run dev and open the browser to localhost:3000, it works well But if I use other device and type 192.xxx.xxx.xxx:3000 in the browser, it says connection refused I try other nodejs projects and they all work wel...
https://github.com/nuxt/nuxt.js/issues/512
- ol stroke
Openlayers draw circle (오픈레이어스 원 그리기, Openlayers 원 그리기)
오픈레이어스3 에서는 원, 점, 사각형 및 기타 이미지 그리기가 사실 참 쉬웠다. 그런데 이게 4로 넘어오면서 import할 때 사용중인 레이어에 따라서 별칭을 주어야하는 필수이름(?) 같은게 존재하는지 몰라도 자꾸 라이브러리 충돌이 나서 한참 해맸었다. 아무튼, 먼저 앞선시간에 사용한 OSM 객체를 이미지 지도로 그린다는 조건하에 맵만 다시 그려보았다.
https://lts0606.tistory.com/200
