์ ์ฒด ๊ธ
-
Zustand Zustand
Zustand๋ค์ด๊ฐ๋ฉฐ์ ์ญ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋์ธ Zustand์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. Zustand๊ฐ๋ ๋ ์ผ์ด๋ก ์ํ(Status)๋ผ๋ ๋ป๋ฆฌ์กํธ ์ฑ์์ ์ ์ญ ์ํ ๊ด๋ฆฌ๋ฅผ ํด์ฃผ๋ ์์ฃผ ๊ฐ๋ณ๊ณ ๋จ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌRedux์ ๋ณต์กํ ๊ตฌ์กฐ(Action, Reducer, Dispatch)๋ฅผ ์ฌ์ฉํ์ง ์๊ณ , Hooks ๊ธฐ๋ฐ์ ๊ฐ๋จํ API ์ ๊ณต"minimal, fast, scalable"์ ๋ชฉํ๋ก ๋ง๋ค์ด์ก๋ค. ๋น๊ตRedux์ ๋น๊ตRedux๋ boilerplateํ ์ฝ๋๊ฐ ๋ง๋ค.action, reducer, slice๋ฅผ ์์ฑํด์ผ ํ๋ค.// Redux Toolkitconst slice = createSlice({ name: "counter", initialState: { count: 0 }, re..
1 2025.08.18 -
React Native AsyncStorage
AsyncStorage๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์์ ๋ก์ปฌ์ ๊ฐ๋จํ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์๋ ๋น๋๊ธฐ ์ ์ฅ์์ธ AsyncStorage์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. AsyncStorage๊ฐ๋ ๋ก์ปฌ์ ๊ฐ๋จํ ๋ฐ์ดํฐ๋ฅผ ํค-๊ฐ(Key-Value) ์์ผ๋ก ์ ์ฅํ๊ณ ๋ถ๋ฌ์ค๋ ๋น๋๊ธฐ ์ ์ฅ์๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ ๋ด๋ถ์ ๋ฐ์ดํฐ๋ฅผ ์๊ตฌ ์ ์ฅํ๋ ๊ณต๊ฐ์น์ localStorage์ ๋น์ทํ์ง๋ง, ๋น๋๊ธฐ ๋ฐฉ์์ด๋ฉฐ, ๋ค์ดํฐ๋ธ์ ์ต์ ํ๋์ด ์๋ค.์ฑ ์ฌ์คํ ํ์๋ ๋ฐ์ดํฐ๋ฅผ ์ ์งํ ์ ์๋ค.์ฉ๋์ด ํฌ์ง ์์ ๊ฐ๋จํ ๋ฐ์ดํฐ ์ ์ฅ์ ์ ํฉํ๋ค. (์: ํ ํฐ, ์ฌ์ฉ์ ์ค์ , ๊ฐ๋จํ ์บ์ ๋ฑ) ์ค์น๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ 0.60 ์ด์์์๋ ๊ณต์ ํจํค์ง ๏ผ react-native-async-storage/async-storage๋ฅผ ์ฌ์ฉํ๋ค.$..
1 2025.08.11 -
React Native navigate์ replace ๋ฉ์๋์ ์ฐจ์ด (react-navigation)
navigate์ replace ๋ฉ์๋์ ์ฐจ์ด (react-navigation)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค๋น๊ฒ์ด์ (React Navigation)์์ navigate ๋ฉ์๋์ replace ๋ฉ์๋์ ์ฐจ์ด๋ฅผ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ์ฐจ์ดnavigate ๋ฉ์๋๊ธฐ๋ฅ์๋ก์ด ํ๋ฉด์ ์คํ(Stack)์ ์ถ๊ฐํ๋ค.ํ์ฌ ํ๋ฉด ์์ ๋ค๋ฅธ ํ๋ฉด์ ์๋(push) ๋ฐฉ์์ด๋ค. ๊ฒฐ๊ณผ์ด์ ํ๋ฉด์ผ๋ก ๋ค๋ก ๊ฐ๊ธฐ(back) ํ ์ ์๋ค.๋ค๋ก ๊ฐ๊ธฐ ๋ฒํผ(โ)์ด ์๋์ผ๋ก ์๊ธด๋ค. (Stack Navigator ๊ธฐ์ค) ์ฌ์ฉ ์์navigation.navigate('Signup'); replace ๋ฉ์๋๊ธฐ๋ฅํ์ฌ ํ๋ฉด์ ์ ํ๋ฉด์ผ๋ก ๊ต์ฒด(replace)ํ๋ค.์ด์ ํ๋ฉด์ ์คํ์์ ์ ๊ฑฐํ๊ณ , ์ ํ๋ฉด์ผ๋ก ๋ฐ๊พผ๋ค. ๊ฒฐ๊ณผ์ด์ ํ๋ฉด์ผ๋ก ๋ค๋ก ๊ฐ๊ธฐ ํ ์ ์๋ค..
1 2025.08.07 -
Azure Azure App Services ํ๋ก์ ํธ ๋ฐฐํฌ ํ, Cannot find module ์ค๋ฅ ํด๊ฒฐ๋ฒ
Azure App Services ํ๋ก์ ํธ ๋ฐฐํฌ ํ, Cannot find module ์ค๋ฅ ํด๊ฒฐ๋ฒ๋ค์ด๊ฐ๋ฉฐAzure App Services๋ฅผ ์ด์ฉํ์ฌ ํ๋ก์ ํธ ๋ฐฐํฌ ํ, Cannot find module ๊ด๋ จ ์ค๋ฅ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ ๋น ๋ฅด๊ฒ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ๋ฐฉ๋ฒ โ : Kudu Console ์ด์ฉํ๊ธฐ (์๋ ์ค์น)์ ์ ํฌํธ์์ ์์ ์ด ๋ฐฐํฌํ App Service ๋ฆฌ์์ค ํ์ด์ง์ ๋ค์ด๊ฐ๋ค.์ผ์ชฝ ๋ฉ๋ด์์ [๊ณ ๊ธ ๋๊ตฌ(Advanced Tools)] โ [์ด๋(Go)] ์ ํด๋ฆญํ์ฌ Kudu ํ์ด์ง์ ์ ์ํ๋ค. Kudu ํ์ด์ง ์๋จ์ [SSH] ํญ์ ํด๋ฆญํ๋ค. ํฐ๋ฏธ๋์์ ์๋์ ๋ช ๋ น์ ์์๋๋ก ์คํํด์ค๋ค.cdsite/wwwroot npm install --production Azure ..
0 2025.07.12 -
Azure Azure Cosmos DB for MongoDB (RU) ์ฐ๋ํ๊ธฐ
Azure Cosmos DB for MongoDB (RU) ์ฐ๋ํ๊ธฐ๋ค์ด๊ฐ๋ฉฐAzure Cosmos DB for MongoDB (RU) ์ฐ๋ํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค.Next.js 15๋ฅผ ์ด์ฉํ์๋ค. ๋ฐฉ๋ฒAzure Cosmos DB for MongoDB (RU) ์์ฑํ๊ธฐ์ ์ ํฌํธ์์ Azure Cosmos DB for MongoDB (RU) ๋ฆฌ์์ค๋ฅผ ์์ฑํ๋ค. ์ฝ๋ ์์ฑํ๊ธฐNext.js 15๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๋ฅผ ์์ฑํ๋ค. /.env.local (ํ๊ฒฝ ๋ณ์)Azure Cosmos DB For MongoDB (RU) ๋ฆฌ์์ค๋ฅผ ์์ฑํ๋ฉด URI๋ฅผ ํ์ธํ ์ ์๋ค.AZURE_COSMOS_MONGO_URI="YOUR_URI"AZURE_COSMOS_MONGO_DB_NAME="YOUR_DB_NAME" /a..
1 2025.07.11 -
Next.js Google Sheets API ์ฐ๋ ๋ฐฉ๋ฒ
Google Sheets API ์ฐ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐNext.js์์ Google Sheets API๋ฅผ ์ฐ๋ํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒโ Google Cloud Console์์ ์๋ก์ด ํ๋ก์ ํธ ์์ฑํ๊ธฐ์๋์ Google Cloud Console์ ์ ์ํ๋ค.๊ตฌ๊ธ ๊ณ์ ์ผ๋ก ๋ก๊ทธ์ธํด์ผ ํ๊ณ , Google Cloud Console ๊ฐ์ ์ ํด์ผํ ์๋ ์๋ค. Google ํด๋ผ์ฐ๋ ํ๋ซํผ๋ก๊ทธ์ธ Google ํด๋ผ์ฐ๋ ํ๋ซํผ์ผ๋ก ์ด๋accounts.google.com ๊ทธ๋ฆฌ๊ณ ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ค.์๋ก์ด ํ๋ก์ ํธ๋ ํ์ด์ง ์๋จ ์ผ์ชฝ์ ์ฌ๊ฐํ ๋ฒํผ์ ํด๋ฆญํ์ฌ ์์ฑํ ์ ์๋ค.์ด์ ์ ํ๋ก์ ํธ๋ฅผ ์์ฑํ์ง ์์์ ๊ฒฝ์ฐ, ์์์ ํ๋ก์ ํธ ์ด๋ฆ์ด ์์ฑ๋์ด ์๋ค. ์๋ฆผ์ฐฝ์์ ํ๋ก์ ํธ ์์ฑ ์ฌ๋ถ๋ฅผ ํ์ธํ ์ ์๋ค. ..
0 2025.07.06 -
Tailwind CSS Prettier ์ ์ฉํ๊ธฐ
Prettier ์ ์ฉํ๊ธฐ๋ค์ด๊ฐ๋ฉฐTailwind CSS์ Prettier๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. Prettier๊ฐ๋ Prettier๋ ์ฝ๋ ํฌ๋งทํฐ(Code Formatter)๋ก, ๊ธฐ๋ณธ์ ์ผ๋ก CSS, HTML, JS ํ์ผ์ ์ฝ๋๋ฅผ ํฌ๋งทํ ํด์ค๋ค.Tailwind CSS ๋ํ Prettier๋ฅผ ์ด์ฉํ์ฌ ํด๋์ค ์ด๋ฆ์ ์ํ๋ฒณ ์์๋๋ก ์ ๋ ฌํ๊ฑฐ๋, ๋ณด๊ธฐ ์ข๊ฒ ๋ฌถ์ด์ฃผ๋๋ก ํ ์ ์๋ค.๋ํ์ ์ธ Tailwind CSS Prettier ํ๋ฌ๊ทธ์ธ์ผ๋ก prettier-plugin-tailwindcss๊ฐ ์๋ค. ๋ฐฉ๋ฒ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์นํ๊ธฐํฐ๋ฏธ๋์ ์๋ ๋ช ๋ น์ ์คํํ์ฌ prettier๊ณผ prettier-plugin-tailwindcss ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํด์ค๋ค.$ npm install -D prettier pre..
1 2025.06.24 -
Next.js ๊ฐ์ ๋คํธ์ํฌ ๋ง์ ์ฐ๊ฒฐ๋ ๋ค๋ฅธ ์ปดํจํฐ์์ ํ ์คํธ ํ๋ ๋ฐฉ๋ฒ
๊ฐ์ ๋คํธ์ํฌ ๋ง์ ์ฐ๊ฒฐ๋ ๋ค๋ฅธ ์ปดํจํฐ์์ ํ ์คํธ ํ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐNext.js ๋ก์ปฌ ๊ฐ๋ฐ ์๋ฒ๋ฅผ ๊ฐ์ ๋คํธ์ํฌ ๋ง์ ์ฐ๊ฒฐ๋ ๋ค๋ฅธ ์ปดํจํฐ(๋๋ ์ค๋งํธํฐ ๋ฑ)์์ ํ ์คํธํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ(1) ์๋ฒ๋ฅผ ๋ก์ปฌ IP๋ก ๋ฐ์ธ๋ฉํ๊ธฐ๊ธฐ๋ณธ์ ์ผ๋ก next dev๋ localhost (127.0.0.1)์์๋ง ์คํ๋์ด ์ธ๋ถ์์ ์ ๊ทผํ ์ ์๋ค.์ธ๋ถ ๊ธฐ๊ธฐ์์ ์ ๊ทผํ๋ ค๋ฉด ๋ก์ปฌ IP์ ๋ฐ์ธ๋ฉํด์ผ ํ๋ค.์๋์ ๊ฐ์ด ํฐ๋ฏธ๋์์ ๋ช ๋ น์ ์คํํ์ฌ ๋ก์ปฌ ์๋ฒ๋ฅผ ์คํํ๊ฑฐ๋ package.json ํ์ผ์ scripts ๋ถ๋ถ์ ๋ค์๊ณผ ๊ฐ์ด ์์ ํด์ค๋ค.$ next dev -H 0.0.0.0 /package.json"scripts": { "dev": "next dev -H 0.0.0.0"} (2) ๋ก์ปฌ IP ํ์ธ..
0 2025.06.08 -
React Native ๋ก๋ฉ ์คํผ๋(Loading Spinner) ๋ง๋ค๊ธฐ
๋ก๋ฉ ์คํผ๋(Loading Spinner) ๋ง๋ค๊ธฐ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ๊ฐ๋ฐ ์ค, ๊ฐ๋จํ๊ฒ ๋ก๋ฉ ์คํผ๋(Loading Spinner)๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒActivityIndicator ์ด์ฉํ๊ธฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ์์ฒด์ ์ผ๋ก ์ ๊ณตํ๋ ActivityIndicator๋ฅผ ์ด์ฉํ์ฌ ๊ฐ๋จํ๊ฒ ๋ก๋ฉ ์คํผ๋๋ฅผ ๋ง๋ค ์ ์๋ค. โ ๋ก๋ฉ ์คํผ๋ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ๋ก๋ฉ ์คํผ๋๋ ActivityIndicator ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ค ์ ์๋ค.import { View, ActivityIndicator, StyleSheet } from 'react-native';function LoadingOverlay() { return ( );}export default..
0 2025.06.06 -
Three.js Three.js
Three.js๋ค์ด๊ฐ๋ฉฐ์น ๋ธ๋ผ์ฐ์ ์์ 3D ๊ทธ๋ํฝ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๊ฒ ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Three.js์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. Three.js๊ฐ๋ ์น ๋ธ๋ผ์ฐ์ ์์ 3D ๊ทธ๋ํฝ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ๋์์ฃผ๋ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์น์์ 3D ์ฝํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ๊ฑฐ์ ํ์๋ก ์ฌ์ฉ๋๋ ๋๊ตฌ Three.js โ JavaScript 3D Library threejs.org ํต์ฌ ๊ฐ๋ โ Scene (์ฅ๋ฉด)๋ชจ๋ 3D ๊ฐ์ฒด๊ฐ ๋ฐฐ์น๋๋ ๋ฌด๋ ๊ณต๊ฐ๋๋ฌด, ๋น, ์นด๋ฉ๋ผ ๋ฑ ๋ชจ๋ ๊ฐ์ฒด๋ ์ด scene์ ์ถ๊ฐ๋์ด์ผ ํ๋ฉด์ ๋ ๋๋ง๋๋ค.์ฌ๋ฌ ๊ฐ์ฒด๋ฅผ ๊ทธ๋ฃนํํ๊ฑฐ๋ ๋ฐฐ๊ฒฝ์, ์๊ฐ ํจ๊ณผ ๋ฑ์ ์ค์ ํ ์ ์๋ค.const scene = new THREE.Scene();// ๋ฐฐ๊ฒฝ์์ ๊ฒ์ ์์ผ๋ก ์ค์ scene.backg..
4 2025.06.06 -
Azure App Services์ Next.js 15 ๋ฐฐํฌํ๊ธฐ (VS Code, LocalGit)
App Services์ Next.js 15 ๋ฐฐํฌํ๊ธฐ (VS Code, LocalGit)๋ค์ด๊ฐ๋ฉฐ์ ์ (Azure)์ App Services์ Next.js 15 ํ๋ก์ ํธ๋ฅผ ๋ฐฐํฌ ์๋ฃ ํ, ๋ฐฐํฌํ๋ ๊ณผ์ ์ ์ ๋ฆฌํด๋ณธ๋ค.ํฌํธ ๊ด๋ จ ๋ฌธ์ ๋ก ์ฌ๋ฌ๋ฒ์ ๋ฐฐํฌ ์คํจ ์์ ํ, ์ค๋ซ๋์ ๊ตฌ๊ธ๋ง์ ํตํด ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ฐพ์๋ณด๋ค๊ฐ ์ฑ๊ณตํ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ์ฐ์ , ๋ด๊ฐ ์งํํ๋ ํ๋ก์ ํธ์ ๋ฐฐํฌ ํ๊ฒฝ์ ๋ค์๊ณผ ๊ฐ๋ค.Next.js v15.3.2TailwindCSS, JavaScript, TypeScriptNode v20.19.1๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(VS Code)์ Azure ํ์ฅ์ ์ด์ฉํ์ฌ ๋ฐฐํฌ๋ฅผ ์งํํ์๋ค. (LocalGit)GitHub Actions์ ์ด์ฉํ์ฌ ๋ฐฐํฌ๋ฅผ ์งํํ ์๋ ์์ผ๋, ์ด ๋ฐฉ๋ฒ์ ์ฐจํ์ ํฌ์คํ ํด๋ณด๋ ค๊ณ ..
3 2025.06.05 -
React Native BlurView
BlurView๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ์์คํฌ(Expo) ํ๋ก์ ํธ์์ ๋ธ๋ฌ ํจ๊ณผ๋ฅผ ์ฃผ๋ BlurView ์ปดํฌ๋ํธ์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด๋ณธ๋ค. BlurView๊ฐ๋ Expo์์ ์ ๊ณตํ๋ ํ๋ฉด์ ์ผ๋ถ๋ถ์ ๋ธ๋ฌ(Blur, ํ๋ฆผ ํจ๊ณผ)๋ฅผ ์ ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ์๊ฐ์ ์ปดํฌ๋ํธReact Native์์๋ iOS์ Android์ ๋ค์ดํฐ๋ธ ๋ธ๋ฌ ํจ๊ณผ๋ฅผ ์ง์ ๊ตฌํํ๋ ๊ฒ์ด ๋ฒ๊ฑฐ๋กญ๊ธฐ ๋๋ฌธ์, Expo๋ ์ด๋ฌํ ๋ธ๋ฌ ํจ๊ณผ๋ฅผ ์ฝ๊ฒ ์ ์ฉํ ์ ์๋๋ก expo-blur ํจํค์ง๋ฅผ ์ ๊ณตํ๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒBlurView๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ ๋น๋์ค ์์ ์ฌ๋ ค์ผ ํจ๊ณผ๊ฐ ๋ช ํํ๊ฒ ๋ณด์ธ๋ค.iOS์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ง์๋๋ฉฐ, Android๋ ์ผ๋ถ ๊ธฐ๊ธฐ์์ ์ ํ๋ ์ ์์์ ์ฃผ์ํ๋ค.React Navigation ๋ผ์ด..
0 2025.05.15 -
Node.js NVM(Node Version Manager)
NVM(Node Version Manager)๋ค์ด๊ฐ๋ฉฐ๋ ธ๋(Node.js) ๋ฒ์ ๊ด๋ฆฌ์์ธ NVM(Node Version Manager)์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด๋ณธ๋ค. NVM(Node Version Manager)๊ฐ๋ Node.js ๋ฒ์ ์ ์์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๋ ๋ช ๋ น์ค(CLI) ๋๊ตฌNode.js๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์์ด๊ธฐ ๋๋ฌธ์, ํ๋ก์ ํธ๋ง๋ค ๋ค๋ฅธ ๋ฒ์ ์ Node.js๊ฐ ํ์ํ ์ ์๋ค.์ด๋ nvm์ ์ฌ์ฉํ๋ฉด ์์ฝ๊ฒ ๋ค์์ ๊ธฐ๋ฅ์ ์ํํ ์ ์๋ค.์ฌ๋ฌ Node.js ๋ฒ์ ์ค์นํ๊ธฐ์ํ๋ Node.js ๋ฒ์ ์ผ๋ก ์ ํํ๊ธฐํ๋ก์ ํธ์ ๋ง๋ ๋ฒ์ ๋ง ์ฌ์ฉํ ์ ์๋๋ก ์ ํํ๊ธฐ ์ข ๋ฅnvm์ ์ข ๋ฅ์๋ ํ๋ซํผ์ ๋ฐ๋ผ ๋ค์๊ณผ ๊ฐ์ด 2๊ฐ์ง๊ฐ ์กด์ฌํ๋ค.ํ๋ซํผ์ด๋ฆ๋ ํฌ์งํ ๋ฆฌ (์ค์น ๋ฐฉ๋ฒ)MacOS / Linuxnvmhttps://g..
0 2025.05.11 -
React.js useLayoutEffect ํ
useLayoutEffect ํ ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์ useLayoutEffect ํ ์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด๋ณธ๋ค. useLayoutEffect ํ ๊ฐ๋ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๊ธฐ ์ง์ , ์ฆ ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ๊ทธ๋ฆฌ๊ธฐ ์ ์ ์คํ๋๋ ํ ํ๋ฉด์ ๋ณํ๊ฐ ๋ํ๋๊ธฐ ์ ์ ์ด๋ ํ ์ฒ๋ฆฌ๋ฅผ ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒimport { useLayoutEffect } from 'react';useLayoutEffect(() => { // ๋ ์ด์์ ๊ด๋ จ ๋ณ๊ฒฝ, ๋๊ธฐ์ DOM ์กฐ์ ๋ฑ์ ์ฌ์ฉํ๋ค.}, [dependencies]); useEffect ํ ๊ณผ ๋น๊ตํ๊ธฐํญ๋ชฉuseEffect ํ useLayoutEffect ํ ์คํ ์์ ์ปดํฌ๋ํธ ๋ ๋๋ง ํ, ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ๊ทธ๋ฆฐ ๋ค์ปดํฌ๋ํธ ๋ ๋๋ง ์งํ, ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ๊ทธ๋ฆฌ๊ธฐ ..
0 2025.05.10 -
React Native ํ๋ฉด ๊ฐ ๋ฐ์ดํฐ ์ ๋ฌํ๊ธฐ (React Navigation)
ํ๋ฉด ๊ฐ ๋ฐ์ดํฐ ์ ๋ฌํ๊ธฐ (React Navigation)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ํ๋ก์ ํธ์์ React Navigation ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํ์ฌ ํ๋ฉด ๊ฐ ์ด๋(Navigation) ๊ธฐ๋ฅ์ ๊ตฌํํ ๋, ํ๋ฉด ๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ๋ฐ์ดํฐ ์ ๋ฌํ๊ธฐnavigate() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ๋, ๋ ๋ฒ์งธ ์ธ์๋ก ๊ฐ์ฒด๋ฅผ ์ ๋ฌํ๋ฉด ํด๋น ๋ฐ์ดํฐ๋ฅผ ๋ค์ ํ๋ฉด์ ๋ณด๋ผ ์ ์๋ค.navigation.navigate('MealsOverview', { categoryId: itemData.item.id,}); โ ์ฒซ ๋ฒ์งธ ์ธ์: ์ด๋ํ ํ๋ฉด ์ด๋ฆโ ๋ ๋ฒ์งธ ์ธ์ : params ๊ฐ์ฒด (์ํ๋ ๋ฐ์ดํฐ ํฌํจ) ๋ฐ์ดํฐ ์ถ์ถํ๊ธฐ๋ฐฉ๋ฒ โ : route prop ์ฌ์ฉํ๊ธฐMeal..
2 2025.05.10 -
React Native React Navigation ๋ผ์ด๋ธ๋ฌ๋ฆฌ
React Navigation ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ์ฑ์์ ํ๋ฉด ๊ฐ์ ์ ํ์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React Navigation์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. React Navigation๊ฐ๋ React Native ์ฑ์์ ํ๋ฉด ๊ฐ์ ์ ํ(๋ค๋น๊ฒ์ด์ )์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก ๋์์ฃผ๋ ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌReact Native ์ฑ์ ๋ค์ํ ๋ค๋น๊ฒ์ด์ ํจํด(์คํ, ํญ, ๋๋ก์ด ๋ฑ)์ ์ถ๊ฐํ ์ ์๊ฒ ํด์ค๋ค.์น์ ๋ผ์ฐํ (react-router)๊ณผ ๋น์ทํ์ง๋ง, ๋ชจ๋ฐ์ผ ํ๊ฒฝ์ ๋ง์ถ ๊ธฐ๋ฅ(์ค์์ดํ, ์ ์ค์ฒ, ํค๋ ์ ๋๋ฉ์ด์ ๋ฑ)์ ์ ๊ณตํ๋ค. ์ฃผ์ ๊ธฐ๋ฅ๊ธฐ๋ฅ์ค๋ช ์คํ ๋ค๋น๊ฒ์ด์ (Stack Navigation)- A ํ๋ฉด โ B ํ๋ฉด ์ด๋ ๋ฐ ๋ค๋ก๊ฐ๊ธฐ๋ฅผ ํ ์ ์..
0 2025.05.06 -
React Native ๋ค๋ก๊ฐ๊ธฐ ๊ธฐ๋ฅ ๋ง๋ ๋ฐฉ๋ฒ
๋ค๋ก๊ฐ๊ธฐ ๊ธฐ๋ฅ ๋ง๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ ์ฑ์์ ํน์ ์คํฌ๋ฆฐ์์ ๋ค๋ก๊ฐ๊ธฐ ๊ธฐ๋ฅ์ ๋ง๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ๋ฐฉ๋ฒ โ : BackHandler API ์ด์ฉํ๊ธฐ (Android)react-native ํจํค์ง์ BackHandler API๋ฅผ ์ฌ์ฉํด์ ๋ค๋ก๊ฐ๊ธฐ ์ด๋ฒคํธ๋ฅผ ๋ฌด์ํ๋๋ก ์ค์ ํ ์ ์๋ค.์ด ๋ฐฉ๋ฒ์ ์๋๋ก์ด๋(Android)์์ ๋ฌผ๋ฆฌ์ ์ธ ๋ค๋ก๊ฐ๊ธฐ ๊ธฐ๋ฅ์ ๋ง์์ค๋ค.iOS์์๋ ๋ฌผ๋ฆฌ์ ์ธ ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ์ด ์๊ธฐ ๋๋ฌธ์ ๋ณ๋๋ก ์ฒ๋ฆฌํด์ฃผ์ง ์์๋ ๋๋ค.import { useEffect } from 'react';import { BackHandler } from 'react-native';function myApp() { useEffect(() => ..
0 2025.04.17 -
React Native .jsx ํ์ผ ์ฌ์ฉ ํ๋ ๋ฐฉ๋ฒ
.jsx ํ์ผ ์ฌ์ฉ ํ๋ ๋ฐฉ๋ฒ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ํ๋ก์ ํธ์์ .jsx ํ์ผ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค.์ผ๋ฐ์ ์ผ๋ก ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์๋ .js ํ์ผ๋ง ์ธ์ํ๋ฉฐ, .jsx ํ์ผ์ ์ฌ์ฉํ๋ ค๊ณ ํ ๊ฒฝ์ฐ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ๋ฐฉ๋ฒํ์ฌ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ ํ๋ก์ ํธ์ expo-cli ๋ฒ์ ์ ๋ฐ๋ผ ๋ฐฉ๋ฒ โ ๋๋ ๋ฐฉ๋ฒ โก์ ๋ฐฉ๋ฒ์ ๋ฐ๋ผํ๋ค. ๋ฐฉ๋ฒ โ : metro.config.js ํ์ผ์ ํ์ฅ์ ์ถ๊ฐํ๊ธฐํ๋ก์ ํธ ์ต์๋จ ๊ฒฝ๋ก(/)์ ๋ฉํธ๋ก ์ค์ ํ์ผ(metro.config.js)์ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์ถ๊ฐํ๋ค.๋ง์ฝ ํด๋น ํ์ผ์ด ์์ ๊ฒฝ์ฐ ์๋ก ์์ฑํด์ค๋ค. /metro.config.jsmodule.exports = { resolver: { sourceExts: [..
1 2025.04.11 -
React Native StatusBar (react-native, expo-status-bar)
StatusBar (react-native, expo-status-bar)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์ StatusBar์ ์์คํฌ(Expo)์ expo-status-bar์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด๋ณธ๋ค. StatusBar (React Native)๊ฐ๋ ์๋จ ์ํ ํ์์ค(์๊ฐ, ๋ฐฐํฐ๋ฆฌ, ์ ํธ ๋ฑ)์ ์คํ์ผ, ๋ฐฐ๊ฒฝ์, ํ์ ์ฌ๋ถ ๋ฑ์ ์ ์ดํ ์ ์๋ React Native ๋ด์ฅ ์ปดํฌ๋ํธ ์ฌ์ฉ ๋ฐฉ๋ฒimport { StatusBar } from 'react-native';export default function App() { return ( );} ์ฃผ์ ์์ฑ์์ฑ์ค๋ช ํ๋ซํผbarStyle- ํ ์คํธ ์์ ์ค์ โถ default : ํ๋ซํผ๋ณ ๊ธฐ๋ณธ ์์ (iOS ..
0 2025.04.11 -
React Native Platform API
Platform API๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์ Platform API์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด ๋ณธ๋ค. Platform API๊ฐ๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ ์ฑ์ด ์คํ๋๊ณ ์๋ ํ๋ซํผ(iOS, Android, Web ๋ฑ)์ ๊ฐ์งํ๊ณ , ํ๋ซํผ๋ณ๋ก ๋ค๋ฅธ ๋์์ด๋ ์คํ์ผ์ ๊ตฌํํ ์ ์๊ฒ ํด์ฃผ๋ ์ ํธ๋ฆฌํฐ ์ฌ์ฉ ๋ฐฉ๋ฒ๋ถ๋ฌ์ค๊ธฐimport { Platform } from 'react-native'; โ Platform.OSํ์ฌ ์คํ ์ค์ธ ํ๋ซํผ์ ๋ฌธ์์ด๋ก ๋ฐํํด ์ค๋ค.android, ios, web, windows, macosconst platform = Platform.OS;if (platform === 'android') { console.log('Running on Android'..
0 2025.04.11 -
React Native ScrollView
ScrollView๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์ ScrollView ์ปดํฌ๋ํธ์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ScrollView๊ฐ๋ ์คํฌ๋กค ๊ฐ๋ฅํ ์ปจํ ์ด๋๋ก, ์์ ์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์ ํฌ๊ธฐ๋ฅผ ๋์ด์ค ๋ ์คํฌ๋กค(Scroll)์ ํตํด ๋ณผ ์ ์๊ฒ ํด์ฃผ๋ ์ปดํฌ๋ํธ์์ ์์๋ค์ด ๋ง๊ฑฐ๋ ํ๋ฉด๋ณด๋ค ์ปค์ง ๊ฒฝ์ฐ, ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํด์ ๋ณผ ์ ์๋๋ก ๋ง๋ค์ด์ค๋ค. ์ฃผ์ ์์ฑ์์ฑํ์ ์ค๋ช horizontalbooleantrue๋ก ์ค์ ์, ๊ฐ๋ก ์คํฌ๋กค ๊ฐ๋ฅ (๊ธฐ๋ณธ : ์ธ๋ก)contentContainerStylestyle๋ด๋ถ ์ฝํ ์ธ ์ ์ฒด์ ์ ์ฉํ ์คํ์ผshowsVerticalScrollIndicatorboolean์ธ๋ก ์คํฌ๋กค๋ฐ ํ์ ์ฌ๋ถshowsHorizontalScrollIndicato..
0 2025.04.11 -
React Native KeyboardAvoidingView
KeyboardAvoidingView๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์ KeyboardAvoidingView ์ปดํฌ๋ํธ์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด ๋ณธ๋ค. KeyboardAvoidingView๊ฐ๋ ํค๋ณด๋๊ฐ ํ๋ฉด์ ๋ํ๋ ๋ ์ ๋ ฅ ํ๋ ๋ฑ์ UI๊ฐ ๊ฐ๋ ค์ง๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธํค๋ณด๋ ๋ ์ด์์์ด ํ์๋ ๋, ์์ ์์๋ฅผ ์๋ก ์ฌ๋ ค์ ์ ๋ ฅ์ฐฝ์ ๊ฐ๋ฆฌ์ง ์๋๋ก ํด์ค๋ค.Android์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฒ๋ฆฌ๋๋, iOS์์๋ ๊ทธ๋ ์ง ์์ ์ด ์ปดํฌ๋ํธ๋ฅผ ์ด์ฉํ๋ฉด ์ ์ฉํ๋ค. ์ฃผ์ ์์ฑbehaviorํค๋ณด๋๊ฐ ๋ํ๋ ๋์ ๋์ ๋ฐฉ์์ ์กฐ์ ํ ์ ์๋ค.ํ๋ซํผ์ ๋ฐ๋ผ ๋์์ด ๋ค๋ฅผ ์ ์๊ธฐ ๋๋ฌธ์ Platform.OS๋ฅผ ํตํด ์กฐ๊ฑด ๋ถ๊ธฐํด์ ์ฐ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค.์ต์ ์ค๋ช paddingํค๋ณด๋์ ๋์ด๋ง..
0 2025.04.10 -
React Native ์๋ฎฌ๋ ์ดํฐ ๋๋ฐ์ด์ค ์๋ ํ์ ๊ธฐ๋ฅ ์ผ๋ ๋ฐฉ๋ฒ (Expo)
์๋ฎฌ๋ ์ดํฐ ๋๋ฐ์ด์ค ์๋ ํ์ ๊ธฐ๋ฅ ์ผ๋ ๋ฐฉ๋ฒ (Expo)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ์์คํฌ(Expo) ํ๋ก์ ํธ๋ฅผ ์๋ฎฌ๋ ์ดํฐ๋ก ์คํํ ๋, ๋๋ฐ์ด์ค ์๋ ํ์ ๊ธฐ๋ฅ์ ์ผ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ(1) ์ ํ๋ฆฌ์ผ์ด์ ์ค์ ํ์ผ(app.json) orientation ํค ๊ฐ ๋ณ๊ฒฝํ๊ธฐํ๋ก์ ํธ ์ต์๋จ ๊ฒฝ๋ก์ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ค์ ํ์ผ(app.json)์ orientation ํค์ ๊ฐ์ ๋ค์๊ณผ ๊ฐ์ด default๋ก ์ค์ ํด์ค๋ค. /app.json{ "expo": { "name": "section-02", "slug": "section-02", "version": "1.0.0", "orientation": "default", "icon": "./as..
0 2025.04.10 -
React Native Dimensions API
Dimensions API๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์ ๋ด์ฅ API ์ค ํ๋์ธ Dimensions API์ ๋ํด ๊ฐ๋จํ ์ ๋ฆฌํด๋ณธ๋คDimensions API๋ฅผ ์ด์ฉํ์ฌ ํ์ฌ ๋๋ฐ์ด์ค์ ํ๋ฉด ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๋ค. Dimensions API๊ฐ๋ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์์ ๊ธฐ๋ณธ์ผ๋ก ์ ๊ณตํ๋ ๋ด์ฅ API๋๋ฐ์ด์ค์ ํ๋ฉด ํฌ๊ธฐ(๋๋น(Width)์ ๋์ด(Height)) ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐ ์ฌ์ฉ๋๋ค.๋ฐ์ํ UI ๊ตฌ์ฑ์ ํ์ฉํ ์ ์๋ค.์ด๋ฌํ ์ ๋ณด๋ฅผ ์ด์ฉํ์ฌ ํฐํธ ํฌ๊ธฐ(Font Size), ํจ๋ฉ(Padding), ๋ง์ง(Margin) ๋ฑ์ ๋๋ฐ์ด์ค ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์กฐ์ ํ ์ ์๋ค. ์ฌ์ฉํ๋ฉด ์ข์ ๊ฒฝ์ฐ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ง์ถฐ ํฐํธ, ๊ฐ๊ฒฉ, ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ๋๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Que..
0 2025.04.10 -
React Native ํ๋ซํผ ๋ณ๋ก ์์์ ๊ทธ๋ฆผ์ ํจ๊ณผ ๋ฃ๊ธฐ (Android, iOS, Web)
ํ๋ซํผ ๋ณ๋ก ์์์ ๊ทธ๋ฆผ์ ํจ๊ณผ ๋ฃ๊ธฐ (Android, iOS, Web)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์์ ํ๋ซํผ ๋ณ(Android, iOS, Web)๋ก ์์์ ๊ทธ๋ฆผ์ ํจ๊ณผ๋ฅผ ๋ฃ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒโ AndroidAndroid์์๋ elevation ์์ฑ์ ์ฌ์ฉํด์ ์์์ ๊ทธ๋ฆผ์ ํจ๊ณผ๋ฅผ ๋ฃ์ด์ค ์ ์๋ค.style={{ elevation: 5, // ์ซ์๊ฐ ํด์๋ก ๊ทธ๋ฆผ์๊ฐ ์งํด์ง๋ค. backgroundColor: 'white', // ๋ฐฐ๊ฒฝ์ ์์ด์ผ ๊ทธ๋ฆผ์๊ฐ ๋ณด์ด๋ฏ๋ก ๋ฃ์ด์ค๋ค. borderRadius: 10,}} โก iOSiOS๋ elevation ์์ฑ์ด ์ธ์๋์ง ์๋๋ค.๋ฐ๋ผ์ ๋ค์๊ณผ ๊ฐ์ 4๊ฐ์ง ์์ฑ์ ์ฌ์ฉํ์ฌ ์์์ ๊ทธ๋ฆผ์ ํจ๊ณผ๋ฅผ ๋ฃ์ด์ค..
0 2025.04.06 -
React Native ์์ด์ฝ ์ฌ์ฉํ๊ธฐ (๏ผ expo/vector-icons)
์์ด์ฝ ์ฌ์ฉํ๊ธฐ (๏ผ expo/vector-icons)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ์์คํฌ(Expo) ํ๋ก์ ํธ์์ ์์ด์ฝ(Icon)์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค.๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์ ์์คํฌ ํ๋ก์ ํธ์์๋ ๋ณ๋ค๋ฅธ ํจํค์ง๋ฅผ ์ค์นํ์ง ์๊ณ ๋ ์์ด์ฝ์ ๋ฐ๋ก ์ฌ์ฉํ ์ ์๋ค. ๋ฐฉ๋ฒ1๏ธโฃ ํจํค์ง ์ค์นํ๊ธฐ (๏ผ expo/vector-icons)Expo ํ๋ก์ ํธ์์๋ ์ด๋ฏธ ๊ธฐ๋ณธ์ ์ผ๋ก ๏ผ expo/vector-icons ํจํค์ง๊ฐ ํฌํจ๋์ด ์์ด์ ๋ฐ๋ก ์ค์นํ ํ์๋ ์๋ค.ํ์ง๋ง, ํด๋น ํจํค์ง๊ฐ ์ค์น๋์ด ์์ง ์์ ๊ฒฝ์ฐ, ์๋ ๋ช ๋ น์ ์คํํ์ฌ ์ค์นํด์ค๋ค.$ expo install expo/vector-icons 2๏ธโฃ ์์ด์ฝ ์ธํธ ๋ถ๋ฌ์ค๊ธฐ์ฐ์ , ์์ด์ฝ ์ธํธ(Icon Set)๋ฅผ ๋ถ๋ฌ์์ ํด๋น ์์ด์ฝ ์ธ..
0 2025.04.06 -
React Native ์ปค์คํ ํฐํธ ์ฌ์ฉํ๊ธฐ (expo-font)
์ปค์คํ ํฐํธ ์ฌ์ฉํ๊ธฐ (expo-font)๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) ์์คํฌ(Expo) ํ๋ก์ ํธ์์ ์ปค์คํ ํฐํธ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ๋ฐฉ๋ฒ 1๏ธโฃ ํจํค์ง ์ค์นํ๊ธฐํฐํธ ์ฌ์ฉ์ ์ํด expo-font ํจํค์ง๋ฅผ ์ค์นํ๋ค.$ expo install expo-fontexpo install ๋ช ๋ น์ ํ์ฌ Expo ํ๋ก์ ํธ์ ๋ฒ์ ๊ณผ ํธํ๋๋ ํจํค์ง๋ฅผ ์๋์ผ๋ก ์ค์นํด์ค๋ค. 2๏ธโฃ ํฐํธ ํ์ผ ์ค๋นํ๊ธฐํ๋ก์ ํธ์ /assets/fonts ํด๋ ์์, ์ถ๊ฐํ ์ปค์คํ ํฐํธ ํ์ผ์ ๋ฃ์ด์ค๋ค.ํด๋น ํด๋๊ฐ ์์ ๊ฒฝ์ฐ, ์๋ก ์์ฑํด์ค๋ค. 4๏ธโฃ ํฐํธ ๋ถ๋ฌ์ค๊ธฐ (useFonts ํ )ํ๋ก์ ํธ ์ต์๋จ์ ์๋ App.js ํ์ผ์ ๋ค์๊ณผ ๊ฐ์ ์ปค์คํ ํฐํธ๋ฅผ ๋ถ๋ฌ์ค๋ ์ฝ๋๋ฅผ ์ถ๊ฐํด์ค๋ค.use..
0 2025.04.06 -
React Native SafeAreaView
SafeAreaView๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์ SafeAreaView ์ปดํฌ๋ํธ์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด ๋ณธ๋ค. SafeAreaView๊ฐ๋ React Native์์ ํ๋ฉด ์๋จ์ ์ํ๋ฐ๋ ๋ ธ์น์ ๊ฐ์ UI ์์๋ก๋ถํฐ ์ฝํ ์ธ ๊ฐ ๊ฒน์น์ง ์๋๋ก ์๋์ผ๋ก ์์ ํ ์์ญ์ ์ค์ ํด ์ฃผ๋ ์ปดํฌ๋ํธSafeAreaView ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ๊ธฐ๊ธฐ์์ ์ฝํ ์ธ ๊ฐ ์ ์ ํ๊ฒ ๋ฐฐ์น๋๊ณ , ํ๋ฉด ๊ฐ์ฅ์๋ฆฌ๋ ์๋จ์ ์ค์ํ UI ์์์ ๊ฐ๋ ค์ง์ง ์๊ฒ ๋๋ค. ์ฃผ์ ๊ธฐ๋ฅ๋ ธ์น, ์ํ ๋ฐ, ํ๋จ์ ํ ๋ฐ ๋ฑ๊ณผ ๊ฐ์ ํ๋ฉด ์์๊ฐ ์๋ ๋๋ฐ์ด์ค์์ ์ฝํ ์ธ ๊ฐ ๊ฒน์น์ง ์๋๋ก ์๋์ผ๋ก ์ฌ๋ฐฑ์ ์ถ๊ฐํด ์ค๋ค.๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ํด์๋์ ๋ฐ๋ผ ์์ ์์ญ์ ์๋์ผ๋ก ์ธ์ํ๊ณ , ์ด์ ๋ง๊ฒ ์ฌ๋ฐฑ์ ์ ์ฉํด ์ค๋ค. ์ฌ์ฉ ๋ฐฉ๋ฒReact N..
0 2025.04.03 -
React Native Alert API
Alert API๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native)์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ Alert API์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. Alert API๊ฐ๋ ์ฌ์ฉ์๊ฐ ์๋ฆผ์ ๋์ธ ์ ์๋๋ก ๋์์ฃผ๋ API๊ธฐ๋ณธ์ ์ผ๋ก ๋ค์ดํฐ๋ธ(iOS์ Android) ์๋ฆผ ๋ค์ด์ผ๋ก๊ทธ๋ฅผ ํ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.์ฌ์ฉ์๊ฐ ์๋ฆผ์ ํ์ธํ๊ฑฐ๋ ์ทจ์ํ ์ ์๋๋ก ๋ฒํผ์ ๊ตฌ์ฑํ ์ ์์ผ๋ฉฐ, ๋ค์ํ ์ค์ ๋ฐฉ๋ฒ์ ์ง์ํ๋ค. ์ฌ์ฉ๋ฒ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒAlert๋ React Native์์ ๋ด์ฅ๋ ๊ฐ์ฒด๋ก, alert() ๋ฉ์๋๋ฅผ ํตํด ์๋ฆผ์ ๋์ธ ์ ์๋ค.import { Alert } from 'react-native';Alert.alert('์๋ฆผ ์ ๋ชฉ', '์๋ฆผ ๋ฉ์์ง'); ๋ฒํผ ์ถ๊ฐํ๊ธฐAlert๋ ๊ธฐ๋ณธ์ ์ผ๋ก [ํ์ธ] ๋ฒํผ๋ง ์ ๊ณตํ์ง๋ง, ์ฌ๋ฌ ๋ฒํผ์..
0 2025.04.03 -
React Native npm install vs. expo install
npm install vs. expo install๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ(React Native) Expo ํ๋ก์ ํธ์์ ํจํค์ง๋ฅผ ์ค์นํ๋ ๋ฐฉ๋ฒ์ผ๋ก npm install๊ณผ expo install 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค.์ด 2๊ฐ์ง ๋ฐฉ๋ฒ์ ์ฐจ์ด์ ์ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค. ํจํค์ง ์ค์น ๋ช ๋ น์ด1๏ธโฃ npm install$ npm install ํจํค์ง๋ช Node.js ํจํค์ง ๊ด๋ฆฌ ๋ช ๋ น์ดnpm(Node Package Manager)์ ์ฌ์ฉํ์ฌ, ํ๋ก์ ํธ์ package.json ํ์ผ์ ์ ์๋ ํจํค์ง๋ค์ ์ค์นํ๋ค.Expo ํ๋ก์ ํธ์์ npm install์ ์ฌ์ฉํ๋ฉด, Expo์ ๊ด๋ จ๋ ๋ฒ์ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์ง์ ํด๊ฒฐํด์ผ ํ ์ ์๋ค.Expo๊ฐ ์๊ตฌํ๋ ํน์ ๋ฒ์ ์ ํจํค์ง์ ํธํ๋์ง ์์ ์ ์์ผ๋ฏ๋ก ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์ผ..
0 2025.04.03