글을 잠깐 혼자 써봤던 진성 프로그래머 글을 잠깐 혼자 써봤던 진성 프로그래머

1. 두 가지 방법 vue router로 데이터를 전달하는 방법은 2가지가 있습니다. query params 2. 전달하기 query {name: 'Query', query: {name: 'cat', age: 3}} params {name: 'Params', params: {name: 'dog', age:4}} main Query 프로그래밍 방식 Query 선언적 방식 params params 선언적 방식 3. 라우터 크게 수정할 부분은 없습니다. 다만, params로 전달하는 경우 props:true 로 설정하면 데이터가 props에도 전달됩니다. import VueRouter from 'vue-router' import vue from 'vue' vue.use(VueRouter) import Main..

거의다 cookies 설정이 vue 3.0 이전 버전으로 올라온게 많아서 글을 작성하게 되었습니다. import { createApp } from 'vue' import App from './App.vue' import router from './router' import VueCookies from "vue-cookies" import globalMethods from "./globalMethods" createApp(App) .use(VueCookies,{ expireTimes: "30d", secure: true, }) .use(globalMethods) .use(router) .mount("#app") 참고자료 https://reactgo.com/vue-set-cookie/

앱을 개발하다보면 session의 유효기간을 설정할 필요가 있다. 아래와 같이 설정이 가능하다. var hour = 3600000 req.session.cookie.expires = new Date(Date.now() + hour) req.session.cookie.maxAge = 100 * hour 참고사이트 및 문서 https://stackoverflow.com/questions/46630368/how-to-extend-express-session-timeout http://expressjs.com/en/resources/middleware/session.html 도움 되셨다면 하단의 광고 클릭한번 부탁드립니다~

사용자들이 공통적으로 자주 요청하게 되는 end-point의 데이터는 미리 Cache해놓으면, 다음번에는 더 빠르게 데이터를 응답해줄 수 있습니다. 그럼 Express에서는 Caching을 어떻게 진행할까요? Redis를 사용하여 진행합니다. Redis? Redis는 Remote Dictionary Server의 약자로, "key-value" 구조의 데이터를 저장하고 관리하는 비관계형 데이터베이스 관리 시스템입니다. 메모리에서 데이터를 처리하기 때문에 속도가 상당히 빠릅니다. 그래서, 이번 포스트에서는 Redis에 데이터를 저장하고 캐싱해보겠습니다. Redis 설정하기 redis 설치하기 이 부분은 인터넷 검색으로 하실 수 있으니 대체. redis 패키지 설치 yarn add redis 혹은 npm in..

목차 토큰 기반 인증 인증 타입 마치며 토큰 기반 인증 토큰 기반 인증은 쿠키나 세션을 이용한 인증보다더 보안성이 강하고 효율적인 인증 방법입니다. 쿠키 인증은 쿠키에 아이디나 암호와 같은 사용자 정보를 담아 서버로 보내게 되는데, HTTP 방식의 통신을 사용할 경우 제 3자가 해당 정보를 염탐할 수 있습니다. 세션의 경우 세션ID를 보내므로 쿠키에 비해 보안성이 높다고 볼 수 있지만 서버에 추가적인 데이터베이스 공간이 필요하다는 단점이 있습니다. 이러한 단점들을 해결할 수 있는 방법이 바로 토큰 기반 인증입니다. 토큰에는 암호화 방식과 타입 등을 나타내는 헤더, 전송할 데이터가 담긴 페이로드, 토큰 검증을 위한 서명을 각각 인코딩(해싱)한 값이 포함되어 있습니다. 데이터가 인코딩이 되어있긴 하지만 누구..

이전 포스팅 에서 Nginx 를 설치하고 환경 변수에 대해서 알아보았었습니다. 이번에는 nginx 를 활용해서 정적 파일을 제공하는 웹서버, 프록시 서버를 구축해보겠습니다. 이번 포스팅은 ubuntu 기반으로만 진행할 예정이니 참고 바랍니다. 정적 웹 페이지 서버 구축하기 이 챕터에서는 정적 파일을 제공하는 웹 서버를 구축하도록 하겠습니다. 예전에 react 기반의 정적 파일을 호스팅하다가 삽질한 경험이 있어 실습을 위한 정적 파일은 react 기반의 샘플 프로젝트로 사용하겠습니다. 먼저 샘플 프로젝트를 이용해서 빌드 파일을 만들도록 하겠습니다. (사전작업으로 nodejs 가 설치되어 있어야 합니다.) # 샘플 프로젝트 clone git clone -b demo-react-router-app-basic ..

MSA가 무엇인지 자세하게 알고싶어 개인적으로 정리하는 포스팅입니다. MSA? MicroService Architecture의 줄임말 👉🏻 마이크로서비스 아키텍처에 대한 정확한 정의는 없다. 하지만 마이크로서비스란 작고, 독립적으로 배포 가능한 각각의 기능을 수행하는 서비스로 구성된 프레임워크라고 할 수 있다. 마이크로서비스는 완전히 독립적으로 배포가 가능하고, 다른 기술 스택(개발 언어, 데이터베이스 등)이 사용 가능한 단일 사업 영역에 초점을 둔다. MSA의 등장배경 MSA와 Monolithic의 비교 출처 - https://kr.tmaxsoft.com/info/storyTView.do?seq=345 👉🏻 Monolithic Architecture는 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어..

const emailRex = /^([\w\.\_\-])*[a-zA-Z0-9]+([\w\.\_\-])*([a-zA-Z0-9])+([\w\.\_\-])+@([a-zA-Z0-9]+\.)+[a-zA-Z0-9]{2,8}$/; const emailValue = document.querySelector("#input-email-span").textContent; if(self.emailValue != null && self.emailValue.length > 1){ if(!emailRex.test(self.emailValue)){ self.emailCheck = false; emailSpan.style.color = 'red' emailSpan.textContent = "올바른 이메일을 입력해주세요." } } //..