그린그린티라떼

🌟 Hooks는(함수들은) 값의 재사용이 아닌 로직의 재사용이 목적이다! 컴포넌트마다 고유한 값을 가지고 있음. 전역변수를 사용해서 값을 공유할 수 있지만 코드가 지저분해짐. 값을 어떻게 효율적으로 공유할 수 있을까? Custom hooks의 문제점? 1. 캐싱이 되지 않는다. 전역적인 상태관리가 어려움 컴포넌트마다의 상태가 있음 같은 데이터를 비효율적인 방법으로 여러 번 가져오게 될 수 있다. 2.fetch로 데이터를 받아 올 때 error가 발생하면 retry를 해주지 않음 네트워크 요청 실패 시 재 시동 기능을 제공하지 않음 ✨ 비동기적으로 데이터를 관리해야되는 경우? React Query를 이용하면 된다!(클릭하면 공식 문서로 이동) React Query / TanStack Query란? 공식 사..

유튜브 API를 사용해서 유튜브 클론코딩을 해보려고 한다. 아래의 페이지에 들어가보면 영상 리스트를 가지고 올 수 있는 data api를 제공한다. https://developers.google.com/youtube/v3/docs/search/list Search: list | YouTube Data API | Google for Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English Search: list 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. API 요청에 지정된 쿼리 매개변 developers.google.com 브라우저 창을 가로로 적당히 크게 열면 Try this method 배너를 확..

Routing? url을 입력했을 때 url에 해당하는 정보를 가져다주는 것을 라우팅이라고 한다. Client side routing - 서버에 요청하지 않아도 새로운 UI를 보여줄 수 있다. UI에 필요한 데이터를 동적으로 업데이트 할 수 있다. 빠른 사용자 경험을 제공해준다. 브라우저가 서버에게 새로운 페이지를 요청하고 응답받는 과정이 필요없다. 부분적인 UI를 업데이트해주면 된다. Nested Routes - 자식 url을 만들 수 있다. https://reactrouter.com/en/main/start/overview Feature Overview v6.20.1 | React Router Feature Overview Client Side Routing React Router enables "c..

js map함수를 돌릴 때 li 태그 등을 만들 때 key값을 설정해주어야 되는 이슈가 있다. 이럴 때 유용하게 사용할 수 있는 npm 라이브러리 uuid이다. https://www.npmjs.com/package/uuid - RFC4122 UUIDs를 생성하기 위한 완전한 지원을 제공 - 크로스 플랫폼 - CommonJS, ECMAScript 모듈 및 CDN 빌드를 지원합니다. - NodeJS 12+ (LTS 릴리스)를 지원합니다. Chrome, Safari, Firefox, Edge 브라우저를 지원합니다. - Webpack 및 rollup.js 모듈 번들러를 지원합니다. - React Native / Expo를 지원합니다. - 보안 - 암호학적으로 강력한 무작위 값으로 보호됩니다. - 작은 크기 - ..

유데미 코딩 페스티벌 오늘까지 자유이용권 신청가능하니까 참고해주세요!! 퇴사하고 12월은 코딩페스티벌과 함께 불태웁니다🔥🔥 이제 아무도 날 말릴 수 업쒀...... 에어팟 맥스 제꺼에요 알죠? 유데미 사랑해요

[Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft. 오늘 개발하면서 이런 에러를 마주쳤다. immer producer가 새로운 값을 리턴한다는 내용인데 해결해보자. 간단하다! 1. 에러가 난 코드 2. 수정된 코드 차이가 보이시나요??JavaScript 화살표 함수를 사용할 때 {}에는 로직이 들어가고 {}로 감싸지 않으면 값이 리턴된다. ⭐️ 꼭 유의해서 개발하자!! ⭐️

React에서 불변성을 지키지 않으면 컴포넌트에서 예상하지 못한 동작을 일으킬 수 있다. 또한 React 성능 최적화에도 영향을 미칠 수 있다. import React, { useState } from 'react'; function MutableStateExample() { // 잘못된 방법: 불변성을 지키지 않음 const [items, setItems] = useState([1, 2, 3]); const addItem = () => { // 배열에 새로운 아이템을 추가하는데 push를 사용하면 안됨 items.push(4); setItems(items); // 상태를 직접 업데이트하면서 불변성을 지키지 않음 }; return ( {items.map(item => ( {item} ))} Add Ite..

React에서 Component를 나누는 기준 재사용성 DRY - Don't Repeat Yourself 단일책임 SR - Single Responsibility useMemo, useCallback등을 통한 최적화를 하는 이유? - 함수형 컴포넌트는 단순히 그냥 함수이다. jsx를 반환하는 함수이다. - 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출하여 실행되는 것을 의미한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다. - 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. 하위 컴포넌트에서 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않더라도 리..

원시값 (primitives) - string(문자) - number(숫자) - bigint - boolean - symbol(유일한 식별자를 만들고 싶을 때 사용) - null - undefined 객체(object) - 프로퍼티에 다양한 종류의 값 저장 가능 - {name: 'lia', age: 29} - 함수도 객체의 일부이다. let str = "Hello"; str.test = 5; // (*) alert(str.test); 엄격 모드인지 아닌지에 따라 결과가 나뉩니다. undefined (비 엄격 모드) An error (엄격 모드) (*)로 표시한 줄에서 무슨 일이 일어나는지 알아보면서, 왜 위와 같은 결과가 나타나는지 이해해 봅시다. str의 프로퍼티에 접근하려 하면 "래퍼 객체"가 만들어..

console.log('Start'); setTimeout(function() { console.log('Timeout callback'); }, 0); console.log('End');​ console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); Promise.resolve().then(() => setTimeout(() => console.log(4))); Promise.resolve().then(() => console.log(5)); setTimeout(() => console.log(6)); console.log(7); 이 코드의 출력을 맞춰보세요! (정답은 맨 아래) 지난 주 면접..