컴포넌트6 사용자 입력 핸들링(v-on, v-model), 컴포넌트 v-on:click 과 @click {{ msg }} 메세지 뒤집기 메세지 뒤집기 버튼에 v-on:click="reverseMessage" 혹은 @click="reverseMessage"를 입력하면 click 시에 methods에서 reverseMessage의 함수가 실행하여 msg를 뒤집어준다. 리액트에서 함수형 컴포넌트로 배우고 this를 클래스형 컴포넌트 잠시 배울 때 써본 게 다라서 this의 개념이 부족하다. this와 바인딩 더 알아보기!! v-movel Vue는 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공한다고 한다. 위 코드블록에서 input태그 안에 v-model="msg"가 있는데 script의 data()에 msg를 가져오는 듯 하다. 컴포넌트를 .. 2022. 5. 5. 클래스컴포넌트, 생명주기 (복습 16일차) 클래스 컴포넌트 class에는 변수와 함수를 넣을 수 있다. new는 객체, 인스턴스라고 불리며 class는 만들기 위한 설명서를 의미한다. date는 객체이며, 우리가 만들지 않았지만 자바스크립트에 기본적으로 만들어져있는 내장객체이다. 이런 걸 가지고 할 수 있는 프로그래밍을 OOP(Object-oriented Programing), 객체지향 프로그래밍으로 불린다. 우리가 Date.getFullYear(), getMonth(), getDate()를 쓸 수 있는 것처럼 말이다. import { Component } from "react"; interface IState { count: number; } export default class ClassCounterPage extends Component {.. 2022. 4. 24. 컴포넌트 재사용성 ,TIL (복습 8일차) 실습 중 new Date 내장함수 export const getMyDate = (myDate) => { const aaa = new Date(myDate) const yyyy = aaa.getFullYear() const mm = aaa.getMonth() + 1 const dd = aaa.getDate() return `${yyyy}-${mm}-${dd}` } new Date라는 자바스크립트 내장함수를 사용하면 시간 형식의 데이터를 받을 수 있는데 getFullYear, getMonth, getDate 를 사용하면 연, 월, 일을 가져올 수 있다. 그걸 템플릿 리터럴을 이용해서 내가 원하는 형식으로 만들 수 있다. * 더 공부하기 Date MDN 보기 Date() constructor - JavaScr.. 2022. 3. 25. React의 컴포넌트, State사용법 TIL(복습 2일차) 첫 git clone package.json 안에 여러가지 파일들이 있는데 설치파일은 node_modules에 설치할 수 있다. package.json의 파일은 언제든지 재설치가능하기에 node.modules는 깃허브에 올리지 않는다. 그 설정은 .gitignore 에서 파일명을 작성하면 된다. git clone "레파지토리 주소"로 파일들을 받고 git clone한 파일들은 yarn install로 node_modules를 설치하면 된다. 실무 CSS 리뷰 모든 태그에 Emotion을 만들 필요는 없다. 간단한 태그들은 그대로 넣어둬도 된다. padding을 기준으로 만들었다. 전체 height는 고정값을 설정하지 않는다. 내부의 태그에 따라서 자동으로 높이가 조절된다. 자기 자신만 있는 태그는 hei.. 2022. 3. 19. 이전 1 2 다음
