JAM Development

🎯 Cache(캐시)란 무엇인가요?캐시는 자주 사용하는 데이터를 빠르게 접근할 수 있도록 저장해두는 임시 저장소예요.데이터를 미리 저장해두고 필요할 때 빠르게 꺼내 쓸 수 있게 해주는 역할을 합니다.예를 들어, 인터넷 브라우저도 자주 방문하는 웹사이트의 데이터를 캐시에 저장해서 다음에 방문할 때 빠르게 보여줘요. 🍕 비유로 이해하기: 피자 가게 이야기여러분이 피자 가게를 운영하고 있다고 생각해 보세요. 🍕캐시가 없는 경우손님이 피자를 주문할 때마다 반죽부터 굽고, 재료를 준비해야 해요.→ 시간이 오래 걸리겠죠?캐시가 있는 경우인기 메뉴인 마르게리타 피자를 **미리 만들어서 냉장고(캐시)**에 보관해둬요.손님이 마르게리타 피자를 주문하면 바로 꺼내서 제공할 수 있어요.→ 훨씬 빠르게 제공할 수 있겠죠..

🎯 act란 무엇인가요?**act**는 React에서 테스트를 작성할 때 상태 변화나 화면 업데이트가 모두 완료된 시점을 보장해주는 함수예요.쉽게 말하면 **"화면 업데이트가 다 끝난 후에 확인하게 해주는 도구"**라고 생각하면 돼요.React는 상태가 바뀔 때마다 화면이 업데이트되죠?그런데 테스트를 작성할 때 화면이 완전히 업데이트되기 전에 확인하면, 테스트가 실패할 수 있어요.이럴 때 **act**를 사용하면 화면 업데이트가 완료될 때까지 기다려줘서 안정적인 테스트를 작성할 수 있답니다. 🧩 왜 act가 필요할까요?상상해 보세요.여러분이 피자 가게를 운영하고 있어요. 🍕주문을 받으면 피자를 만들기 시작합니다.피자가 완전히 구워지기 전에 손님에게 보여준다면?손님은 "이게 뭐야? 덜 익었네!"라고 ..

타입스크립트가 등장 배경을 간략히 설명하면기존의 자바스크립트에서 발생하던 런타임 에러를 최소화하고 개발자의 실수를 최대한으로 줄여 웹애플리케이션의 품질을 보다 향상 시키는것을 목표로 한다.  기존의 자바스크립트의 문제점은 개발자가 코드를 작성하는 대로실행 후 런타임때에 에러를 발생시킨다.  -- 대표 예시 1Q. 숫자와 문자를 더하기function test(a, b){return a + b;}console.log(test(1,"A")); 결과 "1A"라는 문자열을 리턴한다.   -- 대표 예시2Q. 문자와 문자 나누기function test(a, b){return a / b;}console.log(test("A","B")); 결과  이러한 에러는 타 언어에서는 런타임(Runtime)시점이 아닌 컴파일(C..

React의 기능에는 props라는 부모와 자식 컴포넌트 간의 통신을 할때, 부모 컴포넌트가 자식 컴포넌트한테 원하는 데이터를 보내는것을 의미한다. 이러한 점은 커스텀 버튼 이나 다양한 함수로서 사용이 편리하다 .하지만  props는 오브젝트로 오직 한개의 props만 보낼 수 있고, props 오브젝트안의 파라미터 구성은 여러개 가능하다. props는 기본 방법이 있고, 단축어 방법이 있다.   function Btn(props) { console.log(props.text, "이 렌더링되었습니다."); return ( {props.text} ); }const MemorizedBtn = React.memo(Btn); fu..

ReactJS에는 memo라는 유용한 기능이 있다. 만약 커스텀 버튼을 여러개를 생성 하고 클릭을 할경우, 특정 버튼의 이름이 변경되는 함수가 있다. 특정 버튼의 이름이 변경되는 작업을 할 때, 브라우저에서는 매번 새로운 렌더링을 통해 다시 컴포넌트를 그리는데 이러한 작업은 경우에 따라 서비스를 매우 느리게할 수 있는 중요한 문제점으로 인식된다. 해당 문제점을 해결 하기 위해서 ReactJS에서는 변경이 필요하지않은 컴포넌트는 다시 그리지 않고 변경된 컴포넌트만 다시 그리는 작업을 해주는 함수가 React.memo 라는 함수이다. function Btn({ text, onChangeValue }) { console.log(text, "이 렌더링되었습니다."); return ( {text} ); } .....