하빈H

뷰 라우터란? 뷰 라이브러리를 이용하여 싱글 페이지 어플리케이션을 구현할 때 사용하는 라이브러리 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM 방식이 있다. 그 중 CDN 방식으로 설치한 예제는 아래와 같다. 해당 소스를 Open with Live Server로 실행시켜 보면 Vue 인스턴스에 VueRouter가 잘 주입이 된 걸 확인할 수 있다. ($route)

최근에 회사와 개인 프로젝트에서 Lombok을 사용하게 되었다. 단순히 @Data 어노테이션으로 getter, setter 코드 작성하는 걸 줄여주는 것만 있는 줄 알았는데, 생각보다 유용한 기능이 더 많았다. 편리한 만큼 잘못 사용하기도 쉽기도 하니 각 어노테이션별 특징은 더 알아보고 업데이트해야될 것 같다. Lombok이란? 여러가지 어노테이션을 제공하여 반복되는 소스코드를 컴파일 과정에서 자동으로 생성해주는 Java 라이브러리이다. @Data 사용 방법 : https://projectlombok.org/features/Data @Data projectlombok.org @NoArgsConstructor, @AllArgsConstructor 사용 방법 : https://projectlombok.org..

같은 컴포넌트 레벨 간 통신 같은 컴포넌트 레벨 간 데이터를 전달하기 위해서는 상위 컴포넌트를 통해야한다. 아래 그림과 같이 appContent라는 하위 컴포넌트에서 appHeader라는 하위 컴포넌트로 데이터를 전달하려면 appContent에서 Root로 Event를 발생시키고 Root에서 Props 속성을 내려주는 방식으로 구현하면 된다. 예시 appContent에서 Event로 10을 전달해주면 Root의 num 속성에 세팅하고, 이를 propsdata라는 Props 속성으로 appHeader에 데이터를 전달해주었다.

컴포넌트 통신 방식 프롭스(Props) 속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줌 이벤트(Event) 발생 : 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올려줌 Props 예시 상위 컴포넌트의 data가 바뀔 경우 하위 컴포넌트의 props도 바뀐 데이터가 반영된다.(Reactivity) 프롭스 속성 이름(아래 예시에서 'propsdata')는 여러 객체에서 동일하게 작성해도 구분이 된다. Event 예시

Vue란? MVVM((model-view-viewmodel) 패턴의 뷰모델(viewmodel) 레이어에 해당하는 화면 단 라이브러리이다. 뷰 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다. 뷰 인스턴스 생성 예시 아래와 같이 코드를 작성하고 VS Code의 Open With Live Server 활용해서 띄운 후 개발자도구로 열어보면 데이터 메시지가 잘 뜬 것을 확인할 수 있다. 인스턴스 속성 el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) template : 화면에 표시할 요소 (HTML, CSS 등) data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메소드 created : 뷰의 라이프 사이..

1. Chrome https://www.google.com/intl/ko/chrome/ Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com 2. Visual Studio Code https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform ..

트리거란? 테이블에 DML문(INSERT, UPDATE, DELETE)의 이벤트가 발생하면 실행되는 코드이다. 예를 들어 특정 테이블에 DELETE문이 수행되면 자동으로 다른 곳에 데이터를 INSERT 해주도록 설정해두는 것이 대표정인 용도이다. 트리거 생성 DROP TRIGGER IF EXISTS myTrigger; DELIMITER $$ CREATE TRIGGER myTrigger -- 트리거 이름 AFTER DELETE -- 삭제후에 작동하도록 지정 ON trigger_table -- 트리거를 부착할 테이블 FOR EACH ROW -- 각 행마다 적용시킴 BEGIN SET @msg = '가수 그룹이 삭제됨' ; -- 트리거 실행시 작동되는 코드들 END $$ DELIMITER ; 위와 같이 트리거를..

뷰(View) 란? 뷰는 데이터베이스 개체 중 하나로, 테이블처럼 데이터를 가지고 있지는 않지만 SELECT 문으로 만들어져 있기 때문에 뷰에 접근하면 SELECT가 실행되고 그 결과를 볼 수 있다. 쉽게 '가상의 테이블'이라고 표현할 수 있다. 뷰를 사용하는 이유 뷰를 만들면 테이블과 동일하게 접근이 가능한데 굳이 뷰를 사용하는 이유 중 하나는 보안이라고 말할 수 있다. 개인정보 등 중요한 정보를 제외하고 뷰를 만들면 접근하는 데이터에 권한을 제한할 수 있다. 또한, 복잡하고 자주 사용하는 SELECT 쿼리를 뷰로 만들어두면 보다 간결한 쿼리를 작성할 수 있다. 뷰 생성 CREATE VIEW v_memberbuy AS SELECT B.mem_id, M.mem_name, B.prod_name, M.add..

JOIN이란 두 개의 테이블을 묶어서 하나의 결과로 보여주는 것을 말한다. 두 테이블의 조인을 위해서는 테이블이 일대다 관계로 연결되어야 한다. 예를 들면, 어느 쇼핑몰의 회원은 유니크한 아이디를 갖는다. 그 회원은 상품 구매는 여러번 할 수 있어서 구매 이력은 여러개를 갖는다. 따라서 쇼핑몰의 회원별 구매 이력은 회원 테이블과 구매이력을 조인하여 보여줄 수 있다. 내부 조인 (INNER JOIN) 내부 조인의 경우 값이 있는 데이터를 조인하여 보여준다. 내부 조인의 형식은 다음과 같다. INNER JOIN의 경우 그냥 JOIN이라고만 써도 INNER JOIN이라고 인식한다. SELECT 열 목록 FROM 테이블1 INNER JOIN 테이블2 ON 조인 조건 WHERE 검색 조건 예제 USE market..

1. 데이터 형식 데이터 형식을 잘 활용하면 데이터베이스를 더 효율적으로 구성할 수 있다. 정수형 정수형의 크기와 범위는 다음과 같다. 데이터 형식 바이트 수 숫자 범위 TINYINT 1 -128 ~ 127 SMALLINT 2 -32,768 ~ 32,767 INT 3 약 -21억 ~ 21억 BIGINT 4 약 -900경 ~ 900경 UNSIGNED 예약어를 사용하면 범위가 0부터 시작되어 양수로 더 넓은 범위의 수를 사용할 수 있다. 예를 들면, TINYINT는 -128 ~ 127까지 표현할 수 있는 데이터 형식인데, UNSIGNED TINYINT의 경우 0 ~ 255까지 사용할 수 있다. 문자형 CHAR는 길이가 고정되어있는 문자형으로, CHAR(10) 과 같이 사용할 수 있다. 처음부터 길이가 10으..