전체 글

모든 예제 코드는 github에 있습니다. 5. 컴포넌트 통신 방법 - 응용 같은 컴포넌트 레벨 간의 통신 방법 AppHeader → Appcontent 위 그림에서 보듯이 데이터를 전송할 길이 없다. 따라서 관계되어 있는 길을 찾아서 구현해야 한다. 같은 컴포넌트 레벨 간의 통신 방법 구현 AppContent → Root → AppHeader 즉, AppContent가 event로 Root에 데이터를 건네주고, Root가 props로 AppHeader로 데이터를 넘겨줘야 한다. Ï

모든 예제 코드는 github에 있습니다. 4. 컴포넌트 통신 방법 - 기본 컴포넌트 통신 각각의 컴포넌트는 데이터를 각자 관리한다.(유효 범위를 가진다) 상위에서 하위로는 데이터를 내려줌 (props) 하위에서 상위로는 데이터를 올려줌 (event) 컴포넌트 통신 규칙이 필요한 이유 AppHeader → LoginForm → AppFoter → NavigationBar → AppHeader 위와 같은 방향으로 데이터를 통신한다면 관계적으로도 어렵고, 버그가 발생할 시 추적하기가 어렵다. 위 그림 처럼 아래로만 데이터가 내려가는 컴포넌트 규칙이 생겼을때 데이터의 흐름을 추적할 수 있다. 상위에서 하위로 props와 하위에서 상위로 event를 보내준다. props 속성 v-bind: props 속성 이름..

모든 예제 코드는 github에 있습니다. 3. 컴포넌트 컴포넌트 소개 화면의 영역을 구분하여 개발할 수 있는 기능 재사용성을 가장 큰 핵심 영역을 구분했을때 컴포넌트 간의 관계가 생긴다. 컴포넌트 등록 인스턴스를 생성하면 기본 Root컴포넌트가 된다. 전역 컴포넌트 전역적으로 사용할 수 있는 컴포넌트이다. 실제 서비스를 할때는 전역 컴포넌트를 쓸일이 거의 없다. 위에서 배운 컴포넌트 관계로써 app 하위에 app-Header와 app-content가 있다. Vue.component('컴포넌트이름', 컴포넌트 내용) 지역 컴포넌트 등록 지역 컴포넌트에서 key값이 복수인 이유는 컴포넌트는 하나가 아니라 여러개인 경우가 많이 때문이다.(method도 동일한 이유) components: { /..

모든 예제 코드는 github에 있습니다. 2. 인스턴스 인스턴스 소개 인스턴스란 Vue로 개발할때 필수로 생성해야 하는 단위라고 생각하면 된다. new Vue()로 생성하면 변수에 인스턴스를 할당할 수 있다. {{message}} 인스턴스와 생성자 함수 생성자 함수 생성자 함수를 작성함으로써 개체를 정의합니다. new 키워드를 사용하여 개체의 인스턴스를 만듭니다. 개체 형식을 정의하기 위해 개체 이름, 속성, 메소드를 지정하는 함수를 만들어야 한다. 이때 중요한 것은 함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해 this를 사용해야 한다. 즉, 함수를 이용해 인스턴스를 생성하는 방법을 생성자 함수라고 한다. function Person(name, age){ this.name = name; t..

모든 예제 코드는 github에 있습니다. 1. Vue.js 소개 MVVM 모델에서의 Vue MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리 화면에 나타나는 것이 HTML이며, DOM을 이용해서 JS로 조작할 수 있다. DOM Listeners로 사용자가 발생시킨 이벤트를 청취할 수 있고, JS에서의 특정 로직을 실행시킨다. JS의 데이터가 변경되었을때, Data Bindings를 거치게 되는데, 이걸 이용해 화면에 보여주게 된다. 기존 웹 개발 방식(HTML, JavaScript) 프레임워크를 사용하지 않고 웹을 구현할 수 있는 방법은 HTML, CSS, JavaScript로 가능하다. ! + tab을 하면 기본 html 템플릿이 만들어 진다. 위와 같이 DOM을 조작해 텍스트를 넣을 수 있..

모든 예제 코드는 github에 있습니다. 0. 개발환경설정 프로그램 설치 Chrome Visual Studio Code Node.js Vue.js Devtools 수업 코드 안내 예제코드 VSCode 플러그인 설치 및 설정 Vetur .vue 파일에 대한 코드를 만들어주는 기능 및 디버깅, 자동 완성 등 지원 Night Owl 테마 Material Icon Theme 아이콘 테마 Live Server 에디터 에서 저장을 하는 즉시 브라우저에서 반영이 됨. ESLint lint란 소스 코드에 문제가 있는지 탐색하는 작업이며, linter는 이 작업을 도와주는 소프트 웨어 자바스크립트 진영의 오픈소스로 확장되고 있는 정적 분석 도구로, 정적 분석 도구란 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 ..

자바스크립트에서 원하는 날짜의 요일 포맷으로 추출해보자. 자바스크립트에는 요일을 따로 추출하는 함수가 존재하지 않는다. 따라서 Date 객체를 통해 직접 구현해야 한다. function getWeek(a, b) { const date = new Date(2016, a - 1, b); const week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; return week[date.getDay()]; } 위의 코드로 원하는 날짜의 요일을 가져올 수 있다. 이때 date.getDay()가 요일을 반환하는데 이때 일요일(0) ~ 토요일(6)의 순서대로 반환하기 때문..

함수 명칭과 같이 조건을 설정하여 조건에 맞는 값을 가지고 새로운 배열을 만드는 것입니다. 새로운 배열을 만드는 것이기 때문에 원래 배열을 전혀 변경하지 않는다. 함수 구문 array.filter(callbackFunction(element, index, array), thisArg); array.filter((element, index, array) ⇒ 조건, thisArg); 매개변수 element : 배열에 있는 값 Index : 배열 인덱스 array : 사용되는 배열 thisArg : filter에서 사용될 this 값(선택적으로 사용하지 않는다면 undefined) Callback 함수 실행 시 this로 사용되는 값 즉, 호출될 때 그 값은 callback의 this 값으로 전달됩니다. 그 ..

Enum 필드로 클래스와 메소드를 넣어 보는 예제입니다. 주문, 결제, 종료라는 기능이 있다고 해봅시다. 원하는 기능을 입력했을때, 그 기능에 맞는 메소드를 실행시키도록 하겠습니다. Field에 Class 넣기 RunController package enumfield.ex.controller; public interface RunController { void run(); } OrderContoller package enumfield.ex.controller; public class OrderController implements RunController { @Override public void run() { System.out.println("주문을 받습니다."); } } PaymentControll..

이 글은 jojoldu님의 글인 [AOP 정리](https://jojoldu.tistory.com/69) 글을 보고 정리한 글입니다. 문제 상황 게시판 서비스와 유저 서비스가 있다고 가정한다. Spring boot + JPA + H2 + Gradle로 구현한다. 게시글 전체조회, 유저 전체조회 기능을 구현한다. 해당 기능들의 실행 시간이 얼마나 걸리는지 확인한다. build.gradle plugins { id 'org.springframework.boot' version '2.3.0.RELEASE' id 'io.spring.dependency-management' version '1.0.9.RELEASE' id 'java' } gro..