본문 바로가기

공부-프레임워크, 개발도구20

포트 확인방법 1. 윈도우 Telnet 클라이언트 사용 telnet www.example.com 80 : 콘솔로 확인할 수 있다. 윈도우 환경설정에서 텔넷 클라이언트를 체크해야 한다. 2. netstat -tnl 명령어로 포트 확인할 수 있다. 2023. 3. 6.
1. 젠킨스 빌드 목표 gradle로 빌드하는 Spring Boot 프로젝트를 빌드하는 파이프라인 구성해보기 도커를 활용하여 설정해보기 도커가 기본적으로 설치되어 있다고 가정한다. 1. docker 설정하기 관리할 때 일일이 명령어를 치기는 어려움이 있다. docker-compose로 젠킨스에 대한 기본 설정을 진행한다. 젠킨스를 실행할 때마다 일일이 다운받고 세팅하지 않도록 volumes을 설정하였다. 해당 파일이 있는 위치에서 docker-compose up 명령어를 치면 http://localhost:8080으로 젠킨스에 접속할 수 있게 된다. 처음 시작하면 암호화된 비밀번호를 입력하는 란이 있다. 명령어를 백그라운드 실행을 하지 않았다면 콘솔창 하단에 있는 비밀번호를 볼 수 있다. 암호를 치고 추천하는 플러그인을 .. 2023. 1. 28.
Vue - computed, methods, watch 속성 methods: 호출할 때만 해당 로직이 수행된다. computed: 데이터 연산들을 정의하는영역, return값을 가지며 데이터들간의 종속을 표현할 때 자주쓰인다. 대게 watch와 헷갈리면 computed를 선택하는 것이 옳다. function(){ return }형태를 가진다. watch: 데이터 변화를 감지하여 특정 로직을 수행, computed는 단순 연산에 주로 사용되지만 watch는 비동기 처리에 유리하다. 대체로 특정 변화가 감지되면 메소드를 호출하는 형태 완전히 이해하진 못했으므로 이렇게 간단하게만 표시 2022. 10. 7.
Vue- 자주쓰이는 디렉티브 디렉티브(Directive): html 태그 안의 v-접두사를 가진 모든 속성 v-bind : html 속성 값에 뷰 데이터 값을 연결할 때 사용 아이디데이터 클래스데이터 스타일데이터 new Vue({ el:'#app', data:{ id_data:"tmp_id", class_data:"tmp_class", style_data:"tmp_style", } }); 전역 컴포넌트 같은 경우 이렇게 선언 가능하다. -> 전역 컴포넌트의 props 속성에 prop_data가 명시되어 있어야 한다. v-bind:는 :로 축약해서 사용할 수 있되 혼동을 줄 수 있으므로 혼용해서 사용하진 말자. v-if : 값에 따라(true, false) 보이거나 보이지 않거나 flag=true면 보임 v-for : 반복문 설명을 .. 2022. 10. 6.
Vue-라우터 사용법 라우터 라우팅: 웹 페이지 간의 이동방법, 주로 SPA에서 주로 사용함 라우팅 사용시 매끄러운 화면 전환 가능 Vue 라우터 관련 특수 태그 URL : 페이지 이동에 사용하는 태그 : URL값에 따라 갱신되는 영역 var view1 = {template:'view1'}; var view2 = {template:'view2'}; var routes = [ {path: '/view1', component:view1}, {path: '/view2', component:view2}, ]; var router = new VueRouter({routes}); var app = new Vue({router}).$mount('#app'); view1 view2 view1 view2 링크를 클릭시 router-view영.. 2022. 10. 6.
Vue- 컴포넌트간의 통신 컴포넌트 기본개념 같은 페이지에 구성되어있는 컴포넌트라도 데이터를 공유하기는 어렵다. 각자의 유효범위가 존재함 컴포넌트간의 통신 방법에는 상.하위 컴포넌트 관계, 같은 레벨의 컴포넌트 간 통신으로 구분 상.하위 컴포넌트간의 데이터 전달 상위 -> 하위 : props 전달 하위 -> 상위: 이벤트 발생 상위->하위 컴포넌트 데이터전달 예제코드 new Vue({ el: '#app', data: { meg: 'hello' } }); Vue.component('child',{ props: ['data'], template: '{{data}}', }); #app 컴포넌트영역의 msg는 hello값을 가진다. child컴포넌트는 #app안에 구성되어있는 전역컴포넌트이다. 또한 하위 컴포넌트이다. child컴포넌트는.. 2022. 10. 6.