⭐ Create React App 1. state 정의 하기App.jsimport React, { Component } from 'react';import SetState from './js/14_setState';import './App.css'; class App extends Component { render(){ return ( React Example ); } }export default App;SetState.jsimport React, { Component } from 'react';import ReactDOM from 'react-dom/client';con..
⭐ 생명주기 함수 이해하기컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속https://chrome.google.com/webstore Chrome Web Store브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.chromewebstore.google.comReact Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다..
⭐ Statestate를 활용한, 1초에 하나씩 수가 증가되는 프로그램1. 단계 1구조 생성class AutoCounter extends React.Component { render() { let titleStyle = { margin: 0, padding: 0, fontWeight: "bold", color: "#333" }; return ( ReactExample ) }}class AuthoCounterBox extends React.Component { render() { let boxStyle = { display: "inline-block", padding: 20, backgroundColo..
★ 컴포넌트 분할과 정의 재사용성, 테스트 용이성, 디버깅 편의성 등을 고려해 컴포넌트를 분할하는 것을 권장하고 있다. 한 번에 변경되는 데이터를 렌더링하는 UI 단위로 컴포넌트를 분할하는 편이 좋다. 데이터가 변경되는 단위로 컴포넌트를 세분화하면 해당 컴포넌트만 다시 렌더링하고 나머지 컴포넌트는 다시 렌더링 하지 않게 되어 보다 좋은 렌더링 성능을 제공할 수 있게 된다. 특히 반복 렌더링하는 부분은 반드시 별도의 컴포넌트로 작성하는것이 좋다. ■ 관리해야 할 데이터 todo는 InputTodo 컴포넌트의 로컬 데이터로 정의한다. 왜냐하면, 데이터가 관리할 만큼 중요하지 않으므로 데이터의 생명주기 관리가 필요하지 않기 때문이다. { todoList : [ { id : 1, todo : "자전거 타기", ..
★ 단일 파일 컴포넌트 단일 파일 컴포넌트는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름 한 파일에 컴포넌트 구성을 위해 템플릿, 스크립트, 스타일 정보를 모두 포함하기 때문에 컴포넌트 단위로 분리 가능 Vue 애플리케이션을 개발하기 위해서는 Webpack, Rollup 과 같은 모듈 번들러 도구와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 한다. 1. 프로젝트 설정 도구 1.1 Vue CLI 도구 Webpack 기반의 Vue 공식 프로젝트 설정 도구였다. 하지만, 이 방법은 프로젝트를 생성하고 구동하기까지 다소 긴 시간이 소요가 된다. 또한, 번들링 과정을 거쳐야하기 때문에 작성한 코드를 테스트하기에 조금 긴 시간을 기다려야 한..
★ TodoList 할일을 적고 해당 사항들을 수행해 나가는 List Step1 ~ Step4에 대한 내용을 가지고 해당 기능을 개발 1. 기본 UI 개발 큰 틀 잡기 :: Todolist App 본문 내용 삽입 추가 할일 1 (완료) 삭제 할일2 삭제 할일3 삭제 2. 데이터와 메서드 정의 [ 데이터 ] todo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 data 입니다. todolist 추가한 todo 들의 목록, todo 한 건은 다음과 같습니다. id todo 한 건의 고유 키, 이 예제에서는 timestamp를 이용합니다. todo todo 내용 completed 완료 여부(true, false) [ 메서드 ] addTodo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 dat..
1. HTML의 스타일 적용 HTML 요소의 스타일 적용은 모두 문자열이며, 케밥 표기법을 주로 이용한다. font-size와 같은 형태 이와 같은 표기법을 사용하는 이유는 HTML에서는 대소문자를 구별하지 않기 때문이다. 케밥 표기법은 HTML, 스타일 특성 등에서 주로 사용한다. 버튼 1 버튼 2 이렇게 클래스를 적용하는 모든 HTML 요소에 동일한 스타일이 적용된다. 하지만, 적용되는 순서는 꼭 알아둬야 한다. 이렇게 살펴보면, style 특성에 직접 지정하는 인라인 스타일 방식이 마지막으로 적용된다. 요소의 기본 스타일 -> .test 스타일 -> .over 스타일 -> 인라인 스타일 2. 인라인 스타일 인라인 스타일은 v-bind:style로 작성한다. style로 지정할 정보는 데이터 속성에 ..
★ Vue 인스턴스 개요 const vm = Vue.createApp과 같이 메서드로 만든 객체들을 자주 사용한다. 이처럼 Vue.creatApp 메서드를 호출하여, 만들어진 객체를 애플리케이션 인스턴스라고 부른다. 여기서 사용된, name, data 옵션이 바로, 옵션 객체 이다. var vm = Vue.createApp({ name : "App", data() { return { name : "" }; } }).mount('#app') 1. data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용한다. 관리와 추적의 의미는 변경을 탐지하고 추적하여, 화면을 갱신하겠다는 의미. 컴포넌트 인스턴스에서 $로 시작하는 이름은 인스턴스 내부에서 특수한 용도로 사용된다는 의미. 따라서 $,_로 시..
