목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance [Vue3] - Reactivity (반응형) Vue3 - 시작하기 CDN 으로 시작하기<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app">{{ message }}</div><script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')</script>
라이브러리 설치npm install vue-router import {createWebHistory, createRouter} from "vue-router";const routes = [ { path: "/", name: "home", component: () => import('../pages/ChatRoom.vue') }]const router = createRouter({ history: createWebHistory(), routes})export default router; import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from "./router/router.ts";createApp(App) .use(router) .mount('#app') <script setup lang="ts"></script><template> <router-view></router-view></template><style scoped>.logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms;}.logo:hover { filter: drop-shadow(0 0 2em #646cffaa);}.logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa);}</style> 라우터 이동 router-linkvue 프로젝트내에서 다른 페이지로 이동할때 a 태그를 이용하게 되면 전체 페이지가 리로딩 되게 됩니다. SPA 환경에서는 초기 로딩시 Web 관련 리소스를 다 가져오는데 전체 페이지 리로딩이 발생하면 많은 비효율을 가져오게 됩니다. 다행히 vue-router 가 적용된 프로젝트에서 다른 경로로 이동하고 싶을 경우에는 a 태그 대신 router-link 를 사용하면 화면 리로딩 없이 SPA 내에서 페이지 전환이 이뤄지므로 문제가 발생하지 않습니다.
목차 [Spring Core] - 의존성 주입 방식 [Spring Core] - 컴포넌트 스캔과 의존성 주입 [Spring Core] - BeanDefinition [Spring Core] - 스프링 빈 [Spring Core] - 스프링 컨테이너 생성과 Bean 등록, 의존성 주입 [Spring Core] - 스프링 컨테이너 컴포넌트 스캔과 의존성 주입스프링에서는 설정 정보 없이도 스프링 Bean 을 자동으로 등록하는 기능을 제공합니다. 또한, 등록된 Bean 들의 의존 관계도 자동으로 주입하는 기능도 제공합니다. 스프링은 @ComponentScan 을 이용해 스프링 Bean 을 자동으로 등록하고, @Autowired와 @Inject 를 사용해 의존 관계를 자동으로 주입해 줍니다. 1. 컴포넌트 스캔@ComponentScan 은 @Component 가 붙은 모든 클래스들을 스프링 Bean 으로 자동 등록합니다. 스프링 Bean 등록시 기본적으로 클래스명과 동일하며 맨 앞글자만 소문자로 등록됩니다. 만일, 별도의 이름을 지정하고 싶으면 @Component("Bean 이름") 으로 등록하면 됩니다.
목차 [Spring Core] - 의존성 주입 방식 [Spring Core] - 컴포넌트 스캔과 의존성 주입 [Spring Core] - BeanDefinition [Spring Core] - 스프링 빈 [Spring Core] - 스프링 컨테이너 생성과 Bean 등록, 의존성 주입 [Spring Core] - 스프링 컨테이너 🔎 의존성 주입 (Dependency Injection) 의존성 주입은 객체간의 의존성을 관리하기 위한 디자인 패턴 한 객체가 직접 의존성하는 다른 객체를 생성하거나 관리하지 않고, 프레임워크와 같은 외부로부터 필요한 의존성을 주입받는 방식입니다. 이를 통해 객체간 의존성을 수정하기 위해 직접 코드를 수정할 필요가 없어 객체간 결합도 를 낮춰줍니다. 📌 스프링에서의 의존성 주입스프링에서는 스프링 컨테이너 가 객체의 의존성을 관리하고 주입해줍니다. 이때, 스프링 컨테이너가 의존성을 관리 및 주입을 위해 관리하는 객체들을 스프링 Bean 이라 부릅니다. 스프링에서 의존성 주입을 위해서는 우선, 스프링 컨테이너에 객체들을 스프링 Bean 으로 등록해야 합니다. 의존성 주입은 스프링 Bean 으로 등록된 객체들을 기준으로 주입이 이뤄집니다. 스프링에서 의존성 주입을 위해 @Autowired와 @Inject 를 사용하고 생성자, Setter, 필드, 메소드 에 붙일 수 있습니다.
라이브러리 설치npm install vite-tsconfig-paths import react from "@vitejs/plugin-react";import {defineConfig} from "vite";import EnvironmentPlugin from "vite-plugin-environment";import tsconfigPaths from "vite-tsconfig-paths";// https://vitejs.dev/config/export default defineConfig({ plugins: [ react(), tsconfigPaths(), ], resolve: { alias: {}, }, build : { outDir: "./build", }, server : { port: Number(process.env.PORT || 3000), }, define : {},});
라이브러리 등록# Vue 3 npm install vuex --save# Vue 2npm install vuex@3.6.2 --save Store 생성 Vue 2 에서 Store 생성 const Store = new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {},}) Vue 3 에서 Store 생성 import { createStore } from "vuex";export default createStore({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {},}); Store 등록 Vue 2 에서 Store 등록
라이브러리 설치npm install vue -g 프로젝트 생성vue create <생성할 프로젝트 이름> Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features Vue CLI v5.0.8? Please pick a preset: Manually select features? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ◉ Babel ◉ TypeScript ◯ Progressive Web App (PWA) Support❯◉ Router ◉ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing Vue CLI v5.0.8? Please pick a preset: Manually select features? Check the features needed for your project: Babel, TS, Router, Vuex, Linter? Choose a version of Vue.js that you want to start the project with 3.x? Use class-style component syntax? No? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes? Use history mode for router? (Requires proper server setup for index fallback in production) Yes? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files? Save this as a preset for future projects? (y/N) n
목차 [Spring Security] - SecurityContextRepository [Spring Security] - SecurityContextPersistenceFilter 와 SecurityContextHolderFilter 🔎 SecurityContextRepository SecurityContextRepository 는 SecurityContext 를 저장하고 검색하기 위한 저장소입니다. Spring Security 에서는 인증 후 생성된 SecurityContext 를 저장하고 관리하기 위해 SecurityContextRepository 인터페이스를 제공합니다. SecurityContextRepository 인터페이스 구현을 통해 인증 객체(SecurityContext) 를 Request 객체나 Session 에 저장하거나 아니면 Redis 와 같은 별도의 저장소에 저장할 수 있습니다. SecurityContextRepository.javapublic interface SecurityContextRepository { @Deprecated SecurityContext loadContext(HttpRequestResponseHolder requestResponseHolder); default DeferredSecurityContext loadDeferredContext(HttpServletRequest request) { Supplier<SecurityContext> supplier = () -> loadContext(new HttpRequestResponseHolder(request, null)); return new SupplierDeferredSecurityContext(SingletonSupplier.of(supplier), SecurityContextHolder.getContextHolderStrategy()); } // 변경된 보안 컨텍스트를 저장합니다. 주로 사용자가 인증되면 새로운 보안 컨텍스트를 저장하는 데 사용됩니다. void saveContext(SecurityContext context, HttpServletRequest request, HttpServletResponse response); // 현재 요청에서 보안 컨텍스트가 존재하는지 확인합니다. boolean containsContext(HttpServletRequest request);} 1. Session 에 저장 - HttpSessionSecurityContextRepository HttpSessionSecurityContextRepository 는 Session 에 SecurityContext 정보를 저장합니다.
목차 [Spring Security] - SecurityContextRepository [Spring Security] - SecurityContextPersistenceFilter 와 SecurityContextHolderFilter 기존에 인증을 하고 SecurityContext 를 생성하면 로그인 Session 이 유지가 됐는데, 새 프로젝트를 개발하면서 Reqeust 가 끝나면 인증이 풀리는 것을 알게 됐습니다. Spring Security 5.7 버전 이상부터는 SecurityContextPersistenceFilter 가 Deprecated 되고 SecurityContextHolderFilter 로 대체돼면서 이런 문제가 생긴거 같아 내용을 정리했습니다. 🔎 SecurityContextPersistenceFilterSecurityContextPersistenceFilter 에서는 인증을 위해 SecurityContextRepository 에 저장된 SecurityContext 정보를 가져와 인증 처리를 하고 요청이 종료되면 SecurityContext 정보를 SecurityContextRepository 에 저장합니다. SecurityContextPersistenceFilter 에서는 saveContext 를 이용해 SecurityContext 를 저장합니다. SecurityContextPersistenceFilter.javaprivate void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException { ... // SecurityContext 를 가져옵니다. SecurityContext contextBeforeChainExecution = this.repo.loadContext(holder); try { this.securityContextHolderStrategy.setContext(contextBeforeChainExecution); if (contextBeforeChainExecution.getAuthentication() == null) { logger.debug("Set SecurityContextHolder to empty SecurityContext"); } else { if (this.logger.isDebugEnabled()) { this.logger .debug(LogMessage.format("Set SecurityContextHolder to %s", contextBeforeChainExecution)); } } chain.doFilter(holder.getRequest(), holder.getResponse()); } finally { SecurityContext contextAfterChainExecution = this.securityContextHolderStrategy.getContext(); this.securityContextHolderStrategy.clearContext(); // SecurityContext 를 저장합니다. this.repo.saveContext(contextAfterChainExecution, holder.getRequest(), holder.getResponse()); request.removeAttribute(FILTER_APPLIED); this.logger.debug("Cleared SecurityContextHolder to complete request"); }} 🔎 SecurityContextHolderFilterSecurityContextHolderFilter 에서는 인증을 위해 SecurityContextRepository 에 저장된 SecurityContext 정보를 가져와 인증 처리를 진행합니다. 하지만 SecurityContextPersistenceFilter 와는 다르게 SecurityContextRepository 에 저장하지는 않습니다.