분류 전체보기 (432) 썸네일형 리스트형 윈터데브캠프 1기 합격 예!!!!!! 면접을 너무 못쳐서 기대 안했는데 합격 메일 받아서 너무 놀랐다!!! 저번주 너무 힘들었는데 치유 완료되어버렸다 시작 전에 알고리즘이랑 웹에 대해 열심히 공부해놔야지 안그래도 요즘 헤이해졌었는데 타이밍 좋게 의욕이 생겼다 [코딩애플] 성능개선 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라던지, 코인 거래소처럼 **실시간으로 데이터를 계속 가져와야하는 사이트에 쓰면 굿**이다. 대부분 사이트들은 실시간 데이터를 가져올 필요는 없으므로 알아서 판단하고 필요에 따라 라이브러리를 사용하자. 설치하기 다음 명.. GitHub 사용하기 git 설치법 (for 윈도우) git이란? 버전관리 서비스. 작업한 코드들 기록하고 보관 가능, 과거로 빠꾸 가능, 과거 작업 내용 열람 가능 등 안정적인 개발가능 git 설치하기 git windows 검색 버전에 맞는 파일 다운 받아서 설치하면 끝 체크 잘 하기 Choosing the default editor used by Git: Use Visual Studio Code as Git's default editor 선택 Adjusting the name of the initial branch in new repositories: Override the default branch name for new repositories > main (or master) 컴퓨터에 git 이름 등록하기 아래 두 명.. [코딩애플] 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... 이전 1 ··· 10 11 12 13 14 15 16 ··· 54 다음
