전체 글 (56) 썸네일형 리스트형 Vue.js 스터디 _3. 데이터와 메서드 Vue 인스턴스의 데이터는 View에 무언가를 사용자에게 보여주기 위해 정의됩니다. 사용방벙은 다음과 같습니다. {{ message }} {{ price }} {{ list }} {{ object }} 문자열, 숫자, 리스트, 오브젝트와 같이 어떤 타입의 데이터 형태도 정의할 수 있으며 이렇게 정의된 데이터는 View와 상호작용하는 데 쓰이거나 Vue 인스턴스 내부에서 로직을 연산할 때 사용될 수 있습니다. 메서드에 대해서 알아보겠습니다. 아래와 같이 코드를 작성해주세요. 클릭하시오!! html파일을 실행하면 클릭하시오!라는 버튼이 생성되어있고 클릭을 하게되면 클릭이라는 경고창을 출력합니다. 코드를 보면 버튼 태그에 @Click가 있습니다. 이 구문은 이벤트 바인딩이라는 템플릿 문법 중 하나로 클릭을 하.. Vue.js 스터디 _2. Vue 인스턴스 Vue 인스턴스란? 인스턴스란 무엇일까요? 인스턴스란 클래스, 오브젝트와 헷갈려 사용되곤 합니다. 이 용어를 쉽게 설명해줄 좋은 예는 붕어빵입니다. Class : 붕어빵 틀 Object : 붕어빵 Instance : 각각의 붕어빵 각 용어를 다음과 같이 비유해 봅니다. 클래스는 붕어빵 틀에 비유할 수 있으며 클래스는 붕어빵 즉 오브젝트를 생성할 수 있습니다. 그리고 인스턴스는 각각의 오브젝트 하나를 의미하게 됩니다. 즉 오브젝트는 추상적으로 대상을 표현하는 것이며 인스턴스는 지정된 오브젝트 하나를 의미합니다. 결국 Vue 인스턴스란 생성된 Vue 오브젝트 하나를 의미하게 됩니다. Vue 인스턴스는 Vue 앱을 시작하기 위해 필수적이며, 앱의 진입점이 됩니다. Vue 인스턴스는 간단한 템플릿 렌더링부터 데.. process 객체 process 객체는 프로그램과 관련된 정보를 나타내는 객체이며 웹브라우저에서 작동하는 자바스크립트에 존재하지 않는 Node.js만의 객체입니다. 이번에 알아볼 process 객체에는 다음과 같은 객체의 속성과 메서드가 있습니다. process 객체의 속성 속성 이름 설명 argv 실행 매개 변수를 나타냄 env 컴퓨터 환경과 관련된 정보를 나타냄 version Node.js 버전을 나타냄 versions Niode.js와 종속된 프로그램 버전을 나타냄 arch 프로세서의 아키텍처를 나타냄 platform 플랫폼을 나타냄 process 객체의 메서드 메서드 이름 설명 exit([exitCode =0]) 프로그램을 종료 memoryUsage() 메모리 사용 정보 객체를 리턴 uptime() 현재 프로그램이.. console 객체 console 객체는 지금까지 console.log() 메서드를 몇 번 사용해봤으므로 친숙한 객체일 것 입니다. console 객체는 Node.js 콘솔화면과 관련된 기능을 다루는 객체이며 다음과 같은 메서드를 가집니다. 메서드 이름 설명 log() 출력 time(label) 시간측정을 시작합니다. timeEnd(label) 시간측정을 종료합니다. 우선 console.log() 메서드를 살펴봅니다. console.log() 메서드는 특수 문자를 사용하여 문자열을 출력할 수 있습니다. console.log() 메서드에서 사용할 수 있는 특수 문자는 다음과 같습니다. 특수문자 설명 %d 숫자 %s 문자열 %j JSON 터미널에 코드 몇줄을 입력하여 살펴 보겠습니다. 위와 같이 숫자로 표현할 수 있으며 이와 .. Node.js의 전역 객체 1. 전역변수 웹브라우저에서 동작하는 자바스크립트 최상위 객체는 window 객체입니다. window 객체는 웹 브라우저 자체와 관련된 속성과 메서드를 가지고 있습니다. 하지만 Node.js는 웹브라우저에서 동작하는 것이 아니므로 window 객체가 존재하지 않습니다. 대신 Node.js는 전역 변수와 전역함수를 갖습니다. 이번에는 Node.js가 어떠한 전역 변수를 갖는지 알아보겠습니다. 간단한 기본자료형의 전역변수 문자열 자료형의 전역변수 변수 이름 설명 __filename 현재 실행중인 코드의 파일 결로 __dirname 현재 실행중인 코드의 폴더 경로 어느 경로에서 코드 파일을 생성하여 아래내용을 작성하고 실행시키면 console.log('filename : ', __filename); conso.. 두번째 Node.js 애플리케이션 간단하게 웹서버를 생성해보도록 하겠습니다 nodejs폴더에서 웹서버용 폴더를 생성해주세요. 그리고 안에 server.js라는 파일이름을 가진 파일을 생성해주세요. 파일명은 상관없습니다. 사용하고 싶은 이름을 사용하시면 되지만 서버를 실행하는 파일이라는 이름으로 하는게 좋겠지요. server.js에 다음과 같이 코드를 작성해주세요. var http = require('http'); http.createServer(function(req, res){ res.writeHead(200, {'Content-Type':'text/html'}); res.end('Hello World'); }).listen(3000, function(){ console.log('Server running at http://127.0... 첫 번째 Node.js 애플리케이션 먼저 Node.js 파일을 생성하고 실행하는 방법을 알아보겠습니다. 직접 코딩을 하며 진행하겠습니다. 스터디를 하면서 사용할 폴더를 생성합니다. 저는 MAC 환경에서 실행하도록 하겠습니다. Node.js는 모든 운영체제에서 똑같이 동작함으로 똑같이 작성하시면 됩니다. Nodejs 폴더에서 소스코드를 올려가며 예제를 실행하도록 하겠습니다. 먼저 Nodejs폴더 안에 폴더를 생성해주세요. 안에 node.hello.js 파일도 생성해주세요. node.hello.js 안에 아래와 같이 코드를 작성해주세요. console.log("Hello World"); 아래와 같이 작성 후 해당 폴더에서 커맨드창을 실행 시킵니다. 소스코드가 있는 폴더에서 node node.hello.js 커맨드를 통해 nodejs파일을 실행.. Node.js 개발 환경 구축 Node.js 설치하려면 우선 http://nodejs.org에 접속합니다. 1. Windows에서 Node.js 설치 다운로드 페이지에서 Windows installer를 선택하여 다운로드한 파일을 이용하여 설치합니다. Next 버튼만 누르면 설치가 종료되므로 별도의 설명은 하지 않겠습니다. 설치가 완료되면 컴퓨터를 종료하고 다시 시작한 후 커맨드창을 엽니다. node를 입력하고 console.log("Hello World');를 입력합니다. 아래 Hello World가 출력되면 설치 성공입니다. 2. Mac에서 Node.js 설치 다운로드 페이지에서 Mac installer를 선택하여 다운로드한 파일을 이용하여 설치합니다. Windows처름 계속 버튼만 누르면 설치가 종료되므로 별도의 설명은 하지 않.. 이전 1 2 3 4 5 6 7 다음
