06.05 디지털 트윈 부트캠프 36일차

요번주 강사님은 유튜버셨다..!

https://www.youtube.com/@uknowcoding

유노코딩

---

프론트엔드 - React

useEffect

useEffect 함수는 Hooks 중 하나로, 리액트 컴포넌트의 생명주기에 따라 동작을 제어 할 수 있는 기능을 제공한다.

콜백 함수를 입력 받아 특정 생명 주기마다 이를 호출한다.

또한 두 번째 인수로 의존성 배열을 전달 받아 콜백함수의 호출 타이밍을 결정한다.

// 최초 1회 렌더링 시 호출
useEffect(() => {}, [])

 

의존성 배열

의존성 배열에 상태명을 입력하면 특정 상태가 변경될 때마다 콜백함수가 동작하도록 설정할 수 있다.

언제 콜백함수를 실행할지 정해준다.

// 최초 1회 렌더링 시 호출
useEffect(() => {
	console.log("useEffect");
}, [])

 

의존성 배열이 채워져 있으면 의존하는 상태에 대해 늘 호출

// text 바뀔 때마다 호출
useEffect(() => {
	console.log("useEffect");
}, [text]);

 

만약 useState로 지정한 변수 number(count 세는 용도)가 변경될 때도 콜백함수가 실행되게 하고싶다면?

// text 바뀔 때마다 호출
useEffect(() => {
	console.log("useEffect");
}, [text], [number]);

 

의존성 배열이 아예 없으면 리렌더링 될 때마다 무조건 호출

 

styled-components

CSS-in-JS 방식을 지원하는 패키지

리액트에 기본적으로 설치되어 있는 패키지가 아니므로 명령행에 다음 명령어를 입력해 설치한 후 사용 가능

npm install styled-components@latest

styled 함수를 이용해 기본 태그를 선택하고 거기에 CSS 코드를 CSS 문법에 맞게 작성해 전달하는 방식으로 컴포넌트 완성

CSS를 전달하는 방식을 가리켜 태그드 템플릿 리터럴이라 하며 이는 함수에 인수를 전달하는 또 다른 방식이다.

tagged template literal = 템플릿 리터럴을 함수에 붙혀서 인수 전달에 쓴다.

const Box = styled.div``

 

리액트는 SPA 기반의 라이브러리

SPA: Single Page Application

html 문서 하나에 여러 컴포넌트를 보여줬다 말았다하며 운용하는 방식

 

background-size 속성값cover: 꽉 채우되, 잘릴 수 있다.contain: 안 잘리되, 꽉 채우지 못할 수 있다.

 

keyframes

CSS 코드로 애니메이션을 적용할 때와 마찬가지로 styled-components를 이용한 스타일 작업 시에도 키 프레임을 만들 수 있다.

import styled, { keyframes } from "styled-components";

const frameSample = keyframes``;

to & from 키워드: 두 개의 프레임을 나누는 방법

백분율: 백분율을 쪼개서 프레임 나누는 방법

 

position

absolute의 부모가 기준이 되려면 position 값을 가져야 한다.

 

array.map()

자바스크립트 배열의 map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

array.filter()

자바스크립트 배열의 filter() 메소드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

 

localStorage

현재 도메인의 로컬 저장소에 접근할 수 있게 해 준다.로컬 저장소는 웹 브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로 데이터를 영구적으로 보관할 수 있다.===> 브라우저를 껐다가 키거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아있을 수 있다.데이터 보관 시 데이터의 이름과 실제 값을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용된다.메소드를 이용해 접근해야 한다.setItem('key', 'value') : key와 value를 전달받아 저장getItem('key') : 전달받은 key에 해당하는 value를 반환removeItem('key') : 전달받은 키에 해당하는 데이터 삭제clear() : 모든 데이터 삭제  

 

---

투두리스트 앱을 만들어보자!

1. 할 일 생성하기

2. 할 일 제거하기

3. 할 일 수정하기

4. 할 일 조회하기

 

https://github.com/saramnim/UVC-TodoList

GitHub - saramnim/UVC-TodoList

 

이걸 만들고 github에 업로드 하려는데

fatal: refusing to merge unrelated histories

요런 에러가 떴다.

사실 심심치 않게 뜨는 에러라 매번 검색하기 귀찮으니 내꺼에 정리해두자.

git pull origin 브런치명 --allow-unrelated-histories

뒤에 저것들만 써주면 된다~!~!