dev_0hoon

.vue로 시작하는 파일의 구조이다. 바로 표출되는게 아닌 vue로 인해 가공이 된 후에 표출 되게 된다. 이처럼 vue 확장자 파일은 싱클파일컴포넌트라고 한다. vue2는 내용 vue3는 내용 vue2는 가장 상위가 div로 감싸져야 했는데 vue3는 div가 없어도 된다. 파일 명명 규칙 //싱글파일 컴포넌트의 경우 //기존 helloWorld로 읽힘 import 라이브러리 from '라이브러리이름'import 컴포넌트 from './파일위치'import HelloWorld from './components/HelloWorld.vue'1) vue 파일의 이름과 같이 HelloWorld로 대문자가 가장 앞에오며 카멜케이스를 사용한다.2) import 구문은 라이브러리와..

https://cli.vuejs.org/ Vue CLI cli.vuejs.org 공식 사이트 이다. npm install -g @vue/cli-init-g는 글로벌을 뜻한다고 함. global은 OS레벨로 설치가 된거기에 현재 폴더가 아닌 전체 컴퓨터 내에서 사용한다는 뜻이다. npm은 노드패키지매니저vue create vue3-app 설치가 되면cd vue3-app으로 이동npm run serve로 실행한다. 여기서 serve의 의미는 패키지 내의 package.json의 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, serv..

위의 코드는 (상위 컴포넌트) root(하위 같은 레벨 컴포넌트) app-header , app-contents가 있다. 1) app-contents에서 버튼을 클릭하면 app-header의 데이터가 변경되어야 한다.2) app-contens에서 버튼 클릭하면 sendEvent()가 발생하며 emit으로 상위 컴포넌트에 메세지를 보냄3) emit을 v-on:에밋으로 설정하며 상위컴포넌트의 receive()가 발생한다.4) receive에서는 data()를 변경하게 된다. 전에 배웠듯이 reative로 인해 데이터가 변경된다.5) 이 변경된 데이터는 props를 app-header에 v-bind:프롭스명을 통해 전달되며6) app-header에는 props로 정의된 appTitle에 저장된다.7) app-..

하위 컴포넌트의 이벤트를 발생시켜 상위컴포넌트로 이동시키는 것이 emit이다. 하위에서 쪽지를 주며 '뭐좀 실행시켜줘' 하는 것으로 받아들이면 편하다.   이와 같이 아래의 emit을v-on:emit이름="상위의 함수"를 사용하면 하위 컴포넌트에서 상위컴포넌트의 이벤트를실행하도록 할 수 있다.

1) 상위 컴포넌트에서 하위컴포넌트로 데이터를 내려보낼 떄 사용하는 것은 props이다.- 정확히는 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법이다. 먼저 컴포넌트 안에 template와 같은 레벨에 props를 작성해 준다.- template : 그릴 화면- props: 상위에서 받은 매개변수 정도로 생각해면 될 것 같다.  디렉티브 v-bind를 이용해서 :props 즉 연결할 props의 이름을 적용해주고 그 값을 ="appTitle"로 담아준다. #app 내부의 데이터를 보내주고 있는 것이다. 그리고 확인해보면 1) Vue.createApp() 인스턴스를 생성하며 내부에 components에 props로 값을 보내주며 그 값을 template 내에서 사용할 수 있게 된다.

{{message}} 1. Vue.createApp()은 Vue에서 제공하는 함수이다. vue2와 비교를 해보면,  vue2: new Vue();vue3: Vue.createApp();결국 함수를 통해 객체를 만들고 있다.콘솔로 찍었을 때에도 같은 결과가 나온다.new Vue({ el: , template: , data: , methods: , created: , watch: ,}); Vue.createApp({ template: , data: , methods: , created: , watch: ,});인스턴스의 속성을 보면 결국 같은 객체를 넘겨서 볼 수 있다. 예상하자면function createApp(obj) { return new Vue(obj);}이런느낌이지 않을까? ..

https://vuejs.org/ Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org The ProgressiveJavaScript Framework 란 무엇인가? - 간단한 화면 ui 개발부터 라우팅, SSR 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크 라우팅(routing) : 페이지 간의 이동SSR(Server Side Rendering) : 서버 사이드 렌더링 - 리액트와 더불어 실무에서 가장 많이 사용되고 있는 프런트엔드 개발 라이브러리- 리액트에 비해 진입 장벽이 낮고 쉽게 배울 수 있다.- 개발 생산성이 높고 자바스크립트 지식이 크게 요구되지 않는다.- 프런트엔드, 백엔드 등 점차 직무적으로 전문화 되고 있는 상황에서 처음 개발..

스프링컨테이너스프링이 아닌 스프링컨테이너라고 하는 이유가 있다.스프링이라는 프레임워크에 가장 기반이 되는 기술은 스프링컨테이너이다.사실 같은 말로 사용해도 된다.Ioc/DI 컨테이너라고도 부른다Dependency Injection (의존관계 주입)기존의 ObjectFactory는 사실 BeanFactory이다.Bean은 그냥 자바의 컴퍼넌트 오브젝트 모델에 붙인 이름이다.그냥 오브젝트라 불러도 된다. 그래서 BeanFactory라고 불러도 된다.현재의 ObjectFactory는 다음과 같은 구조로 서비스를 호출한다. BeanFactory를 사용하려면 아래의 그림과 같은 ObjectFactory가 또 필요로 하게 된다.public class Client { public static void main(..