티스토리

THE STAR SHINING IN THE MIDDLE
검색하기

블로그 홈

THE STAR SHINING IN THE MIDDLE

19-97.tistory.com/m

개발 공부 공책

구독자
3
방명록 방문하기
공지 공부 정리하는 블로그입니다. 모두보기

주요 글 목록

  • Vue.js에서 Google Classroom API 사용 메모 아무리 검색해도 관련 코드가 없었다.. StackOverFlow에서는 질문만 있고 답변이 없었다.. 지푸라기라도 잡는 심정으로 Ai들에게 물어보았지만 Google Bard는 존재하지 않는 'vue-google-classroom'을 사용하라고 하고..(23.6.7 기준 비공개 상태) ChatGPT 또한 동작하지 않는 코드를 뱉어주었다.. 그래서 ChatGPT에게 예시코드를 Vuejs로 변경해달라고 요청하였더니 깔끔하게 테스트는 되었다.. 실 사용할땐 많이 변경되겠지만, Google Bard는 자기가 싫어하는 부분은 짤라서 알려줬다.. 정리가 아닌 메모하는 글이기 때문에 코드가 더 많습니다.. QuickStart Code [Javascript => Vue.js] (feat. ChatGPT) Classroom.. 공감수 0 댓글수 0 2023. 6. 14.
  • Nuxt에서 localhost를 https로 열기 맥북 Air m1칩으로 작업을 진행하였고, nuxt 환경입니다. 또한 brew를 통해서 사용하였습니다. mkcert 다운로드 brew install mkcert mkcert를 다운받아줍니다. nss 다운로드 필수는 아닐 수 있으나, 저는 mkcert -install시 알림으로 위와 같이 뜬다면 다운로드 해주세요. brew install nss 인증서 발급 mkcert -install mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1 example.com으로 발급을 받았으며, 위와같이 작성하면 인증서(.pem)을 발급해줍니다. 발급일(2022.08.30) 기준 2년 3개월짜리 인증서를 발급해주네요. VSCode에 파일 넣기 파일.. 공감수 0 댓글수 0 2022. 8. 30.
  • Vue에서 XLSX(SheetJS) 사용한 것 정리 환경은 Vue.js(Nuxt)이며, 백엔드는 Node.js 입니다. 엑셀 다운로드를 구현하기 위해 만들면서 정리하기위해서 작성하였습니다. 엑셀파일(기본 베이스)가 없고, HTML코드도 없는 상태에서 다운로드를 진행하려고 만든 것이기 떄문에 조건이 다르시다면 참고만 하시면 좋을 것 같습니다. ( npm의 xlsx와 sheetJS는 다른거라 생각했는데, npm에서보니 같은 것이여서 신기했습니다. ) 1. 사용한 첫 번째 방법 엑셀 다운로드 - B2를 입력한 방식처럼 Object 타입으로 입력할 수 있는데(옵션은 맨 마지막에..), 해당 옵션에 s라는 스타일 옵션이 존재는 한다. 하지만 옵션이 적용이 안된다.. 찾아보니, 커뮤니티버전에서는 스타일이 적용이 안되며, 프로버전을 사용하거나 xlsx-style과 같.. 공감수 0 댓글수 0 2022. 3. 30.
  • Vue 컴포넌트에 외부 스크립트 추가 (메모용) 작업을 하다가 제이쿼리를 필요로 하는 스크립트를 추가하게 되어서 알게되었습니다. export default에 head: { script 를 추가하여 사용할 수 있다. 간단한 것이지만.. 이제 이걸 알았다는 것에 배움이 많이 부족하다 느꼈습니다. 2022.11.22 추가 Vue3와 Vite 환경에서는 위 처럼 작성하면 동작하지 않는다고 하네요. 다중 단일 공감수 0 댓글수 0 2022. 3. 18.
  • [vue-gtag] Google Analytics 공부 환경은 Nuxt를 사용하였습니다. 회사 홈페이지에 Analytics를 적용해야하는 업무를 맡게 되어서 검색을 통해 vue-gtag를 찾게되었고 적용 및 공부를 하면서 정리하기위해 작성하였습니다. npm i vue-gtag --save npmjs: https://www.npmjs.com/package/vue-gtag git 및 공식 사이트(?): https://github.com/MatteoGabriele/vue-gtag#readme vue-gtag.js import Vue from 'vue' import VueGtag from 'vue-gtag' export default ({ app }) => { Vue.use(VueGtag, { config: { id: 'G-XXXXXXXXXX',// 측정 ID },.. 공감수 0 댓글수 0 2022. 1. 11.
  • Vue.js 페이징처리(Pagination) 뷰에서 처음으로 페이징처리 작업을 하는거라 미숙하긴 하지만 작업하면서 정리하는 차원에서 작성한 글입니다. Nuxt와 vuex-pathify를 사용했습니다. 〈〈 〈 {{ n }} 〉 〉〉 Tailwind CSS + Vue.js 2022.08.02 추가 이번에 테일윈드로 몇몇 페이지를 새로 만들면서 처음부터 만들어보았는데 간단한 컴포넌트여서인지 아니면 평소에 위의 페이지네이션을 사용하다가 만들어서 그런지 몰라도 변경사항이 별로 없네요.. 하하 - 변경사항 1. 양쪽 끝의 Arrow 버튼의 기능을 method로 분리 2. css작업은 tailwind를 사용 3. 디자인은 동그랗게 변경 {{ unit }} 공감수 1 댓글수 0 2021. 9. 8.
  • Vuex-Pathify Vuex-Pathify - store의 모든 속성에 대해 getter 및 mutation, action을 직접 작성하지 않고 자동으로 생성해준다. npm install --save vuex-pathify 일반 Vuex와 비교 - 일반 Vuex // Main.js import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' Vue.use(Vuex) const state = { firstName = 'Gildong', lastName = 'Hong', } // 우리는 State에 있는 값에 접근할 수 있어야 한다. // 해당 값이 Store 외부에서 사용해야 한다. const getters = { firstName: state => st.. 공감수 0 댓글수 0 2021. 8. 13.
  • 뷰 필터 뷰 필터 - 뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 - 가장 간단하겐느 단어의 대문자화부터 다국어, 국제 통화 표시 등 다양하게 사용할 수 있다. 필터 사용 방법 - 필터를 사용하는 방법은 다음과 같다. {{ msg || capitalize }} new Vue({ el: '#app', data: { msg: 'hello', }, fillters: { capitalize: function(value) { if(!value) return '' value = value.toString() return value.chatAt(0).toUppperCase() + value.slice(1) }, }, }) - 위의 코드를 실행하면 Hello 텍스트가 화면에 출력된다. - 필터를 사용하지 .. 공감수 0 댓글수 0 2021. 8. 2.
  • 믹스인과 하이 오더 컴포넌트 비교 분석 HOC vs Mixins 하이 오더 컴포넌트는 리액트 진영의 함수형 프로그래밍에서 기반한 컴포넌트 개발 패턴입니다. 컴포넌트의 코드를 재사용하기 위한 방법이기도 하지만 캡슐화(encapsulation)과 컴포넌트 추상화를 구현하는 방법이기도 한데요. 컴포넌트의 로직을 훼손하지 않고 재사용성을 최대한 끌어올리겠다는 전략이기도 합니다. 예를 한번 들어볼게요. HOC를 이용한 접근 방식의 예 일반적으로 HOC를 이용하여 컴포넌트를 구현하게 되면 다음과 같이 컴포넌트 관계에서 층이 하나 더 생깁니다. 일반 : 상위 - 하위 HOC : 상위 - HOC - 하위 위와 같이 HOC를 이용하여 컴포넌트를 개발해 나가는 경우 상위와 하위의 컴포넌트 로직은 변경하지 않은 채 기능을 확장해 나갈 수 있습니다. 가장 간단한 .. 공감수 0 댓글수 0 2021. 8. 2.
  • 믹스인(Mixins)과 스토어(Store) 생각 정리 해당 글은 Vue.js를 공부하면서 '믹스인과 스토어를 언제 사용하고, 어떻게 다를까?' 라는 생각이 들어서 정리한 글입니다. 개인적인 생각이므로 전부 맞다고 볼 수 없다고 생각합니다. Mixins - Vue.js 기능 - 공통적으로 사용할 코드를 포함하고 있다. - 다중 상속을 지원한다. (Java에서의 인터페이스?) - 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법이다. - 사용 방법 new Vue({ mixins: [myMixin],// 뷰에 사용할 믹스인을 선언해준다. data() { return {} }, method: {}, }) - 믹스인과 믹스인을 사용하는 컴포넌트에서 중복된 변수가 있다면 컴포넌트에서 선언된 변수가 우선순위로 사용된다. * 22.07.15 추가 현재는 사용한다면 아.. 공감수 0 댓글수 0 2021. 8. 2.
  • Vuex (v4.x) Vuex란? - 복잡한 애플리케이션에서 컴포넌트 수가 많이지면 컴포넌트 간의 데이터 전달이 어려워진다. Vuex는 Vue.js 애플리케이션을 위한 상태관리 패턴 + 라이브러리이다. - 모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. - Vuex를 이용하지 않는다면 컴포넌트 간에 데이터를 주고받는 것은 방법은 있지만, 대규모 프로젝트가 될수록 매우 복잡해진다. - 데이터를 store에 저장하고, 프로젝트 전ㅊ에서 사용할 수 있도록 해주는 것이 Vuex이다. Vuex 설치 - 터미널에서 다음 명령어를 통해 설치한다. npm install vuex@next --save 시작하기 - 모든 Vuex 애플리케이션의 중심에는 store가 있다. 저장소(store)는 .. 공감수 0 댓글수 0 2021. 7. 19.
  • Reusability & Compostion Composition API - 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue 3 버전에 추가된 함수 기반의 API이다. - 그동안 Vue는 '프로젝트 규모가 커질수록 관리하기 힘들다'는 단점이 있었다. data, computed, watch, methods 등 프로젝트 규모가 커질수록, 컴포넌트의 계층 구조가 복잡할수록 코드에 대한 추적 및 관리가 어려웠다. - 하지만 컴포지션 API를 이용하면 Setup이라는 메소드 안에서 한 덩어리로 코드를 구현할 수 있어서 코드에 대한 관리가 훨씬 쉬워지게 된다. - 즉, 컴포지션 API는 그동안 Vue가 가지고 있던 단점을 보완하기 위해서 추가된 Vue 3 버전의 핵심 기능이다. Setup - Setup은 컴포지션 .. 공감수 0 댓글수 0 2021. 7. 19.
  • Vue Router 라우팅 - 사용자가 접속한 주소에 따라 페이지가 달리지는 것 샘플파일로 vue-router 살펴보기 // scr/App.vue Home | About - 코드에 router-link to="/", router-link to="/about" 부분이 있다. 해당 부분의 링크를 클릭하고 브라우저 URL을 보면 Home을 클릭하면 localhost:8080, About을 클릭하면 localhost:8080/about으로 바뀌는 것을 확인할 수 있다. (크롬에서 개발자 모드로 확인을 하면 router-link to="/" 코드가 a href="/"로 변경되는 것으로 보아 같은 기능을 수행하는것 같다.) - 개발한 페이지에서 화면이 어떻게 브라우저의 주소가 바뀔 때마다 바뀌어 보이도록 설정되는지 알아보자 // sr.. 공감수 0 댓글수 0 2021. 7. 16.
  • 컴포넌트 심화 학습 (Provide/Inject, Template refs) Provide/Inject 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 하는 경우 props를 사용하면 된다. 그런데 만약에 컴포넌트 계층 구조가 복잡하게 얽혀있어서 부모 컴포넌트로부터 자식 컴포넌트, 그리고 그 자식 컴포넌트의 자식 컴포넌트로 데이터를 전달하는 경우가 발생하면 props를 통해 데이터를 전달하는 것은 굉장히 복잡한 코드를 양산하게 된다. 이러한 경우에 사용할 수 있는것이 Provide/Inject이다. 컴포넌트의 계층 구조가 아무리 복잡하더라도 부모 컴포넌트에서는 provide 옵션을, 자식 컴포넌트에서는 inject 옵션을 통해 데이터를 쉽게 전달할 수 있다. 컴포넌트 구조가 다음과 같다고 가정을 한다. Root ∟ ParentComponent ⊢ ChildComponent1 .. 공감수 0 댓글수 0 2021. 7. 16.
  • 컴포넌트 심화 학습 (Slot) Slot - 컴포넌트 내에서 다른 컴포넌트를 사용할 때 쓰는 컴포넌트의 마크업을 재정의하거나 확장하는 기능 - 컴포넌트의 재활용성을 높여주는 기능 Slot을 사용하여 Modal Popup 만들기 - 팝업의 기본 틀에 해당하는 modal-layout 컴포넌트 // src/views/SlotModalLayout - 이렇게 Slot에 name을 지정해서 사용하는 Slot을 'Named Slots'라고 한다. - 컴포넌트는 정해진 html 구조를 갖게 된다. 이렇게 작성된 컴포넌트를 제공하고 개발자는 각 slot에 해당하는 코드만 작성하면 되기 때문에, 어떤 개발자가 구현하더라도 동일한 디자인의 팝업을 만들 수 있게 된다. - Slot을 사용하는 컴포넌트에서는 삽입한 컴포넌트 안에서 다음과 같이 template.. 공감수 0 댓글수 0 2021. 7. 16.
  • 컴포넌트 심화 학습(Props, $refs, $emit) 부모 컴포넌트와 자식 컴포넌트 // scr/components/PageTitle.vue Page Title // src/views/NestedComponent.vue - 컴포넌트에서 다른 컴포넌트를 사용하는 방법은 사용할 컴포넌트를 import한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록하면 된다. : PageTitle 컴포넌트를 import 한다. import PageTitle from './components/PageTitle' : 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 등록한다. components: { PageTitle } : HTML에서는 import한 컴포넌트를 이용해서 이름을 이용해서 태그를 만들면 된다. 컴포넌트는 페이지 하나 전체가 될 수도 있고, 하.. 공감수 0 댓글수 2 2021. 7. 16.
  • Computed와 Watch Computed와 Watch는 둘 다 Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어나고 있는지를 감시하고, 변경될 때마다 정의된 함수가 실행됨. 데이터의 값이 변경되었는 지를 계속 감시한다는 측면에서 Computed와 Watch는 매우 비슷해 보이지만, 사용되는 용도에는 분명 차이가 있다. Computed - Computed는 Vue 인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용할 수 있도록 해줌 Full Name: {{ fullName }} - computed 내에 fullName이 정의되어 있고, firstName과 lastName을 합쳐서 반환해주는 함수로 정의되어 있다. - 여기서 함수명인 fullName은 함수이자 동시에 Vue 인스턴스의 데이터 키 값이다. .. 공감수 0 댓글수 0 2021. 7. 15.
  • 이벤트 처리 (v-on) Vue 컴포넌트에서 이벤트를 처리할 때는 v-on 디렉티브를 사용함 v-on 디렉티브는 심볼 @로 사용 가능하다. 클릭 이벤트 (v-on:click) - 클릭 이벤트는 v-on:click="메소드명" 혹은 @click="메소드명"을 사용해서 추가할 수 있음 Add One {{ counter }} - 클릭 이벤트 발생 시 여러 개의 함수를 호출하고 싶다면 다음과 같이 작성하면 됨 Click Change 이벤트 (v-on:change) - change 이벤트가 가장 많이 사용되는 html 태그는 select 이다. 사용자가 select에서 옵션을 바꿀 때마다 change 이벤트가 발생함 - change 이벤트는 v-on:change="메소드명" 또는 @change="메소드명"으로 사용함 서울 경기 제주 Ke.. 공감수 0 댓글수 0 2021. 7. 15.
  • 랜더링(v-for, v-if, v-show) 리스트 랜더링(v-for) select의 option, table의 tr 데이터 등 반복되는 객체를 처리할 떄 많이 사용함 쇼핑몰에서 보게되는 제품 리스트처럼 동일한 UI 패턴에 데이터만 다르게 처리되는 그런 부분들이 다중 데이터를 이용해서 처리되는 부분이라고 생각하면 됨 배열 데이터는 v-for 디렉티브를 이용해서 바인딩할 수 있음 반복적으로 랜더링할 html 태그에 v-for 디렉티브를 사용하면 배열에 있는 데이터 수만큼 html태그를 반복적으로 랜더링하게 됨 v-for="(item, index) in items" 위와 같은 형식으로 사용함 여기서 items는 데이터 배열임 v-for를 통해 배열을 하나씩 읽어와서 배열의 각 아이템을 item으로, 배열의 현제 index를 index로 반환해줌 ind.. 공감수 0 댓글수 0 2021. 7. 15.
  • 데이터 바인딩(Data Binding) Vue는 Angular와 마찬가지로 양방향 데이터 바인딩(Two-way data binding)을 지원함 참고로 React는 단방향 데이터 바인딩만을 지원함 여기서 양방향 데이터 바인딩이라는 것은 Model에서 정의한 데이터를 정의한 후 View와 연결하면 Model과 View 중 어느 한쪽에 변경이 일어났을 때 다른 한 쪽으로 자동으로 반영되는 것을 의미함 서버로부터 받아온 데이터를 바인딩 하는 경우 - 데이터가 html tag 안에 텍스트로 바인딩 되는 경우 - 데이터가 html tag의 속성(Attribute)로 바인딩 되는 경우 - 데이터가 html의 Form element의 value에 바인딩 되는 경우 - 다중 데이터가 html의 다중 element를 생성하기 위해서 바인딩 되는 경우 문자열 .. 공감수 0 댓글수 0 2021. 7. 15.
  • Component(컴포넌트)란 컴포넌트 - View, Data, Code의 세트 - 컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재함 - 컴포넌트의 가장 큰 특징은 재사용이 가능하드는 점이다. 즉, 다른 컴포넌트에 import해서 사용할 수 있다. - Vue에서 컴포넌트는 우리가 보는 페이지 자체일 수도 있고, 페이지 내의 특정 기능 요소일 수 있다. 컴포넌트 기본 구조 - : view에 해당하는 html 코드를 작성하는 영역 - name : 컴포넌트 이름을 등록. 이름을 등록하지 않아도 사용하는 것에는 지장이 없다. - components : 외부 컴포넌트를 사용하게 되면 해당 컴포넌트를 import한 후, 이곳에 배열로 등록해줘야 함 - data : html코드와 J.. 공감수 0 댓글수 0 2021. 7. 15.
  • Vue.js 공부 시작 Vue.js란 - 사용자 인터페이스 개발을 위한 Progressive Framework (프로그레시브라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발한 것을 뜻함) Vue.js의 장점 - 직관적이고 배우기 쉽다. - 재사용을 통한 애플리케이션의 개발 기간 단축 및 양질의 코드를 생산할 수 있다. - Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다. Vue.js의 특징 - MVVM(Model-View-ViewModel) 패턴 사용 : 프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴입니다. : View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개.. 공감수 0 댓글수 0 2021. 7. 15.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.