| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- ์๊ณ ๋ฆฌ์ฆ
- injection๊ณต๊ฒฉ
- ๋์์ธํจํด
- ์๋ฐ
- ํฌ๋ก์ค์ฌ์ดํธ ์คํฌ๋ฆฝํธ
- ํฐ์คํ ๋ฆฌ์ฑ๋ฆฐ์ง
- React
- Node.js
- db์ ๋ต
- dockerhub
- docker
- ์ฝํ
- oauth
- Jenkins
- CICD
- java์ฑํ
- node.js mysql ์ฐ๋
- MySQL
- Personal Access Token
- Java
- db์ํคํ ์ณ
- ์ฟ ๋ฒ๋คํฐ์ค
- SpringBoot
- ๋ ผ๋ธ๋กํน
- @scheduler
- GoogleLogin
- ์ค๋ธ์
- spring
- ์ฝ๋ฉํ ์คํธ
- spring scheduler
- Today
- Total
๋ชฉ๋กReact (3)
<Hello Hosung๐/>
1. ํ๋ก์ ํธ ๋ชฉํ์ด๋ฒ ํฌ์คํ ์์๋ Expo + React Native๋ฅผ ์ด์ฉํด ์ฑ ํ๋ก์ ํธ๋ฅผ ์์ ํ ์ด๊ธฐํํ๊ณ ,ํ์ ์๋ ํ์ผ ์ ๊ฑฐ + ํด๋ ๊ตฌ์กฐ์ ์ฃผ์ ํ์ผ ์ญํ ์ ์ดํดํ๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค.์คํ๋์ ํ๋ฉด์ ์ ์ธํ๊ณ , ์ด๋ณด์๊ฐ ํด๋/ํ์ผ ์ญํ ์ ์ดํดํ ์ ์๋๋ก ์ ๋ฆฌํฉ๋๋ค. 1๏ธโฃ ํ๊ฒฝ ์ค๋น1-1. Node.js ์ค์น ํ์ธnode -vnpm -v ๊ถ์ฅ Node.js ๋ฒ์ : LTS (์: v20.x)๋ง์ฝ ์ค๋ฅ๊ฐ ๋๋ฉด nvm ์ฌ์ฉํ์ฌ ์ค์น:nvm install --ltsnvm use --lts 1-2. Expo CLI ์ค์น ํ์ธ์ต๊ทผ Expo๋ npx create-expo-app ์ฌ์ฉ์ ๊ถ์ฅํฉ๋๋ค.npx create-expo-app --version ๊ธฐ์กด์ expo-cli ์ค์น๋์ด ์์ด๋ ์ด์ npx ์ฌ..
1. ๋ฆฌ์กํธ ์ฑ๋ฅ ์ต์ ํ๊ฐ ์ค์ํ ์ด์ ๋ฆฌ์กํธ๋ก ๋ง๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ํฌ๊ณ ๋ณต์กํด์ง์๋ก ๋ ๋๋ง ์ฑ๋ฅ์ด ์ค์ํด์ง๋๋ค. ํ์ด์ง๊ฐ ๋๋ฆฌ๊ฒ ๋ก๋ฉ๋๊ฑฐ๋ ๋ถํ์ํ ์ปดํฌ๋ํธ๊ฐ ๊ณ์ ๋ฆฌ๋ ๋๋ง๋๋ ๊ฒฝ์ฐ, ์ฌ์ฉ์ ๊ฒฝํ(UX)์ด ํฌ๊ฒ ์ ํ๋ ์ ์์ต๋๋ค. ์ฑ๋ฅ ์ต์ ํ๋ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์ ์๋๋ฅผ ๋์ฌ์ค๋๋ค.2. ๋ถํ์ํ ๋ ๋๋ง ๋ฐฉ์ง๋ฆฌ์กํธ๋ ์ํ(state)๋ ์์ฑ(props)์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ๋ ๋๋งํฉ๋๋ค. ํ์ง๋ง ๋ชจ๋ ๋ฆฌ๋ ๋๋ง์ด ํ์ํ ๊ฒ์ ์๋๋๋ค. ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ๋ฐฉ์งํ๋ ๋ช ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.React.memo: ํจ์ํ ์ปดํฌ๋ํธ์์ props๊ฐ ๋ณ๊ฒฝ๋์ง ์์ผ๋ฉด ๋ฆฌ๋ ๋๋ง์ ๋ง์ ์ ์์ต๋๋ค.const MyComponent = React.memo(({ data }) => {..
1. ๋ฆฌ์กํธ ์๊ฐ๋ฆฌ์กํธ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ผ๋ก UI๋ฅผ ๊ตฌ์ฑํ๋ฉฐ, ์ํ ๊ด๋ฆฌ์ ๋ฐ์ดํฐ ํ๋ฆ์ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค. 2. JSX (JavaScript XML)JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์์์ HTML๊ณผ ๋น์ทํ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ ๋ฌธ๋ฒ์ ๋๋ค.const element = Hello, world!; * JSX๋ React.createElement๋ก ๋ณํ๋ฉ๋๋ค. 3. ์ปดํฌ๋ํธ (Component)๋ฆฌ์กํธ์์ UI๋ ์ปดํฌ๋ํธ๋ก ๋๋์ด ๊ด๋ฆฌ๋ฉ๋๋ค.์ปดํฌ๋ํธ๋ ํจ์ํ ์ปดํฌ๋ํธ์ ํด๋์คํ ์ปดํฌ๋ํธ๋ก ๋๋ฉ๋๋ค. ํจ์ํ ์ปดํฌ๋ํธfunction Welcome(props) { return Hello, {props.name};} ํด๋์คํ ์ปดํฌ๋ํธclass..