TIL-210523

작성일 2021-05-23 In TIL Disqus:

What?

Vue-project
UI 애니메이션	상품 정렬 기능	reference data type	Lifecycle

UI 애니메이션
- CSS
- Vue 제공
상품 정렬 기능
- 낮은가격순, 높은가격순, 상품명순, 되돌리기 기능 구현
reference data type
- array, object 자료형 => 값 공유가 일어나지 않게 복사한다.
  - spread operator 사용
Lifecycle
- create
- mount
- 컴포넌트 생성
- update
- unmount
- Life Hook을 걸어서 중간에 원하는 코드를 실행 가능

작성일 2021-05-22 In TIL Disqus:

Vue project
custom event	$event	v-model	watcher()

custom event
- 자식이 부모 데이터를 바꿀때 사용
- props로 전한 데이터 수정 X
- $emit(‘name’, data)
- @name = “데이터변경JS”
$event
- event object를 뜻함
v-model
- 입력된 값을 data로 바로 저장
watcher
- 데이터 감시 함수
- watch : { 감시데이터(){} }

작성일 2021-05-19 In TIL Disqus:

Vue project
props

작성일 2021-05-16 In TIL Disqus:

Vue project
개발환경 셋팅	vue data binding	v-for	vue event handler
export default / import	export

작성일 2021-05-15 Edited on 2021-05-16 In TIL Disqus:

React Project - Shop
sync / async	lazy loading	React devtools	memo
PWA	localStorage

작성일 2021-05-13 Edited on 2021-05-15 In TIL Disqus:

작성일 2021-05-12 Edited on 2021-05-15 In TIL Disqus:

React Project - Shop
reducer/dispatch	<컴포넌트>	findIndex()	react-if문 패턴

reducer/dispatch
- redux store로 전달할 데이터를 작성할 수 있다.
- 미리보기 띄울 때 페이지를 이동하면 초기화 됨
  - 나중에 사이트 발행하면 제대로 동작
<컴포넌트> 는 onClick 속성을 달아도 동작하지 않을 수 있음
findIndex()
- 특정 값이 array 안에 있는지 찾고 싶을 때 사용
리액트에서 자주 사용하는 if문 패턴
- 컴포넌트 안에서 쓰는 if/else
- JSX안에서 쓰는 삼항연산자
- && 연산자로 if 역할 대신하기
- switch / case 조건문
- object 자료형을 응용한 enum

작성일 2021-05-11 In TIL Disqus:

React Project - Shop
reducer/dispatch

reducer/dispatch 데이터 수정
- state 데이터의 수정방법을 미리 정의한다.
- 데이터의 수정방법을 불러서 수정한다.
- HTML 안에서 dispatch()를 사용해 reducer()를 동작시킬 수 있다.
reducer/dispatch 하나 더 만들기
- state 초기값과 reducer 를 만들고, combineReducers()를 redux에서 import해오고 모든 reducer를 object 형식으로 담는다.
사용 이유
- 상태관리가 용이함
주의할 점
- state 데이터를 다른 컴포넌트에서 쓸 일이 없다면 간단하게 useState()로 해당 컴포넌트 안에 간단하게 만든다.

작성일 2021-05-10 In TIL Disqus:

React Project - Shop
Ajax	component 중첩시 state 전달	state 조작법	Context API
react-transition-group

리액트에서의 Ajax
- 서버에 새로고침없이 요청 할 수 있게 도와주는 코드
  - axios 라이브러리 설치
  - 더보기 버튼 구현 (클릭시 상품 데이터 가져온 후 메인페이지 하단에 추가)
component 중첩시 state 전달
- component1 => component2 => component3 (props 문법을 두 번 써주면 됨)
state 조작법
- 사본을 만든다.
- 사본을 변경한다.
- 사본을 변경 함수에 넣는다.
Context API
- props 연속 사용이 싫다면 사용
react-transition-group
- 컴포넌트 등장/업데이트시 transition 쉽게 줄 수 있음

작성일 2021-05-08 Edited on 2021-05-10 In TIL Disqus:

React Project - Shop
Lifecycle Hook	useEffect Hook	setTimeout()/clearTimeout()