CodeHoon

안녕하세요 상훈입니다.

Vue.js 3,  Tailwind.css 를 설치하여 프로젝트를 npm run serve 를 통해 실행하였는데 에러가 발생하였습니다.

 ERROR  Failed to compile with 1 error                                                                                                                                                                            오후 6:00:02
 error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- D:\Projects\loading-view\noop.js

(@D:\Projects\loading-view\postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.219.105:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

개략 Tailwindcss의 module을 찾을 수 없다는 문제인데요, 

$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

를 명령어로 입력(설치)해주신 뒤,

module.exports = {
  purge: {  content: ['./public/**/*.html', './src/**/*.vue'] },
  //  ...
}

위의 내용을

 이와 같이 tailwind.config.js 에 작성해주고 저장해주세요.

그리고 다시 프로젝트 구동 "npm run serve" 해주시면 정상적으로 실행이 됩니다.

이상입니다.

참고

안녕하세요 상훈입니다.

Javascript의 Promise에 대해 알아보겠습니다.

내용은 해당 영상을 참고하였습니다.

Promise 는 async 까지 연결되어 사용하는 내용도 가능합니다.

하지만 이번에는 성공, then() 까지만 확인하도록 하겠습니다.

예시) 일반적인 함수 사용하기.

기본적으로 delay라는 함수가 있을 때, 인자로 sec와 callback을 받습니다. 

함수 내부에는 setTimeout을 이용하여 sec초 뒤에 callback을 출력하는 함수입니다. (시간을 띄울거예요!)

function delay(sec, callback) {
    setTimeout(() => {
        callback (new Date().toISOString())
    }, sec * 1000)
}

delay(1, (result) => {
    console.log(1, result)
})

그리고 delay함수를 1초 뒤에 result 함수로 출력하겠다! 선언하면, 1초 뒤에 

해당 내용이 출력됩니다.

만약 이곳에서 여러 개의 delay함수를 사용하여 쓰고싶다!  이렇다면, 흔히 말하는 콜백지옥함수가 될겁니다.

delay(1, (result) => {
    console.log(1, result)

    delay(1, (result) => {
        console.log(2, result)

        delay(1, (result) => {
            console.log(3, result)

            delay(1, (result) => {
                console.log(4, result)

                delay(1, (result) => {
                    console.log(5, result)
                })
            })
        })
    })
})

결과적으로 잘~ 작동합니다! 하지만, 만약 저 코드 양이 방대해진다면, 본인은 물론 다른 사람도 보다가 미쳐서 모니터를 주먹으로 칠 수도 있습니다.

그래서 나온것이 Promise() 입니다.

예시2) Promise() : 여러 개의 then() 사용하기

function delayP(sec) {	// 인자를 시간초만 받음
    return new Promise( ( resolve, reject ) => {    // Promise (성공, 실패) 선언
        setTimeout(() => {
            resolve (new Date().toISOString())  // resolve(성공)에 해당하는 항목
        }, sec * 1000)
    })
}

then()

delayP(1)
    .then((result)=> {  
        console.log(1, result)
        return delayP(1)    // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
    })
    .then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
        console.log(2, result)
    })

 Promise() .then() 을 사용하는 것의 장점은 더 말할 필요가 없이 보기가 쉽습니다. 

또한 구분지어서 코드를 작성하는데에도 문제가 없죠. 

하지만 만약 반환값(return)을 작성해주지 않는다면,

delayP(1)
    .then((result)=> {  
        console.log(1, result)
        return delayP(1)    // delayP() 를 return 시켜 새로운 promise를 실행하는 것. then으로 이어 받을 수 있다.
    })
    .then((result) => { // 2번 째 then을 통해서 위의 첫번째 then이 실행된 이후에 실행. 즉, 1초 + 1초 에 실행된다.
        console.log(2, result)
        // return이 없다. => 다음 result = undefined가 될 것이다.
        // return 'string or something' 하면 해당하는 내용이 바로 출력된다. 
            // => delay를 통해 해당 내용을 지연시키지 않았기 때문에.
    })
    .then((result) => { // 받은 return 값이 null 이기 때문에 undefined를 출력한다.
        console.log(3, result)  // 출력 내용 ( 3, undefined )
    })

2번째 then에서 return이 없습니다!

=> 3번째 delayP( null ) 이 들어갔다는 뜻입니다.

그렇기 때문에 출력되는 것은 ( 3, undefined ) 가 됩니다.

추가적으로 sec 라는 인자도 전달이 안되었기 때문에
바로 세번째 then() 이 실행되어 3, result 가 출력되었습니다.

2, 3번째 then()을 보기쉽게 해보자면, 아래와 같습니다.

    .then((result) => {
        console.log(2, result)
        console.log(3, result)  
    })

물론 2번째 then이 true라는 전제조건이 존재하지만요.

이상으로 promise 기초에 대한 포스팅을 마치겠습니다.

감사합니다.

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

안녕하세요 상훈입니다.

Vue cli 3 를 유튜브로 클론코딩 하였습니다.

위는 해당하는 강의 내용입니다.

Vue.js 버전은 3.2.20 이고, 
Vue/cli는 4.~ 입니다. 

style은 tailwind.css를 사용하였고,
추가된 라이브러리는 moment.js 로, datetime을 출력할 수 있는 자바스크립트 라이브러리입니다. 

일단 결과적으로 문제가 한 개 있었는데 고치지 못하였습니다. ㅎㅎ;;

moment.js 관련해서 인 것같은데 어떻게 해야할지 모르겠더군요. 

=> 원작 개발자님의 소스를 보아도 아예 포맷이 달라, 결론을 얻어내지 못하였습니다.

발생한 에러는 dataDate(현재시각)관련해서의 에러인데... 타입에러가 발생하였고, 프로퍼티가 선언되지 않았다고 합니다.

분명 main vue 에서
1. 변수 선언
2. DataTitle.vue 에서 props로 참조해주어
3. data 출력을 진행하였지만 해당되는 내용에 에러가 발생하였습니다. 

언젠가 이게 무슨 원리로 제대로 작동하는지 이해해서 수정할 수 있을거라 생각합니다......ㅎ.ㅎ..

결과화면

select-option을 이용하여 해당 내역을 모두 불러올 수 있고, 이를 computed 처리하여 실시간으로 데이터가 전환됩니다. 

button - Clear Country 하면 다시 Global을 나타냅니다. (=초기화)

모바일 화면에서는 이렇게 출력될겁니다.

이렇게 프로젝트를 따라 만들어보면서 느낀것이 

1. vue.js 에 대해 이제 알아듣는 것 보니 걸음마는 떼었다.
2. async await에 대해 공부를 좀 해야겠습니다.

이상입니다.

수고!

사용

코로나 api

프로젝트전체

,

Error:  You are using an unsupported version of Node. Please update to at least Node v12.14
    at assertSupportedNodeVersion

Error:  You are using an unsupported version of Node. Please update to at least Node v12.14 at assertSupportedNodeVersion

그래서 업데이트를 진행하였는데 추가적인 에러가발생하여 node 자체를 지우고 재설치를 하게되었다.

1. node.js 제거 과정 (디렉터리와 bash 내용을 전부 삭제)

sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/.npm ~/.node-gyp /opt/local/bin/node /opt/local/include/node /opt/local/lib/node_modules 

sudo rm -rf /usr/local/lib/node* ; sudo rm -rf /usr/local/include/node* ; sudo rm -rf /usr/local/bin/node*

sudo apt-get purge nodejs npm

2. node.js 설치과정

sudo apt install nodejs

sudo apt install npm

// cache 제거. 안해주시면 에러 발생가능성이 있습니다.
sudo npm cache clean -f 

// 전역에서 사용가능하게 npm을 n이라는 이름으로 다운로드
sudo npm install -g n

// 안정화 버전을 설치
sudo n stable

3. 확인

node -v
v16.13.0

npm -v
8.1.0

자꾸 오류 나고 그래서 삭제만 8번 넘게 진행한 것 같네요.

억울하고 분통터져

원래 뭘 진행하려고 했는지도 머리속에서 증발하게 되었습니다. ㅎㅎ 
다시 무엇을 하려고했는지 떠나요~

참고

기타 등등..

안녕하세요 상훈입니다.

우리의 WebApplication을 조금이라도 더 예쁘게 꾸며줄 css - transition을 포스팅하겠습니다.

그 중 hover의 이벤트를 사용하려고 합니다.

html에서는 클래스명만 정해주시면 됩니다.

<body>
    <p>width, height, bg-color, transform 을 위한 트랜지션 결합.</p>
    <div class="transform"></div>
</body>

클래스명 "transform"에 대해서 아래의 style을 지정해주면 됩니다.

<style>
.transform{
    border: 1px solid black;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.transform:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
</style>

rotate를 보시면 아시다시피 transition 과 transform으로 지정한 내용을 살펴보면,

2초동안 [ 가로 200px, 세로 200px, 배경색 #FFCCCC, 180도 회전 ] 을 하게됩니다.

이상입니다.

해당 내용은 전부 'MDN WebDocs' 에 작성되어져 있습니다.

안녕하세요 상훈입니다.

Vue.js + tailwind.css 를 이용하여 모달창을 구현하도록 하겠습니다.

컴포넌트의 개념을 첨가하였으니, 양해바랍니다. (컴포넌트 넣을줄만 알면 됨)

<template >
  <div
    v-if="ModalDisplay"
    class="shadow-lg w-full h-full flex bg-black bg-opacity-70 justify-center align-middle items-center ">
      <div class="w-1/3 h-1/2 bg-white rounded relative">
        <div class="relative w-full">
            <div class="flex text-center items-center justify-center pt-2">
                <h1 class="font-bold text-2xl">모달창 레이아웃</h1>
            </div>
            <svg 
                @click="ModalDisplay = false" 
                id="closeModalBtn" xmlns="http://www.w3.org/2000/svg" class=" cursor-pointer h-10 w-10 absolute top-0 right-0 hover:text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </div>
        <div class="w-full pt-5">
            <hr>
            <p class="py-5 px-5 text-xl">
                안녕하십니까?<br>
                모달창입니다.
            </p>
        </div>
        <div class="w-full">
            <button
                @click="ModalDisplay = false" 
                class="absolute bottom-0 right-0 border border-solid round w-24 h-10  my-2 mx-3 hover:text-red-700 hover:border-red-500" >
            닫기</button>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            ModalDisplay: true,
        }
    }
}
</script>

<style>

</style>

v-if 와 @click 바인딩으로 해당 기능을 구현하였습니다.

ModalDisplay를 기본값으로 true로 해서 자동적으로 출력되어져있게 해놓고,
닫기 버튼이나, X버튼을 눌렀을 때 종료가 되게 하는 겁니다. 

svg를 button으로 감싸서 button으로 바꾸는게 용도에 맞아 좋아보입니다.

혹시나해서 App.vue 도 게시

<template>
  <Modal />

</template>

<script>
import Modal from './components/Modal.vue';

export default {
  components: {
    Modal,
  },
}
</script>

<style>

</style>

안녕하세요 상훈입니다.

해당 에러에 대해 말씀드리겠습니다.

바인드를 하려는 대상에 key 가 설정되지 않았기에 해당 에러가 발생하였습니다.

그러니 :key를 추가하면 됩니다.

예시)

이렇게 button을 data-binding으로 v-for를 사용하려고할 때, key를 정해주지 않아 발생하는 에러입니다.

위처럼 key 값을 정해주면 해결됩니다.

이상입니다.

안녕하세요 상훈입니다.

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를 실행시켜주니, 에러가 해결되었습니다.

만약 이런 사소한 경로 잡는 문제로 해결이 안된다면, 아래의 해당 블로그를 참조 바랍니다.

이상입니다. 감사합니다.