🔍 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..

REPL 사용하기 자바스크립트는 스크립트 언어이므로 미리 컴파일을 하지 않아도 즉석에서 코드 실행이 가능함. REPL : 입력 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복(Loop) REPL을 종료하려면 ctrl+c 2회 누르거나 .exit 입력하면 됨. 모듈로 만들기 Node.js는 코드를 모듈로 만들 수 있다는 점에서 자바스크립트와 다르다. 🔍모듈 : 특정한 기능을 하는 함수나 변수들의 집합 모듈로 만들어놓으면 여러 프로그램에서 해당 모듈 재사용이 가능함. var.js const odd = '홀수입니다'; const even = '짝수입니다'; module.exports = { odd, even }; func.js var.js에 변수 두 개를 선언..

2015년에 자바스크립트 문법에 매우 큰 변화가 있었음. => ES2015(ES6) 🔍const, let 보통 var로 변수를 선언하는 방법부터 배우지만 이제부터 var은 const, let이 대체함. if(true){ var x = 3; } console.log(x);//3 if(true){ const y = 3; } console.log(y);//error x는 정상적으로 출력, y는 에러가 발생하는 이유는 var은 함수 스코프를 가지므로 if문의 블록에 영향을 받지 않는다. 하지만 const와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다. (블록의 범위는 if, while, for 등에서 볼 수 있는 중괄호임.) const는 한 번 값을 할당하면 다른 값을 할당할 수 없고 ..

Node.js 개발 환경 설정하기 내 컴퓨터에는 이미 Node가 설치되어 있었는데 공부할 겸 삭제하고 다시 설치해 보았다. 1. 홈페이지 접속 후 왼쪽 LTS로 설치해 준다. 2. 쭉쭉..동의하고...Next... 3. 설치가 끝나면 요런 창이 나오는데 아무키나 눌러준다. 4. 그럼 파워쉘 창으로 넘어간다. 아니 이거밖에 안 했는데 벌써 에러가 난다고.....? 내 컴퓨터에 chocolatey 뭐시기가 이미 설치되어 있어서..그런 듯하다.... 책에 설명을 보니까 🔍초콜리티 윈도우 명령 프롬포트를 통해 노드를 설치하고 싶을 때 초콜리티를 고려해볼 수 있음. 노드 외의 다른 프로그램도 명령 프롬포트를 통해 설치할 수 있어 편리함. choco install nodejs 명령어를 사용하면 됨. 라고 하는데....