[멋쟁이사자처럼] 부트챌린지: 11시간만에 트위터만들기 - Yarn 라이브러리

 

오늘은 간단하게 yarn을 통한 라이브러리 설치에 대해서 배웠다. 긴 내용은 아니니 별도 목차 없이 간단하게 말하겠다.

 

오늘 배운 것

`yarn`은 `npm`처럼 JS 패키지를 관리하는 도구로, npm보다 더 빠른 패키지 설치를 지원한다. Meta에서 만든 도구로 npm의 단점을 보완하기 위해서 탄생한 것... 이지만, `npm install -g yarn` 과 같이 npm을 통해서 설치하게 되므로 사실 크게 의미가 있어보이진 않는다(...) 최근에는 `pnpm`을 사용하는 게 더 대세라고. 어쨌든 yarn은 안정성이나 패키지 버전 관리에서는 `npm`보다는 좀 더 뛰어나다고 할 수 있다.

 

yarn을 통해서 라이브러리를 설치하기 위해서는 `yarn add [라이브러리 이름]` 형태다. 라이브러리 이름에 들어가는 건 기존 npm과 비슷한 형태다. 그렇게되면 `package.json`에 설치될 것이다.

 

실습에서는 `axios` 설치와 `vue3-confirm-dialog` 설치를 진행하였고, `vue3-confirm-dialog`을 사용하여 데이터를 삭제하는 법을 배웠다. 설치한 `vue3-confirm-dialog` 설치법 및 사용법은 공식 문서에서 잘 나타나 있다.

 

https://github.com/rowathy/vue3-confirm-dialog

GitHub - rowathy/vue3-confirm-dialog

 

여기에 덧대어 `confirm`시 작용하는 메서드도 추가해보았는데,  다음과 같았다.

 

        removeFeed(id) {
            this.feedData = this.feedData.filter(feed => feed.id !== id)
        }

 

`this.feedData`를 `this.feedData.filter(feed => feed.id !== id)`로 처리를 했는데, 사실 이건 지운다기보다는, feedData 안에서 해당 id에 맞는 데이터를 제외하여(`filter`() 처리) 반환을 해주는 것이다. 굳이 따지면 프론트엔드에서하는 눈가리고 아웅이기 때문에 실제 데이터가 지워진다고 보긴 어렵다. 화면에서 치우는 것에 가깝기 때문에 페이지를 이동하거나 새로고침하거나 껐다 켜면 그대로 남아있게 된다.

 

 

실제 적용한 이미지.