vue 배운 사이트! 이것저것 많아서 공부하기 좋음~~ Vue Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 뷰 시작하기 전 : Vue는 JavaScript 파일로 배포되며 스크립트 태그를 사용하여 웹 페이지에 추가 해야한다. 따라서 아래의 script를 작성 하거나 vue 를 설치 해서 해도 된다. Step 1 뷰 영역에 표현 될 하나의 컴포넌트 만들어..

Vue 란? 2014년 Evan You 가 만든 front 앱의 기본 뼈대와 Api를 제공 하는 자바스크립트 프레임워크이다. 프레임워크(Framework) vs 라이브러리(Library) 처음 배우다보면 혼란스럽게하는게 프레임워크와 라이브러리 같다. 난 그랬음... 어떤건 자바스크립트의 프레임워크, 어떤건 라이브러리 라고 하면서 거기서 거기인 것들이 자꾸 헷갈리게 하기 henniee.tistory.com Vue 장점 직곽적이라 배우기가 쉽다. 재사용을 통한 애플리케이션의 개발 기간 단축 및 양질의 코드를 생산 할 수 있다. 여러명이 개발할 때 코드 규격을 맞추기가 쉽다. Vue 특징 UI 화면 라이브러리 더보기 화면의 요소를 제어하는 코드와 데이터 로직을 분리 → 코드를 직관적으로 이해, 유지보수 편리함..

처음 배우다보면 혼란스럽게하는게 프레임워크와 라이브러리 같다. 난 그랬음... 어떤건 자바스크립트의 프레임워크, 어떤건 라이브러리 라고 하면서 거기서 거기인 것들이 자꾸 헷갈리게 하기 때문이다. 간략하게 정리해 보자면 프레임워크 (Framwork) 말 그대로 '프레임을 가지고 하는 일' 이라고 해석 할 수 있다. 예를 들어 이런 추억의 장난감 조립 틀이 있는데 이걸 다향한 모양으로 만들기 위해서는 설명서에 나와 있는 것을 지키면서 만들어야 할 것이다. 즉, 프레임워크는 어떤 프로그램을 쉽게 만들기 위한 요소와 룰을 제공해 줌으로서 소프트웨어의 생산성과 품질을 높이는 역할을 하는 것! 결론적으로 소프트웨어에서의 프레임워크는 '특정 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램' 이..

MVVM 패턴은 Model + View + View Model를 합친 용어이다. Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : 사용자에서 보여지는 UI 부분 View Model : View를 표현하기 위해 만든 View를 위한 Model로 View를 나타내기 위한 데이터 처리를 하는 부분 MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되며 View와 View Model 사이의 의존성이 삭제 되어 각각의 부분은 독립적이기 때문에 모듈화 하여 개발이 가능하다 Vue 의 개념을 찾아 보던 중 사람들이 Vue 는 MVVM 과 연관이 있다고 하면서 개념 정리를 해 놓은 것을 보았다. 그래서 MVVM이 어떻게 Vue 와 연관이 있는..

프로젝트를 하는 중에 사이드바를 만들게 되었다. 찾아보니 만드는 건 너무 쉬운데 말입니다? 꼭 내가 원하는 디자인은 없다는게 학계의 정설. 내가 원했던 사이드바 □ 페이지가 시작하자마자 나오기 □ 나올 때 본문 부분을 밀어내고 나오기 □ 그러면 당연히 사이드바를 닫으면 본문을 확장 시키기 처음에는 를 이용해서 JS 없이 구현 하려고 했으나, 본문과 사이드바를 구분하는 과정에서 닫기 버튼이 자꾸 사라지는 끔찍한 현상 발생... ㅎ z-index를 1000; 까지 줘보기도 했으나 자꾸 어디 갔는지 보이질 않고 날 힘들게 했다. 결국 방법을 바꿔서 스크립트를 사용하게 되었다.. [ Html CSS ] 1. 사이드바 네비게이션 (sidenav) 이라는 클래스 이름을 준 div를 생성 2. 사이드바안의 내용을 클..

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 이 둘을 사용하면 페이지를 새로 고침하고 심지어 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아 있다. 근데 사실 쿠키를 쓰면 더 간편하게 할 수 있는데 왜 Storage를 쓰는 것일까 궁금해서 찾아 봤다. 웹 스토리지 객체는 네트워크 요청 시 서버로 전송이 되지 않아 더 많은 자료를 보관할 수 있다. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작 할 수 없고 모두 자바스크립트로 수행 된다. 웹스토리지 객체는 도메인,프로토콜,포트로 정의 되는 오리진에 묶여있어 함부러 데이터에 접근 할 수 없다. 두 스토리지 객체는 동일한 메서드와 properties를 제공한다. setIt..