프레임워크

기본적으로 Vue 사이트에 나온 방법 2가지와 plugin을 이용한 방법을 시도해본다. 가장 간단하며 따로 모듈을 설치할 필요가없다. <script src="https://unpkg.com/vue@next"></script> 해당 부분을 index.

vue의 이벤트에 따라 해당하는 함수를 동작시킬수 있다. 해당 함수는 methods : 를 통해 등록되어 있다. 변수값이 true냐 false냐에 따라 class에 key값이 적용되면서 v-bind를 통해 class = key 형태로 만들어진다. 만약 v-bind를 사

componentconfigmixinmountprovide...새 Vue 인스턴스를 만드는 것부터 시작new VueVue.createApp...mount()인스턴스를 viewModel(vm)이라고도 한다. 인스턴스 메소드

CreateMountUpdateDestorydata와 이벤트 , 감시자등이 설정되기 전에 호출되는 라이프 사이클 훅this 접근 불가능 / Dom 접근 불가능data, computed, methods, watch 등과 같은 옵션 설정이 완료된 시점이기 때문에, data

반응형 데이터를 정의 할 때는 미리 data 옵션에 선언하지않으면 나중에 추가되는 데이터는 반응성을 가지지 않는다. 기본적으로 만든 data가 가진 옵션은 vm.key와 vm.$data.key에 존재한다. 원래는 vm.$data.key에 값이 선언이 되지만 this를

하나의 계산된 데이터로 취급하여 여러번 사용할 때 캐싱을 통해 따로 또 함수를 동작시키지 않아도 되어 반복적 출력 연산 낭비 X객체내의 대상에서만 의존성에 영향을 받아 다른 객체내의 대상값이 바뀌어도 영향받아 동작을 하지않는다. => 최적화가 잘 되어있다.fetch를

이름이 있는 재사용 가능한 인스턴스컴포넌트는 얼마든지 반복해서 재사용할수 있습니다전역등록 : Vue.component를 사용지역등록 : components옵션을 통해 사용최상위 컴포넌트 App은 없는 상태로 전역으로 'button-counter 컴포넌트를 구성하였고m

index.htmlmain.jsApp.vueBtn.vueHello.vue추가로 webpack.config.js에서~를 지정해주었다. 전역으로 등록된 Btn을 사용하였고지역으로 등록된 Hello를 import를 통해 가져와서 components에 넣었다. App.vue를

App.vueHello.vueHello.vue 최상위 태그 1개 Hello vue 최상위 태그 1개 + inheritAttrs : 'false'Hello.vue 최상위 태그 2개Hello.vue 최상위 태그 2개 + $attr 적용Hello.vue 최상위 태그 2개

index.htmlmain.jsApp.vueBtn.vueHello.vue추가로 webpack.config.js에서~를 지정해주었다. msg의 Hello Vue!와 name의 123을 Hello태그와 함께 처리<Hello :message="msg" :na

props : 부모에서 자식으로 데이터가 내려간다$emit : 자식에서 부모로 이벤트를 발생App.vueHello.vueprops를 통해 msg를 전송하고 $emits를 통해 please라는 이벤트를 만들고 이를 App.vue에서 @please를 통해 등록시켜 rev

props와 $emit을 사용provide로 제공 inject로 주입반응성이 주입되어지지않아 vue.js의 함수에서 가져온 computed 필요

페이지에 CDN package로 import하기npm 사용하여 import하기공식 CLI를 사용간편하면서 쉽게 다루기 좋다 index.htmlmain.js

싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합npm i vue-router@next 를 통한 설치router-link : 링크 이동 역할router-view : 출력 역할$route : 현재 페이지 정보$router : 현재 페이지 조작rou

Reactive programming (반응형 프로그래밍)MVC의 V를 React가 관리가상돔 : 필요한 부분만 렌더링npx create-react-app 폴더이름을 통해 입력한다. 에러가 난다면 이를 참고도메인역할크기즉, 매번 다르다src/Logo/index.jsAp

React style적용 >1. 스타일 시트 inline -> 동적 사용 CSS in JS 1. 스타일 시트 Box.css index.js App.js >box style을 import하여 사용 2. inline Box.css index.js App.j

성능 최적화를 위하여 연산된 값리렌더링이 되는 상황에서 이미 시간이 많이 걸려 진행된 대상이 값이 변화되는 영향이 없는 것이어도 리렌더링으로 다시 영향을 받아 같은 값으로 다시 변화되며 많은 시간을 걸려서 다시 실행시키기 때문 (똑같은 힘든 짓 반복)함수컴포넌트에서

변수와 다르게 state는 값이 변경될때 자동으로 관련된 HTML을 재렌더링되게 만들고 싶으면 state에 저장해서 데이터 바인딩을 처리해야한다. App.js변수를 사용한 text1과 state를 사용한 text2를 비교하면 버튼을 눌렀을 때 text1은 브라우저에서

UI 개발을 위한 도구npx create-react-app taskboxcd taskboxnpx -p @storybook/cli sb initnpx로 react 관련 환경을 만든 후 storybook을 설치A.jsstories/A.stories.js2번은 만들어진 st

JavaScript eXtension로 자바스크립트의 확장버전React에서 HTML을 표현할 때, JSX를 사용따옴표를 이용해 문자열 리터럴을 정의const element = <div tabIndex="0"></div>;중괄호를 사용하여 어트리뷰트에 Jav

A design system for enterprise-level products. Create an efficient and enjoyable work experience.간단히 UI를 편하게 도와주는 툴 (Bootstrap 비슷)npx create-react-app

npm을 이용하여 다운로드 가능한 HTTP request 모듈 혹은 라이브러리JSON 사이트를 이용하여 fetch를 사용했다. 1번째 todos를 받아와서 보여주고 있다. checkGet 함수가 실행되면 결과가 나올 수 있게 하였다. 이때 주의할 점이 받은 respo

함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기

카운트를 하는 부분 3개와 이를 토탈 계산하는 결과 1부분을 만들 것이다. 필요한 파일index.htmlApp.jsindex.js

React.createContext(defaultValue)Context.ProviderContext.Consumer => useContext로 대체가능context 객체를 만들때 사용하는 함수Context 오브젝트에 포함된 React 컴포넌트인 Provider는

새 컴포넌트를 추가하지 않고도 상태 관련 로직을 컴포넌트 간에 재사용할 수 있게 해준다상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우각각마다 useState를 부여하고 각각의 const가 username / password / email에 부여된다. 하나의 use

route를 사용 할 수 있게 하는 것 yarn add react-router-dom 명령어 실행index.js 파일에 App컴포넌트를 Browser 컴포넌트로 감싸기App.js 파일에 App import한 Router, Switch와 같은 컴포넌트 사용하기index

다양한 커스터 마이징을 설정할 수 있다. AntButton/index.js받아온 값들에 따라 text는 버튼의 text에 적용되고 그외에 color나 css관련은 shapeStyle에 넣어 width와 height backgroundColor가 적용되게 처리했다. (이

App.js -> 부모Child.js -> 자식GrandChild.js -> 손자JSON.placeholder를 이용해App.js에서 적용한 axios의 반환된 결과값을 하위컴포넌트 props로 이동시켜 자손 컴포넌트에서 해당 값을 map을 순회하며 결과를 보여준다.

상태를 직접 변경할 수 없기 때문에 단순히 항목을 배열로 푸시 할 수 없습니다=> React 상태를 직접 수정하려고했기 때문state 내부의 값을 직접적으로 수정하면 안되는 것array1와 array2가 동일한 주소를 가리키고 있기 때문에 내부의 값이 변경되었을지 몰라

Create React App Configuration Override로 CRA를 쉽게 설정하기 위한 것이다. ex) 상대경로 지옥 해결craco.config.js에 alias에 경로를 설정한다. package.json은 기존과 다르게 "start" : craco st

해당 increase 메소드는 this가 undefined로 this.setState를 하려 할때 오류가 발생한다. 해당 부분을 보면 컴포넌트 메소드가 다른 변수에 할당되어 따로 호출되는 것을 통해 문제가 발생한다. 즉, 정리하자면 우리가 만든 메서드들을 각 태그들

컴포넌트가 렌더링 될때마다 특정 작업을 실행 시켜주는 역할 App.jsGrandParent.jsxParent.jsxChild.jsx각각은 위에서 아래로 연관되어있다. 즉, 간단하게 App 컴포넌트는 자식으로 GrandParent 컴포넌트를 포함하고GrandParent

고차 컴포넌트(Higher Order Component)이다. 불필요한 리렌더링을 해결하기 위해 사용예시를 좀 더 수정하였다. GrandParent 컴포넌트에 버튼이벤트를 추가하여 setGrandParent가 실행되는 것이다. 이때 자식 컴포넌트 였던 Parent 컴포

useState를 대체하는 상태관리 hook으로 써 다수의 state를 다루는데 유리하다. 첫번째 매개변수 : reducer 함수두번째 매개변수 : initialState첫번째 매개변수 : state두번째 매개변수 : action컴포넌트의 상태 업데이트 로직을

상태 관리 도구상위컴포넌트에서 createContext로 변수값을 생성 및 export상위컴포넌트에서 return에 <변수.Provider value={...}> ... </변수.Provider>로 묶어준다. 하위컴포넌트에서 해당 변수를 import하위컴포넌

v5와 v6의 사용법이 조금씩 다르다

PropTypes : React v15.5 미만에서 사용prop-types : React v15.5 이후에 사용.eslintrc.js에서 "eslint:recommended"로 인해 props를 받을때 props 체크 에러가 발생 PropTypes

해당 코드는 출처에 담긴 코드를 사용하였고 그 코드를 잘 다루기 위해서 사용하였다. 해당컴포넌트를 응용해서 수정해본다. wait메소드 (아직 API가 제대로 되어있지않아 setTimeout을 async await에서 사용하기 위해)useAsync Hookif문 형식 (

야놀자와 비슷하게 시도를 치면 구체적인 지역이 나와 그것을 클릭하면 해당 시도별 지역의 내용을 얻을 수 있게 만드는 것기존에 MUI를 이용해서 해당 모달과 버튼등을 쉽게 사용하려고 시도 했지만MUI가 갖고있는 특성이 서로 충돌이 나면서 내가 의도한 결과의 레이아웃이 안

링크

to : urlstate : props 전달부모태그에서 props로 state를 지정한다. 자식태그에서 useLocation()을 이용하여 받아 사용한다. 부모 자식이를 통해 props를 받아 사용할 수 있다.

이렇게하면 e.targer으로 받아온 id를 setText의 key값으로 id가 인식하지못한다.이를 \[id]로 묶어줘야 id로 인식할 수 있다.