Home
Vuex 시작하기
라이브러리 등록# 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 등록
Vue - 시작하기
라이브러리 설치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
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 정보를 저장하는 객체입니다.
Spring Security - SecurityContextPersistenceFilter 와 SecurityContextHolderFilter
SecurityContextPersistenceFilterSecurityContextPersistenceFilter 에서는 인증을 위해 SecurityContextRepository 에 저장된 SecurityContext 정보를 가져와 인증 처리를 하고 SecurityContext 정보를 SecurityContextRepository 에 저장합니다. SecurityContextHolderFilterSecurityContextHolderFilter 에서는 인증을 위해 SecurityContextRepository 에 저장된 SecurityContext 정보를 가져와 인증 처리를 하지만 SecurityContextPersistenceFilter 와는 다르게 SecurityContextRepository 에 저장하지는 않습니다.
Django - App 생성하기
목차 Django - App 생성하기 Django - 장고 시작하기 장고 앱 만들기장고 App 생성은 manage.py 가 있는 프로젝트 폴더에서 startapp 명령어를 사용합니다. startapp 명령어를 사용해 hello_world 라는 이름의 앱을 만들어 줍니다. python manage.py startapp hello_world view.py 작성하기앱 폴더 내에 views.py 파일에 다음과 같은 코드를 작성해줍니다. from django.http import HttpResponsedef hello(request): return HttpResponse("Hello, world. You're at the hello_world index.")# Create your views here.] url.py 작성하기
Django - 장고 시작하기
목차 Django - App 생성하기 Django - 장고 시작하기 장고 설치하기pip install django 장고 프로젝트 생성하기 - django-admindjango 를 설치하면 django-admin 명령어를 사용할 수 있습니다. 설치된 django-admin 에 startproject 명령어를 사용하면 새롭게 장고 프로젝트를 시작할 수 있습니다. django-admin startproject mysite 장고 서버 실행하기 - manage.py새로운 장고 프로젝트에 들어가면 manage.py 파일이 있습니다. runserver 명령어를 사용하면 장고 서버를 실행할 수 있습니다.
React Query - 캐싱 라이프 사이클
목차 React Query - 캐싱 라이프 사이클 React Query - React Devtools 사용하기 React Query - 시작하기 cache 와 stale 설정const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60, cacheTime: 1000 * 60 * 5, } },});const App = ({ Component, pageProps }: AppProps) => { return ( <QueryClientProvider client={queryClient}> <Component {...pageProps} /> </QueryClientProvider> );}; cacheReact Query 는 설정한 cacheTime 만큼 데이터를 메모리에 저장해 놓습니다. 다시 이야기 하자면 React Query 에서의 Cache 는 QueryCache 객체의 queries 배열과 queriesInMap 객체의 Query 객체가 존재하는 것을 말합니다. cache 라이프 사이클 - fresh 와 stalestale 은 React Query 에서 cache 에 저장된 데이터 상태를 의미합니다. cache 에 저장된 데이터가 staleTime 만큼은 fresh 한 상태로 있다가 그 후에는 stale 상태로 넘어갑니다. stale 상태의 데이터는 cache 에 오랫동안 저장돼 있어 refetch 가 필요한 상태임을 의미합니다. React Query 에서는 stale 상태의 데이터가 특정 조건을 만족하면 refetching 이 일어나도록 합니다.
React Query - React Devtools 사용하기
목차 React Query - 캐싱 라이프 사이클 React Query - React Devtools 사용하기 React Query - 시작하기 의존성 추가$ npm i @tanstack/react-query-devtools# or$ yarn add @tanstack/react-query-devtools ReactQueryDevtoolsimport React from 'react'import ReactDOM from 'react-dom/client'import App from './App.tsx'import { ReactQueryDevtools } from '@tanstack/react-query-devtools'import {QueryClient, QueryClientProvider } from '@tanstack/react-query'const queryClient = new QueryClient()ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <App /> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </React.StrictMode>,)
React Query - 시작하기
목차 React Query - 캐싱 라이프 사이클 React Query - React Devtools 사용하기 React Query - 시작하기 참고 공식문서 https://tanstack.com/query/v4/docs/react/quick-start 의존성 추가$ npm i @tanstack/react-query# or$ yarn add @tanstack/react-query Providerimport React from "react";import ReactDOM from "react-dom/client";import App from "./App.tsx";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";const queryClient = new QueryClient();ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider> </React.StrictMode>); useQuery