CodeHoon

안녕하세요 상훈입니다.

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 배열에 위에서 response 받은 json 객체가 posts에 담겨져 사용할 수 있게 됩니다.

3. html에 작성

<div id="app">
        <div v-for="post in posts">
            <h1>{{ post.name }}</h1>
            <p>{{ post.email }}</p>
        </div>
    </div>

v-for 문을 이용한 해당 내용 출력입니다.

여러 가지 key 값이 존재하는데 그 중, 저는 name과 email을 가져와 표기하도록 하겠습니다.

이상입니다.

이곳에 전체적으로 요약과 예시가 다 존재합니다! 따라서 해주세요.

안녕하세요 상훈입니다.

vue.js 에서도 역시나 모든 언어들이 그러하듯 Life Cycle이 존재합니다.

Vue.js 3 에서 지원하는 LifeCycle Api's 입니다. 

코드 먼저 살펴보겠습니다.

 let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                taskCompleted: false,
            },
            beforeCreate() {    // 1 
                alert('before create')
            },
            created() {         // 2
                alert('created')
            },
            beforeMount() {     // 3
                alert('before mount')
            },
            mounted() {         // 4
                alert('after mounted')
            },
            
        })

1~4 까지의 순서를 표현해보았는데요, 

beforeCreate -> created -> beforeMount -> mounted 순서대로 진행되는 것을 보실 수 있습니다.

이렇게 작성한다면, 해당 내용은 

'before create'  ->  'created'  ->  'before mount'  ->  'after mounted'  순서대로 렌더링이 되어 출력됩니다. 
물론 가장 마지막은 app => message 와 taskCompleted 입니다.

안녕하세요 상훈입니다.

오늘은 제 생애 첫 강의 결제를 하였습니다. [ 할인 ] 을 하 였기 때문.

-> 15000원!! Event!!! (다른 할인 이벤트 하기만해봐 그냥)

강의 제목은

Udemy - [ Laravel classified ads web application from scratch ]

입니다. 무슨 뜻이냐면, 라라벨...ㅇ...... 제목 별로 신경안썼습니다.

제목보다는 내용이 중요한 법! 

강의 내용은 Laravel - Vue.js 같이 배우는 내용입니다.

현재 5% 까지 진행하였습니다.

이런식으로 웹어플리케이션을 만들어본다고 합니다.

현재까지(5%) 진행한 내용

1. 기본 설치
2. 라라벨 기본 배우기(라우팅까지)

공부를 하면서 살짝 현타가 왔는데, 왜냐하면 예전에 혼자 맨땅에 헤딩을 하면서 공부했던 라라벨8의 내용을 복습하는 느낌이었습니다. 

그 당시에 CRUD공부까지 다 했었는데, 그때 공부했던 방향과 유사하게 진행합니다. 앞으로 많은 강의가 남아있으니, 점차 난이도가 높아질 것으로 예상합니다.

그래도 처음 했을 때의 막막함은 안느껴지고,

MVC Framework 특유의 왔다갔다하면서 코딩해야하는 부분에서 울렁거리지 않았습니다. 

강의 개수는 총 197개, 강의 시간은 총 23시간 정도 됩니다   (언제 다듣냐)

 꽤.. 많네요 

강사님은 솔직히 영어 발음이 좋지 않아서 종종 뭐라고 말씀하시는지 안들릴 때가 많습니다. 만약 들으려고 하신다면 참고 바랍니다. 

강의 추천은 여기서 마치도록 하겠습니다. 감사합니다.

안녕하세요 상훈입니다.

그간 자주 npm run dev / npm run 에러가 발생하였었는데, 오늘에서야 진짜 이유를 알았습니다.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

일단 에러 해결부터

npm i -g npm@latest

바로 npm의 최신 버전 설치였습니다.

제가 얼마전에 npm 설치를 했었기에 막연하게 최신버전이겠거니 해서 신경 자체를 안썼습니다.

그러나 오늘 알게되었습니다...... 후.... 깊은 brain crack이 찾아오네요 ㅎㅎ

화이팅입니다.

참고

안녕하세요 상훈입니다.

npm install 명령어를 통해서 npm 프로젝트를 업데이트 및 설치를 하는데 갑자기

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.13.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1 
npm ERR! Failed at the node-sass@4.13.1 postinstall script.

에러가 발생하였습니다.

해당 에러는 

node.js의 버전일치로 해결이 가능합니다.

참고

안녕하세요 상훈입니다.

Vue.js 3 의 예제를 찾고 계시는 분들을 위한 Vue3 예제 강의 약 11편이 준비되어있습니다.

vue3 공식 페이지에도 게재되어있으니 안심하시고 들어가셔도 됩니다. 

기본적인 vue의 문법들( if, else, components, props 등)을 모두 가르쳐줍니다.

짧고 유용한 강의 추천드립니다.

뷰 강의 들으러 가기

안녕하세요 상훈입니다.

매번 검색해서 복붙하기가 너무 귀찮아 포스팅합니다.

<script src="https://unpkg.com/vue@next"></script>

Vue.js 3

라라안녕하세요 상훈입니다.

라라벨 - 뷰 연동하는 방법 및  Vue Test Page 출력하는 방법입니다.