전체 글

ignite - React Native의 boilerplate

React Native 프로젝트를 생성하는데 있어서 CLI를 이용하거나 expo를 이용하는 등 여러가지 선택지가 있을 수 있다. 다만, 여기에 더해서 mobx나 splash screen 등 추가적인 설정까지 해주는 boilerplate를 사용할 수도 있다. 가장 대표적인 React Native의 boilerplate인 ignite를 통해서 프로젝트를 생성해보았다. Ignite ignite를 통해서 생성된 프로젝트는 typescript, navigation, 상태관리, storage, 테스트 라이브러리, Rest Client 등이 이미 설치된 채로 생성된다. 미리 제공되는 라이브러리를 사용하면 되기에, 충돌이나 설정과 같은 골치아픈 일을 겪지 않을 수 있다. 초기 설정에서 demo를 지우지 않는다면, ig..

TypeScript의 enum에 대해서

타입스크립트에서 고정된 값을 주기위해서 다음과 같이 union을 활용할 수 있다. type Fruit = "Apple" | "Banana" | "Cocoa"; const fruit: Fruit = "Apple"; 위에서 fruit은 자동완성도 지원되고, Apple, Banana, Cocoa 셋 중 하나의 값만 가질 수 있게 된다. 다만, 다른 언어에 익숙한 사람이라면 enum을 사용하여 위의 고정된 선택지의 값을 표현하고 싶어할 수 있다. enum Fruit { Apple, Banana, Cocoa } const fruit: Fruit = Fruit.Apple; // 0 위의 타입스크립트는 다음과 같이 자바스크립트로 변환된다. "use strict"; var Fruit; (function (Fruit) ..

유용한 VSCode 확장 도구들 추천

Auto Rename Tag 여는 태그를 수정하면, 자동으로 닫는 태그역시 수정해준다. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag Auto Rename Tag - Visual Studio Marketplace Extension for Visual Studio Code - Auto rename paired HTML/XML tag marketplace.visualstudio.com Code Spell Checker 변수나 함수명을 지을 때 오타가 있으면 표시해준다. https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spe..

Vite를 사용하여 React 프로젝트 시작하기

새로운 리액트의 공식 문서를 보면, 새로운 리액트 프로젝트를 시작하는데 3가지 프레임워크를 소개한다. https://react.dev/learn/start-a-new-react-project Start a New React Project – React The library for web and native user interfaces react.dev Next, Remix, Expo가 그들이다. (Expo는 나머지 둘과는 다르게 React Native 프레임워크이다) 이제는 CRA를 사용하지 않고 프레임워크를 사용하는 것이 어쩌면 React의 대세가 된 것 같기도 하다. 그래도 Next와 같은 프레임워크를 사용하지 않고 React 프로젝트를 진행하는 것을 아는 것이 중요하다고 생각했기에, 기존에 CRA보..

Yarn berry 사용하기

일단 yarn을 설치해야 하는데, corepack을 통해서 패키지 관리자의 버전을 관리할 수 있다. npm i -g corepack corepack prepare yarn@stable --activate yarn 설치 yarn -v yarn set version berry yarn version 설정 yarn init yarn 프로젝트 시작 (npm init과 같다) https://nodejs.org/api/corepack.html#corepack Corepack | Node.js v20.0.0 Documentation Corepack# Added in: v16.9.0, v14.19.0 Corepack is an experimental tool to help with managing versions of..

Proxy 사용하기

proxy를 사용하면 기존 이벤트를 가로채 다른 함수를 실행할 수 있다. 간단한 예를 보면, 다음과 같다. const target = { a: "a_word", b: "b_word", } const handler = { get(target, prop, receiver) { switch(prop){ case 'a': return "A"; case 'b': return "B"; } } } const proxy = new Proxy(target, handler); console.log(proxy.a, proxy.b); 기존의 객체를 가로채어 다른 값을 return하게 만든다. handler가 기존의 실행을 가로채어 실행되는 함수로, switch나 if문 등을 사용하여 특정 key값의 객체값만 다른 값으로 re..

React18의 <Suspense>에 대해서

Suspense는 리액트에서 기본적으로 제공하는 컴포넌트로, 자식 컴포넌트가 로딩이 될 때 까지 fallback을 보여줄 수 있다. 즉, 기존에 사용하던 isLoading 상태를 이용한 패턴을 더 간단하게 사용할 수 있게 해주는 컴포넌트이다. Suspense 내부에 들어가는 Content 컴포넌트이다. import { useEffect, useState } from "react"; let tmp = ""; const getData = () => { return new Promise((resolve, reject) => { setTimeout(() => { tmp = "Hello Mr.Park"; resolve(true); }, 3000); }); }; const Content = () => { const..

타입스크립트 Type Aliases & Interfaces 알아보기

타입스크립트에서 타입을 선언하는데 크게 두 가지 방법이 있다. Type Aliases와 Interfaces에 대해서 정리하고, 각각 어느 상황에서 사용하는 것이 best case일지도 생각해보았다. Type type 키워드는 타입을 정의하기 위해서 모든 유형에 사용될 수 있다. 동일한 유형이 두 번이상 반복된다면, type을 선언하여 사용할 수 있다. type 키워드는 다음과 같은 특징을 지닌다. 객체를 포함한 모든 유형에 대한 타입을 표현할 수 있다. 문자열이나 숫자 등 값을 type에 할당할 수도 있다. type Name = string | undefined; let myName: Name; myName = "John"; type User = { nickname: string; level: numbe..