본문 바로가기

전체 글

(31)
서버사이드렌더링, 싱글페이지렌더링(클라이언트사이드렌더링) 렌더링이란? 어떠한 웹 페이지를 접속하려 할때, 그 페이지를 화면에 구성해주는 것. 뷰와 넉스트는 렌더링방식에서 차이가 난다. Server Side Rendering 서버사이드렌더링이란 요청시마다 새로고침(깜빡거림)이 일어나며 이때, view가 어떻게 보여질지 또한 서버에서 보내주는데 이러한 방식을 서버사이드 렌더링이라고 한다. (서버측에서 HTML&View를 생성하여 응답하는 방식) Single Page Rendering 싱글페이지렌더링, 클라이언트사이드렌더링은 한개의 빈페이지만 서버에서 구성해놓은 뒤, View는 클라이언트에서 스크립트를 통해 렌더링하는 방식이다. 각 렌더링의 장단점 비교 클라이언트 사이드 렌더링의 경우, 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하..
Vue 라이프 사이클 이해하기 라이프사이클이란? 어떤 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(lifecycle)이라 한다. 곧 Vue 인스턴스가 생성된 후 우리 눈에서 사라지기까지의 단계를 일컫는 말이다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다. 이 과정에서 Vue는 각각의 단계에서, Vue를 사용하는 사람들을 위해 훅(Hook)을 할 수 있도록 API를 제공한다. 크게 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed가 있다. ..
Nuxt를 Vuetify와 연결하기. Vuetify 이제 막 페이지와 레이아웃까지 잡았는데, 이제는 디자인, 화면, 프론트단을 만들어 보려고 한다. react에서는 ant-design이 대세였는데, Vue에서는 Vuetify를 사용할 예정. Vuetify는 한마디로 자주쓰는 컴포넌트들을 미리 구성해놓은 프레임워크다. 설치명령어는 npm -> npm i vuetify @nuxtjs/vuetify yarn -> yarn add @nuxtjs/vuetify @nuxtjs/vuetify를 설치하는 이유? Nuxt는 외부 라이브러리에 연결하는 방법이 독특하다. Nuxt는 싱글페이지가 아니고, 페이지가 여러개며 기존 Vue식으로는 이럴때 다른 페이지에도 따로따로 외부 라이브러리를 연결해줘야만 했다. 그러나 Nuxt에서는 그저 nuxt.config.js..
Nuxt router와 layout, head 페이징처리중, 간단한 /주소화방법. 위처럼 주소를 localhos밑으로 세부적인 주소를 설정하고 싶을때, pages폴더 밑에 폴더를 하나 더 생성후 vue파일을 생성시켜주면된다. 참고로 Nuxt는 자동으로 Hot rerloading이 적용되어 있기 때문에 수정시 자동으로 반영을 시켜준다. Code splitting 원래 Vue-router를 사용했을때 페이지가 수백만개라고 가정을 하면 사실상 고유한 페이지는 1개고, 컴포넌트 개수가 수백만개인 것이며, 해당 컴포넌트들이 레고처럼 서로 바꿔가며 조립하여 눈속임을 한다고 보면 된다. 이에따라 해당 컴포넌트 수백만개를 전부 로딩을 해야 페이지가 나타나는 초기 로딩속도저하현상이 일어난다. 그래서 Nuxt에서는 한개의 페이지가 있는 것이 아니라 별도의 여러개의 페..
Nuxt설치 및 pages 생성(Node기반 SNS 만들기 개발환경설정 1. 터미널에서 npm i vue nuxt명령어로 Vue와 Nuxt설치 2. npm init으로 pakage.json 생성 { "name": "vue-nodebird-front", "version": "1.0.0", "main": "index.js", "dependencies": { "nuxt": "^2.8.1", "vue": "^2.6.10" }, "devDependencies": {}, "scripts": { "dev": "nuxt" }, "author": "", "license": "ISC", "description": "" } ※vue CLI (Vue CLI 란 Vue CLI 는 커맨드라인 인터페이스 기반의 Vue 프로젝트 생성 도구)는 해당 코딩 과정에서 사용 하지 않을 예정. 3...
[MongoDB]DeprecationWarning: current Server Discovery and Monitoring engine is deprecated 오류 해결 (node:20552) DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.​ node를 통해 mongo에 연결하다가 다음과 같은 에러가 발생했다. 검색을 해보다보니 DeprecationWarning : current~로 파생되는 경고가 두가지 있었는데 첫째, useUnifiedTopology : true 둘째, us..
Node.js와 Mongodb 연동 기본(TypeError : db.collection is not a funtion오류해결) 세팅 터미널에 $ npm install mongodb --save 명령어 입력을 통해 연결환경 구축하고 터미널이 가리키고 있는 위치에 위와 같은 test.js파일을 생성한다. //test.js var MongoClient = require('mongodb').MongoClient, assert = require('assert'); // Connection URL var url = 'mongodb://localhost:27017/test'; // Use connect method to connect to the server MongoClient.connect(url, function(err, db) { assert.equal(null, err); console.log("Connected successful..
mongoDB aggregation (pipeline) 1. mongoDB aggregation 사용법 익히기¶ 기존의 find로는 원하는 데이터로 가공하는데 어려움 빅데이터를 다루려면 새로운 데이터 가공 방식이 필요 mongodb aggregation을 사용하면 documents를 grouping, filtering 등 다양한 연산을 적용할 수 있음 mongodb aggregation 기본 개념: Shard를 통하여 BigData를 저장하고, Aggragation Framework을 통하여 BigData를 처리 MongoDB의 Aggregation은 Sharding 기반의 데이터를 효율적으로 처리하고 집계하는 프레임워크라고 이해하면 됨 documents를 grouping, filtering 등 다양한 연산을 적용하여 계산된 결과를 반환 주요 mongodb ..