본문 바로가기
반응형

분류 전체보기703

[GIT] .gitignore 사용해 버전 관리 대상에서 제외하기 .gitignore .gitignore 파일은 Git 버전 관리에서 제외할 피알 목록을 지정하는 파일이다. git을 사용할 때 git add.이라는 명령어를 많이 사용할 텐데, 이 .gitignore이 있으면 굳이 commit 할 대상을 하나하나 제외할 필요 없이 자동으로 제외시켜주는 아주 편리한 녀석이다. 보통 .gitignore 파일은 최상위 경로에 위치한다. 처음부터 그냥 파일을 만들어서 직접 제작해도 상관은 없지만 아래 사이트에서 필요한 .gitignore 파일을 제공해주고 있으니 편리하게 사용할 수 있다.https://www.toptal.com/developers/gitignore gitignore.io Create useful .gitignore files for your project www.. 2022. 10. 6.
[GIT] 깃(Git) 버전 관리 기본 명령어 (ft. git init / status / add / commit / log / diff) git init 깃 저장소를 초기화하는 명령어이다. git init 명령어를 실행하기 이전에는 git과 연결된 폴더가 아니기 때문에 npm init처럼 git init을 통해 초기화를 시켜줘야 한다. git init 이 명령어를 실행하게되면, 해당 폴더에 숨겨진 파일로 .git 이라는 폴더가 하나 생성되는 것을 확인해 볼 수 있을 것이다. .git이란 폴더는, 파일의 history가 저장되는 폴더이므로 특별한 사유가 있지 않다면 삭제하지 않는 걸 추천한다. 이런 식으로 git init 명령어를 사용하면 .git 폴더 생성과 함께 "master"라는 키워드가 터미널에 표시된다. git status 저장소의 상태를 체크하는 명령어이다. git에서 말하는 상태란 untracked, tracked, staged.. 2022. 10. 6.
[GIT] 깃(Git) 설치 및 초기설정 (ft. Window) 깃(Git) 설치하기 깃 설치 관련해서는 공식 홈페이지를 통해 깃을 다운로드하는 방법과, 특정 OS용 터미널을 설치하면서 자동으로 GIT이 같이 설치하는 두 가지 방법에 대해 대략적으로 설명만 하고자 한다. 공식 사이트에서 GIT 설치 https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users.. 2022. 10. 5.
[VueJS] Pinia 특정 Store의 상태(State) 초기화 하기 ($reset) 특정 Store State Reset vuex에서 특정 Store의 상태를 초기화하기 위해서는 말 그대로 초기 상태의 객체를 가지고 덮어 씌우는 작업을 하는 방법이 존재했다.(예를 들어 lodash의 cloneDeep 사용) 그러나 특이하게도 Pinia에서는 특정 Store State의 Reset 메서드를 제공해주고 있다. Pinia에서는 Store를 정의하는 방법이 두가지가 존재하는데, 각각의 방법에 따라 Reset 방법에 대해 알아보자. Option Stores (Object Syntax) Options API, Vuex 에서 사용하는 방식과 동일한 구조의 Option Stores 방식부터 알아보자. export const useCounterStore = defineStore('counter', { .. 2022. 10. 4.
[VueJS] Pinia Store 기본 사용법 (ft. storeToRefs) Store 기본 사용법 공식문서를 통해 store 기본 사용법에 대해 알아보자. (*이 글은 Composition API 위주로 작성되었다.) 사용법을 익히기 전에 설치가 안되어 있다면 아래 링크를 통해 설치와 설정부터 해주고 오도록 하자. https://mine-it-record.tistory.com/639 [VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정) Pinia란? Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다. 일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용.. mine-it-record.tistory.com 스토어 정의하기 impor.. 2022. 9. 30.
[VueJS] Vue3 - setup() 과 <script setup>의 차이 Vue3에서의 Composition API와 setup Vue3의 등장 예고와 함께 사용되어진 Composition API, Vue2.7 버전 미만을 사용할 경우에는 따로 플러그인을 설치해서 사용할 수 있으며, Vue2.7 이상부터는 Vue3처럼 Composition API를 사용할 수 있다. 이 Composition API의 등장과 함께 setup 함수가 등장하였다. 이 setup함수를 사용하여 반응형 데이터를 만들고, 라이프 사이클을 제어하는 등 Vue2 버전에서부터 사용되어 왔던 optioins api에서 사용했던 그 모든것을 Composition API에서는 setup함수 안에서 처리해준다. 그런데 여기서 공식문서를 살펴보면 Composition API의 setup함수가 있고, setup()은 p.. 2022. 9. 28.
[VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정) Pinia란? Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다. 일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용해야 한다. Vue에서 가장 보편적으로 사용했던 상태 관리자는 Vuex인데, Vue의 창시자 Even You가 Vuex가 아닌 Pinia를 추천하는 상태 관리자로 공표하였다. 하지만 그렇다고 Vuex가 사라지는 게 아니라 Pinia와 Vuex 5.x는 사실상 완전 동일한 프로젝트로 생각해야 한다고 한다. 이는 현재 Vuex 4.x 버전이나 추후에는 Pinia와 Vuex 5.x 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 것이라고 한.. 2022. 9. 28.
[HTML] 태그 데이터 속성 dataset 사용하기 (ft. JS/CSS 활용) 데이터 속성 사용하기 HTML 태그에는 표준으로 정의된 속성들이 존재하는데, 데이터 속성의 경우에는 사용자가 지정한 속성을 표준화된 방법으로 제공하기 위해 제안된 것이다. 예를 들자면 개발을 하다 보면 표준 속성이 아니라 사용자 마음대로 속성을 정의해서 사용할 수가 있었는데, 아무래도 표준이 없었기 때문에 아무렇게나 사용되던 사용자 정의 속성들을 표준화하여 data-* 형식의 속성으로 정의한 것이다. HTML 문법 문법은 매우 간단하다. 어느 element나 "data-"로 시작하는 속성을 지정해서 사용할 수 있다. Javascript 에서 접근하기 Javascript에서 접근하는 방법 또한 매우 간단하다. dom을 선택하고 dataset속성을 통해 읽을 수 있다. let blog = document.g.. 2022. 9. 28.
[Jest] 비동기 코드 테스트 하기 Jest 비동기 코드 테스트 javascript를 사용한다면 일반적으로 비동기적인 코드를 작성하게 된다. Jest로 비동기 코드를 테스트하기 위해서 사용할 수 있는 몇 가지 방법에 대해 알아보자. 우선 각 방법을 알아볼때 사용되는 공통 코드를 먼저 작성해서 테스트를 진행해보자. ▷ async.js function fetchData(error) { if (error === "error") { return Promise.reject("Error"); } return Promise.resolve({ name: "Hans", like: "peanut butter" }); } module.exports = fetchData; * 콜백 테스트는 Promise가 아닌 콜백 함수를 사용하여 예제를 작성하는 게 맞을지도.. 2022. 9. 27.
반응형
TOP

티스토리툴바