안녕하세요 상훈입니다. $.ajax({ url: ' ' , method: ' ' , data: { }, erorr: ( ) => { }, success: ( ) => { } }) 이랬던 ajax가 변경되었습니다. $.ajax({ url: ' ' , method: ' ' , data: { } , }) .done ( ) .fail ( ) 참고 바랍니다. jQuery.ajax() | jQuery API Documentation Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly ..

FrontEnd/JavaScript 2021. 10. 20. 11:06

안녕하세요 상훈입니다. 금일은 Vue.js - Tailwind.css 를 이용하여 간단한(나는 안간단함ㅠ) 예제를 구현해보려고합니다. 프로젝트 설치방법은 Tailwind.css에서 git clone(클릭시 이동) 방식으로 진행하여 npm install, build를 통해 npm module들을 다운로드 받고, vue.js는 cdn으로 연동하였습니다. 다음번에는 vue-cli를 통해 진행하는것도 좋을 것 같습니다. 사용한 vue.js 항목으로는 v-if, v-for, v-on, v-model, v-show, v-binding 등이고, tailwind.css 의 클래스를 입력하는 것들이 생각보다 빡셌습니다. 후... 많은 조건문을 넣느라 토하는줄 해당 내용은 컴포넌트의 분리 없이 한개의 html로 모두 구성..

FrontEnd/Vue.js 2021. 10. 17. 20:09

안녕하세요 상훈입니다. Vue.js + Tailwind.css 를 처음이용하여 클론코딩을 해보았는데, 결과를 포스팅하겠습니다. 핀터레스트(pinterest)를 클론코딩(clone coding) 했고, 해당 UI의 가장 기본적인 요소만 Vue.js로 코딩하였습니다. Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요. www.pinterest.co.kr 기본적인 Vue.js의 지식을 갖고 있었기 때문에 vue 자체의 난이도는 적당하였고, 도움이 잘 되었습니다. 그러나 왜인지 모르게 자꾸 image의 경로가 안잡혔고, 결과적으로도 잡지 못하였습니다. (아예 width, height 없음) 따로 이렇게 주었을 때는 또 잘 작동하더라구요. 왜냐고...

FrontEnd/Vue.js 2021. 10. 16. 17:59

안녕하세요 상훈입니다. 해당 에러에 대해 말씀드리겠습니다. 바인드를 하려는 대상에 key 가 설정되지 않았기에 해당 에러가 발생하였습니다. 그러니 :key를 추가하면 됩니다. 예시) 이렇게 button을 data-binding으로 v-for를 사용하려고할 때, key를 정해주지 않아 발생하는 에러입니다. 위처럼 key 값을 정해주면 해결됩니다. 이상입니다.

FrontEnd/Vue.js 2021. 10. 16. 14:15

안녕하세요 상훈입니다. Vue.js - Tailwind.css 를 적용하려고 하는데 에러가 발생하였습니다. This relative module was not found: * ./assets/index.css?vue&type=style&index=0&lang=css in ./src/App.vue This relative module was not found: * ./routes/index.js in ./src/main.js 자세히 보니 경로가 잘못되었더군요 그래서 본래 였던 것을 로 변경하였습니다. 그리고 다시 npm run serve를 통해 vue-cli를 실행시켜주니, 에러가 해결되었습니다. 만약 이런 사소한 경로 잡는 문제로 해결이 안된다면, 아래의 해당 블로그를 참조 바랍니다. vue error ..

FrontEnd/Vue.js 2021. 10. 16. 14:10

안녕하세요 상훈입니다. Vue.js 에서 Axios를 사용하여 화면에 출력하는 예제를 작성해보도록 하겠습니다. 비동기 통신 방법으로는 Axios와 Ajax 등이 있는데, 이 중 Axios를 사용하도록 하겠습니다. 생각보다 아주 간단합니다! 1. script로 head 태그 내에 작성해주세요. 2. mounted api 속에 작성합니다. let app = new Vue({ el: '#app', data: { posts: [], }, mounted () { axios.get('https://jsonplaceholder.typicode.com/users/').then((response) => { this.posts = response.data }) } }) 이렇게 되면, 비어있던 posts 배열에 위에서 re..

FrontEnd/Vue.js 2021. 10. 6. 21:32

안녕하세요 상훈입니다. vue.js 에서도 역시나 모든 언어들이 그러하듯 Life Cycle이 존재합니다. Lifecycle Hooks | Vue.js Lifecycle Hooks This guide assumes that you have already read the Composition API Introduction and Reactivity Fundamentals. Read that first if you are new to Composition API. Watch a free video about Lifecycle Hooks on Vue Mastery You can access a componen v3.vuejs.org Vue.js 3 에서 지원하는 LifeCycle Api's 입니다. 코드 먼저..

FrontEnd/Vue.js 2021. 10. 6. 21:14

안녕하세요 상훈입니다. Html, Css, Javascript 로 로딩 화면을 만드는 방법에 대해 포스팅하겠습니다. BootStrap 을 이용하여 공통 클래스를 지정하였고. 일부분은 직접 작성하였습니다. html Loading... Css #loader { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.8; background: rgb(156, 154, 154); z-index: 99; text-align: center; } #loader>div { position: absolute; top: 50%; left: 50%; z-index: 100; } Javascript $(window).on('..

FrontEnd/JavaScript 2021. 10. 6. 12:22