Atelier BiCute

Vue에서는 조건에 따라 랜더링을 시킬수가 있는데 v-if와 v-show를 사용할 수 있습니다. HTML 태그 안에 v-if="조건식"형태로 작성하며, 조건식이 참이라면 해당 블록이 랜더링되어 보여지는 형식으로 사용합니다. 1. v-if 사용하는 방법(1) (1) 우선 data에 원하는 이름으로 불리언 형태의 값을 하나 지정해 줍니다. (2) 영역에 조건을 설정해줄 부분에 v-if='데이타명'형식으로 작성을 해주면 끝입니다. 제목 날짜 어쩌구 저쩌구 컨텐츠 v-if="popup"이라고 해놓은것은 popup == true와 같습니다. true라면 해당 컴포넌트를 보여주고 false 일 경우엔 보여주지 않습니다. 아래쪽 data에 지정해 놓은 값을 true로 바꿔서 확인해보시면 됩니다. 이런식으로 꺼졌다 켜..

제1장 • 1-1 개발 환경 세팅하기 • 1-2 프로젝트와 파일의 구조와 형식 • 1-3 새로운 컴포넌트를 생성하고 추가하는 방법 • 1-4 컴포넌트 단위로 스타일 적용하기 • 1-5 페이지 전환하기 (라우터 설치부터 사용까지) • 1-6 데이터 바인딩하는 방법 제2장 • 2-1 반복문(v-for) 사용하는 방법 • 2-2 이밴트 핸들링(v-on) • 2-3 조건식 v-if, v-show • 2-4 데이터를 전달할 때는 props • 2-5 사용자 지정 이벤트(Custom Event) 비슷한 내용의 관련글: 자식이 부모의 데이터를 수정하고 싶으면... (커스텀 이벤트) • 2-6 게시물마다 번호를 달아주자 (라우터 파라미터) • 2-7 데이터를 전달하는 또 다른 방법 Slot 제3장 • 3-1 compu..

Vue에서 다양한 이벤트를 처리하는 방법들입니다. JavaScript의 addEventListener처럼 무언가를 클릭할 때, 혹은 무언가가 변화할 때, 특정 키를 눌렀을 때 등의 상황에 따라 특정 명령을 실행하도록 지정할 수 있습니다. 1. 클릭 이벤트(v-on:click) 이벤트는 v-on:click="실행할코드" 과 같이 사용할 수 있으나, v-on을 줄여서 @click="실행할 코드"로 사용할 수 있습니다. data에 있는 숫자를 증가시키는거 같은 간단한 내용은 바로 지정해줘도 되지만, 많은 이벤트 명령들은 실행할 내용을 script의 아래쪽에 methods로 정의한 후, 그 method를 호출하는 형태로 사용합니다. 제목: {{ item.title }} //

1. 앞으로 만들어 볼 것들 그러고 보니 기능 설명만 하다 보니 어떤 것을 만들지 정하질 않은 것 같습니다. 기왕이면 뭐라도 만들면서 진행하는것이 재밌으니 앞으로의 대략적인 방향은 블로그 메인 화면에선 게시물의 제목과 작성 날짜가 보이게 하고, 제목을 클릭하면 내부 내용을 표시해주는것을 목표로 진행할 예정입니다. 이전 글(Vue 데이터 바인딩하는 방법)을 기준으로 하여 여러 개의 글의 제목과 작성일을 표시해주도록 만들어 보았습니다. {{ title[0] }} {{ date[0] }} {{ title[1] }} {{ date[1] }} {{ title[2] }} {{ date[2] }} 원하는 느낌대로 표시는 잘 되고 있지만, 뭔가 이상합니다. (1) 게시물이 100개, 1000개가 된다면 저렇게 하나하나..

1. Vue의 데이터 바인딩 Vue는 양방향 데이터 바인딩(Two-way data binding)을 지원합니다. (*React는 단방향 데이터 바인딩만 지원) 양방향 데이터 바인딩은 모델과 뷰 중 어느 한쪽이 변경이 일어나면 다른 한쪽에 자동으로 반영되는 것을 의미합니다. 2. 시작하기 전에... 최근 Vue관련 게시물을 계속해서 순차적으로 작성하고 있습니다. 여기서부터는 이제 블로그를 만들어보며 시리즈물로 작성해볼까 합니다. 우선 헤더는 임의의 디자인으로 완성해서 헤더 컴포넌트로 삽입해 놓고 시작합니다. 컴포넌트 만들고 삽입하는거, 또는 이 코드 봐도 전혀 모르겠다 싶으면 컴포넌트 만들고 삽입하는 방법을 작성한 지난 글부터 참고하여 시작하도록 합시다. Vue 새로운 컴포넌트를 생성하고 추가하는 방법 >..

1. 라우터의 역할 기존 HTML로 웹 페이지를 제작할 때, 특정 주소로 접속하거나 특정 링크를 클릭하면 해당 페이지 화면으로 전환되는것을 이미 잘 알고 있을 것입니다. Vue나 React같은 SPA(single page application)은 페이지로 이동하는것이 아니라, 화면에 읽어놓은 페이지를 라우터를 이용해 새롭게 갱신 하게 됩니다. 이것을 라우팅이라고 합니다. 2. 라우터 설치방법 터미널에서 다음 명령어를 입력합니다. vue add router 설치과정에서 Use history mode for router? 라고 히스토리모드를 사용할것이냐고 물어보는데 Y(es)를 눌러 계속 진행합니다. 이 방식으로 설치하면 라우터가 적용된 샘플 템플릿 형식으로 파일이 만들어지는데, 샘플페이지 없이 실제로 사용..

프로젝트 작업이 완료되어 최종 완성본을 빌드하게 되면 작업했던 모든 파일들이 합쳐지게 되는데, 이때 특정 컴포넌트에 적용한 스타일이 내가 의도하지 않았지만 다른 컴포넌트에 영향을 미치게 될 수 있습니다. 그것을 방지하기 위하여 style 태그에 scoped 속성을 추가하는 것으로 특정 컴포넌트의 구성요소에만 스타일을 적용 할 수 있습니다. 1. Scoped 속성의 사용 방법 (1) style 태그에 scoped 속성을 추가해줍니다. (2) 범위가 지정된 스타일과 범위가 지정되어 있지 않은 스타일을 동시에 사용할 수 있습니다. (3) 하위 컴포넌트(자식 구성 요소)에 영향을 미치게 하기 위해선 ::v-deep 결합자를 이용할 수 있습니다 (::v-deep 대신 >>> 를 이용해도 되지만 Sass 등 전처리..

컴포넌트를 사용하는 이유 컴포넌트는 결과적으로 긴 HTML을 짧게 한단어로 줄여주어 관리하기 편하게 만들면서, 재사용성을 높이기 위해 사용한다고 보면 됩니다. 1. 컴포넌트 만들기 컴포넌트를 만들고 싶다면, 새로운 Vue파일을 만듭니다. , , 2. 컴포넌트 삽입하기 이제 위에서 만든 Box컴포넌트를 App.js에 추가해 보겠습니다. App.js 화면 컴포넌트를 가져와서 사용하기 위해선 아래 3가지 단계를 거치게 됩니다. 1. 해당 파일을 가져오겠다고 선언합니다. 위와 같이 Box 컴포넌트를 3번 반복하여 사용하면 아래와 같은 결과를 얻을 수 있습니다.

#1 Vue 프로젝트의 파일 구조 프로젝트를 생성하였다면 위와 같이 기본적인 세팅이 되어있습니다. • node_modules : npm을오 설치한 패키지 파일들이 모두 이곳에 모여 있습니다. • public : 정적 리소스들이 모여있는 디렉토리. index.html이 이곳에 있습니다. • src : 실제 작업은 이곳에서 이루어 집니다. • src/assets : 이미지나 CSS 등 자료들이 모여있는 디렉토리 • src/components : Vue 컴포넌트 파일들이 모여있는 디렉토리 • App.vue : 루트가 되는 컴포넌트 (최상위 컴포넌트) • main.js : 가장 먼저 실행되는 JavaScript 파일. Vue의 인스턴스를 생성하는 역할 • .gitignore : 깃에 업로드 할 때 제외할 파일들..

#1 개발 환경 세팅 (1) 원하는곳에 작업용 폴더를 생성. (2) VisualStudio Code로 해당 폴더를 열어줍니다. (3) 터미널을 열어 아래 명령어를 입력합니다. npm install -g @vue/cli *npm 명령을 사용하기 위해선 node.js가 설치가 되어있어야 합니다. node.js 다운로드 페이지 > 설치가 되는 척(?) 하면서 오류가 나는 경우가 많습니다. • 윈도우에서 흔히 발생하는 에러 '이 시스템에서 스크립트를 실행할 수 없으므로 c: 어쩌구 저쩌구...' (1) Windows PowerShell을 관리자 권한으로 실행합니다. (2) 다음 실행 규칙을 변경하는 명령어를 입력합니다. Set-ExecutionPolicy RemoteSigned 실행 정책을 변경하겠냐는 물음이 ..