-
Notifications
You must be signed in to change notification settings - Fork 4
WEEK5 ํ๊ณ
seongjunme edited this page Nov 26, 2021
·
1 revision
-
HTTP์ ๋ํ ๊ทผ๋ณธ์ ์ธ ์ดํด ๋ถ์กฑ
- ์ nginx๋ฅผ ์ฌ์ฉํ๋์ง, ์ https๋ฅผ ์ฌ์ฉํ๋์ง. ์ด๋ค์ ์ฌ์ฉํ ๋์ ์ฐจ์ด์ ์ ๋ฌด์์ธ์ง์ ๋ํด ๋ช ํํ ์ธ์งํ์ง ๋ชปํ๊ณ , ๋ฐ๋ผ์ ํ์์ฑ๋ ์ ๋๋ก ๋๋ผ์ง ๋ชปํ์์
- ํ์ง๋ง ๋ค๋ฅธ ์กฐ๋ค์ ์ด๋ฏธ ๊ทธ ์ค์์ฑ์ ๊นจ๋ซ๊ณ ๋๋ถ๋ถ์ด ์ ์ฉํ ์ํ.
- ํ์ ๋ฐฐํฌ๋ฅผ ๋ด๋นํ๋ฉด์ ์ด๋ฐ๊ณณ์ ๊ด์ฌ์ ๊ธฐ์ธ์ด์ง ์์๋ค๋ ๊ฒ ์์ฒด๊ฐ ์์น์ค๋ฝ๊ณ ์ฃ์กํจ (์ฌ์ค ์ฃ์กํ์ง ์์) >> ?
- ๋ฆฌํฉํ ๋ง ์ฃผ๊ฐ๋์ ํ์ตํ์ฌ ๋ฐ๋์ ๋ฐฐํฌ์ ์ ์ฉํ๋๋ก ํ ์์ .
-
ํ๋ก ํธ์ค๋์ fetch ์์ฒญ ๋ถ๋ฆฌ ๋ฏธํก
- ์ปดํฌ๋ํธ ๋ด๋ถ์์ fetch๋ฅผ ์ง์์ ์ผ๋ก ํธ์ถํ์ฌ api๋ฅผ ์ฌ์ฉ. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ์ ์ด ์์
- ๋์ผํ ํํ์ fetch ํธ์ถ์ด ์ฌ๋ฌ๋ฒ ๋ฐ๋ณตํด์ ์ผ์ด๋จ
- ์ปดํฌ๋ํธ์ ์ญํ ์ด ๋ถ๋ถ๋ช ํด์ง (mvc ์ํคํ ์ณ, flux ์ํคํ ์ณ ์ฐธ๊ณ )
- ๊ธ์ผ ๋ง์คํฐํด๋์ค ํผ๋๋ฐฑ์์๋ ์ธ๊ธ๋์๋ฏ์ด, fetch ์์ฒญ์ ๊ฐ์ํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๊ณ ๋ฏผํ ์์
- ์ปดํฌ๋ํธ ๋ด๋ถ์์ fetch๋ฅผ ์ง์์ ์ผ๋ก ํธ์ถํ์ฌ api๋ฅผ ์ฌ์ฉ. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ์ ์ด ์์
-
๋ฐฑ์ค๋ ์์ธ์ฒ๋ฆฌ ๋ฏธํก
- ๊ธ์ผ ๋ฐ๋ชจ์์๋ ์์๋ฏ์ด, ์๋ํ์ง ์์ ํ์ผ ์ฒ๋ฆฌ์ ๋ํ ๋ฌธ์ ์ ์ด ์ฌ์คํ ๋๋ฌ๋จ
- ์ด์ ๋ฐ๋ผ, ํ์ฅ์๋ฅผ ๋ช ํํ๊ฒ ์ ํํ์ฌ ํ์ผ ์ ๋ก๋ ์์ฒญ์ ๋ฐ์ ์ ์๋๋ก ํ ์์
-
๋ฐฑ์ค๋ api ์ค๊ณ ๋ฏธํก
- ๊ธฐ๋ณธ์ ์ธ rest API ์ค๊ณ๋ก ์ ๋ฐ๋ผ ์ฌ์ฉํ๊ธฐ ์ข์ api์ ์ค๊ณ์ ์๊ฐ์ ํฌ์ํ์ง ์์์
- ์ ๋๋ก ๋ method์ ์ฌ์ฉ์ด ์ด๋ฃจ์ด์ง์ง ์๊ณ ์์. (get, post ๋จ์ฉ.)
- ํนํ, post ๋ฉ์๋๋ฅผ ํ์ฉํด ์ ๋ณด๋ฅผ ๋ฐ์์ค๊ธฐ๋ง ํ๋ ๋ฉ์๋๊ฐ ์กด์ฌํจ
- ์ ๋๋ก๋ ์๋ต์ฝ๋๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์์
- ์ด ๋ชจ๋ ์ ๋ค์ ๊ณ ๋ คํ์ฌ ๋ฆฌํฉํ ๋ง์ ์งํํ ์์
-
์ฌํ๋ ํ์ต์ ๋ฆฌ ๋ถ์กฑ
- ํ์ผ์ฒ๋ฆฌ๊น์ง ์ข์์ผ๋, ์ด ํ์ ํ์ต์ ๋ฆฌ๋ฅผ ๋ค์ ๋ฑํ์ํจ.
- ๋ฆฌํฉํ ๋ง ๊ณผ์ ์์ ๋ด๊ฐ ํด์ผํ ์ผ์ด ๋ฌด์์ธ์ง ๋ช ํํด์ก์ผ๋, ์ด ์ฃผ๊ฐ์ ํ์ตํ๊ฒ๋ค์ ๋ฐ๋์ ์ ๋ฆฌํ ์์
- ์์
-
์์ฌ์ด ์
- React์์ API ์ฌ์ฉ๊ณผ Socket์ฌ์ฉ์ ํผ์ฉํด์ ๋นํจ์จ์ ์ธ ํต์ ์ ๋ง๋ค์ด ๋์ ๊ฒ
- Socket์ ์ด์ด๋์์ผ๋ฉด Socket์ผ๋ก๋ง ํต์ ํ๊ฒ ๋ฐ๊พธ๋๊ฒ ์ข์ ๊ฒ ๊ฐ์.
- Socket์ ์ฌ์ฌ์ฉ์ฑ์ด ๋๋ฌด ๋จ์ด์ง๊ฒ ๊ตฌํํจ
- ์๋ก์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ ๋๋ง๋ค ๊ธฐ์กด์ Socket์ ํ์ฉํ์ง ๋ชปํ๊ณ ์๋ก์ด ์ด๋ฒคํธ๋ฅผ ๊ณ์ ์์ฑํจ
- ๋ง๋ค์ด ๋์ ์์ผ์ ๋ ์ด์ฉํ ์ ์๊ฒ ๋ง๋๋๊ฒ ์ข์ ๊ฒ ๊ฐ์
- ๋ฐฑ์๋, ํ๋ก ํธ์๋ ๊ฒฝ๊ณ๊ฐ ์ ๋งค
- Socket ํต์ ์ ๋ง์ด ์ฌ์ฉํ๋๋ฐ Backend์์ ํจ์จ์ ์ผ๋ก ์ฝ๋๋ฅผ ์ง๋ ค๊ณ ๊ณ ๋ฏผ์ ํ๊ฑฐ๋
- ํ๋ก ํธ์์ React ์ฌ์ฉ์ ์ปค์คํ ํ ๊ฐ์๊ฒ์ ์ ๋ง๋ค์ด์ Socket๊ด๋ฆฌ๋ฅผ ํ์ด์ผ ํ๋๋ฐ
- ์ด๋ ์ ๋ ์๋๊ฑฐ ๊ฐ์์ ์์ฌ์
- ํ์
์คํฌ๋ฆฝํธ ์ฌ์ฉ
- ํ์ ์ ํจ์จ์ ์ผ๋ก ์ฌ์ฉํ์ง ๋ชปํ๊ณ any๋ฅผ ๋๋ฌด ๋จ๋ฐํจ
- React์์ API ์ฌ์ฉ๊ณผ Socket์ฌ์ฉ์ ํผ์ฉํด์ ๋นํจ์จ์ ์ธ ํต์ ์ ๋ง๋ค์ด ๋์ ๊ฒ
-
์ํ ์
- Reducer๋ฅผ ์ฌ์ฉํ์ฌ API ํธ์ถํ๋ ๋ถ๋ถ์ ์ปดํฌ๋ํธ์์ ๋นผ๋๋ค.
- ์จ์ง๊ฐ์ ๋ง์๋ค.
- ๊ฐ์ reflow ๋ฐฉ์ง๋ ๊ฒ์ ์ฟผ๋ฆฌ ๊ฐ์ ๋์ ์ ์๋ํด๋ณด์์ง๋ง, ์ ๋๋ก ๊ฐ์ ์ด ๋๋์ง ํ
์คํธ๋ฅผ ํด๋ณด์ง ๋ชปํจ.
- ๊ฐ์ reflow๊ฐ ์ ์ฑ๋ฅ ์ ํ๋ฅผ ์ผ์ผํค๋์ง ๊ตฌ์ฒด์ ์ผ๋ก ํ์ต์ ํ์ง ๋ชปํจ.
- fulltext search๊ฐ ์ ๋น ๋ฅธ์ง ์ข ๋ ์ดํด๊ฐ ํ์ํ ๊ฒ ๊ฐ์
- ๋ฆฌ์กํธ์ ๋ํ ๊น์ ์ดํด๊ฐ ๋ถ์กฑํ ๊ฒ ๊ฐ์
- ๋ฆฌ์กํธ์ ๊ฒฝ๊ณ ๋ฌธ๊ตฌ๋ฅผ eslint๊ฐ ์๋ ค์ฃผ๋๋๋ก ์์ ํ๋ค ๋ณด๋, ์ด ์ค๋ฅ๊ฐ ์ ์๊ธฐ๋์ง์ ๋ํด ๊น์ ์ดํด๊ฐ ๋ถ์กฑํ ๊ฒ ๊ฐ์
- ๋์๊ฒ ์ต์ํ ๊ธฐ๋ฅ(hook)๋ง ์ฌ์ฉํ๋ ๊ฒ ๊ฐ๋ค. ์ปค์คํ ํ ์ด๋ ๊ธฐํ ๋ถ๊ฐ ๊ธฐ๋ฅ์ ์ข ๋ ํ์ฉํด๋ณด๋ฉด ์ข์ ๊ฒ ๊ฐ์
- ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ง๋ง ์ฌ์ฉํ์ง ์์ ๊ธฐ๋ถ์ด ๋ฆ
- ์ ๋ค๋ฆญ ๊ฐ์ ๊ธฐ๋ฅ์ด ์์ง๋ง ์ ํ ๊ณ ๋ คํด๋ณด์ง ์์
- ๋ณด๋ค ์ฌ์ฉ์์๊ฒ ์ ์ตํ ๋ฐฉํฅ์ผ๋ก ๋์์ธ์ ํด๋ณผ ์ ์์์
- ๋ค๋ง ์ฌ์ฉ์์ ํด์๋๋ฅผ ๊ณ ๋ คํ์ง ๋ชปํ ๊ฒ์ด ์์ฌ์
- viewport๋ฅผ ์ด์ฉํ ํฌ๊ธฐ ์กฐ์ ์ด๋ ๋ฐ์ํ ๋์์ธ ๋ฑ์ ๋ชฉํ
- css์ ์
- ์์ฑํด๋ ์ปดํฌ๋ํธ์ ์ผ๋ถ๋ฅผ ๋ถ๋ฆฌ, ์ฌ์ฌ์ฉํ ์ ์์์
- ์ฝ๋ ์์ฒด๋ฅผ ๋ ๊ฒ์ผ๋ก ๊ฐ์ ธ๋ค ์ด ๊ฒ์ ์์ฌ์
- ์ฌ์กฐ๋ฆฝ์ ํ ์ ์๊ฒ๋, ์์ ํ ๋ถ๋ฆฌ๋ ํ๋์ ์ปดํฌ๋ํธ๋ก ํด๋ณผ ๊ฒ
- ๋ฆฌ์กํธ๋ฅผ ๋ ์ ์จ๋ณด์
- react hook์ ์ ๋๋ก ์ดํดํด ์ ํฉํ ์ฌ์ฉ์ ํด๋ณผ ๊ฒ
- typescript docs๋ฅผ ์ ๋ ํ์ฌ ์ต์ ์ ํ์ฉ์ ํด๋ณผ ๊ฒ
- ํด๋ ๊ตฌ์กฐ ๋ฐ ์คํ์ผ์ํธ๋ฅผ ๊ธฐ๋ฅ์ ๋ง๊ฒ ์ ๊ตฌ๋ถํ ๊ฒ