아무거나

Mocking 라이브러리를 활용하자 프론트엔드 개발시에 가장 이상적인 프로세스는 기획, 분석, 백엔드 개발, 프론트 개발들의 작업들이 서로 겹치지 않고 각각 진행되는 것이 좋다. 하지만 진행하는 과정에서 나오는 이슈 또는 요구사항의 변경등으로 인하여 번거롭게 작업을 진행해야되는 경우가 많다. 또한 프론트 엔드 영역과 백엔드 영역에 대한 일정이 서로 겹치게 동시 진행하는 경우도 많으므로 백엔드의 API 의 의존적이게 작업해야하는 프론트엔드의 경우는 백엔드 API 기능들이 개발서버에 배포되기 전까지 프론트엔드에서는 진행하기에 번거롭다. (물론 백엔드쪽에서 굳이 개발서버 배포를 안해도 로컬에서도 바로 확인 할 수 있는 다른 방법들이 있지만 인원이 많을 경우 변동성이 적은 개발서버 기준으로 작업하는것이 안정적이..

computed vs watch computed 이미 정의된 계산식에 따라 결과값을 반환할 때 사용 종속 대상을 따라 저장(캐싱) 됨 (단, Date.now() 같이 아무곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트가 안됨 즉, 캐싱을 원하지 않을 때 메소드를 사용하면 된다.) [example vuejs code] computed: { now: function () { return Date.now() } } 샘플코드 [example html code] 뒤집힌 메시지: "{{ reversedMessage() }}" [example vuejs code] // 컴포넌트 내부 methods: { reversedMessage: function () { return this.message.spl..

Props? Emit? 그리고 Vuex, Eventbus Vue 에서 컴포넌트간 통신은 props 와 emit 을 통하여 전달한다. 먼저 비교하기전에 props 와 emit 에 대해 모르는 사람들이 있을 수 있으니 간단하게 정리하자면 아래와 같다. props: 상위 컴포넌트의 데이터를 하위 컴포넌트에 전달하는 특성이며 하위 컴포넌트에서 전달받기 위해서는 props 를 명시적으로 선언해야 한다. emit: 최상위 컴포넌트가 하나 이상인 경우, 이벤트를 직접 컴포넌트에 할당하는 것을 의미 앞서 말했듯이 props 와 emit 이 많아지면 관리가 복잡해져 사이드 이펙트가 발생할 확률이 높아지므로 이러한 문제점을 해결하기 위하여 주로 상태 관리 패턴 라이브러리를 활용하며 Vue 에서는 보편적으로 Vuex 나 E..

아래와 같이 vuejs + springboot + gradle 프로젝트가 존재할 경우 vuejs(=client) 의 파일들을 빌드할 때 gradle 스크립트를 통하여 gradle명령 하나로 한번에 빌드하는 기능을 만들었다. 아래는 프로젝트의 구조이다. spring-boot-vuejs ├─┬ server → backend module with Spring Boot code │ └── src │ ├── main │ └── resources │ └── application.yml ├─┬ client → frontend module with Vue.js code │ ├── src │ ├── config │ └── index.js → build path ( move: resources/templates/* ) └..

vuejs에서 페이지를 라우팅 할 때마다 url에 # 기호가 생기는데 상당히 거슬리다. 이럴경우 아래와 같이 설정하면 해결된다. export default new Router({ mode: 'history', // mode값 추가 routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })

선택조건 낮은 Learning Curve 성능 안정적 큰 커뮤니티 또는 큰 단체에서 지원하며 문서화가 잘되어 있거나 레퍼런스 또한 많아야 한다. Vue 특징 낮은 Learning Curve 단순한 구성 요소 기존 자바스크립트 지식만으로 충분 컴포넌트 단위 관리 가능성 github 2017-06-30 현재 ( vuejs는 역사가 짧음에도 엄청난 성장을 보여주고 있다. ) Model-View 양방향 바인딩 지원 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법 Component-Based ( 단일 파일 Component -> 유지보수 용이하며 개발속도가 빠름 ) Virtual DOM 을 사용하여 빠른 렌더링 DOM의 복사본을 메모리 내에 저장하여 사용하며 변경 사항을 "가상의" 위치에서 처리하므로 "실제D..

급하게 작성되어 캡쳐 이미지가 없다. 해당 글대로 잘 따라하자.. # 테마 1. 상단바에서 atom 선택 -> preferences.. 선택 -> 좌측 메뉴에서 install 선택(우측의 themes)탭 선택 필요 -> 테마 검색 2. seti-ui, atom-material-syntax 각각 검색 후 install 3. 좌측메뉴에 themes를 선택하고 원하는 테마를 적용 # 플러그인 1. 상단바에서 atom 선택 -> preferences.. 선택 -> 좌측 메뉴에서 install 선택(우측의 packages)탭 선택 필요 -> 플러그인 검색 2. 플러그인 설명 - atom-beautify : 코드의 인덴트나 라인등을 정리해줌. - autoclose-html : 코드에서 동일한 텍스트 값이 있을때 강..

해당 포스트는 Spring Boot와 VueJS를 연동하는 과정을 작성했다. 1. Gradle에 Thymeleaf 설정dependencies { compile('org.springframework.boot:spring-boot-starter-thymeleaf') compile('org.springframework.boot:spring-boot-starter-web') .... } 2. src/main/resources/application.yml 설정 ( thymeleaf의 경우 html5 모드가 기본으로 설정되어 있어 아래의 설정을 추가해주어야 meta tag로 인한 에러가 발생하지 않는다. )spring: profiles: local .... thymeleaf: cache: false mode: LE..