Doosic Blog

보호되어 있는 글입니다.

보호되어 있는 글입니다.

최신버전이 아니라서 나는 오류이다. 프로젝트파일 안쪽으로 경로를 이동하여 npm add webpack@latest 를 입력해주면 깔끔하게 해결된다.

보호되어 있는 글입니다.

이 글은 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에 해당하는 컴포넌트 부분만 바꿔주면 된다. #전역컴포넌트의 등록 방법 #지역컴포넌트의 등록 방법 #전역 컴포넌트와 지역 컴포넌트의 차이점 지역 ..