프로젝트 진행중 버튼 컴포넌트를 따로 만들어 재사용성을 높이는 중 props을 통해 theme객체에 속성을 유동적으로 바꾸는 방법을 알아내었다. Button.tsx import React, { ReactNode } from "react"; import styled from "styled-components"; interface ButtonP...

점 표기법 가장 기본적이고 자주 사용되는 방법 중 하나인 점 표기법입니다. 이는 객체의 속성에 직접 접근하는 방법입니다. const person = { name: "taewok", age: 23, job: "Developer", }; console.log(person.name); // 'taewok' 표기법: 객체이름.ke...

alert() 사용자에게 간단한 메시지를 보여주는 기능을 수행하는 함수이며, 함수를 호출하면 브라우저는 경고 창을 띄워서 메시지를 표시하며, 사용자가 확인 버튼을 누르기 전까지는 다른 작업을 진행할 수 없습니다. 간단한 alert() 함수의 사용 예제는 다음과 같습니다. See the Pen Untitled by taewok (...

React-Native를 학습하기 위해 노마드 코더의 왕초보를 위한 React Native 101 무료 강의를 들으며 새롭게 알게 된 React-Native의 지식을 써 내려가며 다시 한번 학습해야겠다. React-Native 컴포넌트란? React와 비슷한 구문 및 컨셉을 사용하지만 React-Native는 HTML태그가 아닌 react-n...

지난 시간 React-Native 개발환경 구축 후 프로젝트 생성과 안드로이드 앱 테스트를 위해 가상 기기를 화면에 만들어야한다. 앱을 개발하며 테스트하는 방법은 여러가지가 있지만 고등학교 시절 Android Studio를 사용해봤기에 Android Studio 에뮬레이터를 채택했다. 테스트 방법 Android Studi...

React-Native 시작하게된 계기 기존 react를 다뤘다면 크게 어렵지 않을 것이라는 지인의 추천으로 react-native에 흥미를 가지게 되어 도전하게 되었다. 그래서 제일 먼저 react-native가 무엇이며 개발 환경을 세팅하려면 어떻게 해야 하는지 알아보았다. React-Native란? 리액트 네이티브(React Na...

fn.js // async 함수를 사용하여 3초 후에 "Mike"를 반환하는 함수 만들기 const fetchName = () => { return new Promise((resolve) => { setTimeout(() => { resolve("Mike"); }, 3000); }); }; exp...

Matcher(매처)란? 테스트 케이스에서 예상 결과와 실제 결과를 비교하고 검증하는 데 사용되는 함수들을 뜻하며 Matchers는 expect() 함수와 함께 사용되며, expect() 함수로 값에 대한 예상 결과와 실제 결과를 검사하는 역할을 합니다. Jest는 다양한 Matcher를 제공하여 다양한 유형의 검증을 수행할 수 있도록...

Jest에 대해 소개 Facebook에서 개발한 JavaScript 테스팅 프레임워크로 Jest는 JavaScript 애플리케이션(React, Vue, Angular)과 라이브러리를 테스트하고, 테스트 실행 및 결과 보고를 단순하고 간편하게 만들어주는 강력한 도구입니다. 장점 간단한 설정: Jest는 초기 설정이 간단하...

문제 스크롤 애니메이션이 적용되어 있는 사이트에 반응형을 적용시키며 화면 넓이가 1080px 이하 일 떄는 스크롤 애니메이션 함수가 필요가 없어졌기에 애니메이션 함수가 렌더링 안되게 해야했다. 해결 💡 수정 전 Code 이 코드가 화면에 넓이가 1080px 이하일때만 적용되게 만들면 된다. useEffect(() => { ...