leteu / 개발 블로그

프로그래밍/Git

[Git] Git Remote repository 변경

사내에서 깃랩 주소가 바뀌거나 프로젝트 이름이나 주소를 바꾸는 경우가 종종 있었다 이참에 한번 정리해볼까 한다 #1 자주 발생하는 오류 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. 이거 때문에 고생해서 오는 사람 많을 거 같다. 얘도 똑같이 따라 해 주면 고쳐질 수도 있다. ( 아닐 수도 있다 ) #2 Remote 확인 일단 확인부터 하자 git remote -v 실행하고 나면 보통 아래처럼 2줄 정도 뜬다. originhttps:..

프로그래밍/Vuejs

[Vue 3] Props, Emit

https://leteu.dev/posts/vue-prop-emit#1 왜 쓰나 Vue를 사용하다 보면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨주거나 반대로 하위에서 상위로 올려 받아야 하는 경우가 있을 수 있습니다. #2 간단 요약 Props상위 컴포넌트에서 하위 컴포넌트로 뿌려주는 것 하위 컴포넌트에서 선언하고 상위에서 선언해둔 이름으로 보낼 수 있음.Emit하위 컴포넌트에서 상위 컴포넌트로 올려주는 것하위 컴포넌트에서 선언하고 상위에서 선언해둔 이름으로 받을 수 있음. #3 Props 예시)  {{ customProp }} 컴포넌트의 props에서 키을 지정한 뒤 부모 컴포넌트에서 키에 맞는 값을 보내주는 식으로 사용한다. props는 배열로 작성하여 키값을 텍스트만으로도 지정할 수 있다. ..

프로그래밍/Vuejs

[Vue] Quasar Vue UI framwork 소개

회사에서 사용 중인 Vue UI 프레임워크를 소개해보려고 한다. Vue 사용자도 React에 비해 많이 적은 와중에 UI 프레임워크는 보통 Vuetify를 많이 사용한다. Quasar를 처음 접했을 때 검색하기 참 힘들었던 거 같다. #1 공식 사이트 https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all ..

프로그래밍/Vuejs

[Vue] Composition API - 주사위 만들기 예제

Composition API 사용법 공유해볼 겸 해서 주사위나 만들어보려고 한다. .vue 파일 없이 js 파일로만 짜 보려고 한다. h 함수를 통해 랜더를 할 생각인데 이건 react의 JSX createElement와 유사하게 사용할 수 있다. jsx로 Vue 컴포넌트 만들다 보면 React도 쉽게 적응하지 않을까 싶다. ( 오류 있다고 나오면 좌측 하단 새로고침 눌러주면 잘 나온다 ) #1 뭔가 있어 보이는 초반 세팅 컴포넌츠 폴더에 Dice 폴더 만들어서 아래 파일들을 생성해준다. index.js Dice.js DiceFace.js dice.sass 컴포넌트에 입혀줄 스타일은 sass 파일로 만들어준 뒤 dice를 사용하는 컴포넌트에서 Import 해서 사용하거나 글로벌 sass에서 import ..

프로그래밍/Vuejs

[Vue 3] 라우트 변경, 새로고침, 창 닫기 감지

웹 소캣 이용해서 채팅 서비스 만들다가 새로고침으로 방 나가는 방법 예외 넣다가열불 터져서 알아보다가 해결해서 글 적어본다. https://leteu.dev/posts/vue-route-observe# 이 페이지를 어디서 찾아 들어왔는가 궁금할 땐 아래 글 확인2023.10.13 - [프로그래밍/Javascript & TypeScript] - [JS] 네비게이션 타이밍 가져오기 (새로고침, 뒤로가기, 네비게이트)  #1 Watch 그냥 주소만 바꿔서 나가는 경우일 때 사용할 수 있다.사용하긴 제일 쉽지만 별로 맘에 드는 방법은 아니다.새로고침 시엔 라우터가 변경되는 게 아니라 확인이 불가해서 동작하지 않는다. 기본  next 함수는 아규먼트로 아래 예제처럼 사용 가능하다.next('/'); // '/' ..

프로그래밍/Javascript & TypeScript

[JS] ES6 백틱 ( ` )

백틱 모르는 사람들이 꽤 많은 거 같아 써본다. ※주의) 안 써본 사람들은 있어도 한 번만 써본 사람은 없다. 꼭 써보는걸 추천 #1 탬플릿 리터널 ES6부터 도입된 문자열이다. 백틱 ( ` ` )을 사용한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals Template literals - JavaScript | MDN 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문 developer.mozilla.org 위 문서를 기반으로 포스팅한 글이다. ..

프로그래밍/Flutter

[Flutter] API 불러오고 사용하기

Flutter는 화면을 위젯(Widget)으로 만든다. 포스팅 순서를 위젯을 먼저하고 API 사용을 올리려고 준비 중이었지만 Flutter 위젯 종류가 너무 많아서 포기했다. 그냥 API 호출하고 바로 뿌려보려고 한다. 다음에 flutter 많이 써보고 많이 쓰는 거 위주로 올려보려고 한다. #1 들어가기 앞서... API는 아래 주소로 접속하면 기본적인 예제를 볼 수 있다. 이 사이트에서 제공하는 API를 사용할 것이다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server..

프로그래밍/Vuejs

[Vuejs] 개발 환경 세팅

Node.js 설치부터 Vue 프로젝트 생성까지 빠르게 가보겠습니다. 2023.03.04 수정) node는 그냥 nvm 사용하시고 프로젝트는 vite써서 세팅하는게 더 좋습니다. #Node.js 설치 ##1 Node.js 웹사이트 접속 아래 링크를 눌러 node.js 사이트에 접속해 줍니다. https://nodejs.org/ko/zx Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ##2 Node.js LTS 설치 왼쪽꺼 LTS 적힌거 눌러서 다운로드 해주시면 됩니다. 계속 Next 눌러주면서 설치 진행해주시면 됩니다. Install 하시고 나면 설치가 잘 되었는지 확인해야합니다. ##3..