반응형 TypeScript7 [React-Native] styled-components, Unknown property: 'elevation' ts-styled-plugin(9999) 경고 제거 ⚡️Warning, Unknown property ‘…’ ts-styled-plugin(9999) 리액트 네이티브의 styled-components 라이브러리를 이용해 열심히 컴포넌트를 만들고 있는데 알 수 없는 요소라고 경고가 계속 발생했습니다. 작동은 잘 되지만 거슬리는건 못참기 때문에 좀 찾아보니 TypeScript에서 react-native만 가지고 있는 CSS 속성을 인식하지 못해 발생하는 문제였습니다. 📌 삽질 리액트 네이티브 관련 글들은 죄다 오래됐는데 그마저도 버전이 조금만 다르면 작동을 아예 안한다는 것에 질려버렸습니다. 이 문제 또한 돌고 돌아 해결했지만 23년에 RN 개발 시작하시는 분들을 위해 삽질한 것도 글에 포함해 봅니다. 🔎 지난 버전 라이브러리 $ npm install -D .. 2023. 6. 20. [React+TS] styled-components, ThemeProvider 타입 정의하기 ⚡️ styled-components ThemeProvider 대표적인 CSS in JS 라이브러리인 styled-components는 기본적으로 스타일을 전역적으로 공유하는 ThemeProvider를 제공합니다. 사용방법은 다음과 같이 간단합니다. 📌 ThemeProvider import { ThemeProvider } from "styled-components"; const theme = { color1: "#000", color2: "#001", color3: "#002" }; export default function App() { return ( ... ); } 다음과 같이 최상위 컴포넌트에 ThemeProvider를 감싸주고 theme props를 넣어줍니다. 📌 theme 사용 방법 impo.. 2023. 5. 28. [React + Craco + TS] Alias 절대경로 + 폴더 index 절대경로 설정 방법 ⚡ Craco + Typescript, Alias로 절대경로 설정하기 이 글을 본다는 것은 상대경로와 절대경로의 차이에 대해 이미 알고 있고, 상대 경로 지옥에 빠져 본 것이라 생각해 그 둘의 차이점을 설명하는 것은 패스하겠습니다. 기존에 절대경로를 설정하는 방법 중 craco+ craco-alias 은 지원이 종료되어 사용할 수 없고 react-app-rewired 는 익숙치 않아 craco만을 이용해 설정하는 방법을 소개합니다. //상대경로 import { ComponentA } from '../../../components/ComponentA' //절대경로 import { ComponentA } from '@components/ComponentA' import { ComponentB } from '.. 2023. 2. 14. [React + Recoil] 재사용 전역 모달 만들기 ⚡️ Recoil로 전역 모달 만들기리액트로 모달 만들기 귀찮으신 분들은 다음 글 참고하셔서 라이브러리로 순식간에 모달 구현 해보세요![React] 세상 쉬운 리액트 모달 라이브러리첫 프로젝트에서는 아래 코드와 같이 각각의 모달마다 상태와 추가 코드를 작성했습니다.const [ modal1, setModal1 ] = useState({onOff: false})const [ modal2, setModal2 ] = useState({onOff: false})return ( { modal1.onOff && } { modal2.onOff && } )이와 같이 코드를 작성하다보니 초기에는 괜찮았지만모달의 개수가 많아질수록 관리해야 할 상태들과 추가 코드들이 점차 불어나 관리가 힘들 지경이 되었.. 2023. 2. 6. [React] 조건부 렌더링 (Conditional Rendering) ⚡ 조건부 렌더링 (Conditional Rendering)조건부 렌더링이란 리액트에서 조건에 따라 엘리먼트를 렌더링하는 것을 의미합니다.조건부 렌더링을 사용하는 경우는 많겠지만 제가 주로 사용했던 용도는 다음과 같습니다.인증, 인가에 따라 렌더링모달 ON/OFF비동기 데이터 참조 시 타입을 보장하여 안전하게 접근 및 로딩 처리 그럼 조건부 렌더링과 목적에 따른 사용 방법 예시를 알아보겠습니다. 📌 사전 준비 코드// 3초 후 return 하는 비동기 함수 const promiseFun = async () => { await new Promise((resolve) => setTimeout(resolve, 3000)); return 'JANG'; }; const Component = ({ name }: {.. 2023. 1. 23. [Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) ⚡ 논리 연산자 ‘&&’, ‘||’ 📌 단축평가 console.log("aaa" || "bbb") // "aaa" console.log("aaa" && "bbb") // "bbb" 논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다. console.log(true && "aaa") // "aaa" console.log(false && "aaa") // false &&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다. console.log(true || "aaa") // true console.log(.. 2023. 1. 10. [React] 리액트와 불변성 ⚡️ 시작하기 전자바스크립트나 리액트를 학습할 때 불변성에 대한 이야기는 꾸준하게 등장합니다.값이나 상태는 불변성을 항상 유지해야한다거나… 리액트에서 불변성이란 특성 때문에 객체의 프로퍼티만 수정하면 변경이 감지가 안된다거나…뭔지 알고싶지 않아도 어느순간 기본적인 곳에 계속해서 문제가 생겨 부딪힐 수 밖에 없습니다.그럼 자바스크립트에서 불변성이 어떠한 원리로 작동 하는지 알아보겠습니다. ⚡️ 자바스크립트의 메모리 구조자바스크립트의 메모리 구조는 콜 스택(Call Stack)과 메모리 힙(Memory Heap)으로 구성되어 있습니다.여기에 저장되는 값은 타입에 따라 다른 방식으로 저장됩니다.자바스크립트에는 다음과 같이 두가지의 타입이 존재합니다.원시 타입: Boolean, String, Number, nu.. 2023. 1. 5. 반응형 이전 1 다음
오픈 채팅
