목차 Thread Safe 쓰레드와 메모리구조 쓰레드 프로세스 동기화 프로세스 스케줄링 알고리즘 프로세스 상태와 스케줄러 Inter Process Communication(프로세스간의 통신) 프로세스 메모리 영역 Process (프로세스) 참고 https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4-%E2%9A%94%EF%B8%8F-%EC%93%B0%EB%A0%88%EB%93%9C-%EC%B0%A8%EC%9D%B4 쓰레드 메모리 구조프로세스내 Code, Data, Heap 영역은 모든 쓰레드가 공유해서 사용하고 각 쓰레드 별로 Stack 영역이 생성됩니다.
목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 Component 간 통신 - PropsVue 에서는 상위 컴포넌트에서 하위 컴포넌트로 통신하기 위한 방법으로 Props 를 제공합니다. Props 를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줍니다. 하위 컴포넌트에서 전달 받은 Props 를 사용하기 위해v-bind 를 이용해 Props 이름=”상위컴포넌트의 데이터이름“ 형식으로 Props 를 매팽해 줍니다. <div id="app"> <app-header v-bind:title="appTitle"></app-header></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { appTitle: '프롭스 넘기기' } }, components: { // '컴포넌트 이름': 컴포넌트 내용 'app-header': { template: '<h1>{{title}}</h1>', props: ['title'] } } }).mount('#app')</script> Component 간 통신 - Event하위 컴포넌트에서 상위 컴포넌트와 통신하기 위한 방법으로는 Event 를 제공합니다. <div id="app"> <app-content v-on:refresh="showAlert"></app-content></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> var appContents = { template: ` <p> <button v-on:click="sendEvent">갱신</button> </p> `, methods: { sendEvent() { this.$emit('refresh'); } } } // Root 컴포넌트 Vue.createApp({ methods: { showAlert() { alert('새로고침') } }, components: { // '컴포넌트 이름': 컴포넌트 내용 'app-content': appContents } }).mount('#app')</script>
목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 ComponentComponent 란 하나의 화면을 여러개의 블록으로 나눌 수 있는 단위입니다. Component 를 통해 빠르게 화면을 구조화할 수 있고 코드 재사용성이 늘어납니다. Vue 에서는 Component 를 이용한 개발을 지원합니다. 한 페이지에서 하위 컴포넌트 생성components 내 template 을 이용하면 상위 컴포넌트에서 바로 하위 컴포넌트 내용을 정의할 수 있습니다. Vue.createApp({ components: { // '컴포넌트 이름': 컴포넌트 내용 'app-header': { template: '<h1>컴포넌트 이름</h1>' } }}).mount('#app') 정의된 하위 컴포넌트는 컴포넌트 이름을 통해 상위 컴포넌트에서 사용할 수 있습니다. <div id="app"> <app-header></app-header></div>
목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 Vue 3 Instance 와 속성Vue.createApp({ template: , data: , methods: , created: , watch: ,}); methods<div id="app"> <p>{{count}}</p> <button v-on:click="addCount">+</button></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { count: 0 } }, methods: { addCount() { this.count++; } } }).mount('#app')</script> Vue Directivev-for<div id="app"> <ul> <li v-for="item in items">{{item}}</li> </ul></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { items: ['삼성', '네이버', '인프런'] } } }).mount('#app')</script>
목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 Composition API 로 리펙토링Composition API 적용 전export default { methods: { logText() { this.pas } } data() { return { username: '', password: '', } }, methods: { submitForm() { // event.preventDefault(); const data = { username: this.username, password: this.password, } axios.post('https://jsonplaceholder.typicode.com/users/', data) .then(response => { console.log(response) }); // console.log('제출됨') } }} Composition API 적용 후export default { setup() { // data var username = ref(''); var password = ref(''); // methods var submitForm = () => { axios.post('https://jsonplaceholder.typicode.com/users/', { username: username.value, password: password.value }).then(response => { console.log(response); }) } return { username, password, submitForm } },}
목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 ReactivityProxy 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy set target 객체 property 객체내 속성 value 전달 받는 값 <div id="app"></div><!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --><script> var data = { message: 10 } function render(sth) { var div = document.querySelector('#app'); div.innerHTML = sth; } var app = new Proxy(data, { get() { console.log('값 접근') }, set(target, prop, value) { console.log('값 갱신') target[prop] = value render(value) } })</script> app.message = 'hello vue';
목차 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>
목차 Spring - 의존성 주입 방식 Spring - 스프링 컨테이너 생성과 Bean 등록 Spring - 스프링 빈 Spring - 스프링 컨테이너 의존성 주입@Autowired와 @Inject를 이용해서 의존성을 주입해준다. @Autowired와 @Inject를 붙일 수 있는 위치 생성자 Setter 필드 생성자 주입 생성자를 통해서 의존 관계를 주입하는 방법 스프링 컨테이너가 Bean 을 생성할때 객체의 생성자를 이용해 의존관계를 주입하는 방식입니다. 생성자를 통한 의존성 주입 방식은 스프링에서 가장 권장하는 방식입니다.
라이브러리 설치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
SecurityContextRepository SecurityContextRepository 는 SecurityContext 를 저장하고 검색하기 위한 저장소입니다. Spring Security 에서는 인증 후 생성된 SecurityContext 를 저장하고 관리하기 위해 SecurityContextRepository 인터페이스를 제공합니다. public 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);} Session 에 저장 - HttpSessionSecurityContextRepository HttpSessionSecurityContextRepository 는 Session 에 SecurityContext 정보를 저장합니다. @Overridepublic void saveContext(SecurityContext context, HttpServletRequest request, HttpServletResponse response) { SaveContextOnUpdateOrErrorResponseWrapper responseWrapper = WebUtils.getNativeResponse(response, SaveContextOnUpdateOrErrorResponseWrapper.class); if (responseWrapper == null) { saveContextInHttpSession(context, request); return; } responseWrapper.saveContext(context);}private void saveContextInHttpSession(SecurityContext context, HttpServletRequest request) { if (isTransient(context) || isTransient(context.getAuthentication())) { return; } SecurityContext emptyContext = generateNewContext(); if (emptyContext.equals(context)) { HttpSession session = request.getSession(false); removeContextFromSession(context, session); } else { boolean createSession = this.allowSessionCreation; HttpSession session = request.getSession(createSession); setContextInSession(context, session); }} Request 객체에 저장 - RequestAttributeSecurityContextRepository RequestAttributeSecurityContextRepository 는 Request 객체에 SecurityContext 정보를 저장하는 객체입니다.
SecurityContextPersistenceFilterSecurityContextPersistenceFilter 에서는 인증을 위해 SecurityContextRepository 에 저장된 SecurityContext 정보를 가져와 인증 처리를 하고 SecurityContext 정보를 SecurityContextRepository 에 저장합니다. SecurityContextHolderFilterSecurityContextHolderFilter 에서는 인증을 위해 SecurityContextRepository 에 저장된 SecurityContext 정보를 가져와 인증 처리를 하지만 SecurityContextPersistenceFilter 와는 다르게 SecurityContextRepository 에 저장하지는 않습니다.