Racon

개요 Cookie와 LocalStorage다시 한번 확인을 해봐야 하는 계기가 생겼다. Nuxt를 개발 할때 사용자 인증 유무에 따라 Login페이지 강제 이동을 시켜야 할때가 있었는데 Vue에서는 Vuex를 사용하여 LocalStorage에 사용자 정보를 입력하여 MiddleWare에서 처리를 했다. 하지만 Nuxt에서는 SSR처리를 하다보니 상세 페이지 및 로그인외 페이지에 직접 접근을 하게 되면 화면이 보였다가 Login페이지로 이동하였다. 이유는 Vue에서는 CSR기반이다 보니 바로 LocalStorage에 접근을 하지만 Nuxt에서는 Server단계에서 LocalStorage에 접근을 못하니 이러한 문제가 생겼다. 추후에 Nuxt에 ServerMiddleWare가 있다는 것은 알았지만 한번더 상..

뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수있는 형태의 HTML로 변환해 주는 속성 템플릿 속성을 사용하는 방법 ES5에서 뷰인스턴스의 template 속성 사용 ``` ``` !Tip render() 사용자가 볼수 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다. 변환된 render() 함수는 최종적으로 사용잦가 볼 수 있는 화면을 그리는 역할을 합니다. 그리고 변환 과정에서 뷰의 반응성이 화면에 더해집니다. 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인딩 HTML 화면 요소를 뷰 인스..

War, Jar 차이 Archive 직역 : 보관소 서버 에서의 뜻 : 참고용 데이터 보관소 Applet 플러그인의 하나로서 전용 위젯 엔진이나 더 큰 프로그램 범위 내에서 실행되는 특정한 작업을 수행하는 조그마한 응용 프로그램을 말한다. What is JAR. Java Archive Zip 파일 형식 기반으로 압축을 풀지 않아도 사용 가능 하며 파일 사이즈도 작다 .jar 확장자 파일에는 Class와 같은 Java 리소스와 속성 파일, 라이브러리 및 액세서리 파일이 포함되어 있습니다. JAR 파일은 원하는 구조로 구성이 가능하며 JDK(Java Development Kit)에 포함하고 있는 JRE(Java Runtime Environment)만 가지고도 실행이 가능합니다. JAR 파일은 서버가 포함된 ..

nginx WebSocket, Proxy Error hop by hop 헤더란? Hop-By-Hop 이란? "end-to-end 헤더"와 달리 현재 요청을 처리하는 프록시에서 처리 및 소비하도록 설계된 헤더입니다. 요청이 끝날 때까지 요청에 표시되도록 설계되었습니다 Http Basic document Http document Hop-by-Hop document Nginx Hop-By-Hop Socket Nginx Hop by hop Setting 본인이 직접 사용을 하지 않았다고 해도 pm2, ws,needle, rxjs, systeminformation, caniuse-lite, js-git등 생각보다 많은 모듈 안에서 webSocket이 사용되고 있다. 따라서 WebSocket사용에 따른 Nginx에..

Function VS Arrow Function 공부 하게 된 이유 Vue2 Vuex에서 Cookie에 접근을 할려고 했으나 arrow function 특성상 "this"가 window 기준이 아닌 상위 scope를 가리키게 되어 Cookie에 접근이 안되는 불상사가 생기게 되어 차이를 알고자 공부하게 되었습니다. Function 전통적인 함수표현(function) function fun(){ }Arrow Function 화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다. 사용법 일반 사용법 // 1. param => expression // 2. (..

정의 및 용어 설명 AOP(Aspect-Oriented Programming)는 프로그램 구조에 대한 또 다른 사고 방식을 제공하여 객체 지향 프로그래밍(OOP)을 보완합니다. OOP에서 모듈화의 핵심 단위는 클래스인 반면, AOP에서 모듈화의 단위는 측면입니다. Aspect는 여러 유형과 객체를 가로지르는 관심사(트랜잭션 관리 등)의 모듈화를 가능하게 합니다. (이러한 문제는 종종 AOP 문헌에서 "crosscutting" 문제라고 합니다.) Spring FrameWork에서 AOP AOP 용어 설명 영문을 구글 번역이나 직역으로 하면 이해 하기 어렵기 때문에 영문을 보고 이해한 내용으로 해석 하였습니다. 필히 참고시 영문 문서를 확인해 주세요 Aspect A modularization of a con..

메소드 안에서 Vue2 Component 추가 하기 Vue2를 접한지 3개월 될때 하나의 프로젝트를 하였습니다. 여러 위치에(3군데) 여러개의 버튼을 사용자 취향에 맞게 배치 하는 작업이였는데 이전까지 Javascript나 Jquery로 만 FrontEnd를 작업 하였기에 똑같은 생각으로 작업을 시작 하였습니다. 하지만 Component를 읽고 그안에 prop를 입력하여 배치 하는것은 Methods 안에서는 생각 보다 방식이 많이 달랐습니다. 그래서 그 당시에는 각 위치에(3군데)버튼을 다 Component를 추가 하였고 v-if로 컨트롤 하였습니다. 다행이 테스트 및 실사용에 있어서 무리가 없었지만 이 찝찝한 코드는 수정해야할 필요가 있었고 여러 문서를 찾고 나서야 Methods안에서 Component..

Spring Boot Api Server Spec Java : Temurin_11 Spring Boot : 2.6.7 Security spring-security-web : 5.6.3 spring-security-config : 5.6.3 View spring-boot-starter-thymeleaf : 2.7.2 DB mysql-connector-java : 8.0.29 mybatis-spring-boot-starter : 2.2.2 HikariCP : 5.0.1 log4jdbc-log4j2-jdbc4.1 : 1.16 AWS spring-cloud-starter-aws : 2.2.6.RELEASE aws-java-sdk-ses : 1.12.276 테스트 spring-boot-starter-test : ..

상시 업데이트 예정 기능 axios 비동기 통신 (Jquery의 'Ajax'와 같은 동작) Axios Document core-js JavaScript용 모듈식 표준 라이브러리. 2021년까지 ECMAScript용 폴리필 포함: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript 제안, 일부 교차 플랫폼 WHATWG/W3C 기능 및 URL과 같은 제안. 필요한 기능만 로드하거나 전역 네임스페이스 오염 없이 사용할 수 있습니다. Core-js Document lodash Array, Object, Json 등 다양한 함수 제공 Lodash Document vue-daum-postcode..

Vue.js 프로젝트 생성 Vue-CLI 프로젝트 생성 Vue-cli 설치 npm install -g @vue/cli 버전 확인 vue --version 프로젝트 생성 vue create frontend 'frontend' : 프로젝트 이름 현재 Default(Vue3) 선택 후 설치 프로젝트 이동 cd frontend 프로젝트 실행 npm run serve Vue3 + TypeScript를 사용시 Vue3 프로젝트 생성후 "vue add typescript" 명령어를 입력 하고 절차에 따르면된다. 1.번 절차를 따르면 ts로 자동으로 변환 되어 사용가능하다 GiT Push Vue.js 설치시 Git File이 생성 되므로 현재와 같이 모듈로서 Vue.js를 사용할 경우 Vue.js에서 Git 숨긴 파일..