🔍데이터 양방향 바인딩 지금까지는 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 값을 확인했다. => 단방향 데이터 바인딩 두 방향 모두 데이터에 접근할 수 있도록 하는 것을 양방향 데이터 바인딩이라고 한다. 🔍폼 입력 바인딩 양방향 데이터 바인딩이 자주 사용되는 대표적인 예. v-model v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성함. 입력 유형에 따라 엘리먼트를 업데이트하는 올바른 방법으로 자동 선택함. v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송함. 🔍예제 텍스트박스에 입력하는 글자가 실시간으로 보여지도록 하고 싶을 때, 양방향 데이터 바인딩..

🔍Vue.js 이벤트 핸들링 기존 Javascript의 'addEventListener' 메서드, jQuery의 '.on' 메서드와 같이 이벤트를 연결하여 사용하는 기능 'v-on' 디렉티브, '@' 2가지를 사용해서 이벤트 핸들링 처리함. 🔍메서드 이벤트 핸들러 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하여 처리 click 이벤트 핸들링의 기본적인 예제를 해보기 전에 기존에 자바스크립트에서 사용했던 onclick 이벤트를 적용시켜보면 버튼을 누르면 설정해둔 alert창이 잘 뜬다. v-on:을 붙여서 이벤트 핸들러를 적용시켜도 동일하게 잘 뜬다. 이번에는 함수를 통해 처리해보았다. 더하기 버튼, 빼기 버튼이 잘 동작한다. submit에도 적용시킬 수가 있다. 입력 후 버튼을 누르면..

🔍 데이터 바인딩이란? 바인딩이란 묶는다는 의미로, 웹 프로그래밍에서는 UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해주는 프로세스를 의미한다. 🔍 Vue.js 데이터 바인딩 Vue.js는 대부분의 html 태그에 바인딩을 제공한다. input 태그의 text 박스에 Vue에서 정의한 inputData 데이터를 바인딩해보면 hello가 잘 들어간다. Vue.js에서 데이터를 바인딩하기 위해서는 예약어 v-bind를 사용해야 한다. (예약어는 생략 가능하다.) v-bind:속성명="데이터 또는 함수" :속성명="데이터 또는 함수" //생략 버전 input 태그의 type까지 바인딩 가능하다. 태그의 link를 바인딩하려면 아래와 같이 작성하면 된다. 함수 바인딩 실행 결과

🔍 Vue 인스턴스 뷰 인스턴스(Instance)는 Vue.js로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. Vue 생성자는 미리 정의된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장될 수 있다. 뷰 인스턴스 생성 시에는 데이터, 템플릿, 메소드 등의 옵션을 포함할 수 있는 options 객체를 전달해야 한다. var vm = new Vue({ //옵션 }) el (string | HTMLElement) : 대상이 되는 html element 또는 css selector (vm.el) template (string) : Vue 인스턴스의 마크업으로 사용할 문자열 템플릿 data(Object | Function) : 화면을 그리는데 사용하는 data를 반환하는 함수 or da..

회사에서 Vue.js로 작업을 하고 있어서 기초 공부를 시작했다. 뷰는 공식 문서가 굉장히 잘 정리되어 있어서 공식 문서랑 유튜브로 기본 공부를 시작하려고 한다. https://kr.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 🔍Vue 설치 방법 크롬 브라우저에 Vue Devtools 설치 직접 cdn 프로덕선 버전 CLI Vue CLI(Vue Command Line interface)는 기본 뷰 개발환경을 설정해주는 도구. VS Code 터미널 실행 후 아래 명령어로 설치. npm install -g @vue/cli +개발 툴은 VS Code 사용 예정

🤍싱글 페이지 애플리케이션(Single Page Application, SPA)이란? 서버로부터 매번 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 or 웹 사이트, 단일 페이지로 구성되어 있음. SPA에서 HTML, JS, CSS 등 모든 코드는 하나의 페이지로 불러오거나 적절한 자원들을 동적으로 불러들여 문서에 추가함. -> 사용자의 동작에 응답하는 방식 전통적인 웹 방식 : 새로운 페이지 요청 시마다 정적 리소스가 다운되고 전체 페이지를 다시 랜더링하는 방식을 사용. =>매번 새로고침이 발생되어 사용성이 떨어짐, 변경이 필요없는 부분까지 전체 페이지를 갱신하므로 비효율적임. 🤍SPA 특징 1. 라우팅 사용자가 태스크를 수행하기 위해 어떤..

🔍fs 모듈이란? 파일 시스템에 접근하는 모듈 파일 생성, 삭제, 읽기, 쓰기, 폴더도 만들거나 지울 수 있다. 🔍동기 메서드와 비동기 메서드 //readme.txt 저를 여러 번 읽어보세요. 비동기방식으로 파일 하나를 여러 번 읽어보기 실행 결과 비동기메서드들은 백그라운드에 해당 파일을 읽으라고만 요청하고 다음 작업으로 넘어감 => 따라서 파일 읽기 요청만 세 번 보내고 console.log('끝')을 찍는다. 수백 개의 I/O 요청이 들어와도 메인 스레드는 백그라운드에 요청 처리를 위임, 얼마든지 추가 요청을 받을 수 있음. 동기방식으로 순서대로 읽어보기 실행 결과 readFile 대신 readFileSync 메서드 사용 동기방식의 경우 수백 개 이상의 요청이 들어올 때 성능에 문제가 생김(이전 작업..

노드는 자바스크립트보다 더 많은 기능을 제공함. (운영 체제 정보 접근, 클라이언트 요청 url 정보 가져오기 등등...) -> 모듈 제공 노드의 모듈은 버전마다 차이가 있음. 자주 사용하는 모듈 위주로 알아보도록 한다. 🔍os 운영 체제의 정보를 가져옴. os.arch() : process.arch와 동일 os.platform() : process.platform과 동일 os.type() : 운영 체제 종류를 보여줌 os.uptime() : 운영체제 부팅 이후 흐른 시간(초)을 보여줌. os.hostname() : 컴퓨터 이름을 보여줌 os.release() : 운영체제 버전을 보여줌. os.homedir() : 홈 디렉터리 경로를 보여줌 os.tmpdir() : 임시 파일 저장 경로를 보여줌 os.c..