티스토리

솔솔의 천방지축 개발일기

검색하기

블로그 홈

솔솔의 천방지축 개발일기

ddol.tistory.com/m

소소한 개발 일기☺️

구독자: 4

방명록 방문하기

주요 글 목록

[Vue.js] Watch 속성 대부분의 경우 computed 속성이 더 적합하지만 간혹 감시자가 필요한 경우 watch 속성이 필요 변경되는 값을 캐치하고 싶을 때 watch 사용 button 클릭시 changeMessage()가 호출되며 메시지가 '안녕하세요' -> 'Hello'로 바뀐다. 그 message가 바뀌는 시점에 watch가 호출되고 파라미터는 새로운 값, 예전 값이 넘어오게 된다. (여기서 새로운 값 : Hello, 예전 값 : 안녕하세요) {{ message }} Button Click {{ updated }} 공감수 4 댓글수 1 2021. 9. 19.
[Vue.js] methods와 computed의 차이 1. methods 함수 호출로 캐싱 X FnReversedMessage()를 호출할 때마다 계산되어져 화면에 표출 2. computed 캐싱 O reversedMessage()를 호출할 때 이미 계산되어진 값을 저장해두었다가 가져다 사용 만약 message 값이 변경될 경우, 변경되는 시점을 캐치해서 변경한 후 캐시로 저장해둔다. {{ message.split('').reverse().join('') }} {{ FnReversedMessage() }} {{ reversedMessage }} 공감수 1 댓글수 0 2021. 9. 19.
[Vue.js] onclick | submit 적용 방법 1. onclick javascript의 경우에는 이런식으로 적용되었다면 vue.js는 조금 다르게 적용된다. {{ year }} 더하기 빼기 v-on:click 을 이용하여 클릭할 경우 해당 함수로 접근하게 됩니다. 2. submit Submit submit을 하게되면 reloading되기 때문에 v-on:submit 뒤에 이벤트 수식어를 붙여 처리한다. ... ... 자세한 설명은 아래 참고 이벤트 핸들링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 공감수 1 댓글수 0 2021. 9. 17.
[Vue.js] 각종 태그 데이터 바인딩 하기 데이터 바인딩 : 데이터를 연결해주는 것 각 속성 앞에 v-bind: 를 붙이면 된다. 1. input value 바인딩 // v-bind: 를 사용하는게 맞지만 길기때문에 생략하여 : 만 작성해도 된다. // 위 아래 같은 의미 data 안에 inputData라는 이름으로 값을 넣어주고, input 태그에는 기존 value인 값을 -> v-bind:value로 설정하면 바인딩 됩니다. 2. input type 바인딩 // v-bind: 를 사용하는게 맞지만 길기때문에 생략하여 : 만 작성해도 된다. // 위 아래 같은 의미 3. a href 바인딩 테스트 a태그를 선택할 경우 제 티스토리 메인으로 이동합니다. 다른 값을 넣고 싶을 경우에는 테스트 함수를 호출하여 기존 link에 추가하여 url을 호출해.. 공감수 1 댓글수 0 2021. 9. 17.
[Vue.js] 웹 앱 HTTP 통신, 라우터 Vue.js에서는 웹 앱간의 통신을 어떤식으로 할까요? 오늘은 웹페이지 간 이동을 돕는 라우터에 대해 공부해볼 예정입니다. 1. 라우팅이란? 웹 페이지 간의 이동 방법 현재 웹 앱 형태 중 주로 사용되는 것은 SPA(Single Page Application) 라우팅을 사용하면 화면 간의 전환이 매끄럽고, 화면을 조작할 수 있어 사용자 경험 향상 뷰 뿐이 아닌 앵귤러, 리액트 모두 라우팅을 이용하여 화면 전환 2. 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동 가능 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정된 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 .. 공감수 2 댓글수 0 2021. 9. 8.
[Vue.js] 뷰 scope | 데이터 주고 받는 방법 (props, emit, on, eventBus) 1. 뷰의 스코프(범위) 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문이다. 뷰는 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 쉽게 예제로 이해해보면 my-component1, my-component2 2개의 컴포넌트를 등록하고 아래서 세팅해주었다. 첫번째 컴포넌트는 자신의 값을 가지고 세팅하였고, 두번째 컴포넌트 return 값은 첫번째 컴포넌트 값을 참조하였다. 출력해보면 결과는 첫번째 컴포넌트 값을 참조하였던 두번째 컴포넌트 값은 빈 값이다. 이유는 컴포넌트의 scope 때문에 my-component2 에서 my-component1을 직접 참조할 .. 공감수 1 댓글수 0 2021. 9. 7.
[Vue.js] 뷰 컴포넌트란? | 전역 컴포넌트 | 지역 컴포넌트 1. 컴포넌트 란? 화면을 구성할 수 있는 블록과 같은 개념 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발이 가능하다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기 편리하다. 코드가 직관적이다. 왼쪽 이미지를 보면 Header, Content, Footer로 3개의 컴포넌트로 분할하였고, 그 안에서도 Content 안에 Aside, List 2개의 하위컴포넌트로 분할하였다. 우측 이미지를 보면 트리 구조로 각 컴포넌트 간의 관계를 나타낸다. 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계해야한다. 2. 전역 컴포넌트 여러 인스턴스에서 공통으로 사용 가능 뷰로 접근 가능한 모든 범위에서 사용 가능 -- 전역 컴포넌트 등록 Vue.compo.. 공감수 1 댓글수 0 2021. 9. 6.
[Vue.js] 뷰 인스턴스 생명주기 | 라이프 사이클 * 라이프 사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기 => 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름 1. 뷰 라이프 사이클 속성 종류 created beforeCreate beforeMount mounted beforeUpdate updated destroyed beforeDestroy 라이프 사이클을 크게 나누면 4단계이며, 데이터가 변경되는 경우에만 2->3단계가 존재한다. 1. 인스턴스의 생성 2. 생성된 인스턴스를 화면에 부착 3. 화면에 부착된 인스턴스의 내용 갱신 4. 인스턴스 소멸 [ 1. 인스턴스 생성 ] * beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 이 단계에서는 da.. 공감수 1 댓글수 0 2021. 9. 5.
[Vue.js] 뷰 인스턴스, 생성자, 옵션 속성 1. 뷰 인스턴스란? 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 인스턴스를 레고에 비유한다면 레고를 조립하는 기본 판 직전 게시글에서 작성한 코드를 예시로 들어볼게요. {{ message }} 2. 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 생성자는 Vue Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근 가능 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함 3. 인스턴스가 화면에 적용되는 과정 1. 뷰 라이브러리 파일 로딩 2. 인스턴스 객체 생성(옵션 속성 포함) 3. 특정 화면 요소에 인스턴스를 붙임 4. 인스턴스 내용이 화면 요소로 변환 5. 변환된 화면 요소를 .. 공감수 1 댓글수 0 2021. 9. 4.
[Vue.js] Hello Vue.js 출력해보기 index.html 파일을 하나 생성하여 소스를 넣고 Hello Vue.js 를 출력해보겠습니다. {{ message }} html이 저장된 경로로 가서 html을 실행해봅니다. 출력되는 것을 확인해볼 수 있습니다 : ) * Do it! Vue.js 입문 책으로 공부하며 작성하는 글로 잘못된 정보가 있을 경우 댓글 달아주시면 감사하겠습니다 : ) 공감수 1 댓글수 0 2021. 9. 3.
[Vue.js] 뷰 개발자 도구(뷰 크롬 플러그인) 설치하기 뷰 개발자 도구 (뷰 크롬 플러그인) 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있음 크롬, 파이어폭스, 사파리에서 모두 지원 가능 Google => vue.js devtools 입력 Chrome 웹 스토어 클릭 하여 chrome에 추가 눌러줍니다. 뷰 개발자 도구 사용 방법 윈도우 기준 Chrome에서 F12 눌러주세요. 개발자도구 오픈! (Mac일 경우, cmd + option + I) 위에 화살표 모양 클릭하여 Vue 선택 (Vue가 안보일 경우, Chrome 종료 후 재실행) 1. 최상위 컴포넌트 2. 최상위 컴포넌트의 상세내용 3. 뷰엑스 속성 확인 4. 특정 시간 동안에 발생한 이벤트 관찰 5. 새로고침 ** 오류 처리 [Download the Vue Devtools exten.. 공감수 1 댓글수 0 2021. 9. 2.
[Vue.js] Node.js 설치하기 1. Node.js란? 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미 * 서버 사이드 : 웹 화면과 관계된 서버 로직을 처리하는 영역 뷰 CLI (Command Line Interface)를 이용하여 쉽게 뷰 프로젝트를 구성하기 위해서는 Node.js 필요 * CLI : 커맨드 라인 명령어. 윈도우의 명령 프롬프트 창과 맥의 터미널 등, 명령어로 특정 동작을 수행할 수 있는 콘솔 창 2. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드! Current 버전 보다는 LTS 버전을 추천.. 이유는 LTS가 더 안정적이고 라이브러리 .. 공감수 0 댓글수 0 2021. 9. 1.
[Vue.js] ATOM 에디터 설치 | 테마, 패키지 다운로드 및 적용 방법 Vue.js 개발을 위해 필요한 환경을 설정해보겠습니다. 1. ATOM 에디터 설치 A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 2. 다운로드한 exe 파일 실행 3. 테마 설치 실행하면 끝이지만 개발할 때 유용한 테마와 패키지 추가로 설치 Themes 클릭 후 seti-ui 입력하여 seti-ui / .. 공감수 1 댓글수 0 2021. 8. 31.
Vue.js 란? 1. Vue.js 란 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 화면단 라이브러리이자 프레임워크 뷰의 창시자 에반은 앵귤러의 명시적 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙여 나가기 시작하며 뷰가 탄생하였다. * 프레임워크 : 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 (뼈대) * 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 2. 장점 배우기 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 가지고있다. 앵귤러를 더 가볍게 쓰고 싶어 만든 프레임워크 앵귤러의 양방향 데이터 바인딩 특성과 리액트의 단방향.. 공감수 1 댓글수 0 2021. 8. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.