MSAMicroService Architecture애플리케이션을 느슨하게 결합된 서비스의 모임으로 구조화하는 소프트웨어 아키텍쳐 스타일-> 각 서비스들이 독립적으로 실행되고 서로 통신을 하지만 문제가 생겼을때 서로 크게 영향을 받지 않는 유연한 서비스 구조 Monolithic Architecture각 서비스들이 강하게 결합되어 하나의 전체 시스템을 이루는 구조 Microservice Architecture작은 서비스 단위로 분리하고 느슨한 결합을 통해 벌집처럼 모여 하나의 전체 시스템을 이루는 구조->향후의 서비스 확장을 고려하여 설계된 구조-전체 시스템을 작은 서비스 단위로 분리-각 서비스를 독립적으로 개발 Service Mesh서비스가 애플리케이션 수명 주기 전반에 걸쳐 데이터와 일관성을 공유하며 서..

docker run --name myhttpd -d –p 8089:80 httpdcmd 창에 이런식으로 치면 docker desktop에이런식으로 생성된것을 확인할 수 있다.원래 docker 명령어 뒤에 container를 붙여야 되나 run은 그냥 docker run으로 해도 된다.docker run 명령어는 docker pull + docker create + docker start 가 합쳐진 것이다. (이미지 내려받기 + 컨테이너 생성 + 컨테이너 실행)한글 파일이 보이지 않는다면 명령어 chcp 65001을 치면 된다.이런식으로 작성한 index.html 파일을 해당 경로로 붙여넣기 하면이런식으로 브라우저에서 볼 수 있다.이런 명령어를 치면 컨테이너 안으로 들어갈 수 있다.이런식으로 명령어를 치면..

PiniaVue.js용 스토어 라이브러리 및 상태관리 프레임워크프론트엔드 웹 애플리케이션 구축을 위해 설계됨. 주요 용어Store : 전역 데이터가 저장되는 저장소State : 전역 데이터 (그냥 데이터만 만들면 됨.)Getter : 저장소에서 데이터를 검색하는 방법 (computed속성으로 만들면 됨.)Actions : 저장소에서 데이터를 수정하는 방법 (필요에 따라서 변경할 수 있게끔.. 메서드로 구현한다.) Option API방식으로 구현할 수도 있고, Composition API방식으로 구현할 수도 있다. ref나 reactive를 사용하여 state에 있는 걸 반응형으로 만들수 있다. Composition API방식으로 구현했을때는 아래와 같다.export const useCounterStore..

컴포넌트로 구현하는 웹 페이지의 구성과 계층구조 pinia 를 통해 여러 정보를 공유한다. ref 값을 변경할 때는 변수명.value 값을 변경하면 된다. reactive는 객체의 속성 값을 변경하면 된다. 부모에서는 핸들러를 통해 미리 구현해놨다가 emit이라는 함수에 의해서 실제로 이벤트가 발생했다할때 자식에서 발생하는 이벤트가 처리되도록 할 수 있다. Vue 3의 컴포넌트 간의 통신 방법 : (1) props 부모에서 자식으로 (2) emit 자식이 부모에게 (3) v-model (4) slots (5) provide/inject (6) pinia toRefs : 반응성은 그대로 가져가고 싶을 때.. 반응성 객체로 만들어 처리하겠다 라는 뜻.. 자식 컴포넌트. 자식버튼 부모 컴퍼넌트에서 자식 컴포넌..

date1은 Composition API방식이고, date2는 Option API이다. Composition API방식은 다 이 안에다가 구현해도 됨. 그러나 Option API는 리턴하는 기능만 구현하고, watch나 computed는 독립적으로 만들어야함. script setup에 임포트하면 자동으로 컴포넌트가 등록 된다. defineProps() , defineEmits()를 사용해 부모 컴포넌트와 데이터 송수신이 가능하다. 위의 코드를 script에 setup속성을 주어 밑의 코드처럼 변경할 수 있다. 같은 결과를 반환한다. export default { setup() { const name = reactive({ firstName:"영긔", lastName:"송" }); const updateN..

watch : 값이 변화될때마다 알아채서 사용하는 기능. 어떤 속성을 감시할 것인지 정의해야 함. watch: { // inputText 감시 inputText: function () { //console.log(this.forbiddenText); var pos = this.inputText.indexOf(this.forbiddenText); if (pos >= 0) { alert(this.forbiddenText + "는 입력할 수 없습니다."); // 입력문자에서 금지 문자를 삭제한다. this.inputText = this.inputText.substr(0, pos); } }, 여기서는 inputText를 감시한다. 변화할때마다 해당 function이 수행된다. methods: { cleanToD..

초창기 웹 렌더링초창기에는 모든 웹페이지가 정적페이지였다.  Ajax가 나타남전체 페이지를 끌어올 필요없이 필요한 데이터만 끌어올수 있게 됨. SPA(Single Page Application)모던 웹의 패러다임. 배포가 간단함.기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신해 전체적인 트래픽 감소시킴. -> 클라이언트 사이드 렌더링 방식 SSG(Static Site Generation)정적인 내용은 묶어서 CDN으로 저장해두고 필요할 때마다 로드하면 됨. Vue선언적 렌더링 : 표준 HTML을 템플릿 문법으로 확장하여 Javascript 상태를 기반으로 화면에 출..

firstNumber: 100,secondNumber:20,print: function() { console.log(this); function add() { console.log(this); return this.firstNumber + this.secondNumber; } console.log(this.firstNumber + "+" + this.secondNumber + "=" + add());}자바스크립트는 함수 안에 함수를 정의할 수 있다.객체의 메서드 안에서의 this는 자기자신 참조.자바스크립트는 프로토타입 지원.. add()안의 this는 window객체를 참조해서 this.firstNumber로 값을 불러오지 못한다.firstNumber: 1..

spring security주소를 입력해 들어가면스프링 시큐리티가 내장하고 있는 로그인 폼으로 자동으로 이동하게 된다. 유저, 비밀번호를 설정해주지 않으면 비밀번호를 제공해준다. 인증 관련 Spring Security 주요 모듈 SecurityContextHolderSecurityContextHolder는 SecurityContext를 제공하는 static 메소드(getContest)를 지원 SecurityContext접근 주체와 인증에 대한 정보를 담고 있는 Context즉, Authentication 객체를 담고 있음. AuthenticationPrincipal과 GrantAuthority를 제공인증이 이루어지면 해당 Authentication이 SecurityContext에 저장됨.SecurityC..