Slack ํด๋ก ์ฝ๋ฉ[์ค์๊ฐ ์ฑํ with React]
Slack ์๋น์ค๋ฅผ ๋ฐ๋ผ ๋ง๋ค๋ฉฐ ๋ณธ๊ฒฉ์ ์ธ ๋ฆฌ์กํธ ์น ๊ฐ๋ฐ์ ์์ํด๋ด ์๋ค! ํ์๊ฐ์ , ๋ก๊ทธ์ธ, ๋ฐฉ ๋ง๋ค๊ธฐ, ์ค์๊ฐ ์ฑํ ๊น์ง!
์๊ฐ์ 2,896๋ช
๋์ด๋ ์ค๊ธ์ด์
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ํด๊ฒฐ
๊ธฐ๋ณธ ์ ํ ๊ณผ ๊ด๋ จํ์ฌ
settings/ts ํด๋ front๋ก ๋ฐ๊ฟ์ ์งํํ ๊ฒฝ์ฐ ์ ํ ๊ฐ์ ํ๋๋ ๋ค์ ํ์์์ด ๋ฐ๋ก ์น์ 2๋ถํฐ ์งํํด๋ ๋๋๊ฑด๊ฐ์?
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ์ํธ
ใป
7๋ฌ ์
0
82
1
- ๋ฏธํด๊ฒฐ
์ด๊ธฐ ์ ํ back๊ณผ front๋ง ๋จ๊ฒจ๋๊ณ ๋ค ์ง์ด ํ ์งํ ๋ฐฉ๋ฒ
๊ฐ์ข์์ ์ธ๊ธํ๋๋ก ์ง์ ์ธํ ํ๊ธฐ๋ณด๋ค๋ ๊ทธ๋ฅ settings/ts ํด๋ ํด๋ก ๋ฐ์์ ํ์๋ ๊ฒ์ ์ถ์ฒ๋๋ฆฝ๋๋ค. ์ง์ ์ธํ ํ๊ธฐ์๋ ๋ฒ์ ์ด ์
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ์ํธ
ใป
7๋ฌ ์
0
81
2
- ๋ฏธํด๊ฒฐ
focus ์์๋ง ํ๋ฉด ์ ๋ฐ์ดํธ ๋๋ ์ด์ + ํด๊ฒฐ๋ฐฉ๋ฒ
์น์์ผ ์ปค๋ฅ์ ์ ์ ์ง๋์ด ๋ฐ์ดํฐ๊น์ง ๋ค์ด์ค์ง๋ง view update๋ ๋ธ๋ผ์ฐ์ focus๋์ด์ผ๋ง ๋ฐ์ํ๋๊ฑธ ๋ณด์ฌ์ฃผ์ จ๋๋ฐ์ ์์ธ๊ณผ ๋์ค์ ์ธ ํด
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉEric J
ใป
9๋ฌ ์
0
120
2
- ๋ฏธํด๊ฒฐ
useEffect ๊ฐ์ ๊ด๋ฆฌ
useEffect๊ฐ ์๋ชป์ง๋ฉด ๋๋ฒ๊น ์ด ๊ณจ์น์ํ์ ๊ด๋ฆฌ์ ์ ๊ฒฝ์ ์ฐ๋๋ฐ์. ์ ๋ก์ด๋์ useEffect ์ฌ์ฉํจํด์ด ๊ถ๊ธํฉ๋๋ค d
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉEric J
ใป
9๋ฌ ์
0
99
2
- ๋ฏธํด๊ฒฐ
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์น ๋ฐฉ๋ฒ
๊ฐ์์์ ๋ง์์ฃผ์๋ ๊ฒ ์ฒ๋ผ ๊ฐ๊ธ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐ๊ณ ์ถ์๋ฐ์. ์ ๊ฐ ๊ฒฝ๋ ฅ์ด ์งง์์์ธ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์น์ ์ ๋ฅผ ๋จน์ต๋๋ค <p style="text
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉEric J
ใป
9๋ฌ ์
0
91
2
- ๋ฏธํด๊ฒฐ
ํจ์ ์ ์ ํจํด
react ๊ฐ๋ฐํ๋ค๋ณด๋ฉด ๋๋ถ๋ถ์ ํ์ผ์์ export default ํ๋๋ง์ ํ๊ฒ ๋๋๋ฐ์. ์๋ 2๊ฐ์ง ํจํด ์ค 2๋ฒ์ ์ฃผ๋ก ์ฌ์ฉํ์๋ ๊ฒ ๊ฐ์์ ์ด์ ๊ฐ ์์ผ์ ์ง ๊ถ๊ธํฉ๋๋ค<p style="tex
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉEric J
ใป
9๋ฌ ์
0
62
1
- ๋ฏธํด๊ฒฐ
npm run dev ์๋ฌ
npm run dev์ ์๋ก์ด ์๋ฌ๊ฐ ๋ฐ์ํ์ฌ ์ฌ์ง๋ฌธ ๋๋ฆฝ๋๋ค.<a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:3090/L
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉtaei
ใป
์ผ ๋ ์
0
147
3
- ๋ฏธํด๊ฒฐ
npx webpack ํ ์๋ฌ
๊ฐ์๋ฅผ ํด๋ก ๋ฐ์ ํ, /sleact/setting/ts ๊ฒฝ๋ก์์ npm i ํ npx webpack์ ์ ๋ ฅํ๋ฉด ์๋์ ๊ฐ์ด ์๋ฌ๊ฐ ๋์ต๋๋ค.๋ค๋ฅธ ์ปดํจํฐ๋ก ํ์๋๋ ์๋ ๋์ง๋ง, ์ ๊ฐ ์ฌ์ฉ์ค์ธ ์ปดํจํฐ์์๋ ์๋๋
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉtaei
ใป
์ผ ๋ ์
0
169
2
- ํด๊ฒฐ
'void' ํ์ ์์ truthiness๋ฅผ ํ ์คํธํ ์ ์์ต๋๋ค.ts(1345)
<img src="https://cdn.inflearn.com/public/files/posts/3681d6d8-9ec1-454d-af66-d73e5f1d64af/640990e5-b89b-4e1d-8c15-e50409d87768.png" media-type="img"
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฏผ์
ใป
0
134
2
- ๋ฏธํด๊ฒฐ
์ฌ์ฉ์ ๊ฐ์ ์ ์๋ฌ๋ฐ์ (TypeError: Cannot read properties of null (reading 'addMembers')
์๋ ํ์ธ์.ํ์ฌ ์ฌ๋ฆฌ์กํธ, 'ํ์๊ฐ์ ํ์ด์ง ๋ง๋ค๊ธฐ' ํํธ๋ฅผ ๋ฃ๊ณ ์์ต๋๋ค.ํ์๊ฐ์ ์ ๋๋ฅด๋ฉด,'TypeError: Cannot read properties o
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฏผ์
ใป
1
152
2
- ๋ฏธํด๊ฒฐ
์ด๊ธฐ์ธํ ์ค packge.json ์๋ฌ๋ ์
ํด๋์ ์๋ ํจํค์ง๋ค์ด ๋ชจ๋ ์๋ฌ์ธ๋ฐ axios์ชฝ์ธ๊ฑฐ ๊ฐ์๋ฐ ์ด๋ป๊ฒ ํด๊ฒฐํ๋ฉด๋ ๊น์..<img src="https://cdn.inflearn.com/public/files/posts/562619a1-9028-4a12-8b27-7b2edf1cb54d/6280b
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ์ต์ฃผ์
ใป
0
148
2
- ๋ฏธํด๊ฒฐ
CORS - Access-Control-Allow-Origin ๋๋ฝ ๋ฌธ์
๊ฐ์ข๋ณด๋ฉด์ proxy ์ค์ ํ๊ณ back ํด๋ npm run dev, alecture ํด๋ npm run build ํ๋๋ฐ ํ์๊ฐ์ ๋ฒํผ์ ๋๋ฅด๋ ์ฝ์์ฐฝ์ ์๊ฐ์ฐจ๋ก ๊ณ์ Access to XMLHttpRequest at '<a target="_blank
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉnayoung hwang
ใป
0
408
3
- ๋ฏธํด๊ฒฐ
๋ก๊ทธ์ธ ํ์ด์ง ๋ฌดํ ์๋ก๊ณ ์นจ ํ์
์๋ ํ์ธ์ ์ด๋ ๋ ๊ฐ์๊ธฐ ๋ก๊ทธ์ธ ํ์ด์ง๊ฐ ๋ฌดํ ์๋ก๊ณ ์นจ ํ์์ด ๋ฐ์ ๋ฉ๋๋ค ๋ฐฑ์๋ ์ชฝ์๋ ๋ก๊ทธ /api/users 304๋ก ์๋ก๊ณ ์นจ๋ง๋ค ๊ณ์ ์๋ตํด์ค์ ๋ฌธ์ ๊ฐ ์๋ ๊ฒ ๊ฐ๊ณ ํ๋ฐํธ์ชฝ ๋ฌธ์ ์ธ ๊ฒ
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉdeusfm
ใป
0
558
2
- ๋ฏธํด๊ฒฐ
Module not found: Error: Can't resolve './App' ์๋ฌ
์๋ ํ์ธ์. ๊ฐ์์์ ๋ฐฐ์ด ๋ด์ฉ ์์ฉํด์ ์ฌ์ด๋ ํ๋ก์ ํธ ๋ง๋๋ ์ค์ธ๋ฐ Module not found: Error: Can't resolve './App' in '/Users/taetae/Docume
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฐ์น
ใป
0
936
1
- ๋ฏธํด๊ฒฐ
๋ฐฐํฌ ๋ฐฉ๋ฒ
์ ๊ฐ ๋ฐฑ์๋ ๊ฐ์๋ ์๊ฐํ ์ ์ด ์์ด์์, ๋์ ๋ ธ๋js ๊ต๊ณผ์ ์ฑ ์ ๊ตฌ๋งคํด์ ๊ฐ์ง๊ณ ์๋๋ฐ..์ฐ์ ํ๋ก ํธ๋ ๋คํธ๋ฆฌํ์ด๋ก ๋ฐฐํฌ ์๋ฃํ์ต๋๋ค<a target="_blank" rel="noopener noreferrer nofollow" href=
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฃจ๋ฃธ
ใป
0
277
2
- ๋ฏธํด๊ฒฐ
npm run dev ์ ๋น๋๊ฐ ๋งค์ฐ ๋๋ ค์ก์ต๋๋ค
์๋ ํ์ธ์ ์ ๋ก์ด๋์ ์ npm run dev ํ ๋๋ง๋ค ๋น๋ ์๋๊ฐ ์์ฒญ ๋๋ ค์ง๋ ๊ฒ ๊ฐ์์์์๋ ๋จ๊ณ์์๋ง ํ 5๋ถ ์์ด์ผ success ๋จ๋๋ผ๊ตฌ์<img src="https://cdn.inflearn.com/public/f
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฃจ๋ฃธ
ใป
0
956
2
- ํด๊ฒฐ
alias ๊ฒฝ๋ก ์ค์ ์ค๋ฅ
์๋ ํ์ธ์ ์ ๋ก์ด๋components ์ alias ๊ฒฝ๋ก๊ฐ ์ค๋ฅ๊ฐ ๋์์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค์ ๋ src ํด๋๋ฅผ ์ถ๊ฐํด์ ํ๋ฒ ๋ ๊ฐ์ผ ๊ตฌ์กฐ์์ ์ด์ ๋ง๊ฒ alias ๊ฒฝ๋ก๋ฅผ ์ธํ ํ๋๋ฐ์import { TextField, Button } f
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฃจ๋ฃธ
ใป
0
440
2
- ๋ฏธํด๊ฒฐ
fetcher ํจ์์ data ๊ฐ์ด ๋๋ฒ ์ฐํ๋ ์ด์
Login.tsx์์ swr๋ก ํธ์ถํ users์ data ๊ฐ์ return ์ง์ ์ console ๋ก๊ทธ๋ก ์ฐ์ด๋ดค๋๋ฐ์๋คํธ์ํฌ ํญ์์๋ users ์์ฒญ์ ํ๋ฒ ๋ฐ์ ์์๋๋ฐundefined์ false๊ฐ ์ฐ๋ฌ์์ ์ฐํ๋๋ผ๊ตฌ์๋ค๋ฅธ ์ง๋ฌธ
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฃจ๋ฃธ
ใป
0
259
1
- ํด๊ฒฐ
์ ๋ค๋ฆญ ์ง๋ฌธ
์ปค์คํ ํ ์์ ์ฌ์ฉ๋ ์ ๋ค๋ฆญ์ ๋ํด์ ๊ณต๋ถํ๋ค๊ฐ ๊ถ๊ธํ๊ฒ ์๊ฒจ์์.<a target="_blank" rel="noopener noreferrer nofollow" href="https://inpa.tistory.com/entry/TS-%F0%9F%93
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉ๋ฃจ๋ฃธ
ใป
0
205
2
- ๋ฏธํด๊ฒฐ
ts-node ๋์ tsx ์ฌ์ฉ์ฌ๋ถ
์ง๋ฌธ: 1.ts-node๋ก ์ด์ด๋๊ฐ๋ ๊ด์ฐฎ์๊น์?2. outdated ๋ช ๋ น์ด ์ณ๋ณด๋ ๋ฒ์ ์ด ๊ฐ์์์ ํ๋๊ฐ ์ถ๊ฐ์ค์นํ์ง๋ง, ์ด์ ๋นจ๊ฐ ๊ธ์จ๋ก 10๊ฐ ์ ๋ ๋ค ๋ฒ์ ์ ๊ทธ๋ ์ด๋๋ฅผ ์๊ตฌํ์ต๋๋ค.์ ๊ฐ ๊ณ ์ณ๋๊ฐ๋ฉด์ ๋์๊ฐ๋ณด๋ฉด๋ ์ง ๊ถ๊ธํฉ๋๋ค.
react์นํฉtypescriptsocket.iobabelํด๋ก ์ฝ๋ฉelecch
ใป
0
365
1






