ImYena

Vue 라우터(Router) Vue에서 라우팅 기능을 제공하는 공식 라이브러리 라우트(경로)를 찾아내는 역할을 하는 장비 Vue Router router.vuejs.org 라우팅(Routing) URL 주소에 따라 페이지가 전환되는 것 Vue는 URL 주소에 따라 화면 컴포넌트인 View가 전환 라우트(경로)를 찾는 행위 라우트(Route) URL 주소, 경로 기능 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 설치 방식 1..

모듈(Module) 변수, 함수, 클래스, 인스턴스의 집합을 독립된 파일(~.js, ~.vue)로 만든 것 모듈로 만들어 필요한 기능만 여러 프로그램에서 재사용 모듈 내부에서 export 된 것만 외부 프로그래에서 사용 가능 ↳ export : 개수와 상관없이 내보내기 가능 export const 변수명 = …; export function 함수명 = { … }; export class 클래스명 { … }; ↳ export default : 기본 한 개만 내보내기 가능 export default 변수명; export default 함수명; export default 클래스명; export default { … }; 사용 예시 test.js export function fun1() { … } export ..

ECMAScript/ES Ecma International(정보와 통신 시스템을 위한 국제적 표준화 기구)에서 만든 언어 ECMA-262 표준을 따르고 있음 ECMA-262는 규격, ECMASciript는 ECMA-262에 의해 표준화된 JavaScript의 새로운 이름 ECMAScript는 표준 또는 언어 규격이 아닌 프로그래밍 언어이다. 버전 ES5(ECMAScript 5), ES6(ECMAScript 2015), ES2020 등 5 버전까지는 ECMAScript 5 라는 명칭을 사용했지만, 6 버전부터 빠른 배포 주기를 반영하기 위해 숫자 대신 연도를 붙여 ECMAScript 2015(ES6)과 같은 명칭 사용 ES6(ECMAScript 2015) 해당 버전에서 중요한 기능들이 많이 추가되어 자주 ..

Vetur VS Code를 위한 Vue 개발 툴(Syntax-highlightinh, Snippet, ...) jsconfig.json 설정 파일 사용 ▼

컴포넌트(Component) 재사용 혹은 조립 가능한 독립적인 UI 객체 HTML 조각() + JavaScrip() + CSS( 뷰(View)와 컴포넌트(Component) 공통점 .vue(싱글 파일 컴포넌트) 파일 확장명 사용 둘다 컴포넌트이므로 파일 작성 방법 동일 뷰(View) 하나의 화면(페이지) 재사용이 어려운 컴포넌트 views 폴더에 작성 컴포넌트(Component) 여러 화면(페이지) 안에 배치될 수 있는 재사용 가능한 컴포넌트 components 폴더에 작성 [Vue.js] Component: 싱글 파일 컴포넌트 [Vue.js] 컴포넌트란?, 뷰와 컴포넌트 컴포넌트(Component) 재사용 혹은 조립 가능한 독립적인 UI 객체 HTML 조각( ) + JavaScrip( 뷰(View)와 ..

MPA vs SPA MPA(Multi Page Application) 요청에 따라 새로은 HTML으로 DOM 생성(멀티 페이지) 기존 웹 페이지 형태 서버의 상황에 따라 요청에서부터 응답까지 지연될 수 있음 접속하는 브라우저가 많을 경우 대규모 서버사이드 인프라 스트럭처 필요 SPA(Single Page Application) 최초 HTML을 받고 DOM 생성(싱글 페이지) 이후 UI 변경은 AJAX로 DOM의 일부만 추가/수정/삭제 프레임워크를 이용한 일괄된 코드 작성 필요 Ex) Angular, React, Vue 자바스크립트 코드량 증가 및 초기 로딩 속도가 느림 더보기 DOM(Document Object Model, 문서 객체 모델)이란? XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스..

Vue.js란 SPA의 웹 페이지 화면 개발을 위한 프론트엔드 프레임워크 특징 SPA 웹 페이지 화면 개발 MVVM(Model-View-ViewModel) 패턴 사용 컴포넌트 기반의 높은 재사용성 양반향 데이터 바인딩 지원 *가상 DOM 기반 렌더링 사용으로 부분 UI 갱신 속도가 빠름 *가상(Virtual) DOM 기반 렌더링 : 변화가 많은 화면은 가상 DOM(메모리에 추가로 생성되는 DOM)에서 처리하고, 실제 DOM과 비교해서 변경된 부분만 리렌더링 하는 방식, 지속적으로 데이터가 변화하는 대규모 어플리케이션에 유리 SPA란 > [Vue.js] MPA vs SPA MPA vs SPA MPA(Multi Page Application) 요청에 따라 새로은 HTML으로 DOM 생성(멀티 페이지) 기존 ..

2447번: 별 찍기 - 10 재귀적인 패턴으로 별을 찍어 보자. N이 3의 거듭제곱(3, 9, 27, ...)이라고 할 때, 크기 N의 패턴은 N×N 정사각형 모양이다. 크기 3의 패턴은 가운데에 공백이 있고, 가운데를 제외한 모든 칸에 별이 www.acmicpc.net 문제 재귀적인 패턴으로 별을 찍어 보자. N이 3의 거듭제곱(3, 9, 27, ...)이라고 할 때, 크기 N의 패턴은 N×N 정사각형 모양이다. 크기 3의 패턴은 가운데에 공백이 있고, 가운데를 제외한 모든 칸에 별이 하나씩 있는 패턴이다. *** * * *** N이 3보다 클 경우, 크기 N의 패턴은 공백으로 채워진 가운데의 (N/3)×(N/3) 정사각형을 크기 N/3의 패턴으로 둘러싼 형태이다. 예를 들어 크기 27의 패턴은 예제..

1541번: 잃어버린 괄호 첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 www.acmicpc.net 문제 세준이는 양수와 +, -, 그리고 괄호를 가지고 식을 만들었다. 그리고 나서 세준이는 괄호를 모두 지웠다. 그리고 나서 세준이는 괄호를 적절히 쳐서 이 식의 값을 최소로 만들려고 한다. 괄호를 적절히 쳐서 이 식의 값을 최소로 만드는 프로그램을 작성하시오. 입력 첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리..

코딩테스트 연습 - 기능개발 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 programmers.co.kr 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배..