이전다음 Kubernetes [k8s] Kubectl 명령어 더보기 MariaDB [MariaDB] 컬럼명 카멜 케이스로 출력하기 더보기 JavaScript [Javascript] ES6 ~ ES11 정리 더보기 React 01. React 환경 구축하기(npm, Vite 설치) 더보기 React 01. React.js 환경 구축하기(구름IDE) 더보기 최신글 Kubernetes [k8s] Kubectl 명령어 MariaDB [MariaDB] 컬럼명 카멜 케이스로 출력하기 JavaScript [Javascript] ES6 ~ ES11 정리 React 01. React 환경 구축하기(npm, Vite 설치) Vue.js Vue.js [Do it! Vue.js 입문] 08. 뷰 HTTP 통신 - 뷰 리소스, 액시오스 (Vue Resource, Axios) HTTP(HyperText Transfer Protocol) 브라우저와 서버 간에 데이터를 주고 받는 통신 프로토콜(Protocol:컴퓨터나 단말기 간에 통신하기 위해 상호간에 정의한 규칙) HTTP 통신 브라우저에 특정 데이터를 보내달라고 요청(request)을 보내면, 응답(response)으로 해당 데이터를 보내주는 방식으로 동작. (HTTP 요청을 보냄 = 데이터를 보내달라는 요청이라고 보면 됨. 요즘 웹 앱에서 서버에 데이터를 요청하는 HTTP 통신은 필수로 구현해야 하는 기능.) => 대표적인 사례로는 jQuery의 ajax가 있음. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바 스크립트 기법이다. 사용자와의 상호 작용에 따.. Vue.js [Do it! Vue.js 입문] 07. 뷰 라우터 (네스티드 라우터, 네임드 뷰) 뷰 라우터 뷰에서 *라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동. * 라우팅(Routing) 웹 페이지 간의 이동 방법. *싱글 페이지 애플리케이션에서 주로 사용. 화면 간의 전환이 매끄러움. 일반적으로 웹 페이지를 요청(request)하면 서버에서 응답(respone)을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타남. 이런 부분들을 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있고, 더 빠르게 화면을 조작할 수 있어 사용자 경험(UX)이 향상된다. 뷰뿐만 아니라 리액트나 앵귤러 모두 라우팅을 이용하여 화면을 전환. 라우팅 자바스크립트 라이브러리(router.js)를 이용해 .. Vue.js [Do it! Vue.js 입문] 06. 이벤트 버스 같은 레벨, 관계 없는 컴포넌트 간의 통신 같은 레벨의 컴포넌트 간의 통신을 공통적인 상위 컴포넌트에 값을 전달해 이벤트를 받는 형식으로 구현된다. 하지만 이런 상황에서는 상위 컴포넌트가 필요없음에도 통신을 위해 상위 컴포넌트를 두어야한다. 이런 경우 이벤트 버스 형식을 사용하여 관계 없는 컴포넌트끼리 바로 데이터를 전달할 수 있다. 이벤트 버스 이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다. 보내는 컴포넌트에는 .$emit()을, 받는 컴포넌트에는 .$on()을 구현한다. //이벤트 버스를 위한 추가 인스턴스 1개 생성 var eventBus = new Vue(); //이벤트를 보내는 컴포넌트 m.. Vue.js [Do it! Vue.js 입문] 05. 뷰 상위-하위 컴포넌트 간의 통신 컴포넌트 간 통신과 유효 범위 Vue.js는 컴포넌트로 화면을 구성한다. 각 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖고 있고, 때문에 같은 웹 페이지라도 데이터를 공유할 수 없다. 이는 뷰 프레임 워크 내부적으로 정의된 특징으로, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. #예제 1 app 영역 cmp1과 cmp2 지역 컴포넌트를 등록하고, cmp2 컴포넌트에서 cmp1 컴포넌트의 data.cmp1Data 값을 직접 참조했을 때, 값이 나오지 않는걸 확인할 수 있다. 상위 컴포넌트와 하위 컴포넌트 앞서 [Do it! Vue.js 입문] 04. 뷰 컴포넌트에서 다룬 컴포넌트 등록 방법으로 지역, 전역 컴포넌트를 등록하면 자연스럽게 하위 .. Java 자바 기반 웹 개발자 과정 필기 [200701.88일차] Spring boot 6 - 마이크로 서비스 마이크로 서비스 => 프로젝트를 기능별로 만듬 더보기 RabbitMQ [Spring Cloud]메세지 기반 어플리케이션 구축을 위한 Spring Cloud Stream Spring Cloud Stream medium.com 자바 기반 웹 개발자 과정 필기 [200630.87일차] Spring boot 5 - Java Mail Sender application.properties Mailer TestController index.html & success.html 보낼 구글 아이디 보안 설정 => 다른 앱에서 액세스 가능하게 설정 (설정을 안하면 차단되어 이메일 발신이 안될 수 있음) 실행 수신할 이메일 설정 => 가입 수신할 이메일을 확인해보면 메일이 제대로 와있는걸 확인 할 수 있음 더보기 non blocking 방식 문자들을 처리해주는 하나의 서버 https://www.erlang.org/downloads Erlang Programming Language OTP 23 Erlang/OTP 23 is a new major release with new features, improvements as well as a few incompat.. 자바 기반 웹 개발자 과정 필기 [200626.85일차] Spring boot 3 - MyBatis 프로젝트 생성 Table 생성 create table member( id number primary key, name varchar2(20), age number ); create sequence member_seq; insert into member values(member_seq.nextval,'홍길동',20); insert into member values(member_seq.nextval,'김개똥',30); commit; DB 사용 준비 application.yaml( 기본 file로 확장자를 붙여 생성 ) / application.properties (기본적으로 있는 파일) 둘중 하나만 있으면 된다. ojdbc6.jar MybatisConfig package com.care.root.mybati.. 자바 기반 웹 개발자 과정 필기 [200625.84일차] Spring boot 2 - Thymeleaf Thymeleaf 새 프로젝트 ex03 생성 컨트롤러 생성 및 포트 설정