Racon

개요 Toast UI Editor은 기본적은로 MarkDown 기반의 Editor이다. 그래서 Image를 추가 하게 되면 MarkDown 형식으로 저장이 되는데 이러면 Image의 align을 셋팅을 할수 가 없다. 마크다운을 div Tag 로 덮은다음 align을 설정해도 원하는데로 적용이 되질 않았다. 그래서 Button 커스텀을 하였다. 기존의 이미지 업로드 버튼을 제거 하고 새로 비슷하게 만들어 버튼을 추가해 주었다. 코드

뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수있는 형태의 HTML로 변환해 주는 속성 템플릿 속성을 사용하는 방법 ES5에서 뷰인스턴스의 template 속성 사용 ``` ``` !Tip render() 사용자가 볼수 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다. 변환된 render() 함수는 최종적으로 사용잦가 볼 수 있는 화면을 그리는 역할을 합니다. 그리고 변환 과정에서 뷰의 반응성이 화면에 더해집니다. 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인딩 HTML 화면 요소를 뷰 인스..

메소드 안에서 Vue2 Component 추가 하기 Vue2를 접한지 3개월 될때 하나의 프로젝트를 하였습니다. 여러 위치에(3군데) 여러개의 버튼을 사용자 취향에 맞게 배치 하는 작업이였는데 이전까지 Javascript나 Jquery로 만 FrontEnd를 작업 하였기에 똑같은 생각으로 작업을 시작 하였습니다. 하지만 Component를 읽고 그안에 prop를 입력하여 배치 하는것은 Methods 안에서는 생각 보다 방식이 많이 달랐습니다. 그래서 그 당시에는 각 위치에(3군데)버튼을 다 Component를 추가 하였고 v-if로 컨트롤 하였습니다. 다행이 테스트 및 실사용에 있어서 무리가 없었지만 이 찝찝한 코드는 수정해야할 필요가 있었고 여러 문서를 찾고 나서야 Methods안에서 Component..

상시 업데이트 예정 기능 axios 비동기 통신 (Jquery의 'Ajax'와 같은 동작) Axios Document core-js JavaScript용 모듈식 표준 라이브러리. 2021년까지 ECMAScript용 폴리필 포함: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript 제안, 일부 교차 플랫폼 WHATWG/W3C 기능 및 URL과 같은 제안. 필요한 기능만 로드하거나 전역 네임스페이스 오염 없이 사용할 수 있습니다. Core-js Document lodash Array, Object, Json 등 다양한 함수 제공 Lodash Document vue-daum-postcode..

Vue.js 프로젝트 생성 Vue-CLI 프로젝트 생성 Vue-cli 설치 npm install -g @vue/cli 버전 확인 vue --version 프로젝트 생성 vue create frontend 'frontend' : 프로젝트 이름 현재 Default(Vue3) 선택 후 설치 프로젝트 이동 cd frontend 프로젝트 실행 npm run serve Vue3 + TypeScript를 사용시 Vue3 프로젝트 생성후 "vue add typescript" 명령어를 입력 하고 절차에 따르면된다. 1.번 절차를 따르면 ts로 자동으로 변환 되어 사용가능하다 GiT Push Vue.js 설치시 Git File이 생성 되므로 현재와 같이 모듈로서 Vue.js를 사용할 경우 Vue.js에서 Git 숨긴 파일..

뷰 라우터 ; 선행 개념 라우팅 웹 페이지 간의 이동 방법을 뜻한다. 라우팅은 현대 웹 앱 형태중 하나인 "싱글 페이지 애플리케이션" 에서 주로 사용한다. 장점 화면간의 전환이 매끄럽다. 애플리케이션의 사용자 경험을 향상 시킬수 있다. 화면 깜박거림이 없다 "싱글 페이지 애플리케이션" : 페이지를 이동할 떄마다 서버에 웹페이지를 요청하여 새로 갱신 하는것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱산하는 패턴을 적용한 애플리케이션 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 특수 태그와 기능 태그 설명 페이지 이동태그. 화면에서는 로 표시 되며 클릭하면 to에 이정한 URL로 이동합니다. 페이지 표시 태그. 변경되는 ..

참고 문서 do it vue.js 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미한다. 특징 컴퓨넌트를 활용하면 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발 할 수 있다. 쪼개서 사용하므로 재사용이 쉽다. 남이 작성한 코드를 직관적으로 이해 할 수있다. 컴포넌트를 이해 하기 위하 예제 구조 설명 뷰 에서는 웹화면을 구성할 때 흔히 사용하는 네비게이션바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 합니다. Tree 형식으로 구조화 되어 있다. Root Header Content Aside List Footer 컴포넌트 등록 전역(global)) 여러 인스턴스에서 공통으로 사용한다. 뷰로 접근 가능한 모든 범위에서 사용할수있다. 지..

참고 문서 do it vue.js Vue.js란? 웹페이지 화면을 개발하기 위한 Frontend 프레임워크이다. 기존 웹 개발자 뿐 아니라 HTML, CSS, Javascript 기초만 알아도 개발하기 쉬운 Frontend 프레임워크이다. 창시자 에반 유(Evan You) 설명 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할수 있는 형태로도 제공됩ㄴ다. 즉. 라이브러리 역할 뿐 아니라 프레임워크 역할도 할수있다. 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. Vue 제작팀에서 리액트와 앵귤러를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 vue가 가장 빨랐다. 리액트의 장점과 앵귤..

Spring Boot & Vue.js 연동 Spring Boot & Vue.js 기본 연동 프로젝트 (springvue > images : HELP.md 에 필요한 이미지) 구조 Front : Vue.js Backend : Spring Boot 기본 설치 목록 Vue.js Vue-CLI Node.js 프로젝트 생성순서 Spring Boot 프로젝트 생성 Vue.js 프로젝트 추가(현재는 vue2 설치) vue create 'project name' springvue > vue-frontend > vue.config.js 파일 추가 module.exports = { // npm run build시 파일 생성위치 outputDir: "../src/main/resources/static", //..