602호_클라우드기반 자바풀스택_중앙정보처리학원_국비교육

참고문헌 :typescriptlangHandbook - The TypeScript Handbook​ Handbook - The TypeScript HandbookYour first step to learn TypeScriptwww.typescriptlang.orgtypescriptlangHandbook - The TypeScript Handbook​https://www.typescriptlang.org/ko/docs/handbook/2/basic-types.html Documentation - The BasicsTypeScript를 배우는 첫 걸음: 기본 타입.www.typescriptlang.org 검색 : 타입스크립트의 타입 계층 구조 - 이미지 검색 ★ 기본 타입 1. 원시 타입(Primitive ..

1. 필요 개발 환경 a. Node.js : 자바스크립트 구동기, 어디서든 자바스크립트를 실행할 수 있게 해 줌 b. vs code 2. 타입스크린트는 자바스크립트의 확장판 자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어 3. 타입 시스템 : ● 프로그램 언어를 사용할 때 타입과 관련해서 지켜야 할 규칙 체계(= 문법 체계)■ 정적 타입(static type) 시스템 ● 코드 실행 이전 모든 변수의 타입을 고정적으로 결정함 ● 모든 변수의 타입이 컴파일타임에 결정 ● 코드 수준에서 개발자가 타입을 명시해줘야 해서 타이핑 양이 매우 증가 ● C, JAVA, 타입스크립트String name = "홍길동";in..

라이프사이클 훅 lifecycle hook 이란 컴포넌트의 생성, 소멸이 반복되는 과정에서 실행되는 메서드를 말하며, 이러한 훅을 통해 컴포넌트 생성 또는 소멸 시 초기화 등의 작업을 수행할 수 있음훅은 기능에 직접적인 영향을 주지 않으면서 특정 동작을 '걸어 놓을 수 있는' 방식을 의미하며, 조건이 충족되면 실행됨 ● 브라우저의 콘솔 창을 통해 아래 내용들을 확인해 보기 ● HookExam.vue HookExam 즐거운 시간~~ {{ state.message}} ● Greeting.vue 언마운트 연습 안녕!! 반가워~~ ● App.vue Vue 연습 hide

뷰 반응형 상태/컴퓨티드/데이터 바인딩 √ 반응형 상태 반응형 상태란 컴포넌트에서 관리하는 데이터 중에서 반응형 시스템에 의해 자동으로 감지되어 실시간으로UI에 반영되는 데이터를 의미간단하게 '상태'라고도 함 ● ref ref() 메서드는 일반적으로 문자열, 숫자, 불리언 같은 원시형 데이터를 반응형으로 만들 때 사용하며, ref() 로 생성된 변수는 .value 속성을 통해서 접근해야 함 ● reactive ○ reactive() 메서드는 일반적으로 객체를 반응형으로 만들 때 사용 import { ref } from 'vue';import {reactive} from 'vue';const count = ref(0)// ref()는 반응형 변수를 생성할 때 사용//..

뷰 기초 템플릿 □ template 블록에서 사용할 수 있는 기초적인 문법 ● 텍스트 출력 ○ 머스태시(mustache) 문법 : Vue에서 텍스트를 동적으로 출력하는 방법으로 중괄호 두 개( {{ }} ) 를 이용 ○ v-text 디렉티브 이용 ■ 디렉티브(directive) : 템플릿 블록에서 HTML요소에 "V-"로 시작하는 특수한 속성, 동적으로 텍 스트를 출력하거나 클래스를 표시하고, 조건에 따라 일부 요소의 출력을 제어하거나, 반복하고, 이벤트를 다루는 역할 ■ JSON(JavaScript Object Notation) : 문자역 기반의 데이터 형식으로 서로 다른 서비..

뷰(Vue) 설치 및 기본 vuejs Vue.jshttps://ko.vuejs.org/guide/quick-start.html Vue.jsVue.js - 프로그래시브 자바스트립트 프레임워크ko.vuejs.org 1. node.js 설치2. visual studio code 설치3. Vue 설치$ npm create vue@latest또는$ yarn create vue@latest또는 $ npm create vite@latest$ cd $ npm install$ npm run dev ● index.html ● App.vue Hello Vue ● Hello.vue Hello Page {{m..

라우팅(Routing) ● 라우팅은 경로를 뜻하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로 '경로를 지정하는 과정'이라는 뜻 으로 '데이터 전달을 목적으로 최적의 경로를 찾아 데이터를 전송하는 과정' ● 페이지 라우팅 ○ 요청에 따라 적절한 페이지를 반환하는 일련의 과정 ○ 즉 URL 요청 경로에 맞게 적절한 페이지를 보여주는 과정 ● 리액트의 페이지 라우팅 ○ 서버 사이드(Server Side) 렌더링 : 웹브라우저에 표시할 페이지를 웹 서버에서 만들어 전달하며, 검 색 엔진을 최적화하며, 처음 접속할 때 속도가 빠르다는 장점이 있다. 반면 사용자가 페이지를 이동할 때마다 서버가 새로운 페이지를 생성해 제공하려면 많은 연산을 수행하게..

외부 파일 및 외부 폰트 설정 ● 외부 폰트는 index.css에 설정//index.cssbody{ font-family:"폰트명";} ● 외부 이미지 파일 ○ public : 많은 이미지를 넣을 경우 사용, 파일을 새로 불러옴 ○ src 폴더 아래 assets 폴더에 저장 : 이미지 경로 자동으로 설정되면 한 번 읽어온 이미지는 메모리에 저장되어 다시 불러 오지 않음 //public 폴더//src > assets import 이미지이름 from "./이미지파일명.확장자"; ● public 폴더에 'child.jpg, child1.jpg' 이미지 파일 넣어 놓기 ● src 폴더 → assets 폴더에 'grade1.png, grade2.png'..

todoList ● App.cssbody{ margin: 0px; padding: 0px;}.App{ max-width: 500px; width: 100%; margin: 0 auto; /* box-sizing: border-box; padding: 20px; border: 1px solid gray; */ display: flex; /* justify-content:space-between; */ flex-direction: column; /* 아이템 정렬 방향 */ gap : 10px; /* 아이템 간격 */} ● Header.css .Header h1{ margin-bottom: 0px; color : #1f93ff;} ● Editor.css ..

숫자 증감 예제1 ● App.cssbody { padding: 20px; } .App { margin: 0 auto; width: 500px; } .App > section { padding: 20px; background-color: rgb(245, 245, 245); border: 1px solid rgb(240, 240, 240); border-radius: 5px; margin-bottom: 10px; } ● Viewer 컴포넌트const Viewer = ({ count }) =>{ return( 현재 카운트 : {count} );}export default Vie..