Doosic Blog

이 글은 IntelliJ, Node.js가 이미 깔려있으며 Intellij유료버전을 사용한다는 전제로 진행합니다. #IntelliJ툴을 이용한 SpringBoot 프로젝트 생성 1. IntelliJ File -> New -> Project 2. Spring Initializr 클릭 후 설정은 만드실 프로젝트에 맞춰서 설정해주시고 Next버튼을 눌러주시면 됩니다. (저는 Language: Java, Type: Maven, JDK: 17 사용했습니다) 3. 프로젝트에 필요한 라이브러리들을 선택할수 있습니다. 필요한 라이브러리들을 선택하여 체크해주신후 Finish를 클릭해주시면 프로젝트가 생성됩니다 ㅎㅎ 4. 스프링부트를 실행시키기 위해서 DB에 정보를 입력하여 로그인을 해주어야 합니다. src -> main..

뷰 라우터 : 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다. #뷰 라우터 설치방법 2가지 CDN방식 : NPM 방식: npm install vue-router 이번 글에서는 CDN방식을 사용한다. NPM방식은 추후 스프링부트 + VUE.JS 서버연동과 프로젝트 생성방법을 다룰때에 다루도록하겠다. routes : 페이지의 라우팅 정보(어떤 URL로 이동했을때에 어떤 페이지를 뿌려줄지 배열에 담아준다) path : 페이지의 url component : 해당 url에서 표시될 컴포넌트 routes: [{ path : '/page'(페이지의 url), component: PageComponent(해당 url에서 표시될 컴포넌트) }] router-view r..

#같은 레벨의 컴포넌트 통신 방법 컴포넌트의 통신방법은 기본적으로 props와 이벤트로 위에서 아래로 아래에서 위로 데이터를 교환하는 방식인데 같은 레벨에서의 컴포넌트간 데이터를 교환하고 싶을때에는 어떻게 해야할까...? 바로 상위 컴포넌트로 이벤트를 통해 데이터를 보내주고, 상위 컴포넌트에서 받은 데이터를 props로 원하는 컴포넌트에 보내주는 방식을 사용한다. $emit() : 첫번째 인자는 부모 컴포넌트에서 자식 컴포넌트를 호출할때 적을 메서드 이름, 두번째 인자는 해당 메서드에 들어갈 값으로 지정한다. 순서를 한번 살펴보자! props : 에서 v-on:pass="deliverNum" 를 이용해 하위컴포넌트의 이벤트를 받아 상위컴포넌트의 메서드를 수행하여준다. 이벤트 : 상위컴포넌트에서 수행된 메..

#컴포넌트 통신 규칙이 필요한 이유 상위 컴포넌트와 하위 컴포넌트들이 데이터를 전달할때에 어떠한 규칙이 없다면 뒤죽박죽 데이터를 교환하게된다면 말도 안되는 데이터의 관계가 생기게 될수 있다. 특정 상태, 데이터가 바뀌었을때에 그로 인한 버그를 추가하기가 어려운게 N방향 패턴이다(mvc패턴에서 이러한 문제가 있었다고한다) 데이터를 아래로만 내린다면 컴포넌트 통신방식의 규칙이 생겼을때에는 데이터의 흐름을 추적할 수 있다. (항상 데이터는 내려오고 아래서 위로는 이벤트가 올라가기 때문이다) Props(이곳에 내려가는 속성의 data를 넣어준다) Event(위로 이벤트를 전달, 데이터를 올리는게 아니라 이벤트를 올리는 것이다) 각각의 컴포넌트는 데이터를 각각 관리하는데 이걸 공유하기 위해서는 PROPS라는 속성..

요즘 대부분의 프론트 프레임워크는 컴포넌트 기반으로 개발이 된다고한다. #간단한 컴포넌트의 정의 : 화면의 영역을 영역별로 구분해서 코드로 관리하는것을 컴포넌트라고 한다 핵심 : 이렇게 정의해두는 이유는 재사용성이 올라가기 때문이다. (여러곳에서 재사용 가능) 간단한 예시로 화면을 Header, Main, Footer 3개의 구역으로 나눌때에 기존에는 Main의 내용이 바뀌어야 한다면 전체 페이지를 새롭게 로딩했어야 했다. 하지만 컴포넌트를 사용한다면 Main의 내용을 바꿀때에 Main 컴포넌트만 바꿔주는 방식으로 전체 페이지를 새롭게 로딩하는것이 아닌 Main에 해당하는 컴포넌트 부분만 바꿔주면 된다. #전역컴포넌트의 등록 방법 #지역컴포넌트의 등록 방법 #전역 컴포넌트와 지역 컴포넌트의 차이점 지역 ..

인스턴스는 뷰로 개발할때에 필수로 생성해야하는 코드라고 한다. var vm = new Vue() 를 이용하여 인스턴스를 생성하여준다. (new Vue()라고만 선언하여도 된다) #el(엘리먼트) : body태그 안에서 app이라고 하는 아이디를 찾아 인스턴스를 붙이겠다는 의미를 가지고있다. 붙이는순간 vue기능과 속성들이 유효해진다. el이 없다면 아무리 데이터를 정의하여도 div태그 안에서 사용이 불가능 하다. new Vue로 만든 인스턴스를 꼭 특정태그에 붙여줘야만 vue를 사용할 수 있다. 위의 이미지에서는 Person이라는 생성자 함수를 만들었으나 우리는 첫 번째 이미지처럼 Vue를 생성자 함수로 만들어 사용한다. #생성자 함수 함수앞에 함수이름 첫글자가 대문자라면 생성자 함수임을 의미한다. #뷰..

(Vue.js 스크립트를 이용하여 간단하게 뷰 개발자 도구를 사용할 수 있다) 개발자도구를 여는 단축키 1. 마우스 오른쪽 클릭후 검사 2. F12 data의 message를 볼 수 있는데 뷰에서 관리하는 데이터를 이곳에서 볼 수 있다. 이곳에서 data안에 message의 내용을 변경시 바로적용이된다. (데이터의 변화에따라 화면이 바로 반응해주는것 Reactivity)

Reactivity 뷰의 핵심 기능! # 데이터의 값이 바뀔때마다 계속 화면이 자동으로 그려지는것 뷰의 핵심인 Reactivity(반응성)이다. #Object.defineProperty : 객체의 동작을 재정의하는 api 즉시실행 함수의 역할은 기본적으로 init과 render를 어떤 애플리케이션 로직에 노출되지않도록 또다른 유효범위(scope)에 넣어주어 관리해준다. (일반적으로 오픈 소스 라이브러리들은 이런 방식으로 관리된다) 즉시실행 함수 작성법 : (function(){})(); get: 속성에 접근했을 때의 동작을 정의 set: 속성에 값을 할당했을 때의 동작을 정의 위의 이미지에 Hello Vue는 처음에는 작성되어있지 않았으나 console창에서 viewModel.str = 'Hello Vu..

뷰에 대한 자세한 내용이 나와있는 페이지 : https://joshua1988.github.io/vue-camp/ vue를 공부할때에는 Visual Studio Code를 사용하여 실습한다. 다운받아야 할 프로그램 목록 -Chrome : https://www.google.com/intl/ko/chrome/ -Visual Studio Code : https://code.visualstudio.com/ -Node.js : https://nodejs.org/ko/ -Vue.js Devtools : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 다운로드시 버전 선택을 할 수 있게 나온다면 한단계 아..

게시판에 대한 공부를 하던도중 자동주입이라는 기능을 알게되어 한번 사용법에 대해 정리해두려고 한다. 학원에서 스프링을 배우기전에 미리 예습하기위해 인프런에서 들었던 강의에 있던 내용인데 프로젝트를 시작할떄에는 잊어버리고 학원에서 배운대로만 진행해버렸다..ㅎㅎ;; input태그와 DTO(vo)를 이용한 자동주입은 스프링에서 지원하는 커맨드 객체라고 부른다고 한다. 일단 시작하기전에 커맨드 객체를 사용하기전의 전과 후를 비교해보자! [커맨드 객체 사용전] 커맨드 객체를 사용하기 전에는 HttpServletRequest의 getParameter()를 이용하여 값을 추출하여 boardVO객체에 setter를 이용하여 값을 넣어주는 방식을 사용하였다. 지금은 넣어줘야할게 3개뿐이지만 이게 길어진다면... [커맨드..