JudithHopps JudithHopps

이번 포스팅에서는 Vue 컴포넌트에 대해서 알아보고자 합니다. 컴포넌트란 ? View, Data, Code의 세트라고 이해할 수 있다. 컴포넌트는 HTML 코드, 자바스크립트 코드, 데이터가 존재한다. 가장 큰 장점은 재사용이 가능하다는 것이다. 즉, 다른 컴포넌트에 import가 가능하다. Snippet 설정하기 snippet이란 특정 코드를 미리 작성하고 등록하여 단축키로 코드를 불러와 사용하는 기능이다. snippet을 사용하는 방법은 파일 > 기본설정 > 사용자코드조각구성 이다. 그 후 vue를 입력하고 아래와 같이 내용을 수정해준다. "Generate Basic Vue Code": { "prefix":"vue-start", "body": [ "\n" ], "description": "Genera..

Vue 프로젝트를 빠르게 구성하고, 빌드, 배포할 수 있게 도와주는 플로그인을 이용합니다. Vue CLI란? Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다. Vue Router(라우터) 설정 라우팅이란 사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 의미한다. 즉, url 주소에 따라 페이지가 전환되는 것 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다. Vue-Router 설치 cmd(터미널)에 다음 명령어를 입력해주세요 cd vue-project 입력 vue add router 입력 'use..

Vue.js를 활용하기 위해 설치해야 할 것이 있습니다. 설치 필요 Visual Studio Code 설치하기 Node.js 설치하기 (짝수버전 추천) + ) 추가로 크롬 설치하기 Vs Code (Visual Studio Code) 환경구축 Extensions 또는 cmd+sjoft+x를 눌러 확장 프로그램 검색 켜기 vuter 검색 후 설치 prettier-code formatter 검색 후 설치 cmd (터미널) 환경구축 npm install -g @vue/cli 입력 npm create vue-project 입력 후 default 3 선택 cd vue-project 입력 npm run serve 입력 아래와 같이 창이 뜨면 성공입니다. Local 뒤에 있는 url 링크에 들어가면 아래와 같이 창이 ..

Vue.js란? 웹 개발을 단순화하고 정리하기 위해 개발된 자바스크립트 프론트엔드 프레임워크이다. SPA(단일 페이지 애플리케이션) 개발을 위한 프론트엔드 프레임워크이다. 사용자 인터페이스 개발을 위한 Rrogressive Framework이다. Angular와 React에서 부족함을 제거하고 장점을 모아두었다. 프레임워크 선택 : Angular vs React vs Vue 등장 순서 : Angular → React → Vue 세 개의 프레임워크 중 한 가지를 고르자면 Vue를 고르겠다. 이유는 가장 빠르고 직관적으로 익힐 수 있기 때문이다. Vue.js의 장점 직관적이고 배우기 쉽다. 재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있다. Angular의 장점(데이터 바이딩) ..

변수 let + 변수명 = 값; 로 설정합니다. 자바스크립트는 변수에 자료형을 저장하지 않습니다. 즉, 하나의 변수의 처음과 다른 자료형을 저장할 수 있습니다. typeof 해당 변수의 자료형을 추출합니다. 키워드, 연산자 강제 자료형 변환 함수 Number() : 숫자로 변환 String() : 문자열로 변환 Boolean() : T/F로 변환 0, Nan,"",null,undefine : False 이외 : True const 상수를 선언할 때 사용합니다. 함수 생성 방법 함수를 만드는 방법은 3가지가 있다. 1. 익명 함수 이름을 붙이지 않고 함수를 생성하는 방법 A. 생성 let 함수명 = function () { } ; B. 호출 함수명() ; C. 출력 console.log(함수); 2. 선언..

JavaScript의 기본 용어부터 알아보겠습니다. 중요 언어이므로 익히셔야 합니다. 표현식 값을 만들어 내는 간단한 코드 문장 표현식이 하나 이상 모인 것. 표현식 마지막에 ;이 찍힌 것 키워드 특별한 의미가 부여된 단어 - break - case - catch - continue - debugger* - default - delete - do - else - finally - for - function - if - in - instanceof - new - return - switch - this - throw - try - typeof - var - void - while - with 식별자 변수와 함수 이름 등 이름을 붙일 때 사용하는 단어 약속 클래스의 이름 첫 글자는 대문자로 시작한다. 변수,..

이번엔 JavaScript를 시작해보려고 합니다. JavaScript란? 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되어 활용성이 높다. 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 실습환경 구축 Visual Studio Code 설치하기 Node.js 설치하기 (짝수버전 추천) + ) 추가로 크롬 설치하기 출력 예제 1. Visual Studio Code 를 실행 후 js 파일을 생성합니다. 2. console.log('Hello'); 를 작성해줍니다. 3. powershell 또는 cmd를 실행합니다. 4. js가 저장된 폴더를 열고 공백에 shift+마우스..

동기 처리의 흐름이 순차적으로 진행되는 것 앞선 진행이 끝나야 뒤 차례를 시작할 수 있음 비동기 처리의 흐름이 섞이는 것. (쓰레드) ex) Node.js