Vue
-
express async request handler 오류Vue 2021. 1. 26. 17:07
1. sync function의 경우 app.get("/error", (req, res) => { throw "에러" }) 정상적으로 에러를 잡아준다. 2. async function의 경우 app.get("/error", async (req, res) => { throw "에러" }) 에러를 잡아주지 못한다. async function을 try catch문을 사용하여 에러를 잡아주어야한다. app.get("/error", async (req, res, next) => { try { throw "에러" } catch (err) { next(err) } }) 이런식으로 잡아주면 정상적으로 500번대 에러를 잡아준다.
-
[Vue]record 문법 사용법Vue 2021. 1. 6. 15:11
type Operator = "+" | "-" | "*" | "/"; interface CalculateFunction { (operand1: number, operand2: number): number; } const CalcFunctions: Record = { "+": (a: number, b: number): number => a + b, "-": (a: number, b: number): number => a - b, "*": () => {}, "/": () => {}, }; function main() { const firstNum = 1; const secondNum = 2; const sumResult = CalcFunctions["+"](firstNum, secondNum); consol..
-
[Vue3+mongoDB+express ch.4] 라우터 설정 (router)Vue 2020. 12. 31. 17:35
localhost:8080/home으로 접속할 수 있는 라우팅을 설정해보자. npm i vue-router@next router 폴더를 만든 후 index.ts를 추가해준다. //index.ts import { createRouter, createWebHistory, RouteRecordRaw, } from 'vue-router' import Home from '@/components/Home.vue' const routes: RouteRecordRaw[] = [ { path: '/home', name: "home", component: Home }, { path: "/redir", redirect: "/hello" } ] export const router = createRouter({ history:..
-
[Vue3+mongoDB+express ch.3] Frontend Backend 연결Vue 2020. 12. 31. 15:38
이제 frontend에서 요청을 보내면 backend 서버에서 mongoDB에 저장된 정보를 꺼내서 frontend에 보여주는 작업을 해볼것이다. 현재 frontend는 localhost:8080, backend는 localhost:3001에서 돌고있다. 즉 8080에서 요청을 보내면 3001에 가서 작업을 해주고 8080에 응답을 보내줄것이다. backend 프로젝트의 app.ts에 코드를 추가한다. localhost:3001/users라는 path에 접근하면 users를 응답으로 보내준다는 뜻 이다. //app.ts app.get('/users', (req, res) => { User.find().then(users => { console.log(users) res.send({ users }) }) ..
-
vue3 express mongoDB 개발환경 세팅Vue 2020. 12. 29. 18:44
Vue3 설치는 이전 포스팅 참조 Express 로 backend 폴더 설치 npm install -g express-generator express --view=pug backend cd backend npm install npm start 폴더에 app.js 내용 지운 후 다음과같은 코드 작성 또는 backend 폴더 생성 npm init -y npm install express TS 사용하기 src 폴더를 만들고 그 안에 app.ts 생성. 타입스크립트 사용시 모듈을 설치해주어야한다. npm install ts-node npm install -D typescript npm install -D tslint tsc --init 을 통해 tsconfig.json 파일 생성 후 "outDir": "dist..
-
typescript를 사용한 Vue3 프로젝트 환경 만들기Vue 2020. 12. 24. 12:08
npm install --global @vue/cli vue create my-project-name 구조 가장 기본적인 예제부터 보기 위해 HelloWorld.vue 삭제. App.vue 코드를 다음과 같이 변경한다. 안녕하세요. 최상위 components인 App.vue 입니다. 저장 후 8080에 접속 Components 이제 Home이란 component를 만들어보자. components 폴더 안에 Home.vue 파일을 만든 후 코드 작성 //Home.vue 메인 Home 페이지입니다. //App.vue 안녕하세요. 최상위 components인 App.vue 입니다. 이렇게 최상의 App.vue 안에서 Home.vue가 보일 수 있게 만든다. 다시 8080에 접속하면 다음과 같이 App.vu..