Front-End: Web (163) 썸네일형 리스트형 [CSS] Flexbox Froggy - flex 속성을 배워보자 display: flex; justify-content flex-start : 요소들을 컨테이너의 왼쪽으로 정렬 (start -> flex-start로 변경됨) flex-end : 요소들을 컨테이너의 오른쪽으로 정렬 (end -> flex-end로 변경됨) center : 요소들을 컨테이너의 가운데로 정렬 space-between : 요소들 사이 동일 간격으로 두기 space-around : 요소들 주위에 동일한 간격으로 두기 align-items flex-start : 요소들을 컨테이너의 꼭대기로 정렬 flex-end : 요소들을 컨테이너의 바닥으로 정렬 center : 요소들을 컨테이너의 세로선 상 가운데로 정렬 baseline : 요소들을 컨테이너 시작 위치에 정렬 stretch : 요소들을 컨테이.. [코딩애플] 성능개선 3: useTransition, useDeferredValue automatic batching 기능 state 변경 함수가 쭉 작성되어 있다 하자. state1변경() state2변경() state3변경() state가 변경될 때마다 재렌더링이 일어난다고 했으니 재렌더링이 3번 일어날까? 아니다. 맨 마지막인 state3변경()에서만 재렌더링이 1회 일어난다. 이걸 batching이라 한다. 뭉쳐서 실행되기 때문이다. 예외도 있다. 리액트 17버전인 경우, ajax, setTimeout과 같은 비동기 함수 내부에서 위 코드를 작성했다고 하자. 그럼 batching이 일어나지 않고 각각 재렌더링이 일어나서 총 3번의 재렌더링이 일어난다. 하지만 리액트 18버전부터는 state가 변경되는 코드가 어디에 있던지 batching이 잘 일어나게 되었다. 그래서 비동기 함수.. [코딩애플] 성능개선 2: 재렌더링 막는 memo, useMemo memo 자식 컴포넌트의 재렌더링 막으려면 memo 버튼을 누르면 count가 +1씩 되는 버튼을 생성하자. 🕹️Cart.js import { useState } from 'react'; function Child(){ return 자식임 } function Cart(){ const [count, setCount] = useState(0); return( setCount(count+1)}>+ ) } 이제 버튼을 누를 때마다 Cart 컴포넌트가 재렌더링이 된다. Cart 컴포넌트가 재렌더링되므로 와 같은 자식 컴포넌트들도 전부 재렌더링이 된다. 재런데링되는지 콘솔로 확인해보자. function Child(){ console.log('재렌더링됨') return 자식임 } 버튼을 누를 때마다 콘솔이 찍힌다. .. [코딩애플] 성능개선 1: 개발자 도구 & lazy import 개발자 도구 react developer tools 코드를 작성했는데 props 보냈는데 왜 출력 안됨? 왜 이미지 안 나옴? 이런 에러가 발생할 때마다 코드를 확인해도 좋지만 개발자 도구를 이용하자. Component: 컴포넌트 구조 파악 가능 개발자 도구에는 Element 탭이 있다. **Element** : html/css 검사 가능 근데 이걸로 불만족스럽다. 왜냐하면 컴포넌트로 만든 것들도 일반 html로 변환해서 보여주기 때문이다. 그래서 컴포넌트 구조를 미리 보고 싶다! 하면 크롬 웹 스토어에서 '**react developer tools**'를 설치하자. 설치하고 개발자 도구의 **Components** 탭에 들어가면 우리 사이트를 컴포넌트를 구조화해서 보여준다.  다음과 같은 것들을 고려하여 코드를 짤 수도 있겠지만 만약 이게 귀찮다! 하면 react-query 라이브러리를 이용하자. react-query를 사용하면 위의 것들을 쉽게 구현할 수 있다. 어디에 사용할까? 하지만 항상 유용한 건 아니다. 실시간 SNS라던지, 코인 거래소처럼 **실시간으로 데이터를 계속 가져와야하는 사이트에 쓰면 굿**이다. 대부분 사이트들은 실시간 데이터를 가져올 필요는 없으므로 알아서 판단하고 필요에 따라 라이브러리를 사용하자. 설치하기 다음 명.. [코딩애플] Redux 사용해서 쉽게 state 관리하기! Redux 사용 이유 컴포넌트 간 state 공유가 편해진다 -> props 전달할 필요가 없다. Q. 장바구니 state가 App, Detail, Cart 컴포넌트에 필요하다면 어디에 만들어야할까? A. 최상단 컴포넌트에. 그런데 props를 일일히 전달해주기 귀찮다. Redux를 사용하면 컴포넌트들이 props 없이 state를 공유할 수 있다. redux를 설치하고 store.js 파일을 생성해서 그 안에 모든 state를 보관할 수 있고, 모든 state를 어느 컴포넌트에서든 가져다 쓸 수 있다. 사이즈가 큰 프로젝트는 Redux가 필수이므로, 리액트 구인 시 대부분 Redux를 요구하니 알아두자! Redux Toolkit 설치 설치 전 주의사항 package.json에서 'react'와 'rea.. [코딩애플] ts part 2-7. Generic 함수 타입을 파라미터로 입력하는 Generic 함수에 타입도 파라미터로 입력 가능 array 입력하면 첫 자료 return 해주는 함수 function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]); console.log(a); // 4 근데 a 타입은 unknown이다. 왜냐하면 우리가 그렇게 지정해놓았으니까. 함수에 x라는 변수를 만들 때 타입을 unknown이 가득한 array로 지정했으니까. 그 자료의 첫 번째 자료를 뽑아도 unknown이다. 타입스크립트에게 자동으로 타입변환을 기대하면 안된다. 숫자나오면 숫자로 타입변환 그런거 안해준다. unknown이면 평생 unknown이다. a가 unknown 타입이라서 가끔 이런 문제가 발생한다. console... [코딩애플] ts part 2-6. import export & namespace 타입도 import export 해서 씁니다 그리고 namespace import & export import & export 란? a.ts 와 index.ts 파일을 생성하고 a.ts 파일을 index.ts 파일에 갖다 쓰고 싶다면? a.ts 파일 내에서 export 해주고, index.ts에서 import한다. 🕹️a.ts export var 이름 = 'kim'; 🕹️index.ts import {이름} from './a'; 여러개 export 한다면? 🕹️a.ts export var 이름 = 'kim'; export var 나이 = 20; 🕹️index.ts import {이름, 나이} from './a'; 타입도 import export 가능 🕹️a.ts export type Name = stri.. 이전 1 2 3 4 5 6 7 8 ··· 21 다음
