milliwonkim의 블로그

오른쪽에 AWS계정 섹션 중, ‘생성’ 클릭 그 후 https://kiwonkim-aws-2.signin.aws.amazon.com/console 를 다른 크롬 시크릿탭 혹은 다른 브라우저에서 복붙 로그인 하면 이 화면이 뜹니다.

‘그룹생성 추가’ 클릭 admin 그룹에 있는 사용자들은 이 그룹의 권한을 승계함 권한은 정책을 통해 정의됨 그 정책은 AdministratorAccess 이 정책은 admin 그룹에 속한 모든 사용자가 계정의 관리자 역할이 되도록함 그룹 생성 버튼 클릭 후 밑에 다음 버튼 클릭 다음 단계 클릭 및 create user 클릭 kiwonkim 클릭 admin 그룹으로부터 승계한 관리 정책

IAM(Identity and Access Management): 글로벌 서비스(리전 선택 안함) Root account는 공유되거나 사용이 안됨 유저는 organization에 소속됐으며, 그룹으로 만들수도 있음 그룹은 오직 유저들로만 구성, 다른 그룹이 포함이 안됨 유저는 꼭 같은 그룹일 필요는 없음 여러 그룹 속할 수 있음 IAM: Permission 유저나 그룹은 정책이라는 JSON 문서로 할당됨 유저의 권한을 의미 AWS에서는 최소 권한 원리(least privilege principle)이 있음 유저가 필요한 권한만 주기 { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": "ec2:Describe*", "Resour..

React에서는 react-dom/test-utils, testing-library/react, enzyme 등 유닛 테스트를 실행할 수 있는 방법이 있습니다. 반면 Vue의 경우, 리액트에서 인기인 testing-library의 Vue 버전인 testing-library/vue가 있긴 하지만, 주로 vue-test-utils를 사용하는 것 같아, vue-test-utils로 적용해보았습니다. 테스트 전, 테스트를 구성을 하도록 하겠습니다. // jest.config.jsmodule.exports = { preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', moduleFileExtensions: ['js', 'jsx', 'json', 'vu..

// @/views/TeacherPage/TeacherCard.vue {{ card.name }} 선생님 {{ card.currentJob }} 주요분야: {{ card.mainSection }} {{ card.price }} {{ card.evaluationIndex }} / 10.0 // @hooks/useGetCssModule.ts import { useCssModule } from 'vue'; interface CssModuleProps { [key: string]: { [key: string]: string; }; } interface ICssModule { [key: string]: string; } function useGetCssModule({ cssModuleProps }: CssModu..

뷰포트를 ref로 인식한 값을 이용해서 뷰포트 넓이에 따라 Vuetify의 Hamburger Icon와 네비게이션메뉴를 조건부 렌더링하도록 하는 로직을 구현해보았습니다 ALLIGHT {{ headerButton }} header width가 640px이 넘은 경우 header의 width가 640px 이하인 경우 resize를 하는 로직을 react의 hook처럼 외부화 시킬 수 있습니다. // @/hooks/useResize.ts import { onMounted, onUnmounted, Ref } from '@vue/composition-api'; interface IRefs { clientWidth: number; } function useResize(refs: Ref, result: Ref): v..

React에서는 다음과 같이 String, Boolean 값이든, 함수든 다 props로 내려서 그대로 실행할 수 있습니다 const AComponent = () => { const [exampleString, setExampleString] = useState('') const handleRoute = () => { history.push('/some-route') } return ( ) } const BComponent = ({ exampleString, handleRoute }) => { return ( 클릭 ) } 하지만 Vue는 이것과 조금 다른 방법이 존재합니다. Vue에서는 상위 컴포넌트의 함수를 실행시키기 위해서는 emit이라는 것을 이용할 수 있습니다 ****TypeScript with ..

라이브러리의 경우, scoped CSS, CSS Modules 다 안됨 해싱이 되기 때문임 따라서 plain CSS 혹은 plain SCSS / SASS를 사용해야합니다. /* TeacherCard.scss */ .q-date__view { padding: 0; } // @/views/TeacherPage/TeacherPage.vue ... // 이 부분은 Quasar를 override할 부분이 아니기 때문에 // CSS Module로 해도 됨

Reset CSS를 담당하는 App.scss를 main.ts에서 import하면 됩니다. import { createApp } from 'vue'; /* import the fontawesome core */ import { library } from '@fortawesome/fontawesome-svg-core'; /* import font awesome icon component */ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; /* import specific icons */ import { faUserSecret } from '@fortawesome/free-solid-svg-icons'; import AOS from 'aos'..

Vue의 Composition API에서는 기존의 data()를 this로 접근하는 방식 대신, ref와 reactive로 접근하는 것으로 변경됐습니다. 거두절미하고, ref, reactive를 사용하는 방식은 다음과 같습니다 정확한 내용은 아니며, 사용할 때 얻었던 경험을 미루어 말씀드립니다. 참고링크입니다. https://v3.ko.vuejs.org/api/refs-api.html#toref Refs | Vue.js Refs 이 섹션에서는 싱글 파일 컴포넌트 문법을 사용해 예제를 설명하겠습니다. ref 내부에 값을 가지면서 반응적이고 변경 가능한 ref 객체를 반환합니다. ref 객체는 단 하나의 프로퍼티를 가지는 v3.ko.vuejs.org // ref는 초기화할 내용이 객체가 아닌 경우에 주로 사..