본문 바로가기
반응형

분류 전체보기698

[VueJS] 믹스인(Mixins) 사용하기 Mixins VueJS를 사용하게 되고 규모가 점차 커진다면 한 번쯤은 접해볼 수밖에 없는 믹스인(Mixins)에 대해 알아보자. 믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하기 위해 사용하는 방법이다. 하지만 Composition API의 등장으로 믹스인을 굳이 사용할 필요가 없어졌다. 그래서 이 글은 Vue3 버전을 사용하지 않으며, Composition API를 사용하지 않고 Composition API를 사용함에도 믹스인을 혼합해서 사용하는 경우에만 보면 도움이 될 것이다. 아 물론 Vue3의 안정화가 이미 이루어 졌지만 아직은 우리나라에서 Vue3가 많이 사용되지는 않는 듯 하니 알아두면 좋다. 사용 방법은 매우 간단하다 Vue의 속성중에 mixins.. 2023. 1. 29.
[GIT] 실수로 날려버린 Stash 복구하기 삭제된 Git stash 복구하기 [GIT] 깃(Git) 스태시(stash) 사용하기 - 변경된 내용 임시 저장하기 [GIT] 깃(Git) 스태시(stash) 사용하기 - 변경된 내용 임시 저장하기 git stash git stash는 무엇일까? git stash는 파일의 변경 내용을 일시적으로 기록해두는 영역이라고 생각하면 된다. 실제로 현업에서 git을 사용하다 보면 생각보다 많이 사용하게 되는 게 git stash라고 mine-it-record.tistory.com git stash는 위 링크에서 설명한 것처럼 변경된 내용을 임시로 저장해 두는 역할을 한다. 보통 특정 branch에서 작업을 하다가 일의 우선순위가 밀리거나 급하게 다른 업무를 처리해야 하는 경우 현재 작업하고 있는 내용을 커밋할 수.. 2023. 1. 28.
[NuxtJS] 개발/운영 분기(NODE_ENV) (ft. cross_env) NODE_ENV 보통 노드 환경에서 개발을 하게 되면 개발(development)과 운영/배포(production)로 분기를 env값을 이용해 구성한다. 많은 블로그와 코드들을 보면서 봤을 텐데 보통 아래와 같이 선언해두고 사용한다. { "name": "test", "version": "1.0.0", "private": true, "scripts": { "dev": "NODE_ENV=development nuxt", "build": "nuxt build", "start": "NODE_ENV=production nuxt start", "generate": "nuxt generate" }, "dependencies": { "core-js": "^3.25.3", "nuxt": "^2.15.8", "vue": .. 2023. 1. 18.
[NuxtJS] NuxtJS에서 .env 환경변수 사용하기 어떤 환경으로 프로젝트를 한다 해도 대부분의 프로젝트에서 .env 환경변수 파일을 사용할 것이라고 생각된다. 사실 나 역시 알고만 있었지 실제로는 처음 써보기 때문에 그냥 .env파일만 선언해서 사용하면 되는 줄 알았는데, NuxtJS는 좀 다른 환경이랑은 다르게 사용해야 하는 듯싶어 이렇게 기록해 둔다. NuxtJS에서 .env 사용하기 당연히 구글링을 해봤다면 내가 작성한 글 말고도 다른 글을 보고 해결을 했을 수 있다. 하지만 대부분의 NuxtJS 관련 글을 보고 있자니 dotenv 플러그인을 설치하는 것부터 시작하더라. 여기서 첫 번째 의문이 들었다. NuxtJS에서 dotenv플러그인을 사용해야만 .env를 사용할 수 있다면 이미 내장되어 있지 않을까? 라는 합리적 추론을 바탕으로 패키지를 뒤져.. 2023. 1. 17.
[NuxtJS] nuxtServerInit이란? nuxtServerInit NuxtJS의 라이프 사이클을 보면 최상단에 존재하는 nuxtServerInit이라는 녀석에 대해 의문을 가져본 적이 있을 것이다. nuxtServerInit은 단어 그대로 서버 측에서 실행되는 녀석인데, 특이하게도 NuxtJS의 universal 모드에서만 사용할 수 있는 action 함수이다. actions: { nuxtServerInit ({ commit }, { req }) { if (req.session.user) { commit('user', req.session.user) } } } 위 예제처럼 nuxtServerInit은 서버 사이드 렌더링 시점에 실행되기 때문에 미리 데이터를 설정해 놓고나 서버에서만 접근할 수 있는 데이터를 다룰 때 유용하다. 그리고 또 특이한.. 2023. 1. 17.
[NuxtJS] asyncData와 fetch 비교 및 사용법 asyncData VS fetch NuxtJS를 사용하게 되면 자주 보게 되는 혹은 꼭 알고 있어야 하는 개념 중에 하나가 asyncData와 fetch가 아닐까 싶다. asyncData와 fetch의 경우에는 VueJS에서는 제공하지 않았던 것이기 때문에 Vue를 쓰다가 Nuxt를 사용하게 된다면 알고 가야 할 개념이다. 물론 그 뿐만아니라 vue랑은 lifecycle이 좀 달라졌기 때문에 전반적으로 새롭게 알아야 하는 개념들이 많아졌다. 라이프 사이클을 머릿속에 넣어두고 asyncData와 fetch에 대해 알아보자. asyncData 라이프 사이클을 보면 알겠지만 asyncData의 경우에는 서버사이드에서 실행되는 녀석이다. asyncData의 경우 아래와 같은 특징을 가진다. 서버사이드에서 실행된.. 2023. 1. 16.
[NuxtJS] 빌드/운영 배포 시 console.log 제거하기 NuxtJS 빌드 시 console 제거하기 개발을 하다 보면 console.log를 쓰면서 확인을 해야 하는 경우가 많은데, 배포를 하면서 미처 지우지 못한 console.log의 잔해들이 남을 수 있다. 그럴 때 사용할 수 있는 두 가지 방법에 대해 기록해 둔다. 아 물론 이 방법들이 NuxtJS뿐만 아니라 다른 곳에서도 사용이 가능할 것으로 보이니 알아두면 좋을 것 같다. 1.babel-plugin-transform-remove-console babel의 플러그인을 사용하여 console을 지우는 방법이 존재한다. npm install --save-dev babel-plugin-transform-remove-console yarn add --dev babel-plugin-transform-remov.. 2023. 1. 14.
[#경험담] 웹 개발자(SI/SM)의 경력직 이직 경험 및 후기 사실 이 글은 2022년 말에 작성한 회고글을 적기 이전에 먼저 적어두고 싶었는데, 까먹고 이제야 작성하는 글이다. 내가 굳이 제목에 SI/SM 개발자라고 적은 이유는 좀 안타까운 경우들이 많이 생길까 봐 찾아볼 때 도움이 되었으면 해서 그렇게 작성하였다. 내 미천한 경험들과 생각들이 누군가에게 도움이 되기를 바라며 끄적끄적 글을 써보도록 한다. 아 참고로 SI에서 4년 차라는 경력을 가지고 있었다. 1. 재직 중 이직 준비 VS 퇴사 후 이직 준비 이직을 결심한 순간 가장 처음 걸리는 게 현재 재직 중인 회사일 것이다. 과연 재직 중에 이직 준비를 해야 하는지 아니면 퇴사 후에 이직 준비를 해야 하는지가 처음 맞닥뜨리는 선택의 순간이다. 정해진 정답이 있는 건 아니지만 이건 지극히 개인적인 이유로 선택.. 2023. 1. 13.
[MacOS] xcrun: error: invalid active developer path MacOS 업데이트 후 xcrun: error 해결하기 어김없이 맥북을 사용하다 에러가 발생하였다. 이 에러는 M1에서만 발생하는 에러가 아니라 다양한 글들이 작성된 날짜를 보아하니 오랫동안 존재해왔던 에러인듯하다. MacOS 업데이트 후 아주 높은 확률로 git을 비롯한 다수의 개발 툴들이 다 xcrun에러를 뱉게 된다고 한다. 나 역시 MacOS를 12버전을 사용하다가 MacOS 13 Ventura 버전으로 업데이트를 한 뒤, git을 사용할려다 보니까 xcrun: error를 뱉기에 매우 당황하였다. git # xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Libr.. 2023. 1. 10.
반응형
TOP