Archive: 2024

2024
0
SpringSpring Boot

Spring - M1 맥북에서 Embeded Redis 사용하기

목차 Spring - M1 맥북에서 Embeded Redis 사용하기 Spring - Embeded Redis 사용하기 참고 https://github.com/ozimov/embedded-redis https://github.com/redis/redis-hashes M1 Mac 에서 Embedded Redis 사용시 에러M1 맥북에서 Embedded Redis 를 그냥 사용하려고 하면 다음과 같이 redis server 를 시작할 수 없다는 에러가 발생합니다. Caused by: java.lang.RuntimeException: Can't start redis server. Check logs for details. Redis process log: at redis.embedded.AbstractRedisInstance.awaitRedisServerReady(AbstractRedisInstance.java:70) ~[embedded-redis-0.7.3.jar:na] at redis.embedded.AbstractRedisInstance.start(AbstractRedisInstance.java:42) ~[embedded-redis-0.7.3.jar:na] Embedded Redis 라이브러리 확인Embedded Redis 라이브러리에서 제공해주는 Redis 아키택처 정보들을 확인하면 M1 맥북에 해당하는 aarch64 용 Redis 를 지원하지 않습니다. 따라서, M1 에서 Embedded Redis 를 사용하기 위해서는 M1 용 아키택처에 맞게 Redis 를 새롭게 빌드해서 Embedded Redis 라이브러리가 띄울 수 있게 제공해야 합니다.

0
CS운영체제

쓰레드와 메모리구조

목차 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 영역이 생성됩니다. 프로세스 메모리 구조

0
FrontendVue3

Vue3 - Component 간 통신

목차 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>

0
FrontendVue3

Vue3 - Component

목차 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>

0
FrontendVue3

Vue3 - Instance

목차 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>

0
FrontendVue3

Vue3 - Composition API

목차 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 } },}

0
FrontendVue3

Vue3 - Reactivity

목차 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';

0
FrontendVue3

Vue3 - 시작하기

목차 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>

0
FrontendVue

Vue - Router

라이브러리 설치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>

0
SpringSpring Core

Spring Core - 컴포넌트 스캔과 의존성 주입

목차 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 이름") 으로 등록하면 됩니다.

0
SpringSpring Core

Spring Core - 의존성 주입 방식

목차 Spring Core - 의존성 주입 방식 Spring Core - 컴포넌트 스캔과 의존성 주입 Spring Core - BeanDefinition Spring Core - 스프링 빈 Spring Core - 스프링 컨테이너 생성과 Bean 등록, 의존성 주입 Spring Core - 스프링 컨테이너 스프링 의존성 주입 (Dependency Injection) 의존성 주입은 객체간의 의존성을 관리하기 위한 디자인 패턴 한 객체가 직접 의존성하는 다른 객체를 생성하거나 관리하지 않고, 프레임워크와 같은 외부로부터 필요한 의존성을 주입받는방식 입니다. 이를 통해 객체간 의존성을 수정하기 위해 직접 코드를 수정할 필요가 없어 객체간 결합도 를 낮춰줍니다. 스프링에서는 스프링 컨테이너가 객체의 의존성을 관리하고 주입해줍니다. 이때, 스프링 컨테이너가 의존성을 관리 및 주입을 위해 관리하는 객체들을 스프링 Bean 이라 부릅니다. 스프링에서 의존성 주입을 위해서는 우선, 스프링 컨테이너에 객체들을 스프링 Bean 으로 등록해야 합나다. 의존성 주입은 스프링 Bean 으로 등록된 객체들을 기준으로 주입이 이뤄집니다. 스프링에서 의존성 주입을 위해 @Autowired와 @Inject 를 사용하고 생성자, Setter, 필드, 메소드 에 붙일 수 있습니다. 위 어노테이션이 객체의 의존성을 주입할때는 타입을 기준으로 주입합니다.

0
FrontendVite

Vite 환경에서 tsconfig Path 사용하기

라이브러리 설치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 : {},});

0
FrontendVue3

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 등록

0
FrontendVue

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