주녁, DevNote
article thumbnail
아시나요? - 객체지향의 사실과 오해
Do you know? 2023. 5. 14. 15:33

개요 이 글은 조영호님의 객체지향의 사실과 오해(위키북스)를 읽고 정리한 글입니다. 목표 객체지향의 목표는 실세계를 모방하는 것이 아니다. 오히려 새로운 세계를 창조하는 것이다. 클래스나 상속을 중점으로 바라보던 고정관념을 돌아보고 자신만의 견해를 만들 수 있도록 해보자! 여정 협력 시너지를 생각하라. 전체는 부분의 합보다 크다. - 스티븐 코비 협력 = 요청과 응답 요청과 응답으로 이루어진 협력은 거대하고 복잡한 문제를 해결할수 있게 해준다. 협력의 성공은 특정한 역할(Role)을 맡은 개인이 요청을 얼마나 성실히 이행하는가에 달려있다. 역할과 책임 역할은 특정한 사람이 협력 안에서 차지하는 책임과 의무이다. 여러 사람이 동일한 역할을 수행할 수 있다. (= 누가 커피를 서빙하던 상관 없다) 역할은 대..

article thumbnail
모던 자바스크립트 TodoList - Todo Component (3)
Frontend 2023. 5. 8. 19:00

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 TodoCount 기본 뼈대 작성 TodoCount 컴포넌트는 3가지 기능을 가지고 있어야 한다. 필터링 : 3가지 필터를 설정할 수 있다(전체보기, 해야할 일, 완료한 일) 할 일 카운트 : 현재 표시된 할 일의 갯수를 표시한다 전체 삭제 : 할 일 전체를 삭제한다. 일단 컴포넌트 뼈대부터 잡으면 아래와 같다. // TodoCount.js import Component from "../core/Compone..

article thumbnail
모던 자바스크립트 TodoList - Todo Component (2)
Frontend 2023. 5. 6. 11:32

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 삭제 기능 만들기 조회 기능과 다르게 삭제 기능은 버튼을 눌렀을 때 이벤트로 동작한다. 아래와 같이 이벤트를 정의해주고 Reducer를 호출해준다. // TodoList.js setEvent () { this.onClickDeleteButton(); } onDoubleClickTodoItem() { this.addEvent('dblclick', 'li', (event) => { const todoItem = ..

article thumbnail
모던 자바스크립트 TodoList - Todo Component (1)
Frontend 2023. 5. 2. 23:53

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 들어갈 자리 확인하기 기존에 작성되어 있던 index.html에서 TodoList의 자리를 한번 확인해보자. ... ... ... 위와 같이 크게 3가지 항목으로 구성되어 있다. 우리는 이 부분을 각각 컴포넌트로 작성할 것이다. 먼저, 기본 기능인 2가지 컴포넌트를 먼저 작성해보도록 하자. Todo를 생성해주는 Todo Input 목록을 보여주는 Todo List 일단 먼저, html에서 section 태그만..

article thumbnail
모던 자바스크립트 TodoList - User Component
Frontend 2023. 4. 21. 22:30

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 버튼을 누르면 이벤트 호출 버튼을 누르면 이벤트가 발생해야 한다. 잊고 있었겠지만 Component.js에는 이벤트 관련 함수가 두개나 작성되어 있다. 이벤트를 추가하는 addEvent()와 모든 이벤트를 등록하는 setEvent()다. // Component.js 중 addEvent (eventType, selector, callback) { // 컴포넌트의 이벤트를 추가한다. this.$target.add..

Kubeflow 라이징 - Charmed Kubeflow (Optional)
DevOps 2023. 4. 19. 19:00

개요 이 글은 kubeflow를 쉽고 간편하게 설치해주는 Distribution인 Charmed Kubeflow를 안내하는 글이다. Charmed Kubeflow는 Canonical 에서 만든 프로젝트로 상용으로 사용해도 문제가 없다. 여기서 제공하는 Kubeflow 버전은 3가지(full, lite, edge)로 각 버전별로 기능의 수가 다르다 기존에 Kubeflow가 설치되어 있다면 따로 진행할 필요는 없다. 목표 Charmed Kubeflow 설치를 통해 kubeflow를 설치해본다. 여정 설치 요구사항은 아래와 같다 - be version 1.22 - have a (default) storage class configured - have dns configured for accessing the ..

article thumbnail
모던 자바스크립트 TodoList - Store & Reducer
Frontend 2023. 4. 17. 19:00

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 유저를 담당하는 컴포넌트 작성 유저를 생성/삭제/조회하는 컴포넌트 UserList를 작성할 것이다. 저번 포스팅에서 작성했던 Component를 바탕으로 작성해야할 메소드만 나열하면 아래와 같아진다. // UserList.js import Component from "../core/Component"; export default class UserList extends Component { initState ..

article thumbnail
모던 자바스크립트 TodoList - Component & Observer
Frontend 2023. 4. 16. 13:56

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 환경 구축 초기 상태를 만들어둔 init 브랜치에서 진행한다. # 로컬 터미널에서 git clone https://github.com/junwork123/js-todo-list.git git checkout init # 실행을 위한 live-server 설치 npm install -g live-server 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있다. live-server . 윈도우에서 실행..

article thumbnail
IaC로 쿠버네티스 환경 구축하기 (Ansible + Kubespray)
DevOps 2023. 4. 15. 17:10

목표 Ansible과 Kubespray를 이용해 kubernetes 환경을 구축한다. 추상화된 인프라 구축을 통해 IaC에 대해 이해한다. 여정 IaC가 뭔가요? 왜 필요한가요? 코드형 인프라(Infrastructure as Code, IaC)는 수동 프로세스가 아닌 코드를 통해 인프라를 관리하고 프로비저닝하는 것을 말합니다. - redhat 공식문서 왜 IaC가 필요해졌고, 생겼는지 짧게 설명하면 아래와 같다. 쿠버네티스를 통해 컴퓨팅 환경이 추상화되기 시작 → 클라우드 상에서 인프라 리소스가 폭발적으로 증가 → 무슨 리소스가 얼마나 할당되었는지, 동일한 설정을 가졌는지 관리가 어려워짐 → 인프라를 코드로 동일하게 관리해보자 = IaC 등장! 즉, IaC는 코드로 원하는 인프라 구조를 작성하면 어떤 환..

article thumbnail
시험 5분전 급하게 보는 CKA 핵심 명령어
How-to 2023. 4. 6. 19:35

개요 CKA 시험에서 자주 사용되는 명령어를 정리한 글입니다. (제가 작성한 Repository에서 더 자세한 설명을 보실 수 있습니다.) 더 자세한 내용은 공식 문서를 참조하시면 좋습니다. (kubectl 치트 시트 | 명령줄 도구 (kubectl)) 상황별 명령어 모음 커맨드 단축어 설정 vi ~/.bashrc # bashrc 마지막에 추가해주세요 # 자동완성 kubectl completion bash kubeadm completion bash # 단축어 세팅 alias kc="kubectl create" export do="--dry-run=client -o yaml" # Create the YAML tamplate (사용법은 다음 스크립트 참조) # Save and Quit exec $SHELL ..