App App Component ์ ํ๋ฆฌ์ผ์ด์ ์ปดํฌ๋ํธ์ ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋ฅ
library vs framework library (ReactJs) -๋ด๊ฐ ์ฝ๋๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฒ -์ฝ๊ฒ๋งํด library๋ ์ธ์ ๋ ๋ด๊ฐ ์ฌ์ฉํ๊ณ ์ถ์๋ ์ธ์ ๋ ์ด๋ค๋ฐฉ๋ฒ์ผ๋ก๋ ๊ฐ๋ฅ ex) create-react-app์ผ๋ก ํ ๊ฒฝ์ฐ, ReactDom.render() ๋ถ
Next.js : ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง(SSR)๊ณผ Static Generation ์ดํดGraphQL : fragment ์ฌ์ฉApollo Client์ React๋ฅผ ํ์ฉGraphQLhttps://graphql-kr.github.io/learn/queries/htt
๋ ธ๋ง๋ ์ฝ๋ ๋๊ผด๋ผ์คใป๊น์คํ ์ง์ํ์ฌ ์์ฝ๋์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ๊ณต๋ถํ๊ณ ์๋ ์ค์, Do it ํด๋ก ์ฝ๋ฉ ํธ์ํฐ ์ํ๋จ์ผ๋ก ์ฐธ์ฌํ ์ ์๋ ๊ธฐํ๊ฐ ์๊ฒจ ์ด๋ ๊ฒ velog๋ฅผ ์ ๊ฒ ๋์๋ค ๋จผ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ๊ณต๋ถ๋ฅผ ํ๋ฉด์ ๋ ธ๋ง๋ ์ฝ๋์ ๋ฌด๋ฃ, ์ ๋ฃ ๊ฐ์๋ค์ ๋ค์์ ๋
REST API๋? : ์ํํธ์จ์ด๊ฐ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๋ฐฉ์ : GraphQL ์ด์ ๋ถํฐ ์ฌ์ฉ / ํน์ฑ์ด ๋ค๋ฅด๋ฏ๋ก ์์ ํน์ฑ์ ๋ฐ๋ผ ์ ํฉํ ๊ฒ ์ฌ์ฉํจ REST API ๋ณด์ํ๊ธฐ ์ํด GraphQL ๋ง๋ค์ด์ง ์ฌ๋ฌ ์ํํธ์จ์ด๋ค์ด ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ์ผ๋ฉด์ ๋์๊ฐ๋ ๊ฒ๋ ๋ง์ ๋ฐฐ๋ฌ
์์ฝ๋ ์ด๋ฐ ์๊ธฐ์๊ฐ๋ ์ ๊ฐ ์ข์ํ๋ ์ํ ๋์ฌ๋ฅผ ๋งํ๋ฉด์์์ผ๋ก ํ๋ฃจํ๋ฃจ ์กฐ๊ธ์ฉ์ด๋ผ๋ ์ฑ์ฅํด ๋๊ฐ๋ค๋ฉด ๊ทธ๊ฑธ๋ก ๋ ๊ฑฐ๋๊น ๋ค ๊ฐ์ด ์กฐ๊ธํดํ์ง ๋ง๊ณ ์์ฝ๋ ๊ธฐ๊ฐ์ ๊ฐ์ด ๊ฑด๋์๊ณ ํ์๋๋ฐ์ญ์๋ ์ญ์..๋ง์ฒ๋ผ ์ฝ์ง๋ ์์์ด์ ๐์ค๊ฐ์ค๊ฐ ์ ์๊ฐ์ด ์ง๋๋ ์ ์๋์ง? ์ํ๊ณ
fetch ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฒซ ๋ฒ์งธ ์ธ์์ ์์ฒญํ ย url์ด ๋ค์ด๊ฐ๋ค.๊ธฐ๋ณธ์ ์ผ๋ก http ๋ฉ์๋ ์ค GET์ผ๋ก ๋์ํ๋ค.fetch๋ฅผ ํตํด ajax๋ฅผ ํธ์ถ ์ ํด๋น ์ฃผ์์ ์์ฒญ์ ๋ณด๋ธ ๋ค์, ์๋ต ๊ฐ์ฒด(Promise object Response)๋ฅผ ๋ฐ๋๋ค.๊ทธ๋ฌ๋ฉด ์ฒซ ๋ฒ์งธย
ํ์ต๋ชฉํ 1.Path Parameter์ Query Parameter ์ ์ฐจ์ด์ ์ ๋ํด์ ์ค๋ช ํ ์ ์๋ค. 2.useNavigate, useLocation, useParams ํ ์ ์ฉ๋๊ฐ ๋ฌด์์ธ์ง ์ค๋ช ํ ์ ์๋ค. 3.URL ์์ ๋์ ์ธ ๋ถ๋ถ์ ๋ณ์๋ก ์ฒ๋ฆฌํ ์ ์๊ณ ,
Today's Goal RESTful API๋? RESTful API ์ค๊ณ๊ท์น Path parameter, Query parameter RESTful ํ์ง ๋ชปํ API ์ค๊ณ ์์ Status Code ๐ ๐ >REST API? : ๋ผ์ด๋ธ๋ ๋ชจ๋ ์ค์น ์์ด ๊ฐ์ง๊ณ
AWS >ํด๋ผ์ฐ๋ ์์ฅ์ ์ ๊ตฌ์, ์ฌํ์ ๋ฆฌ๋! 2019๋ ๊ธฐ์ค ์ธ๊ณ ์์ฅ ์ ์ ์จ 47%. ๋ฐฑ๋ง ์ด์์ ์กํฐ๋ธ ์ ์ ๋ณด์ . AWS๋ฅผ ์ฐ๋ ์ด์ >ํด๋ผ์ฐ๋ ์ปดํจํ ์ ์ฅ์ ์ ๊ทธ๋๋ก ์ ๊ณต. ๊ทธ์ ๋๋ถ์ด ํต ์๋น์ค, UI ๋ฑ์ ํฌํจํด ๋ชจ๋ ๊ฒ์ด ๊ณ์ ์ ๋ฐ์ดํธ ๋๋ ์ค.
sideEffect : ์ธ๋ถ์ ์ํฅ์ ๋ฐ๋ ๊ฒ (Console.log ๋ฑ) useEffect side Effect๋ฅผ ๋ ๋๋ง ์ดํ์ ๋ฐ์์ํด >์ฒ์ ๋ ๋ ๋ ๋๋ง ์ฐํ๊ณ ๋ค๋ฅธ ์์ ๋ณํ๊ฐ ์๋คํด๋ ๊ณ์ ๋ ๋๋์ง ์๋๋ก ! >fetch : ๋ฐฑ์๋์์ ๋ฐ์ดํฐ๋ฅผ
1. state ํ๋๋ก ๊ด๋ฆฌํ๊ธฐ ์ ํจ์ฑ ๊ฒ์ฌ ์ปดํฌ๋ํธ ๋ถ๋ฆฌ variables state๊ด๋ฆฌ ` ๊ตฌ์กฐ๋ถํดํ ๋น ์ ํจ์ฑ ๊ฒ์ฌ state ์๋ ๋ณ์๋ก๋ ๊ด๋ฆฌ ๊ฐ๋ฅ
1๏ธโฃ aside scss import ์์ Main.scss์ Aside.scss๋ฅผ ๊ฐ์ ธ์จ๋ค >2๏ธโฃ import ์์ ์์ : React โ Library(Package) โ Component โ ๋ณ์/์ด๋ฏธ์ง โ cssํ์ผ(scss) >3๏ธโฃ class
function (ํจ์ํ) ์จ๋ผ์ธ์๋น์ค๋ก https://stackblitz.com/edit/react-loxtgx ๊ณง๋ฐ๋ก ์๋น์ค ์ด์ฉ ๊ฐ๋ฅ ์ถ์ฒ ํด์ฒด์ธ : ๋ฆฌ์กํธ๋ฅผ ๊ฐ๋ฐํ๊ธฐ ์ํ ๋ชจ๋ ํ๊ฒฝ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ ํธ๋ฆฌํ ๋๊ตฌ : create react ๋ช ๋ น์ด >-
Q. index.js vs App.jss Q. Third-party Library Q. @mixin / @include Assingment : li ํ๊ทธ (์๋ก ๋งํฌํ๊ทธ ๋ง๋ ํ) : useNavigate ๋ก ! (๋ฒํผ์๋ค๊ฐ onclick ์ด๋ฒคํธ ๊ฑธ์ด์) :reac
hooks : classํ์์ ์ฌ์ฉํ๋ ์๋ช ์ฃผ๊ธฐ ๋ฑ์ ํจ์ํ์์๋ ์ฌ์ฉํ๊ธฐ ์ํด ์ธ๋ถ์์ ๊ธ์ด์ ๊ฐ์ ธ์จ๋ค (๊ฐ๊ณ ๋ฆฌ) state & event state vs props >props :์ฑ๋ณ, ๊ตญ์ ๋ฑ์ ๋ถ๋ชจ๋ก ๋ฐ์ ๋ณ๊ฒฝ๋์ง ์๋ ๊ฒ >state :์ปดํฌ๋ํธ์
์ฌ๊ธฐ์ document๋ html์ ์๋ฏธํจ dom์ ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ๊ฐ์ฅ ์ ๋ํ๋ผ ์ ์๋ ๊ฒ object์ฌ์ object๋ก ํ ๊ฑฐ๋ผ๊ณ ์๊ฐํ๋ฉด ๋จ ๊ฐ์ฒด ์ ๊ทผ๊ณผ ๊ฐ์ด key์ value ์ด์ฉํ๋ฉด ๋จ ๊ฐ์ฒด ์ ๊ทผ ๋๊ฐ์ง ๋ฐฉ๋ฒ > . > []
HOISTING ? >: ํจ์ํธ์ถ๋ฌธ์ด ํจ์ ์ ์ธ์ ๋ณด๋ค ์์ ์์ด๋ ๊ด์ฐฎ๋ค : ์ฆ, ์ด๋์ ์ ์ธํ๋๋์ ์๊ด ์์ด ํญ์ ์ ์ผ ์๋ก ์ ์ธ์ ๋์ด ์ฌ๋ ค์ฃผ๋ ๊ฒ์ด๋ค >ํจ์ ๋ด์์ ์๋์ชฝ์ ์กด์ฌํ๋ ๋ด์ฉ ์ค ํ์ํ ๊ฐ๋ค์ ๋์ด์ฌ๋ฆฌ๋ ๊ฒ์ด๋ค. ์ค์ ๋ก ์ฝ๋๊ฐ ๋์ด์ฌ๋ ค์ง๋ ๊ฑด
๊ฐ๋ฐ์ ๋๊ตฌ ๋งฅ : option + commend + j ์๋์ฐ: f12 >๋ฌธ์ ๊ฐ ์๊ฒผ์ ๋ ์ฝ์ ํ๋๊ณผ ๋คํธ์ํฌ ํจ๋ ๋จผ์ ํ์ธํด์ผํจ > user agent stylesheet ๋ธ ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ํ ๋์ด ์๋ css ์์ reset css ๋ฑ์ผ๋ก ๋ธ๋ผ์ฐ์ ์