CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경

Nuxt.js 3 에서 npm을 이용하여 pinia를 설치하는데 바로 오류가 출력되었습니다.

code ERESOLVE
ERESOLVE could not resolve
while resolving: undefined@undefined
....

✔ 해결방법부터...!

//package.json

"overrides": {
    "vue": "latest"
  },

이에 해당하는 내용을 추가해주시고, npm 을 이용하여 pinia를 재설치해주시면 됩니다!

✔ 서사

이번엔 Nuxt.js 3 에서 store 를 사용해보고자 pinia를 사용하게 되었습니다. 기존 Vue.js3 프로젝트에서는 그냥 vueStore를 사용했었는데, 그때 알게된 store 대체 라이브러리 PINIA🍈이번에는 사용해보자, 라고 생각해서 설치를 시작해보았습니다.

그리고 등장하게된 위의 에러.

예전에도 그렇고 이것과 유사하게 생긴 에러가 자주 등장하였었는데, 해결을 못하고 프로젝트를 지우곤 했었습니다 😢

그런데 우연찮게 Pinia 공식 문서에서 이에 대한 문구가 살짝 있는게 보이더라구요? (뭐지.. 다른데도 있나?)

감동😢

Vue-cli webpack4.0 version 에서 sass를 개별 설치하려고

$ npm i node-sass
$ npm i sass-loader

를 했는데 에러가 발생하였다.

node-sass는 정상적으로 설치가 완료되었지만, sass-loader를 설치하지 못했다.

그래서 개발자버전으로 다운로드 하려했지만 또 에러를 뱉어냈다.

$ npm i sass-loader -D

■ 해결방법

Vue-cli webpack 4.0의 버전은 그에 맞는 알맞은 버전의 sass를 다운로드 받아야한다고 명시되어져있다.

$ npm install -D sass-loader@10.0.5 node-sass

10.0 version을 다운받아도 무방하다.

안녕하세요 상훈입니다.

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