티스토리

나만의 기록들

검색하기

블로그 홈

나만의 기록들

mine-it-record.tistory.com/m

신입 개발자부터 현재까지의 기록...

구독자: 111

방명록 방문하기

반응형

주요 글 목록

[JavaScript] startsWith/endsWith - 대상 문자열이 특정 문자/문자열로 시작하는지 끝나는지 체크 String.prototype.startsWith()startsWith() 메서드는 대상 문자열이 특정 문자로 시작하는지 체크하는 메서드이다. ▷ 구문str.startsWith(searchString)str.startsWith(searchString, position)searchString : 문자열의 시작 지점에서 탐색한 문자열position : 탐색을 시작할 위치 (default 0) ▷ 예제 1 ) String.prototype.startsWith() 메서드 기본 사용법const str = '동해물과 백두산이 마르고 닳도록';console.log(str.startsWith('동'));// trueconsole.log(str.startsWith('동', 3));// falseconsole.log(st.. 공감수 2 댓글수 0 2024. 5. 16.
[Zustand] 상태 값 초기화 하기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" How to reset state zustand에서는 상태값을 초기화시켜주는 내장 함수를 제공해주고 있을까? 찾아보니 따로 제공해주고 있는게 없어 별도로 정의해 사용해야만 한다. 그래도 공식문서에서 이러한 방식들이 있다고 안내해주고 있어 참고하여 만들어두면 좋다. 공식문서의 코드를 그대로 가져와보자. import { create } from 'zustand' // define types for state values and actions separately type State = { salmon: number tuna: number } type Actions = { addSalmon: (qty.. 공감수 2 댓글수 0 2024. 4. 4.
[Zustand] get()을 사용하여 최신값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" get은 도대체 언제 쓰는 걸까? 얼핏 zustand를 살펴보면 set/get을 제공해주고 있는데 get이라는 녀석을 언제 쓰라고 제공해 주는 건지 의아하다. Read from state in actions 혹시나 공식문서에 나와있나 살펴보면 Read from state in actions라는 세션으로 설명을 해주고 있다. const useSoundStore = create((set, get) => ({ sound: 'grunt', action: () => { const sound = get().sound ... 이러한 사용 방식은 store의 action 함수를 선언할 때 현재 store s.. 공감수 2 댓글수 0 2024. 4. 3.
[Zustand] Auto Generating Selectors 설정으로 더 간단하게 state값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Auto Generating Selectors 공식문서에서 제공하는 선택기 자동 생성 패턴이다. const count = useCountStore((state) => state.count) 보통 이런 식으로 state값을 가져오기는 하는데 state => state.count 이런 방식조차 너무 자주쓰면 귀찮긴 하다. 훌륭하게도 zustand쪽에서 자동으로 실렉터를 생성해 주는 방식을 제공해 주어 그대로 적용해 보자. store/index.ts import { StoreApi, UseBoundStore } from 'zustand' type WithSelectors = S extends { .. 공감수 2 댓글수 0 2024. 4. 3.
[Zustand] 스토어 값 한 번에 여러개 가져오기 (ft. useShallow) "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", 스토어 값 여러 개가 필요한 경우 이전 게시글 "[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법"에서 스토어 값을 가져올 때 이런 식으로 사용했었다. import { useCountStore } from '../store/countStore' const CountButton = () => { const increase = useCountStore((state) => state.increase) const decrease = useCountStore((state) => state.decrease) return ( 증가 감소 ) } 하지만 한 컴포넌트에서 하나의 스토어.. 공감수 2 댓글수 0 2024. 4. 3.
[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Zustand란? zustand는 수많은 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적이며, 단순한 방식의 사용법을 제공하여 최근에 굉장히 각광받는 라이브러리이다. 개인적으로는 러닝커브가 높지 않다는 게 아주 큰 장점이 아닐까 싶다. Zustand 설치 및 적용 Zustand 설치 # NPM npm install zustand # Yarn yarn add zustand 여느 라이브러리와 같이 동일하게 추가를 해주고 별다른 설정은 필요 없다. Zustand 사용 아주 간단하게 설치를 마쳤으니 사용도 아주 손쉽게 해 보도록 하자. 공식문서에서도 아주 간단하게 설명이 되어있는데, 공.. 공감수 2 댓글수 0 2024. 4. 1.
[NextJS] framer-motion을 활용한 모달(Modal) 구현 framer-motion을 굳이 사용한 이유는? React에서 제공하고 있는 Portal기능만을 사용하여 모달창을 구현할 수는 있으나 "Exit Animation"을 주기가 어려웠다. React환경에서는 show/hide의 상태값을 변경하여 리렌더링 되면, 모달 컴포넌트가 보이거나 사라진다. 하지만 "리렌더링"이 되면서 보이거나 사라지기 때문에 사라질 때는 애니메이션 없이 바로 사라지는 현상이 발생한다. 라이브러리도 있는 마당에 어떻게든 구현할 방법은 있겠지만 이미 훌륭하게 제공하고 있는 라이브러리를 굳이 쓰지 않을 이유가 없었다. 그리고 라이브러리 종류 역시 많았는데 그 중에 framer-motion을 선택한 이유는, 어차피 이왕 선택해서 사용하는 거 가장 인기가 많고, 호환성이 좋다고 알려진 라이브러.. 공감수 2 댓글수 0 2024. 3. 22.
[CSS] 모바일 브라우저에서 발생한 sticky 하단 고정 오류 버튼이 자유분방하게 움직인다고? 회사에서 업무를 진행하던 도중 놀랍게도 말썽꾸러기인 사파리 환경이 아니라 크롬, 삼성 브라우저에서 이슈가 발생하였다. QA팀 제보로 알게 되었는데, bottom: 0으로 박아두었던 버튼이 자유분방하게 돌아다닌다는 것이다. 놀랍게도 position: sticky / bottom: 0px 의 조합으로 구현된 footer버튼이 전혀 예상하지 못한 방향으로 동작하였다. 원인 파악 사실 이 글을 작성하는 시점에서도 정확한 원인을 알 수 없다는 게 좀 슬프다. 단지, 브라우저의 뷰포트를 잘못 인식하는게 아닌가 "추측"만 할 뿐이다. 특히 이는 본문 시작할 때 언급한 것 처럼 크롬, 삼성브라우저 중에서 유독 삼성브라우저에서 재현이 잘된다. 크롬의 경우에는 "특정 버전"에서만 stick.. 공감수 1 댓글수 0 2024. 3. 22.
[SCSS] Sass Variable in calc() function Error SCSS문법을 사용하여 스타일을 주던 중 calc() 함수에 SCSS변수를 넣어 계산을 하려고 하였더니 빌드 오류가 발생하였다. 이렇게 사용하면 안 되는 건가? 싶어 레퍼런스 조사를 해보았더니 SCSS변수를 calc() 함수에 넣어서 사용하려면 "보간 문법"을 사용해야 한다고 한다. 이렇게 까지 귀찮을 일인가? 고작 변수를 가져다 계산에 사용하려는 건데 보간문법(#{})까지 써야 한다니 여간 불편한 게 아닌가 싶었다. 그리고 몇 가지 의문들이 해결이 안되었다. 참고한 레퍼런스의 sass버전을 알 수 없었다. 이게 버전 문제가 아닌가라는 의문도 들었고, 우리랑 같은 환경이 아닌 이상 언제든지 상황은 바뀔 수 있다고 생각된다. sass 개발진들이 이렇게 귀찮은 것들을 그대로 방치했을까? 말 그대로다. 빠르.. 공감수 2 댓글수 0 2024. 3. 19.
[CSS] aspect ratio - 요소 가로세로 비율 지정하기 aspect-ratio? 언제 나왔는지는 모르겠으나 과거에는 css에서 비율로 요소를 조절할 수 없었다. 하나 이제부터 aspect-ratio 속성을 사용하여 비율을 지정할 수 있게 되었다. aspect-ratio 속성은 주로 이미지나 동영상을 비율대로 줄이거나 늘리는데 활용되며 매우 직관적인 특징이 있다. 해당 속성으로 인해여 이제 요소를 width/height로만 지정하던 시대가 저물지 않을까 싶다. 일반적인 사용방법은 다음과 같다. aspect-ratio: 1 / 1; aspect-ratio: 1; /* fallback to 'auto' for replaced elements */ aspect-ratio: auto 3/4; aspect-ratio: 9/6 auto; /* Global values *.. 공감수 2 댓글수 0 2024. 2. 15.
[ReactJS] dangerouslySetInnerHTML가 뭘까? Next.js 환경에서 개발을 시작한 지 꽤 지났지만 최근까지도 나는 dangerouslySetInnerHTML 이게 innerHTML을 XSS로부터 보호해 주는 내장된 innerHTML이라고 생각했었다. 충격적이게도 innerHTML이랑 전혀 다를 게 없었다. 공식문서 내용을 가져와보자. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따.. 공감수 2 댓글수 0 2024. 2. 15.
Smart App Banner란? 스마트 앱 배너란? 스마트 앱 배너는 애플 앱스토어에서 앱을 홍보하는 표준 방식을 의미한다. iOS에서 공식지원하는 Smart App Banner는 웹 페이지의 최상단에 위치하게 된다. 안타깝게도 안드로이드 환경에서는 따로 제공해 주는 게 없기 때문에 Smart App Banner와 비슷하게 따로 구현해줘야 한다. Smart App Banner는 iOS에서 공식 지원한다는점, 해당 App이 사용자 Device에서 지원가능한지 여부를 자체 판단하여 배너를 보여주고 안 보여주는 점, 기타 구현과 대응에 힘을 쏟을 필요가 없다는 점 등등 다양한 장점을 가지고 있다고 생각된다. 그렇다면 무조건 Smart App Banner를 쓰는게 좋은 게 아닐까? 꼭 그렇지는 않은 게, 커스터마이징이 힘들다는 점이다. 특히 .. 공감수 2 댓글수 0 2024. 2. 4.
[Lodash] 배열에서 false인 요소들 제거하기 (ft. compact) compact lodash에서 제공하고 있는 compact() 메서드의 경우 배열에서 false인 요소들을 제외할 때 사용되는 메서드이다. _.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3] 이런 식으로 배열 요소 중 자바스크립트에서 false로 간주되는 것들을 제거한 배열을 반환해 준다. 근데 이렇게만 보면 굳이 사용할 필요가 있나? 싶기도 하다. const array = [0, 1, false, 2, '', 3] array.filter(v => v) // => [1, 2, 3] 이렇게 filter만 사용해도 크게 복잡하지 않게 사용이 가능하기 때문이다. 실제로 나 같은 경우에는 특수한 경우가 아니면 filter 메서드를 사용하는 편이고, api 응답 데이터를 .. 공감수 2 댓글수 0 2024. 1. 24.
[JavaScript] console API에 대해 얼마나 알고있을까? console 자바스크립트 환경에서 코드의 결괏값을 출력하거나 테스트를 하기 위해 아마 나를 포함하여 대부분의 사람들이 console.log() 를 주로 사용하고 있을 것이다. 뭐 사실 현업에서도 그렇고 console.log()만을 사용함에도 딱히 불편함을 느끼거나 하는 것은 없다. 단순하게 console.log()만으로 충분해서 그것만 사용하는 걸까? 아니면 그것밖에 모르기때문에 그것만 사용하는걸까? 개인적인 생각으로는 그것만 아는 사람보다는 "익숙하지 않아서" 사용하지 않은 경우가 더 많다고 생각된다. 콘솔 API의 모든 기능을 알 필요는 없다고 생각되며, 가볍게 이런 게 있구나 정도로만 알아두는 것도 나쁘지 않다 생각된다. log level 딱! 이 정도만 알아둬도 일하는데 지장 없을 정도의 로그.. 공감수 2 댓글수 0 2024. 1. 9.
[NextJS] 빌드/운영 배포 시 console.log 제거하기 NextJS 빌드 시 console 제거하기 로그라는 게 서비스할 때 로그가 노출되면 위험한 부분이 있겠지만, 아무래도 개발을 하는 도중에는 로그를 살려두고 작업을 하는 게 매우 편리하다. 당연하게도 "빌드"시에만 콘솔을 제거해주는 기능을 Nextjs 자체적으로 제공하는 중이다. ▷ next.config.js module.exports = { compiler: { removeConsole: true, }, } console.* 와 일치하는 모든 콘솔을 제거해 달라는 설정이다. 공식문서에서는 babel-plugin-transform-remove-console와 비슷하다고 명시되어 있다. (일전에 NuxtJS에서 동일한 주제로 정리한 글이 있는데 거기서도 babel-plugin-transform-remove.. 공감수 2 댓글수 0 2024. 1. 9.
[JavaScript] arr.(findLast/findLastIndex) - 특정 조건에 맞는 배열의 값이나 인덱스 가져오기 이전부터 존재했던 배열 메서드인 .find() / .findIndex() 가 존재하였는데,메서드명에서부터 알 수 있듯이 앞에서부터 스캔하는 게 아니라 뒤에서부터 스캔하는 방식이다.재밌게도 최근에 나온 메서드이다.(ECMAScript 2023) find() / findIndex()와 사용방식이 다를 게 없기 때문에 상황에 맞게 사용만 해주면 된다.원래 쓰던 것과 동일하므로 구문 설명은 생략하고 바로 예제만 보도록 하자.▷ 예제 1) Array.prototype.findLast/findLastIndex 기본 사용법const array1 = [5, 12, 50, 130, 44];const found = array1.findLast((element) => element > 45);console.log(found.. 공감수 2 댓글수 0 2023. 9. 10.
[JavaScript] arr.with() - 특정 인덱스에 위치한 값 변경하기 배열의 특정 인덱스에 위치한 값을 바꾸는 Array.prototype.with() 메서드에 대해 알아보자.이 함수는 ECMAScript 2023에 소개된 배열 메서드이다.이 메서드의 역할은 제목과 본문 첫 줄에 적혀있는 것과 마찬가지로 지정된 인덱스에 위치한 값을 대체하고 새 배열을 반환하는 기능을 제공한다.사실 무슨 기능인지는 알겠는데 어디서 활용할 수 있을지 감이 안 잡힌다. ▷ 구문arr.with(index, value)index : 변경할 인덱스의 값을 의미하며, 음수로 사용 시 배열의 끝부터 역산한다.value : index에 위치한 값을 대체할 값을 의미한다.▷ 예제 1) Array.prototype.with() 기본 사용법const arr = [0, 1, 2, 3, 4, 5]const .. 공감수 3 댓글수 0 2023. 7. 21.
[Lodash] 객체에서 특정 프로퍼티만 뽑아서 사용하기 (ft. pick) pick lodash에서 제공하고 있는 pick() 메서드의 경우 객체에서 특정 프로퍼티만 사용하고자 할 때 사용된다. 일반적으로 어디서든 omit을 소개할때 같이 소개되는 메서드이기도 하며, omit과 마찬가지로 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. // _.pick(object, [paths]) const object = { 'a': 1, 'b': '2', 'c': 3 }; const result = _.pick(object, ['a', 'c']); console.log(result) // { 'a': 1, 'c': 3 } pickBy pickBy() 메서드는 특정 프로퍼티만 뽑아 사용하는것은 동일하나 특정 조건.. 공감수 2 댓글수 0 2023. 6. 18.
[Lodash] 객체에서 특정 프로퍼티 제외하기 (ft. omit) omit lodash에서 제공하고 있는 omit() 메서드의 경우 객체에서 특정 프로퍼티를 제외할 때 사용되는 메서드이다. omit이라는 명칭은 다른 곳에서도 흔하게 볼 수 있고 기능 또한 비슷하기 때문에 한 번 알아두면 이런 기능이구나 하고 쉽게 이해하고 갈 수 있다. 특히 typescript의 유틸리티 타입에서도 흔하게 볼 수 있다. // _.omit(object, [paths: string|string[]]) const object = { 'a': 1, 'b': '2', 'c': 3 }; console.log(_.omit(object, ['a', 'c'])); //{ 'b': '2' } 특정 객체를 기준으로 제외하고 싶은 프로퍼티의 키 배열을 넣어두면 제외된 나머지 객체가 반환되는 형식이다. omi.. 공감수 2 댓글수 0 2023. 6. 13.
[NuxtJS] The client-side rendered virtual DOM tree is not matching server-rendered content. NuxtJS 렌더링 오류 NuxtJS 개발 환경에서 작업을 하다가 렌더링 오류가 발생하였다. 어찌 보면 해당 오류는 아주 흔하게 볼 수 있는 오류가 아닐까 생각된다. 에러 내용을 자세히 살펴보자. The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render. 오류 내용은 매우 심플하다 "클라이언트 사이드에서 렌더링 된 가상.. 공감수 3 댓글수 0 2023. 6. 5.
[JavaScript] BF캐시 (Back Forward Cache) 사실 BF캐시 관련한 내용을 JavaScript 카테고리에 넣는 게 맞으려나 하고 망설여지지만 카테고리가 다양하지 못해 일단 여기에 넣어두고자 한다. BFCache BFCache란 뭘까? 이 녀석의 풀 네임은 Back Forward Cache이다. 즉, 이름 그대로 뒤로/앞으로 가기 버튼을 눌었을 때 화면을 바로 보여주기 위한 브라우저에서 발생하는 최적화 기능이다. 페이지를 이동할 때 페이지 전체의 스냅샷을 저장하는 캐시라고 생각하면 된다. BFCache는 무조건 발생하는 건가? 결론부터 말하자면 '무조건 발생하는 건 아니다'라고 말할 수 있다. 주요 브라우저인 크롬/사파리/파이어폭스 등 BFCache를 제공하지만 특히 크롬 같은 경우에는 BFCache에 최적화된 사이트만 캐싱하려고 노력하는 듯하다. 개.. 공감수 3 댓글수 0 2023. 5. 30.
[Lodash] 배열 차집합(difference) 구하기 difference lodash에서 제공하고 있는 difference() 메서드의 경우 차집합의 개념과 마찬가지로 하나의 기준이 되는 배열이 있고 그 이후에 오는 배열로 이루어진 값들과 비교하여 중복되지 않는 값을 반환한다. // _.difference(array, [values]) const arr = [2, 1] console.log(_.difference(arr, [2, 3])) // [1] console.log(_.difference(arr, [2, 3], [1])) // [] console.log(_.difference(arr, [3, 4], [5])) // [2. 1] 새로운 배열을 반환하기 때문에 변수에 담아서 사용하도록 하자. 참고: https://lodash.com/docs/4.17.15.. 공감수 3 댓글수 0 2023. 3. 13.
[Lodash] 배열 교집합(intersection) 구하기 intersection lodash에서 제공하고 있는 intersection() 메서드의 경우 단순하게 여러 개의 동일한 값을 가지고 있는 배열의 중복 데이터만을 추출한다. // _.intersection([arrays]) const arr1 = [1, 2, 3, 4, 5] const arr2 = [3, 4, 5, 6, 7] console.log(_.intersection(arr1, arr2)) // [3, 4, 5] 여기서 결과값의 순서와 참조는 첫 번째 배열에 의해 결정된다는 것만 알고 가면 될 듯하다. 참고: https://lodash.com/docs/4.17.15#intersection Lodash Documentation _(value) source Creates a lodash object w.. 공감수 2 댓글수 0 2023. 3. 8.
[VueJS] Vue에서 페이지 새로고침 하기 Vue에서 페이지 새로고침하기 VueJS를 사용했다면 SPA(Single Page Appclication) 방식으로 개발을 진행했다고도 할 수 있는데, 이럴 경우에는 일반적으로 location.href/reload 같은 방식의 새로고침은 권장하지 않는다. 이전에 작성했던 글 중에 라우터 관련한 글이 있었는데 그 방법을 활용할 것이다. https://mine-it-record.tistory.com/661 [VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기 Programmatic Navigation 프로그래밍 방식 내비게이션은 를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 .. 공감수 2 댓글수 0 2023. 3. 7.
[GIT] .env에 대해 .gitignore이 먹히지 않을때 .env파일을 가지고 작업을 하는데 분명 .gitignore에 선언을 해뒀음에도 불구하고 자꾸 git status를 하면 눈에 보이는 현상이 발생하는 경우가 있다. 이는 .env파일이 이미 원격 저장소에 푸시가 되어있는 상황이라서 그렇다. 해결방법은 간단하다 원격 저장소의 .env파일을 지우면 되는것이다 git rm .env --cached git commit -m "remove .env file from git repo" git push 보통 원격 저장소에는 .env파일을 직접 올리지 않고 .env.example 같은 형식으로 다르게 올려서 공유하고는 한다. 그리고 위에서 입력한 rm .env --cached 명령어를 통해서는 로컬에 있는 파일이 지워지지 않으니 걱정할 필요 없다. 캐시 지우고 > 커밋.. 공감수 2 댓글수 0 2023. 2. 22.
[Lodash] 배열 중복 제거하기 (ft. uniq, uniqBy, union, unionBy) uniq lodash에서 제공하고 있는 uniq() 메서드의 경우 단순하게 여러 개의 동일한 값을 가지고 있는 배열의 중복 데이터를 제거한다. // _.uniq(array) const arr1 = [1,1,1,3,3,4,5,2,6,4,7] console.log(_.uniq(arr1)); // [1,3,4,5,2,6,7] uniqBy 아마 사용하게 된다면 위에서 설명한 uniq메서드보다는 uniqBy 메서드를 좀 더 많이 사용하지 않을까 생각된다. uniqBy() 메서드는 "중복을 구분할 속성"값을 두번째 인수로 사용이 가능하다. // _.uniqBy(array, identity) const search = [ { id: 12, title: 'testest', name: 'jack', age: 26}, {.. 공감수 4 댓글수 0 2023. 2. 22.
[Lodash] Lodash란? Lodash Lodash는 개발을 하다 보면 한 번쯤은 들어보거나 접해볼 수밖에 없는 Javascript의 인기있는 라이브러리 중 하나이다. 나 역시 Lodash에 대해 아무것도 모르던 때가 있었는데도 불구하고 검색을 하다 보면 자연스레 알게 되었다. Lodash는 배열, 숫자, 객체, 문자열 등으로 작업할 때 번거로움을 없애고 쉽게 다룰 수 있게끔 하는 데 사용된다. 그렇기에 보통 Lodash는 유틸용 라이브러리라고 봐도 무방하다. 하지만 하나 알아둬야 할게 Lodash를 많이 사용하긴 하지만 꼭 좋기만 한 건 아니다. https://measurethat.net/Benchmarks/Show/6534/1/lodash-vs-es6-in-find-method Benchmark: lodash vs es6 in.. 공감수 2 댓글수 0 2023. 2. 21.
[GIT] Github에서 Pull Request 승인 절차 추가하여 코드 리뷰하기 Set Github Pull Request Approve 깃허브에는 참여 인원이 승인(Approve)을 해야 Pull Request 머지를 할 수 있도록 설정할 수 있는 기능이 존재한다. 이 방법을 통해 "몇 명 이상의 코드 리뷰를 통과해야 한다"라는 내부적으로 룰을 만들어도 좋을 듯하다. 아직 본격적으로 코드 리뷰 문화가 잡히지 않은 곳에서 처음 시도하기에도 괜찮다고 생각이 든다. 우선 Approve설정을 하는 방법에 대해 알아보자. 깃허브 Approve 설정하기 자 우선 승인 절차를 만들어보자. 위 이미지처럼 프로젝트의 [Settings]를 먼저 들어가 주도록 하자. 그리고 좌측에 [Branches] 탭이 존재할 텐데 눌러주면 위 화면처럼 "Branch protection rules"라고 나올 것이다.. 공감수 2 댓글수 0 2023. 2. 16.
[NuxtJS] 미들웨어(middleware) 사용하기 미들웨어(Middleware) NuxtJS의 라이프 사이클을 보면 nuxtServerInit 다음에 Route Middleware라는 녀석이 있다. 여기서 미들웨어면 미들웨어지 왜 "라우트 미들웨어"라는 명칭을 사용하냐면 NuxtJS에서는 서버 미들웨어와 라우트 미들웨어 두 종류가 존재하기 때문에 미들웨어라는 명칭보다는 라우트 미들웨어라는 명칭을 사용하는 듯 하다. (하지만 일반적으로 NuxtJS에서 미들웨어라 하면 라우트 미들웨어를 지칭하기 때문에 그냥 미들웨어로 지칭하도록 하겠다.) NuxtJS에서 미들웨어는 크게 익명 미들웨어(Anonymous Middleware)와 네임드 미들웨어(Named Middleware)로 나뉜다. 익명 미들웨어(Anonymous Middleware) 익명 미들웨어는 특정.. 공감수 4 댓글수 0 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을 사용하고 있는 위치에서 원격 저장.. 공감수 2 댓글수 0 2023. 2. 10.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.