Home

2024
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 - 시작하기 ✅ Vue3 에서의 반응형 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy Vue3 에서는 데이터의 변경을 감지하고 자동으로 UI 를 업데이트 해주기 위해 Javascript 의 Proxy 개념을 도입 했습니다. 객체생성시 Proxy 객체로 만듦으로써 Vue 에서는 해당 객체의 접근 및 변경을 감지하고 변경된 내용을 UI 에 반영해줄 수 있게 됐습니다. Proxy 객체 생성 예제<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('값 접근') }, // target: 객체, property: 객체내 속성, value: 전달 받는 값 set(target, prop, value) { console.log('값 갱신') target[prop] = value render(value) } })</script> Proxy 객체로 생성된 app 의 내용을 변경하게 되면 콘솔에서 “값 갱신” 이라는 로그가 뜨게 됩니다.

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> 라우터 이동 router-linkvue 프로젝트내에서 다른 페이지로 이동할때 a 태그를 이용하게 되면 전체 페이지가 리로딩 되게 됩니다. SPA 환경에서는 초기 로딩시 Web 관련 리소스를 다 가져오는데 전체 페이지 리로딩이 발생하면 많은 비효율을 가져오게 됩니다. 다행히 vue-router 가 적용된 프로젝트에서 다른 경로로 이동하고 싶을 경우에는 a 태그 대신 router-link 를 사용하면 화면 리로딩 없이 SPA 내에서 페이지 전환이 이뤄지므로 문제가 발생하지 않습니다.

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