ㅇㄷㄴㅋ

Nextjs(React SSR) 트라이 해보다가, Vue3 로 새로 프로젝트를 시작할 일이 있어서 새롭게 시작해봤다. npm create vue@latest (`24.01.04 기준, "vue:3.4.6" 이 설치 되었다) 설치 중 "vue-router" 와 "pinia" 설치는 yes, 나머지는 No 를 선택했다. 추후에는 Test 도구, ESLint 등도 추가해봐야할거 같다. create 가 완료되면, devDependencies 로 "vite" 가 포함되어있고, vite.config.js 등 관련 설정파일들도 추가되어있다. 기존엔 CDN 방식을 사용했기때문에 Webpack 등 빌드?개발? 도구에 대한 분석이 없었기에, Vue3 하면서 이런 도구는 처음 사용해보는 것 같다. (.vscode 폴더가 생..

Express 앱 생성 및 Vuejs 관련 스크립트를 첨부하는 과정은 생략한다. app.js 는 아래와 같이 구성하였다. const createError = require('http-errors'); const express = require('express'); const path = require('path'); const cookieParser = require('cookie-parser'); const logger = require('morgan'); // const indexRouter = require('./routes/index'); const app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.u..

React 와 Vuejs 사이에서 고민하다가, Vuejs 로 구성된 페이지를 접할 기회가 생겨 Vuejs 로 샘플을 생성해보고자 한다. Intellij 같은 경우 vue-cli 로 프로젝트를 구성해주기 때문에 우선은 express 앱 생성후 spa 로 구성하고자 한다. Express 로 앱을 구성할때, 일반적인 라우팅 전략은 아래와 같다: resources 주소에 매칭되면, 해당 resource 반환 미들웨어로 등록된 router 의 handle 주소들을 대조하여, 매치되는 handler 로 연결 처리할 router 를 발견못하면, 404 Throw Exception Handler 에 의해 Error page 혹은 data 반환 그러나 이번엔 SPA 로 구성할 것이기 때문에 아래와 같이 하고자 한다. r..

jQuery 내부 함수를 추가하여, form 요소의 값들을 Object 로 받을수 있게 함. 보통 form data 를 확인할땐 "$('form').serialize();" 를 사용하여 query-string 으로 받아보지만, 경우에따라 Object 로 확인 및 편집이 필요할 때가 있다. 그럴경우 사용. jQuery.fn.serializeObject = function() { var obj = null; try { if (this[0].tagName && this[0].tagName.toUpperCase() === "FORM") { var arr = this.serializeArray(); if (arr) { obj = {}; jQuery.each(arr, function() { obj[this.name..

jQuery.ajax 를 통한 비동기 통신이 필요할때 애용하는 코드. 다운로드, 업로드 퍼센트 콜백 받을 수 있고, Promise 를 통한 동기 방식도 지원한다( 물론 async 옵션이 더 편하긴 하다 ). 필요에따라 ContentType 부분 수정 필요. function ajaxReq(type, url, data, success, error){ var deferred = $.Deferred(); var option = {}; option['type'] = type; option['url'] = url; if(data && typeof data !== 'string'){ option['data'] = JSON.stringify(data); } option['contentType'] = 'applicati..