아아덕후

본문 바로가기

-

vitepress를 만들고 빌드하여 AWS S3로 배포해보아요. Intro.안녕하세요. 아아덕후입니다. 최근에 markdown 파일을 문서화하는 과정에 사용한 vitepress 프레임워크 설정 방법 및 S3를 이용한 배포 방법을 공유하기 위해 글을 작성했습니다. (vitepress와 AWS S3에 대한 소개와 설명은 위 링크를 참고 부탁드립니다!) 이번 포스팅에서는 아래 세가지 목표를 가지고 글을 작성했습니다. vitepress 처음 사용하는 분들이 쉽게 시작할 수 있도록 도움을 드리기 위해서markdown 파일로 만든 자료를 공유하기 위한 분들과 markdown으로 기술 문서를 작성하려는 분들께 도움을 드리기 위해그리고 마지막으로 저에게는 급하게 만들고 배포했던 기억을 정리하며 vitepress boilerplate를 만들어 다음에 기술문서 공유 혹은 마크다운 문서.. 2024.06.25
[CLF-C02] AWS Cloud Practioner 시험 공부 방법 및 합격 후기 Intro안녕하세요. 아아덕후입니다. 2024년 4월에 응시한 AWS Cloud Practioner(CLF-C02) 합격 후기입니다. 대단한 합격 꿀팁이 있는 것은 아니지만, 저는 이렇게 공부하고 합격했다는 것을 공유하기 위해 글을 작성했습니다. 시험을 앞두고 계시거나 계획하시는 분들에게 조금이라도 도움을 드리면 좋겠습니다. 물론 엄청나게 어렵고 난이도가 높은 시험은 아니지만, 한 번에 합격하는 게 마음에도 재정에도 좋으니까요. 해당 글은 크게 시험 전 상황 - 시험 준비 방법 - 시험 환경 참고사항 순서로 목차를 구성했습니다. 저는 CLF-002 시험 응시를 계획하고 가장 먼저 한 일은 목표 날짜를 정하여 시험 신청 후 시험 준비를 시작한 것입니다. 왜냐하면 데드라인 없이 마음속으로 응시만 계획하고 시.. 2024.04.21
[Vue.js] 빠르고 간단하게 mixin 적용하기 Intro안녕하세요. 아아덕후입니다.이 글에서는 Vue.js의 여러 컴포넌트에서 공통으로 사용하는 mixin에 대한 사용법을 정리하기 위해 글을 작성했습니다.실제 현재 업무에서 여러 화면 및 컴포넌트에 Vuex를 이용해 state로 데이터를 관리하고 있습니다.각 데이터에 대해서 금액 단위 적용, 날짜 포맷팅 등 수많은 state 데이터에 동일하게 적용되어야 하는 util 함수에 대해mixin 함수를 사용하여 적용했습니다. Vue의 computed, methods 혹은 Vuex의 mutation, getters를 이용해 data를 변경가능 하지만화면이 10개, 20개, 100개로 증가하게 되면 같은 코드를 10번, 20번, 100번 사용해야 하니까...! mixin을 이용한 공통 함수로 사용했습니다. 우리.. 2024.02.20
[JS] 브라우저에서 자바스크립트는 어떻게 동작하는걸까? 브라우저에서 자바스크립트 비동기 처리가 작동하는 원리를 이해하기 위해 작성한 글입니다. 목차Intro자바스크립트 엔진 : ( Call Stack, Memory Heap )Web APIs콜백 큐 ( CallBack Queue )이벤트루프참고 자료 자바스크립트는 싱글 스레드 언어로 동기적으로 실행된다.(동기적으로 실행된다: 의미는 호이스팅으로 var 및 함수 선언이 맨 위로 끌어올려진 후 코드 순서에 따라 해당 함수가 실행된다는 의미이다.)하지만 비동기적으로 처리도 가능하다. 이는 자바스크립트가 브라우저의 도움을 받기 때문에 가능하다. 그렇다면 브라우저 내부에서는 비동기 처리를 위한 작업이 어떻게 진행될까? 브라우저에서는 아래 그림과 같이 자바스크립트 엔진(콜스택, 메모리힙), Web APIs , 콜백큐(C.. 2023.07.31
[JS] ES 6+ 문법을 정리해보아요. 목차 let과 const Ternary Operator (삼항 연산자) nullish coalescing 연산자 + Logical OR 연산자 ( nullish, falsy ) Template Literals (템플릿 리터럴) Symbol(심볼) Spread Operator, Destructuring assignment ( 타 게시글 ) 참고 자료 1. let과 const ES6 이후 최신 자바스크립트 에서는 변수 선언을 위한 예약어로 let과 const를 사용하며 var 예약어는 사용하지 않도록 권장되고 있다. 이때, const는 선언 시, 값을 반드시 할당하여 초기화를 해줘야한다. ( 선언만 하고 할당하지 않을 시, syntax 에러 발생) (추가적으로 변수를 선언할 때 초기 값을 할당하는 것이 좋은.. 2023.05.10
vue-router 설치부터 환경설정 및 사용방법 목차1. router 설치2. router 설정3. router 예제 1. router 설치 (yarn , npm) yarn 설치yarn add vue-router@4 npm 설치npm install vue-router@4 참고 : https://router.vuejs.org/installation.html 2. router 설정router를 사용하기 위해 3개 의 파일을 설정해야 합니다.3개의 파일은 router-index.js / main.js / App.vue 입니다. index.js첫 번째로, router 폴더를 생성하고 그 안에 index.js 생성해야 합니다.해당 폴더는 밑에 main.js에서 호출하여 전역으로 router로 사용하기 위한 설정을 위한 폴더입니다.왜냐하면 index.j.. 2023.05.02
[Vue] Axios를 이용한 http 통신 - 설치부터 예제, 비동기 처리까지. 목차 1. Axios 란? 2. Axios 설치 3. Axios 문법 4. Axios 사용 방법 (post) 5. Vue 에서 Axios 설정 6. Axios 예제 (Get, Post) 7. Axios 비동기처리 예제 (Get, Post) https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com 1. Axios란? - node.js와 브라우저를 위한 Promise 기반 HTTP 클라.. 2023.04.18
Vuex 모듈 및 사용 방법 정리 Intro현재 Vue.js에서 공식적으로 지원하는 상태관리 라이브러리는 Vuex에서 Pinia로 변경되었지만,업무에서 Vuex를 사용하고 있어 이를 정리하기 위해 작성한 글입니다.(그래도.. 아직.. Vuex 사용.. 하시는 분들.. 많으시죠..?) 저는 하나의 View 안에 여러 탭 간 이동을 구현해야 하는 업무가 있었습니다.탭 간(레이아웃 단위 컴포넌트) 이동 시 라우터 이동과 라이프사이클에 따라 초기화되는 vue 인스턴스 data의 문제를 해결하고각 탭의 상태 관리하기 위해 Vuex를 사용했었습니다. 이를 공유하고 다른 분 들께서도 조금 더 쉽게 Vuex를 적용하시는데 도움을 드리고 싶어 글을 작성했습니다. (Pinia에서는 Vuex에서보다 더 간단한 Composition-API 스타일의 API를 .. 2024.02.12
Vue.js 첫 실행 : 설치부터 프로젝트 생성 Steps (CLI, Router, Vuetify) 0. 준비물Vue 설치 + node js (npm 사용 위해) + VScode (or Atom) 설치 1. Vue 프로젝트 생성을 위한 폴더 설정VScode - CMD 혹은 Windows/MAC CMD를 이용해 Vue 프로젝트 실행할 폴더 경로 설정저는 VScode를 이용했습니다.2. Vue 설치cmd에서 Vue 설치커맨드 : npm install vue 3. Vue CLI설치Vue CLI는 Vue 개발을 편하게 시작할 수 있도록 프로젝트를 구성해주는 도구입니다.초기 프로젝트 구성을 자동적으로 해주어 (폴더 구조, lint, bulid, webpack 등) 설정에 대한 고민 없이 쉽게 프로젝트를 구상할 수 있도록 환경을 제공해줍니다. 커맨드 : npm install -g @vue/cli경고가 많이 뜨는데.. 2022.04.30

티스토리툴바