Deep Link 공식문서

공식문서 보고 기본적인 설정 해주기

🪅 IOS

# 생성
npx uri-scheme add fromnow --ios

🪅 Android

# 생성
npx uri-scheme add fromnow --android

🪅 Deep Link 공유하기

# 기본 경로
fromnow://

🪅 Deep Link 테스트 해보기

# npx uri-scheme open [your deep link] --[ios|android]
npx uri-scheme open "fromnow://profile" --ios

npx uri-scheme open "fromnow://team-setting/8" --android

npx uri-scheme open "fromnow://team-detail/8/123" --android

🪅 deeplinkConfig.ts

/* deeplinkConfig.ts */
import { Linking } from 'react-native';
import { LinkingOptions } from '@react-navigation/native';

export const linking: LinkingOptions<RootStackParamList> = {
  prefixes: ['fromnow://'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile',
      Team: 'team/:id',
      TeamCalendar: 'team-calendar/:id',
      TeamSetting: 'team-setting/:id',
      TeamEdit: 'team-edit/:id',
      TeamDetail: 'team-detail/:teamId/:date',
    },
  },
  async getInitialURL() {
    const url = await Linking.getInitialURL();
    if (url != null) return url;
  },
};

type RootStackParamList = {
  Home: string;
  Profile: string;
  Team: { id: string };
  TeamCalendar: { id: string };
  TeamSetting: { id: string };
  TeamEdit: { id: string };
  TeamFriendAdd: { id: string };
  TeamDetail: { teamId: string; date: string };
};

/* App.tsx */
import { linking } from './deeplinkConfig';

<NavigationContainer linking={linking}>
  ...
</NavigationContainer>

Linking.openURL

Linking.openURL("fromnow://profile");

앱 설정 열기

Linking.openSettings();

🗑️ deeplinkConfig 있는지 모르고 만들었던 코드(버림..)

# 프로필 경로
fromnow://Profile
# 팀세팅 경로
fromnow://TeamSetting?id=3256

npx uri-scheme open "fromnow://TeamSetting?id=8" --android

npx uri-scheme open "fromnow://TeamDetail?postId=8&teamId=123" --android

import { Linking } from 'react-native';
import useNavi from '@hooks/useNavi';

...
const { navigation } = useNavi();

const parseQueryParams = (query: string) => {
  const paramsObj = {};
  const paramsArray = query.split('&');
  paramsArray.forEach(param => {
    const [key, value] = param.split('=');
    if (key && value) {
      paramsObj[key] = decodeURIComponent(value);
    }
  });
  return paramsObj;
};

const navigateByDeepLink = (e: { url: string }) => {
  let { url } = e;
  if (!url) return;
  const [path, query] = url.replace(/.*?:\/\//g, '').split('?');
  let paramsObj = {};
  if (query) {
    paramsObj = parseQueryParams(query);
  }
  navigation.navigate(path, paramsObj);
};

useEffect(() => {
  // 앱이 처음 시작됐을 때
  Linking.getInitialURL().then(url => {
    navigateByDeepLink({ url });
  });
  // 이미 앱이 실행중일 때
  const linking = Linking.addEventListener('url', navigateByDeepLink);

  return () => {
    linking.remove();
  };
}, []);
...

꽤 까다로운 작업이라 react-native-calendar-strip 라이브러리 소스코드를 직접 수정해서 사용했다.

react-native-calendar-strip github

# 필요한 종속 패키지 설치
yarn add moment-modification-rn

달력이 기본적으로 영어로 되어 있어서 한국어로 변경해야 했고, CalendarHeader에 좌우 이동 버튼이 없어서 추가했다.

🗓️ 한국어로 변경하기

CalendarHeader.js

formatCalendarHeader 함수 변경

// 변경
formatCalendarHeader(calendarHeaderFormat) {
  if (!this.props.weekStartDate || !this.props.weekEndDate) {
    return '';
  }

  const firstDay = this.props.weekStartDate;
  const lastDay = this.props.weekEndDate;

  const yearMonthFormat = 'YYYY년 M월';

  if (firstDay.year() === lastDay.year() && firstDay.month() === lastDay.month()) {
    return firstDay.format(yearMonthFormat);
  } else if (firstDay.year() === lastDay.year()) {
    return `${firstDay.format('YYYY년 M월')} / ${lastDay.format('M월')}`;
  } else {
    return `${firstDay.format('YYYY년 M월')} / ${lastDay.format('YYYY년 M월')}`;
  }
}

CalendarDay.js

// 추가
import 'moment-modification-rn/locale/ko';
moment.locale('ko');

🗓️ CalendarHeader에 좌우 이동 버튼 추가하기

CalendarStrip.js

...
renderHeader() {
  return (
    this.props.showMonth && (
      <CalendarHeader
        controlDateLeft={this.props.minDate} // 추가
        controlDateRight={this.props.maxDate} // 추가
        onLeftPress={this.getPreviousWeek} // 추가
        onRightPress={this.getNextWeek} // 추가
        ...
      />
    )
  );
}

CalendarHeader.js

class CalendarHeader extends Component {
  static propTypes = {
    controlDateLeft: PropTypes.any, // 추가
    controlDateRight: PropTypes.any, // 추가
    onLeftPress: PropTypes.func, // 추가
    onRightPress: PropTypes.func, // 추가
    ...
  };


...
render() {
  const {
    controlDateLeft, // 추가
    controlDateRight, // 추가
    onLeftPress, // 추가
    onRightPress, // 추가
    calendarHeaderFormat,
    onHeaderSelected,
    calendarHeaderContainerStyle,
    calendarHeaderStyle,
    fontSize,
    allowHeaderTextScaling,
    weekStartDate: _weekStartDate,
    weekEndDate: _weekEndDate,
    headerText,
  } = this.props;

  // 추가
  if (!_weekStartDate || !_weekEndDate) return null;

  const _headerText = headerText || this.formatCalendarHeader(calendarHeaderFormat);
  const weekStartDate = _weekStartDate && _weekStartDate.clone();
  const weekEndDate = _weekEndDate && _weekEndDate.clone();

  // 추가
  function isEnabled(controlDate, startDate, endDate) {
    if (controlDate) {
      return !moment(controlDate).isBetween(startDate, endDate, 'day', '[]');
    }
    return true;
  }
  // 추가
  const enabledLeft = isEnabled(controlDateLeft, weekStartDate, weekEndDate);
  // 추가
  const enabledRight = isEnabled(controlDateRight, weekStartDate, weekEndDate);

  return (
    <View className="items-center">
      <View className="flex flex-row">
        {/* 추가 */}
        <TouchableOpacity disabled={!enabledLeft} onPress={onLeftPress} className="justify-center p-[10px]">
          <LeftArrowIcon color={enabledLeft ? '#1C1C1E' : '#D9D9DC'} />
        </TouchableOpacity>

        <TouchableOpacity
          onPress={onHeaderSelected && onHeaderSelected.bind(this, { weekStartDate, weekEndDate })}
          disabled={!onHeaderSelected}
          style={calendarHeaderContainerStyle}>
          <Text
            className="font-PTDSemiBold text-base text-black"
            style={[styles.calendarHeader, { fontSize: fontSize }, calendarHeaderStyle]}
            allowFontScaling={allowHeaderTextScaling}>
            {_headerText}
          </Text>
        </TouchableOpacity>

        {/* 추가 */}
        <TouchableOpacity disabled={!enabledRight} onPress={onRightPress} className="justify-center p-[10px]">
          <RightArrowIcon color={enabledRight ? '#1C1C1E' : '#D9D9DC'} />
        </TouchableOpacity>
      </View>
    </View>
  );
}

🗓️ 적용하는 곳

import CalendarStrip from '@components/Team/CalendarStrip/CalendarStrip';
import Badge from '@components/common/Badge';
import moment from 'moment-modification-rn';
import 'moment-modification-rn/locale/ko';
moment.locale('ko');

...
<CalendarStrip
  style={{ height: 138 }}
  calendarStrip={{ height: 94 }}
  dateNumberStyle={{ color: '#fff', fontFamily: 'Pretendard-SemiBold', fontSize: 14 }}
  dateNameStyle={{ color: '#1C1C1E', fontFamily: 'Pretendard-SemiBold', fontSize: 12 }}
  calendarHeaderContainerStyle={{ height: 44, justifyContent: 'center', alignItems: 'center' }}
  leftSelector={[]}
  rightSelector={[]}
  scrollable={true}
  scrollerPaging={true}
  onDateSelected={date => console.log(date)}
  onWeekChanged={(start, end) => console.log(start, end)}
  minDate={moment('2024-09-01')}
  maxDate={moment().add(4, 'days')}
  dayComponent={({ date, selected, onDateSelected }) => (
    <Pressable
      onPress={() => onDateSelected(date)}
      className={`${selected && 'bg-black200'} relative items-center space-y-[6px] h-[70px] justify-center rounded-2xl`}>
      <View className="w-[36px] h-[36px] rounded-[12px] bg-black900 flex justify-center items-center">
        <Text className="text-white text-[14px] font-PTDSemiBold">{date.date()}</Text>
      </View>
      <Text className="text-black900 text-[12x] font-PTDSemiBold">{date.format('ddd')}</Text>
      <View className="absolute top-[-5px] left-[1px]">
        <Badge width={24} height={24} bgColor={'#F04438'} />
      </View>
    </Pressable>
  )}
/>

react-native-web은 React Native의 컴포넌트를 웹 환경에 맞게 변환하여 웹 브라우저에서 직접 실행되도록 해준다.

React Native로 모바일 앱을 개발하다가 웹으로도 만들어보고 싶어서 사용해 봤다.

# 설치
yarn add react-dom react-native-web
yarn add url-loader
yarn add -D @types/react-dom

# webpack 설치
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/preset-react

이제 이 블로그 보고 기본 설정 해주면 됨

✚ 추가적인 설정

🧶 tailwindcss

# 아래 두개는 이미 설치 했었음
# yarn nativewind
# yarn add -D tailwindcss

yarn add -D postcss autoprefixer postcss-loader css-loader style-loader

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
    './public/**/*.{js,jsx,ts,tsx,html}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

src/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: rgb(233, 236, 239);
}
.root-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.root-wrapper {
  max-width: 540px;
  width: 100%;
  height: 100vh;
  background-color: #fff;
}

🧶 index.web.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '/App';
import './src/global.css'; // ⭐️ 추가

const rootNode = document.getElementById('root');
ReactDOM.createRoot(rootNode).render(<App />);

🧶 webpack.config.js

...
// css 파일 로더 추가
const cssLoader = {
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'postcss-loader'],
  include: path.resolve(__dirname, 'src'),
};
module.exports = {
  resolve: {
    ...
    extensions: ['.web.js', '.js', '.ts', '.tsx', 'json', '.css'],
  },
  module: {
    rules: [tsxLoader, imgLoader, svgLoader, cssLoader],
  },
  ...
};

🧶 babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset', '@babel/preset-react'],
  ...
}

🧶 package.json

"scripts": {
  "start:web": "webpack serve --config ./webpack.config.js --mode development",
  "build:web": "webpack --mode production",
  ...
},

🧶 웹으로 실행

yarn run start:web

🧶 경로 설정

웹과 모바일 환경에 따라 경로 설정을 다르게 해야 한다. 그렇지 않으면 웹에서는 경로가 변경되어도 URL이 업데이트되지 않는다.

react-router-dom은 브라우저 환경에서만 작동하므로 모바일 앱에서는 사용할 수 없다. (모바일에서 사용하면 document 객체와 관련된 에러가 발생함)

# 설치
yarn add react-router-dom

App.tsx

/* App.tsx */
import React from 'react';
import {Platform} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

import HomeScreen from 'screens/HomeScreen';
import DetailMenuScreen from 'screens/DetailMenuScreen';

function App() {
  const Stack = createNativeStackNavigator();
  const isWeb = Platform.OS === 'web';

  return (
    <>
      {!isWeb && (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              options={{headerShown: false}}
              component={HomeScreen}
            />
            <Stack.Screen
              name="DetailMenu"
              options={{headerShown: false}}
              component={DetailMenuScreen}
            />
          </Stack.Navigator>
        </NavigationContainer>
      )}
      {isWeb && (
        <Router>
          <Routes>
            <Route path="/" element={<HomeScreen />} />
            <Route path="/menu/detail" element={<DetailMenuScreen />} />
          </Routes>
        </Router>
      )}
    </>
  );
}

export default App;

src/screen/HomeScreen.tsx

/* src/screen/HomeScreen.tsx */
import React from 'react';
import {Platform, Pressable, SafeAreaView, StatusBar, Text} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {useNavigate} from 'react-router-dom';

const HomeScreen = () => {
  const isWeb = Platform.OS === 'web';
  const navigate = isWeb ? useNavigate() : undefined;
  const navigation = isWeb
    ? undefined
    : useNavigation<NativeStackNavigationProp<any>>();

  const goToDetailMenu = () => {
    if (isWeb && navigate) {
      navigate('/menu/detail');
      return;
    }
    if (navigation) {
      navigation.navigate('DetailMenu');
    }
  };

  return (
    <SafeAreaView className="bg-white">
      <StatusBar barStyle={'light-content'} backgroundColor={'#fff'} />
      <Pressable
        onPress={goToDetailMenu}
        className="bg-green-300 p-4 text-green-900 m-10 border border-solid border-green-900 rounded">
        <Text>Home</Text>
      </Pressable>
    </SafeAreaView>
  );
};

export default HomeScreen;

훅으로 분리

hooks/useNavi.ts

import { Platform } from 'react-native';
import { useNavigate } from 'react-router-dom';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

const useNavi = () => {
  const isWeb = Platform.OS === 'web';

  const navigate = isWeb ? useNavigate() : undefined;
  const navigation = isWeb ? undefined : useNavigation<NativeStackNavigationProp<any>>();

  return {
    navigate, // 웹
    navigation, // 앱
  };
};

export default useNavi;

+ 아직 web을 지원하지 않는 라이브러리들이 많고, 지원하더라도 web에서 제대로 동작하지 않는 경우가 많다. 그래서 가능한 한 웹은 별도로 개발하는 게 좋을 것 같다.

⒈ 현재 user.name과 user.email 확인하기

# global
git config --global user.name
git config --global user.email

git config user.name
git config user.email

⒉ 로그 확인, 삭제

# 로그 확인
git log

# 두 개의 최근 커밋을 삭제
git reset --hard HEAD~2 # 로컬의 내용도 변경
# git reset --soft HEAD~2 # 로컬의 변경 내용을 그대로 유지
# git stash # 변경사항을 임시로 저장

# 이전 커밋으로 강제 푸쉬
git push --force origin main
# git stash pop # 변경사항을 다시 적용

또는

# 프로젝트 내에 특정한 계정으로 되어있는 커밋이 있는지 확인
git log --author="사용자이름"

# commit hash 값 -> 삭제하고 싶은 첫번째 commit 바로 직전의 commit hash.
# 열린 git rebase editor에 삭제하고 싶은 commit들을 pick -> drop으로 변경
git rebase -i <commit hash>

# 이전 커밋으로 강제 푸쉬
git push --force origin main

⒊ 브랜치 이름 변경으로 Contributor 삭제

지우고 싶은 contributor의 commit들을 지웠지만, 레파지토리의 우측 contributor목록에는 아직 계정이 존재함.

View all branches → Rename branch 에서 main 브랜치 이름을 main1 로 변경 후, 다시 main으로 변경하면 contributor가 삭제된다.

src/assets/fonts에 원하는 폰트의 ttf파일들 넣기

react-native.config.js

module.exports = {
  assets: ['src/assets/fonts'],
};

터미널에 아래 명령어 입력

npx react-native-asset

android 에서는 android/app/src/main/assets/fonts에 폰트들이 잘 생성되었는지 확인하고, ios 에서는 Info.plist 파일에 UIAppFonts가 제대로 들어갔는지 확인하면 된다.

// 폰트 적용하기
<Text style={{fontFamily: 'NanumSquareNeo-dEb'}}>
  tata-v
</Text>

🧶 tailwind에 적용하기

tailwind.config.js

module.exports = {
  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}', './public/**/*.{js,jsx,ts,tsx,html}'],
  theme: {
    fontFamily: {
      PTDBlack: ['Pretendard-Black'],
      PTDBold: ['Pretendard-Bold'],
      PTDExtraBold: ['Pretendard-ExtraBold'],
      PTDExtraLight: ['Pretendard-ExtraLight'],
      PTDLight: ['Pretendard-Light'],
      PTDMedium: ['Pretendard-Medium'],
      PTDRegular: ['Pretendard-Regular'],
      PTDSemiBold: ['Pretendard-SemiBold'],
      PTDThin: ['Pretendard-Thin'],
      UhBeeBold: ['UhBee-Bold'],
      UhBee: ['UhBee'],
    },
  },
  ...

적용하는 곳

<Text className="font-PTDBlack">Go To SignIn</Text>

🧶 StyleSheet에 적용하기

src/style/font.style.js

import { StyleSheet } from 'react-native';

export const font = StyleSheet.create({
  nanum400: {
    fontFamily: 'NanumSquareNeo-aLt',
  },
  nanum500: {
    fontFamily: 'NanumSquareNeo-bRg',
  },
  nanum700: {
    fontFamily: 'NanumSquareNeo-cBd',
  },
  nanum800: {
    fontFamily: 'NanumSquareNeo-dEb',
  },
  nanum900: {
    fontFamily: 'NanumSquareNeo-eHv',
  },
});

적용하는 곳

<Text style={font.nanum800} className="mt-[32px]  text-gray900 text-xl">
  tata-v
</Text>

커스텀 Text 컴포넌트

import React from 'react';
import { Text, TextProps } from 'react-native';

interface CustomTextProps extends TextProps {}

const CustomText: React.FC<CustomTextProps> = ({ style, ...rest }) => {
  const customStyle = {
    fontFamily: 'Pretendard-Regular',
    color: '#000000'
  };

  return <Text style={[customStyle, style]} {...rest} />;
};

❗️ 만약 ios에 폰트가 적용되지 않는다면

src/assets/fonts에 저장된 폰트 파일의 이름이 PostScript 이름과 일치하지 않으면 폰트가 제대로 적용되지 않는다.

폰트 파일 이름을 PostScript 이름과 동일하게 변경해야 한다.

JSON 형식으로 애니메이션을 저장하여 비교적 파일 크기가 작은 Lottie. Lottie에서 원하는 파일을 다운로드 받아 사용할 수 있다. 받아온 Lottie 파일을 미리 플레이해 볼 수 있는 곳

🎷 설치

# 설치
npm install vue3-lottie@latest --save
# yarn add vue3-lottie@latest
# pnpm add vue3-lottie@latest

🎷 Vue3에서 Lottie 설정하기

Usage with Vue 3 Usage with Nuxt 3

/* main.js */
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'

createApp(App)
  .use(Vue3Lottie, { name: 'LottieAnimation' })
  .mount('#app')

/* components.d.ts */
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']
  }
}

🎷 Lottie 사용하기

<script setup lang="ts">
import Lottie from 'vue-lottie';
import listLoadingJson from 'src/assets/json/list_loading.json';
</script>

<template>
<Vue3Lottie
  :animationData="listLoadingJson"
  :height="200"
  :width="200"
/>
</template>

👉 vue3 Lottie 👉 lottie-web으로 Lottie에 다양한 옵션 추가하기

vue3에서 전역 상태 관리를 할 수 있는 pinia

🍍 설치

npm install pinia

🍍 pinia 설정

main.js

import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());

src/store/counter.js

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  // 초기 상태 지정
  state: () => {
    return { count: 1 };
  },
  getters: {
    doubleCount: state => state.count * 2,
  },
  // 액션 함수 지정
  actions: {
    increment() {
      this.count++;
    },
  },
});

🍍 Setup Stores

Setup Stores

ref()는 state 속성이 됨. computed()는 getters가 됨. function()은 actions가 됨.

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

🍍 상태 가져와서 사용하기

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <p>Count: {{ store.doubleCount }}</p>
    <button @:click="store.increment()"></button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter';

const store = useCounterStore();
</script>

➕ typescript

import { defineStore } from 'pinia';

interface Counter {
  count: number;
}

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 1 } as Counter;
  },
  actions: {
    increament() {
      this.count++;
    },
  },
});

🍍 storeToRefs

store에서 그냥 구조 분해를 하면 해당 객체가 store와 떨어지게 된다. storeToRefs을 써서 구조 분해를 하면 반응성을 유지할 수 있다.

import { useCounterStore } from '@/store/counter';
const store = useCounterStore();
// const { counter } = store;
const { counter } = storeToRefs(store);
const { increment } = store; // 함수는 그냥 가져오기 가능

Local Storage

const localStorageEffect = key => ({setSelf, onSet}) => {
  const savedValue = localStorage.getItem(key)
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue));
  }

  onSet((newValue, _, isReset) => {
    isReset
      ? localStorage.removeItem(key)
      : localStorage.setItem(key, JSON.stringify(newValue));
  });
};

typescript 추가

import { AtomEffect } from 'recoil';

const localStorageEffect: <T>(key: string) => AtomEffect<T> =
  (key: string) =>
  ({ setSelf, onSet }) => {
    const savedValue = localStorage.getItem(key);
    if (savedValue != null) {
      setSelf(JSON.parse(savedValue));
    }

    onSet((newValue, _, isReset) => {
      isReset ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(newValue));
    });
  };

export default localStorageEffect;

원하는 atom에 적용

const currentUserIDState = atom({
  key: 'CurrentUserID',
  default: 1,
  effects: [
    localStorageEffect('current_user'), // ⭐️추가
  ]
});

📕 로컬스토리지 만료 시간 지정하기

import { AtomEffect } from 'recoil';

// 원하는 시간 지정
const ONE_HOUR = 3600 * 1000; // 1시간
const getExpirationTime = () => Date.now() + ONE_HOUR;

const localStorageEffect: <T>(key: string) => AtomEffect<T> =
  (key: string) =>
  ({ setSelf, onSet }) => {
    // 로컬에 저장된 키 가져오기
    const savedValue = localStorage.getItem(key);
    const expirationTime = localStorage.getItem(`${key}_expiration`);

    // 만료 시간이 지났거나 값이 없을 경우 삭제
    if (expirationTime && Date.now() > parseInt(expirationTime, 10)) {
      localStorage.removeItem(key); // 값 삭제
      localStorage.removeItem(`${key}_expiration`); // 만료 시간 정보 삭제
    } else if (savedValue != null) {
      // 만료 시간이 지나지 않았고, 값이 존재하는 경우에는 해당 값을 Recoil 상태에 설정
      setSelf(JSON.parse(savedValue));
    }

    // Recoil 상태가 변경될 때 호출되는 콜백 함수를 정의
    onSet((newValue, _, isReset) => {
      // Recoil 상태가 재설정되는 경우, 해당 키와 만료 시간 정보를 삭제
      if (isReset) {
        localStorage.removeItem(key);
        localStorage.removeItem(`${key}_expiration`);
      } else {
        // Recoil 상태가 업데이트되는 경우, 새로운 값을 로컬 스토리지에 저장하고 만료 시간 정보를 갱신
        localStorage.setItem(key, JSON.stringify(newValue)); // 값 저장
        localStorage.setItem(`${key}_expiration`, getExpirationTime().toString()); // 만료 시간 갱신
      }
    });
  };

export default localStorageEffect;

▷ recoil-persist

📕 세션스토리지

recoil-persist로 sessionStorage 또는 localStorage를 사용할 수 있다.

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const sessionStorage = 
      typeof window !== 'undefined' ? window.sessionStorage : undefined

const { persistAtom } = recoilPersist({
  key: 'music',
  storage: sessionStorage,
});

const musicAtom = atom<MyAtomType>({
  key: 'musicAtom',
  default: myDefaultState,
  effects_UNSTABLE: [persistAtom], // ⭐️ 추가
});

📕 SSR 대응

SSR 대응법

/* hook */
import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
import currentTrackState, { currentTrackDefault } from 'src/atom/currentTrackState';

const useCurrentTrackSSR = () => {
  const [isInitial, setIsInitial] = useState(true);
  const [value, setValue] = useRecoilState(currentTrackState);

  useEffect(() => {
    setIsInitial(false);
  }, []);

  return [isInitial ? currentTrackDefault : value, setValue] as const;
};

export default useCurrentTrackSSR;

/* 최상위에서 한번만 사용 */
const [currentMusicAndTrack, setCurrentMusicAndTrack] = useCurrentTrackSSR();

🍒Recoil 사용법 보러가기

JSON 형식으로 애니메이션을 저장하여 비교적 파일 크기가 작은 Lottie. Lottie에서 원하는 파일을 다운로드 받아 사용할 수 있다. 받아온 Lottie 파일을 미리 플레이해 볼 수 있는 곳

# 설치
npm install --save react-lottie-player

(Next.js라면 json파일은 public폴더에 넣고 사용)

import Lottie from 'react-lottie-player';
import loadingJson from '../public/lottie/animation_loading.json';

function LoadingLottie() {
  return (
    <Lottie loop animationData={loadingJson} play />
  );
}

export default LoadingLottie;

Next.js라면 dynamic import로 가져와서 사용해야 함

import { CSSProperties } from 'react';
import dynamic from 'next/dynamic';
import loadingJson from '@/public/json/loading.json';

interface Props {
  customStyle?: CSSProperties;
}

function LoadingLottie({ customStyle }: Props) {
  const Lottie = dynamic(() => import('react-lottie-player'), { ssr: false });

  return (
    <Lottie style={customStyle} loop animationData={loadingJson} play />
  );
}

export default LoadingLottie;

공홈에서 json 파일을 다운로드 받아 사용할 수도 있지만, 직접 만든 애니메이션을 Lottie로 사용하고 사용하고 싶다면 👉 에펙에서 로티 애니매이션 만들기1 👉 에펙에서 로티 애니매이션 만들기2

🪶 Icomoon에서 svg를 icon 폰트로 바꾸기

SVG 이미지를 Icon Font로 변환해주는 사이트 → https://icomoon.io/app/#/select

SVG 이미지를 Icon Font로 변환하는 방법 → SVG를 Icon Font로 바꾸는 방법(웹)

icomoon을 사용하여 아이콘을 생성한 후 다운로드하기 전에 설정에서 CSS Selector를 'Use a class'로 변경해야 한다.

다운로드한 파일 중에서 icomoon.ttf와 selection.json 파일만 필요하다. 이 파일들을 아래 경로로 저장해 주었다.

src/assets/fonts/icomoon.ttf src/assets/selection.json

🪶 Icon Font 폰트 적용하기

react-native-vector-icons 설치

# 설치
npm install --save react-native-vector-icons
npm install --save-dev @types/react-native-vector-icons

icomoon.ttf를 폰트로 지정

App.tsx

/* App.tsx */
useEffect(() => {
  async function loadFonts() {
    await Font.loadAsync({
      customIcons: require('./src/assets/fonts/icomoon.ttf'), // ⭐️폰트 지정
    });
    setFontsLoaded(true);
  }

  loadFonts();
}, []);

if (!fontsLoaded) {
  return null; // 폰트 로딩 중에는 렌더링을 방지
}

src/components/Icon/Icon.tsx

createIconSetFromIcoMoon(selection.json, icomoon.ttf폰트)

/* src/components/Icon/Icon.tsx */
import icoMoonConfig from '../../assets/selection.json';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';

const Icon = createIconSetFromIcoMoon(icoMoonConfig, 'customIcons');

export default Icon;

이제 아래처럼 커스텀 아이콘 폰트를 사용할 수 있다. <Icon name="아이콘폰트이름" size={30} color="blue" />

import Icon from './src/components/Icon/Icon';

<Icon name="moon" size={30} />

👉 Custom icon fonts with React Native

# 설치
npm install react-native-svg
# Expo일 경우 ↓
# expo install react-native-svg

npm install -D react-native-svg-transformer

⒉ metro.config.ts

metro.config.ts 파일 생성

cli

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(defaultConfig, config);

expo

/* metro.config.ts */
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext: string) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

global.d.ts

declare module '*.svg' {
  import React from 'react';
  import {SvgProps} from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

src/assets/~.svg

svg파일 넣어두고 import해서 컴포넌트처럼 사용하면 됨

➕ 이미지 가져오기

require('경로')로 이미지를 가져올 수도 있지만

<Image source={require('./src/assets/png-file/crayon-line.png')} />

아래처럼 사용하고 싶다면

import crayonPng from './src/assets/png-file/crayon-line.png';

<Image source={crayonPng} />

import-image.d.ts 파일을 생성하고, 이미지 파일 확장자인 .png 및 .jpg에 대한 모듈 타입을 선언하면 된다.

/* import-image.d.ts */
declare module '*.png';
declare module '*.jpg';

⒈ ttf파일

구글 폰트에서 원하는 폰트를 다운로드 받아 ttf파일을 assets/fonts 파일 안에 넣어준다.

⒉ expo-font 설치

# 설치
npm install expo-font

⒊ 폰트 적용하기

폰트 로딩의 기본 사용법: Font.loadAsync({"폰트명": require("경로")});

폰트 로딩은 비동기 작업이기 때문에 렌더링이 시작된 후에도 폰트 로딩이 완료되지 않을 수 있다. 그러므로 useEffect 함수를 사용해서 폰트 로딩이 완료되면 로딩 상태를 true로 변경해줘야 한다. 이렇게 하면 폰트 로딩이 완료된 후에만 텍스트 스타일에 폰트를 적용할 수 있다.(안 해주면 오류 뜸)

import * as Font from 'expo-font';
import { useEffect, useState } from 'react';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadFonts() {
      await Font.loadAsync({
        bubblegum: require('./src/assets/fonts/BubblegumSans-Regular.ttf'),
        notosans: require('./src/assets/fonts/NotoSansKR-VariableFont_wght.ttf'),
      });
      setFontsLoaded(true);
    }

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return null; // 폰트 로딩 중에는 렌더링을 방지
  }

  return (
    <SafeAreaView>
      // 적용 방법
      <Text style={{ fontFamily: 'notosans', fontSize: 28 }}>Font</Text>
      <Text style={{ fontFamily: 'bubblegum', fontSize: 28 }}>Font</Text>
    </SafeAreaView>
  );
}

▷ react-native-global-props

notosans 폰트를 모든 Text에 개별적으로 설정하는 대신, 전역으로 한 번만 설정하여 모든 텍스트에 일괄적으로 적용하고 싶었다.

그럴 땐 react-native-global-props 라이브러리를 사용하면 된다.

⒈ 설치

# 설치
npm i react-native-global-props --save
npm install --save-dev @types/react-native-global-props

⒉ setCustomText

setCustomText로 폰트를 적용

import { setCustomText } from 'react-native-global-props';

const customTextProps = {
  style: {
    fontFamily: 'notosans',
  },
};

setCustomText(customTextProps);

전체 코드

import * as Font from 'expo-font';
import { useEffect, useState } from 'react';
import { setCustomText } from 'react-native-global-props';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadFonts() {
      await Font.loadAsync({
        bubblegum: require('./src/assets/fonts/BubblegumSans-Regular.ttf'),
        notosans: require('./src/assets/fonts/NotoSansKR-VariableFont_wght.ttf'),
      });
      setFontsLoaded(true);
    }

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return null; // 폰트 로딩 중에는 렌더링을 방지
  }

  const customTextProps = {
    style: {
      fontFamily: 'notosans',
    },
  };
  setCustomText(customTextProps);

  return (
    <SafeAreaView>
      <Text style={{ fontSize: 28 }}>Font</Text> // ⭐️fontFamily: 'notosans'를 해주지 않아도 적용됨
      <Text style={{ fontFamily: 'bubblegum', fontSize: 28 }}>Font</Text>
    </SafeAreaView>
  );
}

Animated는 애니메이션을 쉽게 만들 수 있도록 도와준다.

컴포넌트의 스타일, 위치, 투명도 등의 속성을 애니메이션으로 변경하고, 애니메이션 시간, 타이밍, 반복 등을 세밀하게 제어할 수 있다.

🪸 Animated value 생성

// 값을 직접 바꾸면 안되기에 useRef를 사용함
// Value의 생성자 함수 인자에는 초깃값을 넣어줌
const refAnimation = useRef(new Animated.Value(0)).current;

🪸 interpolate, Animated.View

interpolate: Value가 가지고 있는 값을 기준으로 새로운 값을 생성

const widthAnimation = refAnimation.interpolate({
  inputRange: [0, 10], // refAnimation의 값이 0에서 10 사이로 변화할 수 있음
  outputRange: ['0%', '100%'], // refAnimation이 0일 때는 '0%'가 생성, 값이 10일 때는 '100%'가 생성
});

...
// Animated 연결
<Animated.View style={{ width: widthAnimation }} />

🪸 Animated.timing

Animated.timing을 이용해서 Animated Value의 값을 변경할 수 있다.

Animated.timing(refAnimation, {
  toValue: 0, // 애니메이션의 목표, refAnimation이 이 값으로 변화 (필수⭐️)
  useNativeDriver: false, // 네이티브 드라이버 사용 여부
  duration: 1000, // 애니메이션의 지속 시간을 밀리초 단위로 지정 - 기본값 500
  delay: 0, // 애니메이션의 시작을 지연시킬 시간
  isInteraction: true, // 애니메이션이 다른 상호작용과 상호작용하는지 여부 - 기본값 true
  easing: Easing.inOut(Easing.ease), // 애니메이션의 가속도 함수를 설정, Easing 모듈을 사용하여 설정함 - 기본값 Easing.inOut(Easing.ease)
}).start(() => {
  // 애니메이션이 완료되었을 때 실행할 작업
})

🪸 Animated를 활용한 코드 예시

7초동안 왼쪽에서 오른쪽으로 부드럽게 움직이는 애니메이션

import { View, Animated } from 'react-native';
import React, { useEffect, useRef } from 'react';

...
const refAnimation = useRef(new Animated.Value(-380)).current;

useEffect(() => {
  Animated.timing(refAnimation, {
    toValue: 0,
    delay: 0,
    duration: 7000,
    useNativeDriver: true,
  }).start(() => {
    navigation.goBack(); // 애니메이션이 끝나면 뒤로가기 됨
  });
}, [refAnimation, navigation]);

const animatedStyle = {
  height: '100%',
  backgroundColor: 'skyblue',
  transform: [{translateX: refAnimation}],
};

...
<Animated.View style={animatedStyle} />

🪸 Animated를 활용한 코드 예시2

const TopImage = ({Img, isScrollable}: Props) => {
  const darkmode = isDarkmode();
  const notFoundImg = darkmode ? notfoundDarkImg : notfoundLightImg;
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  const heightAni = useRef(new Animated.Value(222)).current;
  const bgColorAni = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(heightAni, {
      toValue: isScrollable ? 44 : 222,
      duration: 300,
      useNativeDriver: false,
    }).start();
    Animated.timing(bgColorAni, {
      toValue: isScrollable ? 0 : 1,
      duration: 300,
      useNativeDriver: false,
    }).start();
  }, [isScrollable, heightAni, bgColorAni]);

  const backgroundColor = bgColorAni.interpolate({
    inputRange: [0, 1],
    outputRange: ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)'],
  });

  return (
    <Animated.View
      style={{height: heightAni, backgroundColor}}
      className="relative">
      <Animated.View style={{opacity: bgColorAni}}>
        <ImageBackground
          source={Img ? {uri: Img} : notFoundImg}
          resizeMode="cover"
          className="h-[222px] w-full"
        />
      </Animated.View>
      <Pressable
        onPress={() => navigation.goBack()}
        className="absolute left-[16px] top-[6px]">
        <ImageBackground
          source={blurBg}
          resizeMode="cover"
          className="flex justify-center items-center rounded-[8px] w-[32px] h-[32px]">
          <LeftArrowIcon />
        </ImageBackground>
      </Pressable>
    </Animated.View>
  );
};

👉 (공식문서)React-Native Animated

1. react-native-debugger

react-native-debugger 설치

brew install --cask react-native-debugger

런치패드에서 잘 설치된 것을 볼 수 있다.

2. 디버그 앱과 연결

React Native Debugger 앱을 열어놓은 상태에서 시뮬레이터에서 cmd + m을 눌러 'Debug'를 클릭하면 디버그 앱과 연결된다.

(console.log('🎶🎵🎶🎵🎶')을 해주어서 잘 찍히나 확인해 봄)

3. style 확인

− 시뮬레이터에서 cmd + m을 눌러 'Show Element Inspector'를 클릭. − 스타일을 확인하고 싶은 컴포넌트를 시뮬레이터 화면에서 클릭. − 디버거 앱에서 "Inspect"를 선택하면 해당 컴포넌트의 스타일 정보를 확인할 수 있다.

# 설치
brew install watchman
sudo gem install cocoapods
# pod 버전 업데이트하기
# sudo gem update cocoapods

# 프로젝트 생성
npx react-native@latest init 폴더이름

📑 Mac에서 IOS 개발을 위한 세팅

ruby 버전 오류가 뜬다면

# Ruby 버전 맞춰주기
# 1. rbenv 설치 
     brew install rbenv ruby-build
# 2. ruby 설치
     rbenv install 2.x.x
# 3. ruby 버전 번경
     rbenv global 2.x.x
# 4. ruby path 수정
     vi ~/.zshrc
#    i를 눌러 입력모드로 => 아래 코드를 맨 아래에 붙여넣기 => :wq로 저장 후 닫기
     eval "$(rbenv init - zsh)"

Metro 번들러 시작하기

yarn start
# 또는
# npx react-native start
# port 번호 다르게 시작
# npx react-native start --port=8082
# 캐시 리셋
# npx react-native start --reset-cache

pod 설치

cd ios
pod install

ios/.xcode.env 파일

// ios/.xcode.env 파일에서
// export NODE_BINARY=$(command -v node) 를
// export NODE_BINARY=your_node_path 로 바꿔야 함
export NODE_BINARY=/Users/myuser/.nvm/versions/node/v20.12.2/bin/node

ios 실행

npm run ios
# 또는
# npx react-native run-ios
# 특정 기기로 실행
# npx react-native run-ios --simulator=\"iPhone 15 Pro\"
# 기기 확인
# xcrun simctl list devices

📑 Mac에서 android 개발을 위한 세팅

# 설치
brew tap homebrew/cask-versions
brew install --cask zulu11

⒈ **모바일 에뮬레이션 [Android Studio**](https://developer.android.com/studio) 설치

참고

# 설치
brew install --cask android-studio

(Android SDK Android SDK Platform Android Virtual Device 가 체크되어 있는지 확인 후 설치하기)

⒉ Android Studio의 SDK Manager에 들어가 공식문서를 보며 설정해주기

⒊ Android Studio의 설정에서 경로 확인

# 1. 수정하러 가기
vi ~/.zprofile

# 2. i를 눌러 입력모드로 => 아래 코드를 붙여넣기 => :wq로 저장 후 닫기
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 환경 설정 파일이 로드
source $HOME/.zprofile

# 경로 확인하기
echo $PATH

⒋ Metro 번들러 시작하기

npm start
# 또는
# npx react-native start

⒌ android 실행

npm run android
# 또는
# npx react-native run-android

# 디바이스들 확인
# emulator -list-avds
# 특정 디바이스 실행
# emulator -avd Pixel_8_Pro_API_33 & npx react-native run-android

🗑️ 캐시 제거

# ios 캐시 제거
cd ios
rm -rf Podfile.lock Pods
pod install
yarn ios

# android 캐시 제거
cd android
./gradlew clean
./gradlew build


# ios
yarn cache clean
rm -rf ios/build ios/Pods node_modules
yarn install
cd ios && pod install && cd ..
yarn ios

# xcworkspace에서 빌드하기
Shift + Command + K # 빌드 캐시 초기화
Command + R # 다시 실행

🫢 Error - watchman

npm start로 실행했을 때 _'watchman warging: Recrawled this...'_오류가 뜬다면

# 차례대로 입력
watchman watch-del-all
watchman shutdown-server

그럼에도 계속 오류가 뜬다면 재설치

watchman shutdown-server
brew update
brew reinstall watchman
watchman

🫢 Error - adb

a 입력으로 android를 실행시킬 때 _'...AdbCommandRejectedException: closed'_오류가 뜬다면

# 차례대로 입력
adb kill-server
adb start-server

🫢 Error - 안드로이드 빌드 오류 kotlin

'Task :app:compileDebugJavaWithJavac FAILED w: Detected multiple Kotlin daemon sessions at build/kotlin/sessi'

안드로이드 빌드 중 위와 같은 오류가 발생했다.

android/build.gradle파일을 열어서 kotlin에 대한 정보를 추가해주면 된다.

/* android/build.gradle */
buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
        kotlin_version = '1.6.10' // 추가⭐️

        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version") // 추가⭐️
    }
}

🫢 Error - No bundle URL present

No bundle URL present

yarn react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'

🫢 Warn - customiseView

Introducing Bridgeless Mode

💥 에뮬레이터 강제 종료

pkill -f "qemu-system"
pkill -f "emulator"
pkill -f "adb"

간편하고 유연한 상태 관리를 도와주는 Recoil은 atom과 selector, 두 가지 유형의 상태를 정의할 수 있다.

atom: 변경 가능한 상태를 정의 selector: 다른 상태의 파생 값이나 변환된 값을 계산하기 위해 사용

🍒 설치

npm install recoil

🍒 RecoilRoot

index.js

// RecoilRoot 가져오기
import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RecoilRoot>  // 추가
      <App />
    </RecoilRoot> // 추가
  </React.StrictMode>
);

🍒 atom

atom/usernameState.js

// atom 가져오기
import { atom } from "recoil";

const usernameState = atom({
  key: "usernameState",
  default: "tata",
});

export default usernameState;

🍒 selector

get 함수를 정의하여 해당 상태를 계산할 수 있다.

selector/nameLengthState.js

// selector 가져오기
import { selector } from "recoil";

import usernameState from "../atom/usernameState";

const nameLengthState = selector({
  key: "nameLengthState",
  get: ({ get }) => {
    const username = get(usernameState);
    return username.length;
  },
});

export default nameLengthState;

🍒 useRecoilState, useRecoilValue

useRecoilState: useState처럼 상태 값 변경도 가능 useRecoilValue: 상태 값만 가져오기

import { useRecoilState, useRecoilValue } from "recoil";
import nameState from "../atom/usernameState";
import nameLengthState from "../selector/nameLengthState";

const Main = () => {
  const [username, setUsername] = useRecoilState(nameState);

  const name = useRecoilValue(nameState);
  const nameLength = useRecoilValue(nameLengthState);

  const changeName = () => {
    setUsername("chimmy");
  };

  const resetName = () => {
    setUsername("tata");
  };

  return (
    <>
      <span>{username}</span>
      <button onClick={changeName}>Change Name</button>
      <button onClick={resetName}>Reset</button>
      <p>{name}</p>
      <p>{nameLength}</p>
    </>
  );
};

export default Main;

🍒 useSetRecoilState, useResetRecoilState

useSetRecoilState: 상태 값 변경 가능 useResetRecoilState: 디폴트 상태 값으로 변경

import { useSetRecoilState, useResetRecoilState, useRecoilValue } from "recoil";
import nameState from "../atom/usernameState";

const Main = () => {
  const username = useRecoilValue(nameState);

  const resetName = useResetRecoilState(nameState); // 상태 값 변경 가능
  const change = useSetRecoilState(nameState); // 디폴트 상태 값으로 변경

  const changeName = () => {
    change("chimmy");
  };

  return (
    <>
      <span>{username}</span>
      <button onClick={changeName}>Change Name</button>
      <button onClick={resetName}>Reset</button>
    </>
  );
};

export default Main;

useSetRecoilState로만 상태 값 변경할 때

/* atom/infoState.js */
import { atom } from 'recoil';

const defaultValue = {
  info2: '',
  info4: '',
  date: '',
  info5: '',
  info6: [],
};

const infoState = atom({
  key: 'infoState',
  default: defaultValue,
});

export default infoState;

/* Title.jsx */
import { useSetRecoilState } from 'recoil';

function Title() {
  const setInfoState = useSetRecoilState(infoState);

  const handleInputChange = (e) => {
    const value = e.target.value;

    setInfoState((data) => ({ ...data, info2: value }));
  };
...

CRA로 typescript 시작할 시

npx create-react-app my-app --template typescript

기존 javascript로 작성된 React 프로젝트에 typescript를 추가하게 될 경우

npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom

# 리덕스 툴킷
npm install --save-dev @reduxjs/toolkit @types/react-redux

# 스타일드 컴포넌트
npm install @types/styled-components

# 스토리북
npm install --save-dev @storybook/preset-typescript

# tsconfig.json 생성
npx tsc --init

# npm install @types/react를 해줬는데도 안 떠서 다시 설치함
# npm install --save-dev @types/react

🧤 tsconfig.json에 내용 추가

"compilerOptions": {
  "jsx": "react",
  "types": ["styled-components"],
}

🧤 index.tsx

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

🧤 svg, png... 이미지 파일 인식 못하는 경우

src폴더 안에 custom.d.ts파일 생성

/* src/custom.d.ts */

declare module "*.svg" {
  const content: any;
  export default content;
}

declare module "*.png" {
  const content: any;
  export default content;
}

tsconfig.json에 내용 추가

/* tsconfig.json */

"include": ["src", "src/custom.d.ts"],
"exclude": ["node_modules"]

▷ Redux에서 typescript 사용법

🧤 Store

Store/index.ts

/* Store/index.ts */
import { legacy_createStore as createStore, combineReducers } from "redux";
import { todoReducer } from "../Reducers";

const rootReducers = combineReducers({ todoReducer });
export type RootState = ReturnType<typeof rootReducers>; // 여기 추가

const store = createStore(rootReducers);

export default store;

🧤 Actions

Actions/action.tsx

⒈ 타입지정 및 as 지정

export const CREATE: string = "create" as const;

⒉ enum으로 타입 지정

export enum ActionTypes {
  CREATE = "create",
  REMOVE = "remove",
  TOGGLE = "toggle",
  DOING_FILTER = "doingFilter",
  COMPLE_FILTER = "compleFilter",
  CHANGE_TEXT = "changeText",
}

⒊ 액션 함수에 맞게 리턴 타입 지정

// 인터페이스
export interface ITodos {
  id: number;
  text: string;
  done: boolean;
}

interface ICreateAction {
  type: ActionTypes.CREATE;
  payload: ITodos;
}
.....

// 액션 함수
export const create = (todo: ITodos): ICreateAction => {
  return {
    type: ActionTypes.CREATE,
    payload: todo,
  };
};
.....

// 액션 타입들
export type TTodoAction = ICreateAction | IRemoveAction | IToggleAction | IDoingFilterAction | ICompleFilterAction | IChangeTextAction;

🧤 Reducers

Reducers/initialState.js

mport { ITodos } from "../Actions/action";

export interface ITodosArr {
  todos: ITodos[];
  doing: ITodos[];
  completed: ITodos[];
}

export const initialState: ITodosArr = {
  todos: [
    {
      id: 1,
      text: "간지나게 숨쉬기",
      done: true,
    },
 .....

Reducers/index.js

export const todoReducer = (state: ITodosArr = initialState, action: TTodoAction) => {
  switch (action.type) {
    case CREATE:
      const createPayload = action.payload as ITodos; // payload 타입을 분기 처리
      return Object.assign({}, state, { todos: [...state.todos, createPayload], doing: [...state.doing, createPayload] });

    case REMOVE:
      const removePayload = action.payload as { id: number }; // payload 타입을 분기 처리
      const removeTodos = state.todos.filter((el: ITodos) => el.id !== removePayload.id);
     .....

    case CHANGE_TEXT:
      const changeTextPayload = action.payload as { id: number; text: string }; // payload 타입을 분기 처리
      const changeTodos = state.todos.map((el: ITodos) => {
        if (el.id === changeTextPayload.id) return { ...el, text: changeTextPayload.text };
        return el;
      });
      .....

▷ React 컴포넌트에서 typescript

🧤 children

React.ReactNode

export interface ITemplateProps {
  children: React.ReactNode;
}

const TodoTemplateNotice = ({ children }: ITemplateProps) => {
  return (
    <TodoTemplateBlock>
      <RealTemplateBlock>{children}</RealTemplateBlock>
    </TodoTemplateBlock>
  );
};

🧤 MouseEvent

MouseEvent

useEffect(() => {
    const outInput = (e: MouseEvent) => {
      const node = e.target as Node;
      if (isEditable && inputRef.current && !inputRef.current.contains(node)
      .....

🧤 e.target.value

React.ChangeEvent<HTMLInputElement>

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

🧤 e.preventDefault

React.FormEvent

const onSubmit = (e: React.FormEvent) => {
  e.preventDefault();
}

🧤 useRef

<HTMLInputElement>

const inputRef = useRef<HTMLInputElement>(null);

🧤 setState

React.Dispatch<React.SetStateAction<타입>>

```jsx interface IAdcButtonProps { setBtnTxt: React.Dispatch<React.SetStateAction>; setAll: React.Dispatch<React.SetStateAction>; setFilterTxt: React.Dispatch<React.SetStateAction>; }

const AdcButton = ({ setBtnTxt, setAll, setFilterTxt }: IAdcButtonProps) => {

input range를 대신해서 사용 할 수 있는 라이브러리이다.

(input range를 사용하면 왼쪽 부분을 칠해줄 수가 없었는데, react-range를 사용해서 왼쪽 부분을 칠해줄 수 있게 되었다.)

🎧 설치

npm install react-range

🎧 예시 코드

import { Range } from 'react-range'; // Range 가져오기
...
......
return (
  <StyledRange // Range
    values={[volume]}
    step={1}
    min={0}
    max={100}
    onChange={handleVolumeChange}
    renderTrack={({ props, children }) => ( // renderTrack => 가로 바
      <Track {...props} values={[volume]}>
        {children}
      </Track>
    )}
    // renderThumb => 음량 조절 동그라미
    renderThumb={({ props, isDragged }) => <Thumb {...props} isDragged={isDragged} volume={[volume]} />}
  />
);

styled-components

// Range
const StyledRange = styled(Range)`
  height: 8px;
  display: flex;
  width: 400px;
`;

// 가로 바
const Track = styled.div`
  height: 8px;
  width: 400px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    #5d7a80,
    #2f7381 ${({ values }) => (values[0] / 100) * 100}%,
    #131c23 ${({ values }) => (values[0] / 100) * 100}%
  );
  align-self: center;
  box-shadow: 2px 2px 5px rgba(122, 153, 164, 0.2);
`;

// 음량 조절 동그라미
const Thumb = styled.div`
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: ${({ isDragged }) =>
    isDragged ? 'radial-gradient(ellipse at top, #9abfcd, #4f98a6);' : 'radial-gradient(ellipse at top, #7a99a4, #2f7381);'};
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(19, 28, 35, 0.2);
  transform: translateX(-50%);
  left: ${({ value, min, max }) => `${((value - min) / (max - min)) * 100}%`};
  top: 0px;
  position: absolute;

  &:focus {
    outline: none;
  }
`;

GitHub에서 사용하는 언어 인식 도구인 Linguist는 파일의 내용을 분석하여 어떤 언어로 작성되었는지를 자동으로 인식한다.

(😯❓typescript로도 작성되어 있는데, 깃헙의 언어 비율에는 javascript만 있었다.)

📁 .gitattributes 파일 생성

일단 모든 언어를 무시하고, 인식할 언어를 설정한다.

/* .gitattributes */

* linguist-vendored
*.tsx linguist-vendored=false
*.js linguist-vendored=false

const PostContent = () => {
  const autoResizeTextarea = () => {
    let textarea = document.querySelector('.autoTextarea');

    if (textarea) {
      textarea.style.height = 'auto';
      let height = textarea.scrollHeight;
      let maxHeight = window.innerHeight * 0.74; // 뷰포트 높이의 74%로 최대 높이 지정
      textarea.style.height = `${Math.min(height + 8, maxHeight)}px`; // 높이가 최대 높이를 초과하지 않도록 함
    }
  };

  return (
    <>
      <PostContentBlock>
          <PostContent>
            <div className='top-txt-box'>
              <span className='post-txt'>포스트 쓰기</span>
              <span className='artist-txt'>BTS</span>
            </div>
            <form className='post-form'>
              <textarea
                className='autoTextarea'
                onKeyDown={autoResizeTextarea}
                onKeyUp={autoResizeTextarea}
                type='text'
                placeholder='내용을 입력해 주세요'
                name='content'
                autoComplete='off'
                required
              />
            </form>
            <div className='submit-box'>
              <button>등록</button>
            </div>
          </PostContent>
          <div className='delete-btn'>
            <img src={deleteBtn} alt='delete-button' />
          </div>
       </PostContentBlock>
    </>
  );
};