본문 바로가기
반응형

All42

vitepress를 만들고 빌드하여 AWS S3로 배포해보아요. Intro.안녕하세요. 아아덕후입니다. 최근에 markdown 파일을 문서화하는 과정에 사용한 vitepress 프레임워크 설정 방법 및 S3를 이용한 배포 방법을 공유하기 위해 글을 작성했습니다. (vitepress와 AWS S3에 대한 소개와 설명은 위 링크를 참고 부탁드립니다!) 이번 포스팅에서는 아래 세가지 목표를 가지고 글을 작성했습니다. vitepress 처음 사용하는 분들이 쉽게 시작할 수 있도록 도움을 드리기 위해서markdown 파일로 만든 자료를 공유하기 위한 분들과 markdown으로 기술 문서를 작성하려는 분들께 도움을 드리기 위해그리고 마지막으로 저에게는 급하게 만들고 배포했던 기억을 정리하며 vitepress boilerplate를 만들어 다음에 기술문서 공유 혹은 마크다운 문서.. 2024. 6. 25.
[CLF-C02] AWS Cloud Practioner 시험 공부 방법 및 합격 후기 Intro안녕하세요. 아아덕후입니다. 2024년 4월에 응시한 AWS Cloud Practioner(CLF-C02) 합격 후기입니다. 대단한 합격 꿀팁이 있는 것은 아니지만, 저는 이렇게 공부하고 합격했다는 것을 공유하기 위해 글을 작성했습니다. 시험을 앞두고 계시거나 계획하시는 분들에게 조금이라도 도움을 드리면 좋겠습니다. 물론 엄청나게 어렵고 난이도가 높은 시험은 아니지만, 한 번에 합격하는 게 마음에도 재정에도 좋으니까요. 해당 글은 크게 시험 전 상황 - 시험 준비 방법 - 시험 환경 참고사항 순서로 목차를 구성했습니다. 저는 CLF-002 시험 응시를 계획하고 가장 먼저 한 일은 목표 날짜를 정하여 시험 신청 후 시험 준비를 시작한 것입니다. 왜냐하면 데드라인 없이 마음속으로 응시만 계획하고 시.. 2024. 4. 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. 2. 20.
Vuex 모듈 및 사용 방법 정리 Intro현재 Vue.js에서 공식적으로 지원하는 상태관리 라이브러리는 Vuex에서 Pinia로 변경되었지만, 업무에서 Vuex를 사용하고 있어 이를 정리하기 위해 작성한 글입니다. (그래도.. 아직.. Vuex 사용.. 하시는 분들.. 많으시죠..?) 저는 하나의 View 안에 여러 탭 간 이동을 구현해야 하는 업무가 있었습니다. 탭 간(레이아웃 단위 컴포넌트) 이동 시 라우터 이동과 라이프사이클에 따라 초기화되는 vue 인스턴스 data의 문제를 해결하고 각 탭의 상태 관리하기 위해 Vuex를 사용했었습니다. 이를 공유하고 다른 분 들께서도 조금 더 쉽게 Vuex를 적용하시는데 도움을 드리고 싶어 글을 작성했습니다. (Pinia에서는 Vuex에서보다 더 간단한 Composition-API 스타일의 A.. 2024. 2. 12.
[JS] Array Methods를 정리해보아요. 안녕하세요. 아아덕후입니다. JavaScript를 사용하면서 느끼는 점은 배열 관련된 메서드가 정말 많다는 것입니다. 예전부터 존재해오던 것 메서드부터 ES5 이후, 그리고 지금도 새로 릴리즈 메서드(ES2023)까지..! 머릿속에 희미하게, 얽혀있는 배열 메서드를 정리하기 위해 이 글을 작성했습니다. 목차 slice() splice() Concat() forEach() indexOf() lastIndexOf() includes() find() findIndex() filter() reverse() map() join() split() isArray() some() every() reduce() sort() 참고 자료 1. slice() Array.slice(n,m) : n(start) 부터 m(end).. 2023. 9. 9.
[JS] for, for of, for in을 정리해보아요. 안녕하세요. 아아덕후입니다. for, for of, for in 이름은 비슷하지만 역할이 다른 for 삼둥이들을 정리해보기 위해 글을 작성했습니다. 목차 for for of for in forEach 참고 자료 1. for for(초기값; 조건; 증감) { ... 실행문 } : 가장 기본적인 for loop 문법 초기값 : for 문이 시작될 때, 단 한번만 실행된다. 주로 카운터 변수를 초기화한다. 조건 : 매 루프마다 조건이 검사된다. 조건이 true 이면 루프가 계속되고, false 이면 루프가 종료된다. 증감 : 매 루프가 끝날 때마다 실행된다. 주로 카운터 변수를 증가 또는 감소시킨다. function forTest() { const arr = ["a", "b", "c", "d", "e"]; f.. 2023. 8. 22.
[JS] 브라우저에서 자바스크립트는 어떻게 동작하는걸까? 브라우저에서 자바스크립트 비동기 처리가 작동하는 원리를 이해하기 위해 작성한 글입니다. 목차Intro자바스크립트 엔진 : ( Call Stack, Memory Heap )Web APIs콜백 큐 ( CallBack Queue )이벤트루프참고 자료 자바스크립트는 싱글 스레드 언어로 동기적으로 실행된다.(동기적으로 실행된다: 의미는 호이스팅으로 var 및 함수 선언이 맨 위로 끌어올려진 후 코드 순서에 따라 해당 함수가 실행된다는 의미이다.)하지만 비동기적으로 처리도 가능하다. 이는 자바스크립트가 브라우저의 도움을 받기 때문에 가능하다. 그렇다면 브라우저 내부에서는 비동기 처리를 위한 작업이 어떻게 진행될까? 브라우저에서는 아래 그림과 같이 자바스크립트 엔진(콜스택, 메모리힙), Web APIs , 콜백큐(C.. 2023. 7. 31.
[Java] 자바 개발환경과 실행 과정 (feat. JDK, JRE, JVM) 목차 1. Java 개발환경 2. Java 파일을 실행하는 과정 3. JDK, JVM, JRE 란?프로젝트에서 하나의 업무 페이지에 대한 프론트부터 백엔드까지 개발해야 하는 업무가 주어졌습니다. 이에 백엔드를 다시 공부하며 이전에 헷갈렸던 Java를 실행시키기 위한 개발환경에 대해서 JDK, JVM, JRE을 명확하게 정리하기 위해 글을 작성했습니다. 1. Java 개발환경Java 개발환경이란, 자바 언어가 실행할 수 있는 실행 환경을 말한다.자바언어로 만들 수 있는 프로그램의 유형 3가지는 다음과 같다.데스크톱 응용 SW : JavaSE 플랫폼 (SE : Standard Edition)웹 기반 응용 SW : JavaEE 플랫폼 (EE : EnterPrise Edition)모바일 기반 응용 SW : Ja.. 2023. 5. 28.
[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. 5. 10.
반응형