Rest api ์นด์นด์ค ๋ก๊ทธ์ธ ๋ฐฉ๋ฒ ์ฌ์ฉFE : ์นด์นด์ค๋ก๋ถํฐ ์ธ๊ฐ์ฝ๋๋ฅผ ๋ฐ๊ณ ํด๋น ์ ๋ณด๋ฅผ ๋ฐฑ์๋๊ฐ ์์ฒญํ api๋ก ์ ๋ฌํด์ฃผ๋ฉด ๋! ๋ฐฑ์๋์ ์ธ๊ฐ ์ฝ๋๊ฐ ์ ์์ ์ผ๋ก ์ ๋ฌ์ด ๋์๋ค๋ฉด ๋ฐฑ์๋์์๋ ์๋ต๊ฐ์ผ๋ก ํ ํฐ์ ๋ฐ๊ธํด์คํด๋น ํ ํฐ์ ๋ฐ์์์ ์น ๋ธ๋ผ์ฐ์ ์ ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์
: ๋ฌดํ ์คํฌ๋กค์ ์ฌ๋ฌ๊ฐ์ง ๋ฐฉ๋ฒ์ด ์์ง๋ง, ๋๋ react-infinite-scroll-component๋ฅผ ์ฌ์ฉํด์ ๊ตฌํ์ ํ๋ค: React์ ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํ๋๋ฐ ์ฌ์ฉ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น : npm install react-infinite-scroll-c
'text' is missing in props validation react/prop-types ์์ธ : ์ปดํฌ๋ํธ๊ฐ ๊ธฐ๋ํ๋ prop์ ํ์ ์ด ๋ฌธ์์ด ํ์ ์ด ์์ผํ๋๋ฐ ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ๊ฒฝ๊ณ ๊ฐ ๋ฐ์ํ๋ค ํด๊ฒฐ : ์ปดํฌ๋ํธ์ text์ ํ์ ์ ์ ํด์ฃผ๋ฉด์ ํด๊ฒฐ'prop-
๋ฐ์ : ๋ก์ปฌ์์ ๋ธ๋์น๋ฅผ ์๋ก๋ฐ์ ์์ ํ push๋ฅผ ํด์ฃผ๋ ค๊ณ ํ๋๋ฐ ์๋ฌ ๋ฐ์์์ธ : ์๊ฒฉ์ ์๋ ํ๊ฒฝ์์ ์ ๋๋ก pull์ด ๋์ง ์์์ ๊ทธ๋ ๋คํด๊ฒฐ : main ๋ธ๋์น์ ํ์ฌ ๋ด ๋ธ๋์น์์ ๊ฐ pull์ ํ ํ push ํ๋ฉด ๋จ!
'text' is missing in props validation react/prop-types ์์ธ : ์ปดํฌ๋ํธ๊ฐ ๊ธฐ๋ํ๋ prop์ ํ์ ์ด ๋ฌธ์์ด ํ์ ์ด ์์ผํ๋๋ฐ ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ๊ฒฝ๊ณ ๊ฐ ๋ฐ์ํ๋ค ํด๊ฒฐ : ์ปดํฌ๋ํธ์ text์ ํ์ ์ ์ ํด์ฃผ๋ฉด์ ํด๊ฒฐ'prop-
syntaxerror: unexpected end of json input์์ธ : ์๋ฒ์์ ๋ฐ์ ์๋ต์ด JSON ํ์์ด ์๋๊ฑฐ๋ ๋น์ด์๋ ๊ฒฝ์ฐ (๋ฐฑ์๋์ ์๋ชป์ด ํผ)ํด๊ฒฐ : http ์ํ๋ก ๋ณด๋ด๋ ๊ฑฐ๋ฅผ ์๋ต์ ๋ณด๋ด์ฃผ๋ ํด๊ฒฐ๋จ(๋ฐฑ์๋์์ ํด๊ฒฐํด์ ์์ธํ๊ฑด ๋ชจ๋ฅด์ง๋ง ์ฑ๊ณต
๊ธ ๋ชฉ๋ก์ ๋ถ๋ฌ์์ ํ ํ์ด์ง๋น 15๊ฐ์ฉ ๋ชฉ๋ก์ ๋ณด์ฌ์ฃผ๊ณ ๋ค์ํ์ด์ง๋ก ๋์ด๊ฐ๊ฒ๋ ํ์ด์ง๋ค์ด์ ๊ตฌํArray.from () : ๋ฐ๋ณต ๊ฐ๋ฅํ๊ฑฐ๋ ๋ฐฐ์ด๊ณผ ๊ฐ์ ๊ฐ์ฒด์์ ์์ ๋ณต์ฌ๋ก ์ ์ธ์คํด์ค๋ฅผ ๋ง๋ฌ ์์
์ ์ ์น์ฌ์ดํธ ํธ์คํ ์ด ๊ฐ๋ฅ๐ ์ ์ ํ์ผ : ์๋ฒ์ ๊ฐ์ ์์ด ์์ฑ๋ ํ์ผ ๐ ๋์ ํ์ผ : ํด๋ผ์ด์ธ๊ฐ ์๋ฒ์ ์์ฒญ์ ๋ณด๋ด๋ฉด, ์๋ฒ๊ฐ ์์ฒญ์ ๋ง์ถ์ด ๊ทธ ์๋ฆฌ์์ ์์ฑํ ํ์ผ์น ํธ์คํ : ์๋ฒ์ ํ๊ณต๊ฐ์ ์๋ํด์ฃผ๋ ์๋น์ค\-> ๊ฐ์ธ ๋๋ ๋จ์ฒด๊ฐ ์น ํธ์คํ ์ ์ฒด๊ฐ ์ ๊ณตํ
ํ ์ธ์ด๋ก ์์ฑ๋ ์์ค ์ฝ๋๋ฅผ ๋ค๋ฅธ ์ธ์ด๋ก ๋ณํํ๋ ๊ฒํ ์ธ์ด๋ก ์์ฑ๋ ์์ค ์ฝ๋๋ฅผ ๋น์ทํ ์์ค์ ์ถ์ํ๋ฅผ ๊ฐ์ง ๋ค๋ฅธ ์ธ์ด๋ก ๋ณํ ํ๋ ๊ฒํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํ์ผ ํ๋ ๊ฒ ์ญ์ ํธ๋์คํ์ผ๋ง์ด๋ค.์ฌ๋์ด ์์๋ณด๊ธฐ ์ฌ์ด ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ก ์์ฑํ ์ฝ๋๋ฅผ ํ์ค์ฉ ์ฆ์
์ด ์ค๋ฅ๋, ํ์ผ์ ๋ถ๋ฌ์ฌ ๋ .ts ํ์ฅ์๋ฅผ ์ฌ์ฉํ๋๋ฐ, TypeScript์์๋ ์ด ๊ธฐ๋ฅ์ด ๊ธฐ๋ณธ์ ์ผ๋ก ๋นํ์ฑํ๋์ด ์์ด์ ๋ฐ์ํฉ๋๋ค.์ด ์ค๋ฅ๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด, TypeScript ์ปดํ์ผ๋ฌ ์ค์ ํ์ผ (tsconfig.json)์์ allowImportingTsExten
React.lazy์ ์ปดํฌ๋ํธ๊ฐ ๋ค์ด๋์ง ์์์ผ๋ฉด suspense์ ์๋ ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๊ณ ๋ค ๋ค์ด์ด๋๋ฉด ๊ทธ๋ ํด๋น ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ฃผ๊ณ suspense๋ด์ฉ์ ์ฌ๋ผ์ง (๋น๋๊ธฐ์ฒ๋ฆฌ)
DOMReact Hoks: Document Object Model์ ์ฝ์๋ก ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ์ ์๋ฏธ๋ฌธ์ ๊ฐ์ฒด๋ : ๋ธ๋ผ์ฐ์ ๊ฐ Javascript์ ๊ฐ์ ์คํฌ๋ฆฝํ ์ธ์ด๊ฐ < html >, < head >, < body >์ ๊ฐ์ ํ๊ทธ๋ค์ ์ ๊ทผํ๊ณ ์กฐ์ํ ์
ํธ๋ฆฌ๋ ๊ณ์ธต์ ํธ๋ฆฌ๊ตฌ์กฐ ํ๋์ด์์ ๋ฐ์ดํฐ์ ํ๊ฐ์ ๊ฒฝ๋ก์ ํ๋์ ๋ฐฉํฅ์ผ๋ก๋ง ์ฐ๊ฒฐ๋ ๊ณ์ธต์ ์๋ฃ๊ตฌ์กฐ ๋ฐ์ดํฐ๋ฅผ ์์ฐจ์ ์ผ๋ก ๋์ด์ํจ ์ ํ๊ตฌ์กฐ๊ฐ ์๋ ํ๋์ ๋ฐ์ดํฐ ์๋์ ์ฌ๋ฌ๊ฐ์ ๋ฐ์ดํฐ๊ฐ ์กด์ฌํ ์์๋ ๋น์ ํ๊ตฌ์กฐ ๊ณ์ธต์ ์ผ๋ก ํํ์ด ๋๊ณ ์๋๋ก๋ง ๋ป์ด๋๊ฐ๊ธฐ ๋๋ฌธ์ ์ฌ์ดํด(์ํ
๐ OAuth : ์ธํฐ๋ท ์ฌ์ฉ์๋ค์ด ๋น๋ฐ๋ฒํธ๋ฅผ ์ ๊ณตํ์ง ์๊ณ ๋ค๋ฅธ ์น์ฌ์ดํธ ์์ ์์ ๋ค์ ์ ๋ณด์ ๋ํด ์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทผ ๊ถํ์ ๋ถ์ฌํ ์ ์๋ ๊ณตํต์ ์ธ ์๋จ์ผ๋ก ์ฌ์ฉ๋๋ ์ ๊ทผ ์์์ ์ํ ๊ฐ๋ฐฉํ ํ์ค ์๋ฅผ ๋ค์ด, ๋ฐฐ๋ฌ์ ๋ฏผ์กฑ ํ์๊ฐ์ ์ ํ ๋ ํด๋น ์น ์ ํ
TokenJWT: ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์ ์ ์์ ํ๋ฉด ์๋ฒ์์ ํด๋ผ์ด์ธํธ์๊ฒ ํด๋น ํด๋ผ์ด์ธํธ์๊ฒ ์ธ์ฆ์ด๋์๋ค๋ ์๋ฏธ๋ก ํ ํฐ์ ๋ถ์ฌํจ ์๋ฅผ ๋ค์ด, ๋์ด๊ณต์ ์ ์ฅ์ ๊ฐ์ธ๋ง๋ค ์ฃผ๋ ์ ์ฅ๊ถ์ ์๋์๊ฒ ์ฃผ๊ณ ๊ฐ์ธ(ํด๋ผ์ด์ธํธ)์ด ๊ด๋ฆฌํ๊ฒ ํจํ ํฐ์ ์ธ์ ๊ณผ๋ ๋ฌ๋ฆฌ ์๋ฒ๊ฐ ์๋ ํด๋ผ์ด์ธํธ
๐ Cookie : ๋ฐ์ดํฐ์ด๋ฉด์, ์ฐ๋ฆฌ๊ฐ ํ์ฌ ์ฌ์ฉํ๋ ์ปดํจํฐ์ ์์ ํ ์คํธ ํ์ผ๋ก ์ ์ฅ๋์ด์๋ ๊ฒ ์๋ฅผ ๋ค์ด, ์ฌ์ดํธ ์ ์์ 'ํ๋ฃจ๋์ ์ด์ฐฝ์ ๋ณด์ง ์๊ธฐ' ๋ฌธ๊ตฌ๊ฐ ๋ฌ๋ค๊ฑฐ๋, ๋ก๊ทธ์ธ์ ์ํด ๋ก๊ทธ์ธ ์ ๋ณด ์ ์ฅ, ์๋ ๋ก๊ทธ์ธ ๊ฐ์ ๊ฒฝ์ฐ โก๏ธ ๋ธ๋ผ์ฐ์ ๋ ๋ด์ฉ์ ๊ธฐ์ตํ ๊ณต๊ฐ
Q : ์ ์ย num1๊ณผย num2๊ฐ ๋งค๊ฐ๋ณ์๋ก ์ฃผ์ด์ง ๋,ย num1์ย num2๋ก ๋๋ ๊ฐ์ 1,000์ ๊ณฑํ ํ ์ ์ ๋ถ๋ถ์ return ํ๋๋ก soltuion ํจ์๋ฅผ ์์ฑํด์ฃผ์ธ์.num1์ด 3,ย num2๊ฐ 2์ด๋ฏ๋ก 3 / 2 = 1.5์ 1,000์ ๊ณฑํ๋ฉด 1500์ด
์น ํ์ค์ ์ด๋ ํ ์ด์์ฒด์ ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ์ฌ๋ ๋์ผํ ์ปจํ ์ธ ๋ฅผ ๋ณผ ์ ์๋๋ก ์น์์ ํ์ค์ ์ผ๋ก ์ฌ์ฉ๋๋ ๊ธฐ์ ์ด๋ ๊ท์น๐ ๋์ผํ ์ปจํ ์ธ : ์๋ฒฝํ ๋๊ฐ์ ํ๋ฉด์ ์๋ฏธํ๋ ๊ฒ์ด ์๋ ๋ชจ๋ ํ๋ซํผ์์ ๋๋ฑํ ์์ค์ ์ ๋ณด์ ์ ๊ทผ์ด ๊ฐ๋ฅํจ์ ์๋ฏธ์ฅ์ : ๋ธ๋ผ์ฐ์ ์ os์ ๊ด
๊ณผ์ ๋ฅผ ํ๋ฉด์ Action, Dispatch, Reducer, Store๊ฐ ์ด๋ป๊ฒ ์ฐ๊ฒฐ๋์ด ์๊ณ ์ด๋ค ๊ณผ์ ์ผ๋ก ๊ตฌํ๋๋์ง ํ์ธํ๊ธฐAction, Reducer๋ฅด ์ง์ ์์ฑํ๊ณ ํ ์คํธ ํด๋ณด๊ธฐ์ง๋๋ฒ react hooks๋ก ์์ฑํ ํ์ด์ง๋ฅผ redux๋ฅผ ์ฌ์ฉํด์ ๋ฆฌํฉํ ๋ง์ํ ๋ณ