소요유(逍遙遊)

Type 'undefined' is not assignable to type 해당 오류 메시지는 예상되는 타입과 실제 할당되는 타입 간의 불일치를 나타냅니다. 오류가 발생 코드를 예시로 보여드리겠습니다 : export default function CreatorFooter(): ReactElement { const [isExecute] = useRecoilState(isExecute); return isExecute ? ( ... 생략 ... ) : undefined; } 'Element | undefined' 타입의 값을 'ReactElement' 타입을 기대하는 변수나 속성에 할당하려고 했기 때문에 에러가 발생한 것입니다. 이를 해결하기 위해서, 반환 타입 값을 'ReactElement | undef..

FrontEnd/Type Script 2023. 5. 16. 23:32

안녕하세요. 이번 글에서는 자바스크립트의 객체, 배열 비교에 대해서 얘기해보려고 합니다. 혹시 자바스크립트를 사용하면서, 배열이 가지고 있는 요소들이 동일한지 비교하기 위해 동일비교연산자(==)를 사용해 보신 적 있으신가요? 그렇다면 저처럼 당황을 하셨을거라 생각하는데요. 저는 배열 비교를 하면서 true 값을 기대했지만, false 값이 나와 식은 땀을 흘렸던 기억이 아직도 생생하네요 😂 그럼 글 시작하겠습니다 - 배열 비교 자바스크립트에서 동일한 요소를 담고 있는 배열끼리 비교해도 false 값이 나오는 이유는, 배열이 객체이기 때문입니다. 자바스크립트에서는 변수에 객체를 할당하면 값을 저장하는 것이 아니라 객체의 참조를 저장합니다. 즉, 두 배열은 물리적으로 다른 위치에 있는 메모리 공간을 차지하고..

FrontEnd/Java Script 2023. 5. 5. 02:08

자바스크립트는 동적 타입 언어로, 개발자가 변수의 타입을 명시적으로 선언하지 않아도 된다는 장점이 있습니다. 하지만 이러한 특성은 개발자가 코드를 작성할 때 실수를 유발할 수 있습니다. 이러한 문제를 해결하기 위해 정적 타입 검사 도구를 사용할 수 있습니다. 이번 글에서는 TypeScript와 Flow를 사용하여 자바스크립트 코드에서 정적 타입 검사를 수행하는 방법에 대해 알아보겠습니다. TypeScript TypeScript란? TypeScript는 Microsoft에서 개발한 자바스크립트의 상위 집합 언어입니다. TypeScript는 자바스크립트의 모든 기능을 포함하며, 정적 타입 검사, 클래스, 인터페이스 등의 기능을 추가로 제공합니다. TypeScript의 장점 정적 타입 검사를 통해 코드의 안정..

FrontEnd/Type Script 2023. 4. 14. 11:10

자바스크립트는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다. 이 언어는 동적인 웹 페이지를 만들기 위해 사용되며, 프론트엔드 개발에서는 React와 같은 라이브러리와 함께 사용됩니다. 이러한 개발 환경에서 함수(Function)는 매우 중요한 역할을 합니다. 이 글에서는 자바스크립트에서 함수의 개념과 사용 방법에 대해 알아보겠습니다. 함수(Function)란? 함수(Function)는 프로그래밍에서 가장 기본적인 개념 중 하나입니다. 함수는 입력값을 받아서 출력값을 반환하는 일련의 과정을 수행하는 코드 블록입니다. 이러한 함수는 코드의 재사용성을 높이고, 코드의 가독성을 높이며, 코드의 유지보수성을 높입니다. 함수의 사용 방법 자바스크립트에서 함수를 사용하는 방법은 매우 간단합니다. 함..

FrontEnd/Java Script 2023. 4. 8. 19:38

개발자로서 테스트는 개발 프로세스의 중요한 부분입니다. 코드가 예상대로 작동하는지 확인하고 잠재적인 문제를 예방하는 데 도움이 됩니다. React에서는 효과적인 테스트를 작성하는 데 도움이되는 여러 가지 테스트 라이브러리가 있습니다. 이 글에서는 Jest, React Testing Library, Enzyme 등 React를 위한 가장 인기있는 테스트 라이브러리를 살펴보겠습니다. 1. 테스트란? 테스트는 코드가 예상대로 작동하는지 확인하는 프로세스입니다. 주어진 입력에 대해 올바른 출력을 생성하는지 확인하기 위해 코드를 일련의 테스트를 실행하는 것을 포함합니다. 테스트는 수동 또는 자동으로 수행할 수 있으며, 개발 프로세스의 다양한 단계에서 수행할 수 있습니다. 테스트는 왜 해야할까? 테스트는 다음과 같..

FrontEnd/Libraries 2023. 4. 3. 19:24

0부터 N까지 순차적으로 증가하는 숫자를 가진 배열을 만드려면, 다음과 같이 코드를 작성하면 됩니다: const arr = new Array(n).fill(0).map((_, i) => i); 위 코드를 설명하면 이렇습니다. new Array(n)으로 크기가 n인 배열을 생성합니다. fill(0) 메소드를 사용하여 0으로 초기화합니다. map 메소드를 사용하여 0부터 n-1까지의 값을 할당한 배열을 생성합니다. 참고 : fill() 메소드는 배열의 모든 요소를 전달된 인자로 채웁니다. 또, map 메소드는 배열의 각 요소에 콜백 함수를 적용하여 새로운 배열을 반환합니다. 이를 이용해서 위 예시에서는 인덱스 i를 해당 요소에 할당하여 0부터 n-1까지의 값을 생성하였습니다.

FrontEnd/Java Script 2023. 3. 14. 01:43

💥 이벤트 버블링을 이용하여 마우스 이벤트 충돌 방지하기 리액트에서 마우스 이벤트 충돌을 방지하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 이벤트 버블링(Event Bubbling)을 이용하여 이벤트를 처리하는 것입니다. 이벤트 버블링을 이용하여, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되어 중복된 이벤트가 발생하지 않도록 처리할 수 있습니다. 참고 : 이벤트 버블링이란, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 말합니다. 🧑🏻‍💻 적용하기 예를 들어, 다음과 같은 코드에서는 Parent 컴포넌트와 Child 컴포넌트가 있으며, 각각 onClick 이벤트를 처리하는 함수가 정의되어 있습니다. function Parent() { function handleClick() { ..

FrontEnd/React 2023. 2. 18. 00:18

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)은 이벤트가 DOM 트리에서 어떻게 전파되는지에 대한 두 가지 방법입니다. 이벤트 캡처링은 이벤트가 상위 요소에서 하위 요소로 전파되는 방식이며, 이벤트 버블링은 이벤트가 하위 요소에서 상위 요소로 전파되는 방식입니다. 이 글에서는 이벤트 캡처링과 이벤트 버블링의 개념 그리고 장단점에 대해서 알아봅니다. 1. 이벤트 캡처링 📸 이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 하위 요소로 전파되는 방식입니다. 이벤트 캡처링의 장점 이벤트 캡처링을 이용하면 다음과 같은 장점이 있습니다. 👍🏻 이벤트 처리 순서 이벤트 캡처링은 상위 요소에서 하위 요소로 이벤트가 전파되는 방식으로 이벤트를 처리합니다. 이러한 방식으로 이벤..

FrontEnd/Java Script 2023. 2. 17. 23:58