일을 처리하는 과정 또는 순서이다.
좁은 의미의 소프트웨어 개발 프로세스넓은 의미의 소프트웨어 개발 프로세스SPA(Single Page Application)이라고 하는데,
이런 동적인 페이지를 쉽게 만들어주는 기술이 Vue.js입니다. jQuery가 있기는 하지만, 좀 더 간단한 방법을 제공하기 위해 개발된 Vue.js 살펴보겠습니다.
Vue.js는 가벼운 소규모 어플리케이션을 만드는 것을 목표로 만들어졌습니다. 중국의 Evan You가 개발하여 2014년에 릴리즈된 새로운 프레임워크입니다. 제작자는 이전에 구글의 Angular JS의 개발팀이었습니다. 그가 Vue.js를 개발한 이유에 대해서는 이렇게 말합니다.
Angular의 정말 맘에 드는 부분만 추출하여 가벼운 것을 만들 때 사용할 수 있으면 어떨까?
그는 심플하고 가벼운 SPA를 만들고 싶었던 것입니다.
Vue.js라는 것은 한마디로 데이터와 뷰를 연결해주는 역할을 합니다. MVVM(Model-View-ViewMode) 이라는 방식을 기본으로 만들어져 있습니다.
“Model(Vue 안에 준비된 데이터)”과 “View(HTML에서 표시되는 요소)” 그리고 “ViewModel(View와 Model을 어떻게 연결할까)”로 나누어 생각하는 방식입니다.
MVVM의 구조를 생각할 때는
Vue.js에는 여러 가지 기능이 있습니다.
| 기능 | 서식 |
|---|---|
| 데이터를 있는 그대로 표시 | {{데이터}} |
| 요소의 속성을 데이터로 지정 | v-bind |
| 입력폼과 데이터의 연결 | v-model |
| 이벤트 연결 | v-on |
| 조건에 따라 표시 | v-if |
| 반복해서 표시 | v-for |
| 데이터를 사용한 계산 | computed |
| 데이터의 변화 감시 | watch |
| 표시/비표시에 애니메이션 처리 | transition |
| 컴포넌트 조립 | component |
Vue.js를 설치하는 방법에는 “CDN을 사용하는 방법” “다운로드하는 방법” “Vue-cli로 시작하는 방법” 등 여러 가지가 있습니다. “Vue-cli로 시작하는 방법”은 대규모 어플리케이션을 구축할 때 사용하는 방식으로 입문자에게는 권장하지 않으므로, 공식 사이트에 있는 설치 방법을 따라가며 설치하면 되겠습니다.
]]>뷰 라우터는 Vue.js를 이용하여 SPA를 구현할 때 사용하는 Vue.js 라우터입니다. 공식문서-라우터
라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치를 말합니다. 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리라고 생각하면 됩니다.
예를 들어 /home 경로로 요청이 들어왔을 때, Home.vue 컴포넌트를 화면에 렌더링 하는 명령을 내리는 역할을 수행하는 라이브러리라고 생각할 수 있습니다.
이때, /home → Home.vue 이러한 매핑 정보를 라우트(Route)라고도 합니다.
어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보
npm install vue-router
URL 요청에 대해 어떤 페이지(컴포넌트)를 보여줄지에 대한 매핑 정보를 정의합니다.
// src/router/index.js
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
},
];
라우터를 설정해봅시다.
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
},
];
const router = createRouter({
history: createWebHistory('/'),
routes,
});
export default router;
설정한 라우터 객체를 Vue 인스턴스에 추가해봅니다.
import { createApp } from 'vue';
import App from './App.vue';
import router fomr './router';
createApp(App).use(router).mount('#app');
app.use(router)를 호출하면 모든 컴포넌트 내부에서 $router, $route 객체에 접근할 수 있습니다.
뷰 라우터를 HTML과 JavaScript로 사용하는 방법에 대해 알아보도록 하겠습니다.
// src/App.vue
<script setup></script>
<template>
<nav>
<route-link to="/">Home</route-link>
<span> | </span>
<route-link to="/about">About</route-link>
</nav>
<main>
<route-view></route-view>
</main>
</template>
<route-link> : Vue Router에서는 페이지를 이동할 때에 일반 a태그 대신 사용하는 커스텀 컴포넌트인 <route-link>를 사용하여 다른 페이지 링크를 만들어야 합니다. 이를 통해 Vue Router는 페이지를 리로딩 하지 않고 URL에 매핑된 페이지를 렌더링할 수 있습니다. 👍<route-view> : URL에 매핑된 컴포넌트를 화면에 표시합니다.위에서 router를 설정할 때, app.use(router)를 호출했습니다. 이렇게 호출 함으로써 모든 자식 컴포넌트에 router, route 같은 객체를 사용할 수 있습니다.
이러한 객체는 페이지 이동 또는 현재 활성 라우트(경로 매핑)정보에 접근하는 데 사용할 수 있습니다.
router : 라우터 인스턴스로 JavaScripte에서 다른 페이지(컴포넌트)로 이동할 수 있다.
route : 현재 활성 라우트 정보에 접근할 수 있다.(이 속성은 읽기 전용)
<!-- HomeView.vue -->
<script setup>
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
console.log('route.name: ', route.name);
console.log('route.path: ', route.path);
const goAboutPage = () => router.push('/about');
</script>
<template>
<h1>Home Page</h1>
<button @click="goAboutPage">About 페이지로 이동</button>
</template>
<!-- AboutView.vue -->
<script setup></script>
<template>
<h1>About Page</h1>
<ul>
<li>$route.name: {{ $route.name }}</li>
<li>$route.path: {{ $route.path }}</li>
</ul>
<button @click="$router.push('/')">Home 페이지로 이동</button>
</template>
컨테이너 오케스트레이션은 많은 수의 컨테이너를 관리 가능하도록 해주는 도구입니다. k8s는 컨테이너 오케스트레이션의 가장 대표적인 도구입니다.
k8s는 컨테이너화된 애플리케이션을 배포, 스케일링 및 관리하기 위한 오픈소스 플랫폼입니다.
Kubernetes는 여러 호스트에서 컨테이너화된 애플리케이션을 배포하고, 자원 관리 및 로드 밸런싱, 스토리지 및 네트워킹과 같은 작업을 수행합니다.
Kubernetes는 쿠버네티스 API와 함께 작동하며 사용자가 클러스터를 제어할 수 있도록 합니다. 클러스터는 마스터 노드와 워커 노드로 구성되며, 마스터 노드는 클러스터의 제어 플레인을 관리하고, 워커 노드는 애플리케이션을 실행합니다.
Kubernetes는 대규모 애플리케이션의 배포 및 관리를 단순화하여 개발자와 운영자가 보다 효율적으로 작업할 수 있도록 지원합니다.
쿠버네티스의 모든 설정은 YAML 파일을 사용해서 작성됩니다.
들여쓰기는 기본적으로 2칸 또는 4칸을 지원합니다.
person:
name: LeeDiculous
job: developer
skills:
- docker
- kubernetes
데이터는 key : value 형식으로 정의합니다.
apiVersion: v1
kind: Pod
metadata:
name: echo
labels:
type: app
{
"apiVersion": "v1",
"kind": "Pod",
"metadata": {
"name": "echo",
"labels": {
"type": "app"
}
}
}
교육 실습은 windows환경에서 진행됐으므로, 따로 macOS 환경 설치법을 찾아 설치하였습니다.
macOS m1 환경에서 Kubernetes 시작하기
주어진 요구사항은 위와 같습니다. 이를 토대로 요구분석을 진행해 프로젝트의 전체적인 그림을 그려 보려 합니다. 프로젝트의 볼륨이나 구현의 깊이는 차후 팀원들과 이야기를 나눈 후, 서술하도록 하겠습니다.
근처 세탁소를 찾아주고 예약을 제공하는 서비스날짜를 등록하고 수거를 선택하면 지정된 날짜에 수거해주고 완료 시, 다시 배달하는 서비스종류에 따른 세탁서비스를 추천해주는 기능명사: 세탁소, 날짜, 종류
동사: 예약, 등록, 수거, 배달, 추천
위와 같은 문제들로 새롭게 변화하는 환경에 민첩하게 대응할 수 있는 새로운 아키텍처의 필요성이 생겼습니다.
서비스 중심의 설계를 하면, 객체 중심의 설계를 하게 됩니다. 이는 곧 데이터 -> 서비스 로 이동함을 의미하고 데이터 모델링의 중요성이 낮아지게 됩니다. 이러한 이유로
NoSQL 등의 DB로 개발을 하게 되는 것 입니다.
lsof -PiTCP -sTCP:LISTEN
#8080 포트 찾기
lsof -i :8080
위에서 조회된 PID를 이용하여 KILL 명령어 수행
kill -9 PID번호
server:
port: 8761
spring:
application:
name: discoveryservice
eureka:
client:
register-with-eureka: false
fetch-registry: false
kafka 서버 실행하기
# zookeeper 실행
bin/zookeeper-server-start.sh -daemon config/zookeeper.properties
# kafka 실행
bin/kafka-server-start.sh -daemon config/server.properties
# 확인
netstat -an | grep 2181
# 아래처럼 나오면 성공!
tcp46 0 0 *.2181 *.* LISTEN
Dockerfile
FROM openjdk:11
COPY target/spring-docker-*.jar app.jar
ENTRYPOINT [ "java", "-jar", "app.jar" ]
terminal
# maven 프로젝트 빌드 -> jar 파일 생성
./mvnw package
java -jar ./target/spring-docker-0.0.1-APP.jar
docker build -t leediculous/spring-docker ./
# -d: detach로 실행 이후에 터미널을 계속 사용할 수 있게 해준다.
docker run -d -p 8081:8081 leediculous/spring-docker
./mvnw clean package
./mvnw docker:push
docker login
클라우드 컴퓨팅의 발전으로 기업들은 점차 CNA를 사용하고 있습니다. CNA는 어떤 특징을 가지고 있고, 또 왜 혁신적인지 살펴보겠습니다.
MSADockerCI/CD클라우드 네이티브 애플리케이션은 위의 특징들로 인해 다음과 같은 혁신을 제공합니다.
클라우드 네이티브 애플리케이션은 클라우드 컴퓨팅의 발전으로 인해 중요성이 점차 높아지고 있습니다. 이 기술은 확장성, 유연성, 안정성, 보안성을 보장하며, 비즈니스의 빠른 변화에 대응하기 위한 애플리케이션을 제공합니다. 기업들은 이러한 기술을 적극적으로 활용하여 경쟁 우위를 유지하고 발전해 나가야 합니다.