본문 바로가기

전체 글230

뷰 컴포넌트 통신 컴포넌트 간 통신과 유효 범위 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 컴포넌트 자체적으로 고유한 유효 범위를 갖기 때문이다. 이는 뷰 프레임워크 내부적으로 정의된 특징이다. 각 컴포넌트의 유효 범위가 독립적이기 때문이다. 컴포넌트 유효 범위 증명 코드 상 하위 컴포넌트 관계 기본적인 데이터 전달 방법은 상하위 컴포넌트 간의 데이터 전달 방법이다. 상위-하위 컴포넌트란 트리 구조에서 부모 노드, 자식 노드처럼 컴포넌트 간의 관계가 부모.자식으로 이루어진 컴포넌트를 의미한다. 상위에서 하위 컴포넌트로 데이터 전달하기 props속성 props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다. 상위 컴포넌트의 HTML코드에 등록된 child.. 2021. 4. 1.
[Mysql] 기본 Query 정리(3) - between, in, 서브쿼리, order by 1. 데이터가 숫자로 구성되어 있는 between 2. IN 조건문 이상적인 값의 조건에서는 IN()사용 가능 3. where문 연습 4. 문자열 내용 검색 - 문자 뒤에 % - 무엇이든 허용 - 한글자와 매치하기 위해서는 '-'사용 5. 서브쿼리 퀴리문 안에 또 쿼리문이 들어가는것 서브 쿼리의 결과가 둘 이상이 되면 에러가 발생 6. 서브쿼리(2) - ANY 서브쿼리의 여러 개의 결과 중 한 가지만 만족해도 가능 Some과 ANY는 동일한 의미로 사용된다. 6. 서브쿼리(3) - ALL 서브쿼리의 여러 개의 결과를 모두 만족 시켜야 함 7. ORDER BY(1) 결과물에 대해 영행을 미치지 않는다. 결과가 출력되는 순서를 조절하는 구문 오름 차순(ASC) 내림차순(DESC) 2021. 4. 1.
뷰 컴포넌트 컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 있는 블럭을 의미. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다. 컴포넌트 등록 지역(local)컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고 전역(Global)컴포넌트는 여러 인스턴스에서 공통으로 사용 전역 컴포넌트 등록 코드 컴포넌트 등록 인스턴스가 생성되고, 인스턴스 내용이 화면요소로 변환될 때 컴포넌트 태그도 함께 변화된다. 컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 사용자가 볼 수 있는 형태의 화면요소로 최종 변환. 전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호{}안에는 HTML태그가 실제로 화면에서 그려질 때 표시될 내용을 작성해야 한다. 전역 컴포넌트.. 2021. 3. 31.
Vue 인스턴스 뷰 인스턴스의 정의와 속성 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성 해야 하는 기본 단위. 뷰 인스턴스 생성 뷰 인스턴스 생성 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자는 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정객체에 저장해 놓고 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법 뷰 인스턴스 생성 인스턴스를 생성할 때 재정의할 data, el, template등의 속성을 의미 el 속성 역시 미리 정의 되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔.. 2021. 3. 31.
[Mysql] 기본 Query 정리(2) select관련 1. 요구하는 데이터를 가져오는 구문 일반적으로 제일 많이 사용되는 구문 DB 내 테이블에서 원하는 정보를 추출 2. 테이블에서 필요로 하는 열만 가져오기 여러개를 가져오려면 콤마(,)로 구분 3. 조회하는 결과에 특정 조건(1) 4. 조회하는 결과에 특정 조건(2) where절에는 관계 연산자 사용이 가능하다. 2021. 3. 31.
[Mysql] 기본 Query 정리(1) show, use, status, desc 1. 존재하는 DB 확인 2. DB사용과 table 확인하기 3. 테이블 정보 조회 4. 특정 테이블에 무슨 열이 있는지 확인하기 2021. 3. 31.
Vue 환경설정 및 Hello world Vue Js를 사용하기 위해서는 Node js를 설치 해야한다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node -v 위에 코드를 맥인 경우 터미널, 윈도우인 경우 터미널에 입력해서 node가 제대로 설치 되었는지 확인하자. Vscode Vue install Vetur : VSCode에서 돌아가는 Vue 개발 툴입니다. vue : Vue 문법 검사기라고 생각하시면 됩니다. Vue VSCode Snippets : Vue 문법을 미리 알려주는 친구입니다. 첫번째 프로젝트 {{message}} HTML파일을 생성하고 위와 같이 코드를 작성 하자 이후 Open .. 2021. 3. 30.
Vue JS란 1. Vue Js란 vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다. vue.js는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점이 있다. 리엑트와 앵귤러라는 프레임워크의 장점들을 쏙 빼와서 더욱 빠르고 가볍게 만든 프레임워크라고 한다. 2. Vue Js 장점 1. 배우기가 쉽다 - 입문자에게 좋은 프레임워크이다. 2. 리액트와 앵귤러에 비해 성능이 우수하다. 3. 리액트와 앵귤러의 장점을 갖고 있다. 3. Vue Js 특징 MVVM 패턴의 뷰 모델(View Model)에 해당하는 화면단 라이브러리이다. MVVM이란 화면을 모델(Model) - 뷰(View) - 뷰모델(View model)로 구성화 하여 개발하는 방식 이러한 방식은 화면의 요소들을 제어하는 코드와 데이터 .. 2021. 3. 30.
MVC 패턴 예제 DTO란 DTO는 데이터를 담아 전송하는 객체이다. DTO클래스에는 데이터를 저장할 getter(), setter() 같은 메소드가 필요하다. 이러한 MVC패턴은 전 영역에서 동작한다. 모델은 자체로 DTO를 포함한다고 할 수 있으며 DTO는 모델의 DAO에서 사용한다. DAO가 처리한 결과는 ViewPage로 DTO가 보내서 getter()메소드에 의해 출력 된다. DAO란 DTO에 담겨서 넘어온 데이터들을 실제로 처리하는 객체이다. 여기서는 DBMS로 저장, 수정, 삭제 등의 작업을 처리. 모델에서 독립적으로 처리하게 하는 것이 좋으며 DAO 클래스의 메소드는 당연히 DTO를 매개 변수로 하여 각각의 데이터를 처리하게 된다. 1. 뷰페이지 작성 회원가입 이름: 메일: 비번: 2. DTO 클래스 작성 .. 2021. 3. 26.

티스토리툴바