목표

• 쿠버네티스 환경에 젠킨스 설치하기
• 젠킨스 + Bitbucket 환경 구성하기

쿠버네티스 + 젠킨스 설치해보기

예제 따라 진행

잠깐 여행을 다녀와서 해봐야겠다…

Vue.js 환경 구축 기록일지

목표

• Vue.js 템플릿 사용

Vue.js 사용 안한지 오래되서, 한번 문법 정리하는 시간을 갖음.

한번 문법 정리 후, Codepen을 이용하여 예제 샘플 나열해서 정리해둬야겠다…

필수요소

Link : https://kr.vuejs.org/v2/guide/installation.html 링크 학습

설치방법

npm

1
2

# 최신 안정화 버전
npm i vue

PWA-Starter-Kit 감상문

router.js

1
2
3
4
5

// IMPORT
import { installRouter } from 'pwa-helpers/router.js';

// ROUTING
installRouter((location) => handleNavigation(location));

1
2
3
4
5
6

// IMPORT
import { installRouter } from 'pwa-helpers/router.js';
import { navigate } from '../actions/app.js';

// ROUTING
installRouter((location) => store.dispatch(navigate(location)));

1
2

window.history.pushState({}, '', '/new-route');
handleNavigation(window.location);

서비스 워커 학습 일지

오프라인, 주기적 백그라운드 동기화, 푸쉬알람 등이 웹에서 지원이 됨
서비스 워커는 이런 기능들의 기반을 제공

정의

서비스 워커 = 백그라운드에서 실행되는 스크립트

• 웹페이지와 별개로 작동

실제 써먹을 것 Code만 간략히 적기

lit-element 개발환경

lit-element 모듈 설치

1

npm install lit-element

목적

이번에 “스마트 관광 앱개발 공모전” 본선 진출을 하게 되어, 앱개발을 하게됬다.
그런데 순수 안드로이드 개발 경험은 전무하여, 웹기술(폰갭 = 코르도바)을 통한 개발에 도전하고자 한다.

차례

1. 개발 환경 구축
2. 프로젝트 생성·관리

개인이 학습한 내용으로, 틀린 내용이 존재할 수 있습니다.

TypeScript 부분은 생략

소개

목차

Mutation Observer 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log(mutation)
  })
})

observer.observe(document.querySelector(`#div-exam`), {
  attributes: true,
  childList: true,
  characterData: true,
  subtree: true || null,
  attributeOldValue: true || null,
  characterDataOldValue: true || null,
})

document.querySelector(`#attr`).addEventListener(`click`, () => {
  target.setAttribute(`class`, `attr`)
})

document.querySelector(`#child`).addEventListener(`click`, () => {
  document.querySelector(`#div-exam`).textContent = `changed!`
})

나중에, 이걸 써서 프로젝트를 다시 해보자

ESLint “indent”: [1, “tab”] 안먹는 현상 해결

1. VSCode 설정으로 들어간다.(Ctrl + , 입력)

2. Detect Indentation 체크를 미표시로 설정