Programming23 [Spring 입문하기] Section 01. 프로젝트 환경설정 ➡️ 프로젝트 생성 0. 사전 준비 : Java 11 설치, Java 17 설치, IntelliJ 설치 Spring Boot 2.3.x 를 사용할 경우는 Java 11을 Spring Boot 3.0.x 를 사용할 경우에는 Java 17을 설치해야 한다. 글에서는 11로 설치했다가 다시 17로 재설치 하였다... ㅠ 더보기 1. Java 버전 확인하기 cmd 창에 java -version 명령어를 입력하면 자바 버전을 확인 할 수 있다. 현재 자바 8을 사용하고 있음을 확인 했다. Java 11을 설치해보도록 하자. 2. Java 11 설치하기 www.oracle.com/java/technologies/javase-jdk11-downloads.html 위 링크에서 jdk-11.0.9 를 설치 하면 된다. .. 2023. 7. 11. [Spring 입문하기] Section 00. 강의소개 💭 간단한 웹 어플리케이션을 개발하며 스프링을 익혀보자 🔎앞으로의 과정 스프링 프로젝트 생성 스프링 부트로 웹 서버 실행 회원 도메인 개발 웹 MVC 개발 DB연동 - JDBC, JPA, 스프링데이터, JPA 테스트 케이스 작성 2023. 4. 11. [Vue.js 입문하기] 컴포넌트 통신 - props 속성 💭 컴포넌트 통신 방법에 대해 알아보고 props 속성을 통해 컴포넌트 통신을 실습해보자. ❗ 부모 컴포넌트와 자식 컴포넌트 아래 사진처럼 화면의 영역을 쪼개서 재활용 가능한 형태를 컴포넌트라고 한다. 컴포넌트들 간의 관계가 존재하며 하위 컴포넌트는 자식 컴포넌트, 상위 컴포넌트는 부모 컴포넌트라고 한다. 부모 컴포넌트에서 자식 컴포넌트로는 데이터(props)를 준다. 자식 컴포넌트에서 부모 컴포넌트로는 이벤트(event emit)을 준다. ❗ props속성을 이용하여 데이터를 자식 컴포넌트로 전달하기 props 는 부모 컴포넌트의 데이터를 전달하기 위한 속성 실습에서는 Root 컴포넌트에서 app-header 컴포넌트로 데이터를 전달해보았다. 결과 AppHeader 컴포넌트에서 propsdata : ".. 2022. 7. 26. [Vue.js 입문하기] 뷰 컴포넌트 💭뷰 컴포넌트가 무엇인지 알아보고 전역 컴포넌트와 지역컴포넌트의 차이에 대해 알아보자. ❗뷰 컴포넌트 화면의 영역을 구분하여 코드로 관리하는 뷰의 기능이다. 재사용성이 올라가고 빠르게 화면을 제작하기 위해서 컴포넌트로 화면을 관리한다. 컴포넌트 생성시 각 컴포넌트 간의 관계가 생성된다. 코드에서 인스턴스를 생성하면 개발자 도구 vue에서 Root 컴포넌트로 인식 개발자도구 ❗ 전역 컴포넌트 생성하기 Vue.component 를 사용하여 컴포넌트를 생성하게 되면 전역 컴포넌트를 생성된다. 코드 결과 app-header 컴포넌트가 Root 아래 추가 됨을 확인 할 수 있다. Root는 상위 컴포넌트 app-header는 하위 컴포넌트이다. ❗ 지역 컴포넌트 생성하기 전역 컴포넌트로 사용할 경우 사용하지 않는.. 2022. 7. 21. [Vue.js 입문하기] 뷰 인스턴스 💭 Vue.js 에 CDN을 추가하여 인스턴스를 생성하고 생성자 함수를 작성하여 보자. ❗Vue.js CDN으로 시작하기 CDN : 콘텐츠 전송 네트워크(Content Delivery Network)로 지리적으로 분산된 여러 개의 서버를 사용하여 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높이기 위해사 사용되는 서버 네트워크 Vue.js 라이브러리를 제공하는 CDN 링크를 script 태그에 걸어 Vue.js를 개발할 수 있다. 프로토 타이핑 또는 학습 목적이라면, 아래 코드로 최신 버전을 사용 프로덕션 환경인 경우 오류를 방지하기 위해 아래 코드를 추가하여 특정 버전의 빌드 파일을 추가 기본 ES 모듈을 사용하는 경우 이를 지원하는 ES 모듈 호환 빌드 파일 사용 출처 : https:.. 2022. 7. 21. [Vue.js 입문하기] Vue의 핵심, Reactivity (반응성) 💭 기존의 웹 개발 방식인 Html과 JavaScript와 비교하여 Vue의 Reactivity를 구현하는 방법을 아주 간단히 알아보자! ❗Html, JavaScript로 웹 만들어보기 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때 • html 파일에서 ! 를 쓴 후 Tab 키를 누르면 아래와 같은 hmtl 양식을 손쉽게 작성할 수 있다. hi hello 결과 • 아래의 사진과 같이 str 출력이 값이 변경되기 전의 값을 출력하고 있음을 확인할 수 있다. ❗ Vue의 Reactivity(반응성) 웹 만들기 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때 • 변경된 str 값이 바로 화면에 적용되는 반응성 웹 • Object.defineProperty() API를 .. 2022. 7. 21. 이전 1 2 3 4 다음 반응형
