나는 별일없이 산다 뭐 별다른 걱정 없다

아래의 내용은 Derick Sozo의 '1 0 reasons to use Nuxt.js for your next web application '을 제 깜냥대로 번역한 글입니다. 당신이 vue.js 개발자라면 nuxt.js를 들어봤을 것이다. 그러나 당신은 무엇이 숨어있는지는 모두 알 지 못한다. 아마도 묻겠지, "왜 내가 프레임워크를 위한 프레임워크를 써야합니까?". vue는 이미 자바스크립트 앱을 더 쉽게 만들 수 있는 개발 도구다. 도대체 어떤 아이디어가 nuxt.js에게 숨겨져 있을까? nuxt.js 무엇? nuxt.js는 vue 위에 존재하는 고차원 프레임워크이다. nuxt.js는 광범위의 혹은 싱글 페이지 vue 앱을 만드는 것을 간편하게 해준다. nuxt.js는 서버나 클리이언트 코드의 배포를 축약한다. 이러한 역할로 당신은 앱 개발에 더 집중할 수 있다. nuxt의 목표는 당신이 메인 프로젝트 베이스에서 좀더 유연성을 갖게 하는 것이다?! 왜냐하면 개발 단계에서 nuxt를 사용하면 어마어마한 기능을 굉장히 작은 용량의 자바스크립트 파일을 추가하는 것에 그치기 때문이다. 1. 번거 로움없이 범용 앱을 만듭니다. Nuxt.js의 가장 큰 셀링 포인트 중 하나는 범용 앱을보다 쉽게 ​​만들 수 있다는 것입니다. 범용 앱이란 무엇입니까? 범용 앱은 클라이언트와 서버 측에서 모두 실행할 수있는 JavaScript 코드를 설명하는 데 사용됩니다. Vue와 같은 많은 최신 JavaScript 프레임 워크는 단일 페이지 응용 프로그램 (SPA)을 작성하는 것을 목표로합니다. 기존 웹 사이트에서 SPA를 사용하면 많은 이점이 있습니다. 예를 들어, 빠르게 업데이트되는 매우 멋진 UI를 작성할 수 있습니다. 그러나 SPA는 로드 시간이 길어지는 등의 단점이 있으며 Google은 SEO 목적으로 페이지를 크롤링 할 콘텐츠가 처음부터 없으므로 이를 해결하기 위해 노력하고 있습니다. 모...

아래는 https://try.redis.io/의 프로그램을 진행하면서 배운 내용을 정리한 것입니다. 0. redis redis는 메모리에 기록되는 nosql 기반의 데이터베이스이다. 메모리에 저장되기 때문에 입출력이 빠르다 빠른 입출력으로 상태 관리에 사용되기도 한다. nosql로 키, 값 쌍을 갖는다 1. set, get 키, 값 쌍을 입력하는 방법: set $ set [key] [value] 키, 값 쌍을 불러오는 법 - 키의 값을 알고 있을 때: get $ get [key] => [value] 2. incr, del 특정 키에 대해서 값을 정수 단위로 증가(+1) 시키는 것: incr $ set [key] 10 $ incr [key] => 11 $ incr [key] => 12 특정 키와 값을 삭제 하는 것: del $ set [key] 10 $ del [key] $ set [key] 'hey' $ get [key] => 'hey' * 원자적 실행: atomic operations 클라이언트 입장에서 개별적으로 key에 함수를 걸어 value를 증가시키면 각 클라이언트가 함수를 호출하는 대로 value가 바뀌게 된다. 하지만 우리는 클리이언트 입장보다 데이터베이스의 입장으로 value가 증가하기를 원한다. 이러한 관점에서의 실행을 원자적 실행이라고 하고 redis는 다양한 원자적 실행을 제공한다. 3.  expire, ttl 키, 값 쌍을 만료시키는 방법: expire $ set [key] [value] $ expire [key] 120 120초 뒤에 [key] [value]는 만료된다. 만료되기 까지 남은 시간과 상태를 나타내는 명령어: ttl $ttl [key] => 113 // 120초가 모두 지난 뒤 $ttl [key] => -2 -2는 키 값 쌍이 만료되어 존재하지 않음...

모든 Vuex 응용 프로그램의 중심에는 스토어가 있습니다. "저장소"(스토어)는 기본적으로 응용 프로그램 상태를 저장하는 컨테이너입니다. Vuex 저장소는 일반 전역 개체와 다른 두 가지가 있습니다. 1. Vuex 스토어는 반응이 있습니다. Vue 컴포넌트는 상태를 검색 할 때 저장소의 상태가 변경되면 효과적으로 대응하고 효율적으로 업데이트합니다. 2. 스토어의 상태를 직접 변경할 수는 없습니다. 스토어의 상태를 변경하는 유일한 방법은 명시적으로 뮤태아션을 커밋하는 것입니다. 이렇게하면 모든 상태가 변경되어 추적 가능 레코드가 남을 수 있으며 도구를 사용하여 응용 프로그램을보다 잘 이해할 수 있습니다. 세상 제일 간단한 스토어 // Make sure to call Vue.use(Vuex) first if using a module system const store = new Vuex . Store ( { state : { count : 0 } , mutations : { increment ( state ) { state . count ++ } } } ) 이제 store.state에 접속 가능합니다. 그리고 store.commit으로 상태를 바꿀 수 있습니다. store . commit ( 'increment' ) console . log ( store . state . count ) // -> 1 다시 말해, store.state.count를 직접 변경하지 않고 뮤테이션으로 커밋하는 이유는 명시적으로 추적하려고하기 때문입니다. 이 간단한 규칙에 따라 의도를 보다 명확하게 표현할 수 있으므로 코드를 읽을 때 앱의 상태 변화를 더 잘 추론 할 수 있습니다. 또한 모든 뮤테이션을 기록하고 상태 스냅 샷을 찍거나 시간 여행 디버깅을 수행 할 수있는 도구를 구현할 수있는 기회를 제공합니다. 컴포넌트에서 저장소...

vuex는 vue를 위한 상태관리 패턴 + 라이브러리이다. 어플리케이션의 모든 컴포넌트에 중앙화된 저장소와 같이 데이터를 제공한다. 1. 예상 가능한 방향으로 뮤테이션 되도록 정해져 있다. 2. vue dev extension과 결합된다. 이는 zero-config time-travel debugging 과 state snapshot export/import 등의 향상된 기능을 제공한다. 상태 관리 패턴이 무엇일까? new Vue ( { // state data ( ) { return { count : 0 } } , // view template : ` <div>{{ count }}</div> ` , // actions methods : { increment ( ) { this . count ++ } } } ) 위는 다음의 부분으로 나뉘어진 자기폐쇄형 앱이다. 1. 상태: 앱을 움직이는 source of truth 2. 뷰: 상태를 표현 3. 액션: 뷰에 따른 유저의 input에 의한 반작용으로 상태를 바꿀 수 있는 방법 그러나 단순성은 공통의 상태를 공유하는 복수의 컴포넌트에 의해 쉽게 깨지게 된다. 1. 복수의 뷰는 같은 상태의 조각에 의존될 수 있다. 2. 다른 뷰로 부터 시작된 액션은 같은 상태의 조각을 뮤테이션 할 수 있다.  첫 번째 문제에 대해, 넘겨지는 props는 깊숙히 자리한 컴포넌트에게 지루할/반복적일 수 있다. 그리고 형제 컴포넌트들에 작동이 간단하게 되지 않을 수 있다. 두 번째 문제에 대해,  직접적인 부모 / 자식 인스턴스 참조에 도달하거나 이벤트를 통해 상태의 여러 복사본을 변경 및 동기화하려고하는 등의 솔루션을 사용하고 있습니다. 이 두 가지 패턴은 모두 부서지기 쉽고 유지 보수가 불가능한 코드로 빠르게 이어집니다....

vue-router로 라우팅하기 vue-router를 쓰는 것을 추천한다(라고 쓰고 강제한다.).  각 요청마다 새로운 인스턴스를 제공해야 한다. // router.js import Vue from 'vue' import Router from 'vue-router' Vue . use ( Router ) export function createRouter ( ) { return new Router ( { mode : 'history' , routes : [ // ... ] } ) } // app.js import Vue from 'vue' import App from './App.vue' import { createRouter } from './router' export function createApp ( ) { // create router instance const router = createRouter ( ) const app = new Vue ( { // inject router into root Vue instance router , render : h => h ( App ) } ) // return both the app and the router return { app , router } } // entry-server.js import { createApp } from './app' export default context => { // since there could potentially be asynchronous route hooks or components, // we ...

Stateful Singletons 피하기 우리가 클라이언트 코드를 쓸 때, 우리는 우리의 코드가 매번 새로운 context로 evalutated될 것이라 기대한다. 그러나 node.js 서버는 긴- 작동의- 프로세스이다. 우리의 코드가 프로세스에서 요구도면, 그것은 메모리에 남아 evaluated 된다. 이는 네가 singleton object를 만들면, 모든 request에 사이에서 이 object가 공유될 것이란 거다. 우리는 새로운 루트 Vue 인스턴스를 각각의 요청에 대해 만들어야 한다. 이건 각각의 브라우저에서 유저가 새로운 인스턴스를 사용하는 것과 비슷하다. 우리가 다중의 request에서 교차해서 인스턴스를 공유하면 cross-request state pollution을 피할 수 없다. 그렇기에, 직접적으로 앱 인스턴스를 만드는 것 대신, 우리는 각 request를 위한 신선한 앱 인스턴스를 만드는 반복적인 작업을 하는 factory function을 노출 시켜야 한다. // app.js const Vue = require ( 'vue' ) module . exports = function createApp ( context ) { return new Vue ( { data : { url : context . url } , template : `<div>The visited URL is: {{ url }}</div>` } ) } 그리고 우리의 서버 코드는 이렇게 바뀐다: // server.js const createApp = require ( './app' ) server . get ( '*' , ( req , res ) => { const context = { url : req . url } const app = createApp ( con...