본문 바로가기
반응형

전체 글703

[NuxtJS] 미들웨어(middleware) 사용하기 미들웨어(Middleware) NuxtJS의 라이프 사이클을 보면 nuxtServerInit 다음에 Route Middleware라는 녀석이 있다. 여기서 미들웨어면 미들웨어지 왜 "라우트 미들웨어"라는 명칭을 사용하냐면 NuxtJS에서는 서버 미들웨어와 라우트 미들웨어 두 종류가 존재하기 때문에 미들웨어라는 명칭보다는 라우트 미들웨어라는 명칭을 사용하는 듯 하다. (하지만 일반적으로 NuxtJS에서 미들웨어라 하면 라우트 미들웨어를 지칭하기 때문에 그냥 미들웨어로 지칭하도록 하겠다.) NuxtJS에서 미들웨어는 크게 익명 미들웨어(Anonymous Middleware)와 네임드 미들웨어(Named Middleware)로 나뉜다. 익명 미들웨어(Anonymous Middleware) 익명 미들웨어는 특정.. 2023. 2. 14.
[GIT] 'origin' does not appear to be a git repository 예전에 git으로 연결해 둔 프로젝트를 가지고 작업을 좀 하다가 git push origin으로 원격 저장소에 push를 하던 중에 아래와 같은 에러가 발생하였다. fatal: 'origin' does not appear to be a git repository fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 에러 메시지는 origin이라고 명시된 원격 저장소를 찾을 수 없다는 에러다. 해결방법은 크게 어렵지 않다 다시 연결을 해주면 끝이다. 현재 원격 저장소 연결 상태 확인하기 우선 현재 git을 사용하고 있는 위치에서 원격 저장.. 2023. 2. 10.
[GIT] 잘못된 Pull Request 머지 하기 전에 수정하기 Git Pull Request 수정하기 협업을 하고 있다면 Git Pull Request를 통해 진행하고 있을 텐데, 만약 PR을 날린 뒤에 리뷰를 통과하지 못하거나, 미흡한 부분들이 발견되어 수정하라고 결과가 나왔을 때 단순히 Close 하는 게 아니라 날린 Pull Request를 수정하는 방법에 대해 알아보자. 우선 첫 번째 방법으로는 commit을 덮어 씌운 다음 push -f 옵션으로 해당 브랜치에 다시 밀어 넣는 방법이다. 1. Pull Request 날리기 이런 식의 Pull Request를 날렸다고 가정하자. 오타를 확인 못하고 Pull Request를 날려 이 오타를 수정하고 싶다. 2. 로컬에서 수정 후 git commit --amend를 통해 commit 덮어쓰기 3. git push.. 2023. 2. 6.
[GIT] 원격 브랜치 삭제하기 (delete remote branch) 원격 브랜치 삭제하기 상황에 따라 로컬 브랜치뿐만 아니라 원격 브랜치 역시 지워야 하는 상황이 생길 수 있다. 로컬 브랜치 사용법은 아래 링크를 통해 확인해 보자. https://mine-it-record.tistory.com/648 [GIT] 깃(Git) 브랜치(Branch) 사용하기 (ft. 조회/생성/이동/삭제/병합) git branch git을 사용하게 되면 가장 많이 듣는 게 브랜치라고 생각된다. 쉽게 설명하자면 코드를 통째로 복사하고 나서 원래 코드와는 상관없이, 독립적으로 개발을 진행할 수 있게 도와주는게 브 mine-it-record.tistory.com 원격 브랜치를 삭제하는 명령어는 생각보다 간단하다. # git push [remote] --delete [branch] git push .. 2023. 2. 6.
[VueJS] Deep Selectors 사용하여 자식 컴포넌트의 스타일 정의하기 자식 컴포넌트 스타일 정의하기 VueJS 기반의 프로젝트를 진행하게 되면 스타일 캡슐화를 사용하여 각 컴포넌트별로 어떤거를 사용해도 상관은 없지만 첫 번째 방식의 경우 Sass 같은 전처리기에서 인식이 안된다 한다. 그럼에도 ::v-deep 방식을 많은 사람들이 추천하는 모양이다. 하지만 ::v-deep 역시 Vue 3에서는 사용방법이 바뀌었으니 Vue버전을 변경한다면 주의해야 한다. Vue3 버전에서는 v-deep을 다음과 같이 사용하라고 github 문서에 나와있다. ::v-deep(.bar) {} 스택오버플로우를 살펴보면 vue 2.7 이상에서는 위와 같은 방식을 사용해야 한다고 한다. 그리고 공식문서를 살펴보니까 아래와 같은 방식으로도 사용한다. :deep(.bar) {} 실제로 Vue 3 환경에.. 2023. 1. 30.
[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.
반응형
TOP

티스토리툴바