ํ์คํ ๋ฆฌ์กํธ ํ ์ดํ๋ก์ ํธ - REST, GraphQL (for FE๊ฐ๋ฐ์)
React ๊ธฐ๋ฐ์ ๊ฐ๋จํ SNS ์๋น์ค๋ฅผ ๋ง๋ค๋ฉด์ REST API ๋ฐ GraphQL์ ์ฐ์ตํฉ๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ํ ๋ฐฑ์๋ ํ๊ฒฝ์ ์ฝ๊ณ ๊ฐ๋จํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์๊ฐํฉ๋๋ค.
์๊ฐ์ 1,017๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
์ง๋ฌธ์์ต๋๋ค !
typescript ๋ฒ์ ์ฝ๋๋ฅผ ๋ณด๊ณ ์๋๋ฐ package.json์ module:common.js๋ก ๋์ด์๋๋ฐ ์ด๋ป๊ฒ Import ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ์ ์๋์ง ๊ถ๊ธํฉ๋๋ค
reactrest-apigraphql์ฌํ์
ใป
์ผ ๋ ์
0
110
2
- ํด๊ฒฐ
sass ์ค๋ฅ
sass css๊ฐ ์ค๋ฅ๋์ sass๋์ tailwind css ์ฌ์ฉํด๋ ์์ ๋ฐ๋ผ๊ฐ๋๋ฐ ์ง์ฅ ์์๊น์?
reactrest-apigraphql์ด๋ฏผ์ฌ
ใป
0
150
1
- ํด๊ฒฐ
does not match
<img src="https://cdn.inflearn.com/public/files/posts/c4b380c8-adc2-43c0-b7aa-1b6d5924e245/141ba4ba-685c-46fd-b0e1-60167e021c20.png" media-type="img"
reactrest-apigraphql์ด๋ฏผ์ฌ
ใป
0
148
2
- ํด๊ฒฐ
ํ๋ก์ ํธ ๋ฐฐํฌ
๋ด์ฉ ์ ๋ฆฌํด์ ํ๋ก์ ํธ๋ก ์ฌ์ฉํ๊ณ ์ถ์ด์์๋ก์ปฌ์์๋ง ๋๋ฆด ์ ์๊ณ ๋ฐ๋ก ๋ฐฐํฌํ๊ฑฐ๋ ํ ์๋ ์๋์??
reactrest-apigraphql๋ฟ๋ฟ์ฃ
ใป
0
280
1
- ๋ฏธํด๊ฒฐ
์ฝ๋ ๋๊ฐ์ด ์ณค๋๋ฐ scss ์ ์ฉ์ด ์๋ผ์ ใ ใ
์ด์ ์ ์ ์์๊น์
reactrest-apigraphql์์ฑ์ ์์
ใป
0
721
1
- ๋ฏธํด๊ฒฐ
scss ์คํ์ผ ์ ์ฉ
ํน์ scss ์คํ์ผ ์ ์ฉ์ด ์๋๋ ์ด์ ์ฌ์ญค๋ด๋ ๋ ๊น์ฌ?
reactrest-apigraphql์์ฑ์ ์์
ใป
0
466
2
- ํด๊ฒฐ
yarn run client์ ์๋ฌ๋ ์ ๋๋๋ฐ ํธ์คํธ๊ฐ ์ด๋ฆฌ์ง ์์ต๋๋ค ใ ใ
ํผ์ ํด๊ฒฐํด๋ณด๋ ค ํ์ผ๋ ํด๊ฒฐ์ด ์๋ผ ๊ธ ๋จ๊น๋๋ค ใ ใ ์ด๋ ๊ฒ ์ ์์ ์ผ๋ก
reactrest-apigraphql์์ฑ์ ์์
ใป
0
418
1
- ํด๊ฒฐ
๋ฌดํ ์คํฌ๋กค ๊ด๋ จ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์. ์ฌ๋จ๋ํ ์ด ํ๋ก์ ํธ ๊ฐ์๋ฅผ ๋ณด๊ณ ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํ์ ํ๋๋ฐ ์คํฌ๋กค ๋ด๋ฆด ๋ ์ฒ์ ๋ฐ์ดํฐ 15๊ฐ๋ง ๋ถ๋ฌ์์ง๊ณ ์คํฌ๋กค ๋ด๋ฆด ๋์๋ ๊ทธ ๋ค์ ๋ฐ์ดํฐ๋ค์ด ๋ถ๋ฌ์ค์ง ์์ต๋๋ค.๊นํ๋ธ์ ์ฌ๋ ค์ฃผ์ ์ฝ๋๋ฅผ ๋ณต์ฌ ๋ถ์ฌ๋๊ธฐ ํด๋ ๋์ผํ๊ฒ ๋ฐ์ดํฐ
reactrest-apigraphql์์งํ
ใป
1
503
2
- ํด๊ฒฐ
props ๋ฅผ ๋๊ฒจ์ค ๋ ํจ์๋ฅผ ๊ทธ๋๋ก ๋๊ฒจ์ค ๋์ ํ์ดํ ํจ์๋ก ๊ฐ์ธ์ ๋๊ฒจ์ค ๋์ ์ฐจ์ด๊ฐ ๊ถ๊ธํฉ๋๋ค :)
onUpdate={onUpdate} onDelete={() => onDelete(x.id)} startEdit={() => setEditingId(x.id)} isE
reactrest-apigraphql๋ฐํฌํฐ
ใป
0
445
1
- ํด๊ฒฐ
getInitialProps ๊ณผ getServerSideProps์ ๋ํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค!
ํด๋น ํ๋ก์ ํธ์์ getInitialProps์ getServerSideProps๋ฅผ ๋์์ ์ฐ๊ณ ์๋๋ฐ 2๊ฐ์ ๊ฒฝ์ฐ pre-render๋ฅผ ํ๊ธฐ ์ํด ์์ฑํ๋ค๊ณ ์ดํดํ๋๋ฐ ๋ ์ค ํ๋๋ง ์จ๋ ๋๋ ๋ถ๋ถ ์๋๊ฐ์??? ์ด๋ค ์ํฉ๋๋ฌธ์ 2๊ฐ๋ฅผ ๋์์ ์ฌ์ฉํ๋์ง ๊ถ๊ธํฉ๋
rest-apigraphqlreactbj2525
ใป
0
1,136
1
- ํด๊ฒฐ
node-sass๋ฅผ ํ์ ๋ ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
yarn add node-sass๋ฅผ ์คํํ์ ๋ gyp ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
rest-apireactgraphql์ ํ์ผ
ใป
0
367
1
- ๋ฏธํด๊ฒฐ
[์์ค ๋ค์ด๋ก๋ ์๋ฉ๋๋ค]
์๋ ํ์ญ๋๊น๋ชฉ๋ก๋ทฐ ๊ตฌํํ๊ธฐ์์ Invalid Date ์ค๋ฅ๊ฐ ๋์ ์์ค ํ์ผ์ ์ฐธ์กฐ ํ๋ ค๊ณ ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ์๋ณด๋ ์์ ์์ค ํ์ผ์ด ์์ต๋๋ค.<a target="_blank" rel="noopener noreferrer nofollow"
rest-apireactgraphql์๋ค์ง์ค
ใป
0
316
1
- ํด๊ฒฐ
rendered HTML error ๊ด๋ จ
MsgItem ์ ์ด์ฉํ์ฌ MsgList 50๊ฐ๋ฅผ ๋ฝ๋ ๊ณผ์ ์์Error: Text content does not match server-rendered HTML. Error: Hydration fa
graphqlrest-apireact๋ฐ์ธ์
ใป
2
2,166
2
- ํด๊ฒฐ
๋๋ค์ ๋ถ๋ถ์ด ์๋ชป๋์ด ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
ํด๋น ๊ฐ์ ์ดํ์ ์์ ํ์๋์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง ๋๋ค์์ด ์ ๋๋ก ์ ์ฉ๋์ด์์ง
rest-apireactgraphqlhwlim
ใป
0
433
2
- ํด๊ฒฐ
Typescript ์ง๋ฌธ๋๋ ค์!
์๋ ํ์ธ์ ์ฌ๋จ๋!Typescript ์ ์ฉ ์ค์ ๊ณ์ ์๋๋ ๋ถ๋ถ์ด ์์ด์ ์ง๋ฌธ๋๋ ค์!<img src="https://cdn.inflearn.com/public/files/posts/8551ea11-1962-4788-860e-2a01b08e4e71/แ
reactgraphqlrest-apibj2525
ใป
0
318
1
- ํด๊ฒฐ
error ๊ด๋ จํ์ฌ
text contents does not match server-sided HTML์ด๋ผ๋ ์ค๋ฅ๊ฐ ๋จ๋๊ฒ ํน์ ์ด๋ป๊ฒ ํด๊ฒฐํ ์ ์์๊น์? ๊ฒ์ํด๋ ๋ง๋ ํ ์ ๋๋ก ๋ ๋ต์ด ์๋์ค๋ค์. ๊ทธ๋ฆฌ๊ณ ์ ์ฌ๊ธฐ์๋ ๊ทธ๋ฐ ์ค๋ฅ๊ฐ ์์๊ธฐ๋์ง ๊ถ๊ธํฉ๋๋ค!
rest-apigraphqlreact๊น์ธ๋ฒ
ใป
1
279
1
- ํด๊ฒฐ
์ง๋ฌธ์ด ์์ต๋๋ค!.
onCreate ํจ์์์ ์ง๋ฌธ์ด ์์ต๋๋ค! ์๋ก์ด ๊ฐ์ฒด์ธ createMessages์ ๊ธฐ์กด์ ์กด์ฌํ๋ 15๊ฐ์ ๊ธธ์ด๋ฅผ ๊ฐ์ง old.messages๋ฅผ ๋์ดํ๊ธฐ๋ง ํ๋ฉด ๋๋ค๊ณ ์๊ฐํ๋๋ฐ, ๋ค์ ...old.pages.slice(1)์ ๋ ๋์ด์ ํ๋ ๋ถ๋ถ
graphqlrest-apireactbj2525
ใป
0
267
1
- ํด๊ฒฐ
์ง๋ฌธ์ด ์์ต๋๋ค!
์๋ ํ์ธ์ ๊ฐ์ฌ๋! ์๋์ ๊ฐ์ด ๋ฌธ์ ๊ฐ ์์ด ์ง๋ฌธ ๋จ๊น๋๋ค! graphQL ์ ์ฉ ํ ์๋ก๊ณ ์นจ ์ ํ๋ฉด ๋ ๋๋ง ์๋๊ฐ ๋๊ฒ ๋๋ ค์ง => ์ด๋ค ๋ฌธ์ ์ธ์ง ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.. Create ํ์ getDa
reactrest-apigraphqlbj2525
ใป
0
472
1
- ํด๊ฒฐ
์์ ๋ ๋ด์ฉ๊น์ง ํ์ธํ๋๋ฐ ์๋ฌ๊ฐ ๋ฉ๋๋ค ใ
window์์ ๋์๋ฌธ์ ๋ฌธ์ ์์ ํด๋ ์๋ฌ๊ฐ ๋๋ค์ ใ
rest-apigraphqlreactjuno0218
ใป
1
281
2
- ๋ฏธํด๊ฒฐ
React Hydration Error ๊ฐ ๋๋ ์ด์ ๊ฐ ๋ฌด์์ผ๊น์ ?;;
์๋ฌ๊ฐ ์๊พธ๋๋๋ฐ ๋ฌธ์ ๊ฐ ๋ฌด์์ผ๊น์ฌ;; </ul
reactgraphqlrest-apijuno0218
ใป
0
616
1






