뷰 인스턴스 뷰로 화면을 개발하기 위해 생성해야 하는 기본 단위 {{ message }} 속성을 통해 인스턴스가 그려질 지점, 데이터, 함수, 메서드 등 화면과 관계된 요소들을 정의함 뷰 인스턴스 속성 el 화면이 그려질 돔 요소를 지정 html element 혹은 css selector data 화면을 그리는데 사용하는 data를 반환하는 함수 혹은 data객체 template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성 methods 화면 로직 제어와 관련된 메서드를 정의하는 속성 created 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성 인스턴스가 화면에 적용되는 과정 1. 뷰 라이브러리 파일 로딩 2. 뷰 컴포넌트 등록 3. 인스턴스 객체 생성 4. 특정 화..

무료로 정적 웹서비스를 배포하는 가장 대표적인 방법인 Netlify를 사용해 보았습니다. 이전에 정적 웹 서비스를 만들어 보았을 때는 github pages를 사용했었습니다. netlify 로 배포하는 과정이 생각보다 너무 쉽고 간단해서 놀랐습니다. Netlify는 무료 회원도 배포할 수 있는 웹 페이지 개수가 제한이 없는등 개인이 활용하기에 무리가 없을 것 같습니다. 가입 절차는 어떤 방법을 쓰느냐에 따라 다르겠지만 저는 email을 사용했습니다. email을 입력하면 verify 메일이 오고 이를 클릭하면 바로 사용할 수 있습니다. 가입을 완료하면 아래와 같은 메인 페이지가 나타납니다. 저는 이미 하나의 프로젝트를 만들어서 사이트가 떠 있는것을 볼 수 있습니다. 사이트를 올리는 방법은 세가지로 , g..

MVVM 패턴 ( Model -View - ViewModel) → 화면동작 로직과 데이터 처리 로직을 분리 뷰 : 사용자에게 보이는 화면 돔 : HTML 문서에 들어가는 요소의 정보를 담고있는 데이터트리 돔 리스너 : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직 수행 ( 클릭 감지 → 로직) 모델 : 데이터, 서버에서 가져온 데이터를 js 객체 형태로 저장 데이터 바인딩 : 뷰에 표시되는 내용과 모델의 데이터를 동기화 뷰 모델 : 뷰와 모델의 중간영역 , 돔 리스너와 데이터바인딩 제공 컴포넌트 기반 프레임워크 로고, 버튼, 모달 등 다양한 ui 요소들을 component 로 정의함 component 들을 조합하여 화면 구성 코드를 재사용하기 쉽고 화면 구조를 직관적으로 파악가능 Component..

Static으로 만들어보고싶은 아이디어가 생각났는데 React를 한지 좀 시간이 지나서 이 기회에 vue를 배워서 사용해보려고한다. Vue가 쉽고 가볍고 생산성이 높다고 하는데 react와 비교해보면서 알아볼 수 있을 것 같다. IDE는 기존에 사용하던 vscode를 사용하기로 했다. 설치 vscode에서 terminal을 열고 node 와 npm이 깔려있는지 확인한다. 둘다 깔려있다면 npm install -g @vue/cli 로 vue cli를 설치한다. 설치 이후 확인을 해보는데 아래와같은 에러가 발생했다. 보안오류라고 해서 powershell 대신 bash shell을 사용해서 설치후 실행해보았더니 정상 동작하였다. * 나중에 찾아본 결과 powershell에서는 vue 대신 vue.cmd 명령어..

Python으로 자동화를 진행하던 중 linecache라는 module이 있다는 것을 알게 되었다. linecache는 파일을 열어서 특정 줄에 빠르게 access 할 수 있다. https://github.com/python/cpython/blob/main/Lib/linecache.py GitHub - python/cpython: The Python programming language The Python programming language. Contribute to python/cpython development by creating an account on GitHub. github.com 메뉴얼에는 한줄만 가져오는 linecache.getline(filename,linenumber) 메소드만 나와..

이번에는 mysql 의 datetime type을 node.js에서 다루는 과정에서의 문제해결을 다루어 보겠습니다. mysql에서 제가 가지고 있는 topic table의 created 라는 컬럼은 아래와 같이 게시물이 생성된 시간에 대한 정보를 가지고 있습니다. 아래와 같이 COLUMN의 datatype도 알아보겠습니다. created column은 "datetime" 자료형으로 되어있습니다. Node.js 에서 db connection을 해서 data를 가져온 값을 console로 찍어봅니다. * 자세한 db connection 방법은 앞선 포스팅 node.js - mysql 연동하기 을 참고해주세요. connection.query('SELECT * FROM topic', function (error..