์์
์ค ๊ถ๊ธํ ์ฌํญ์ ์ง๋ฌธ ์ฌํญ์ ์ฌ๋ ค์ฃผ์ธ์.
๋งค์ผ ํ ๋ฒ์ฉ ํ์ธํ๊ณ ๋ต๋ณ ๋๋ฆฌ๊ฒ ์ต๋๋ค.
Courses
Reviews
- [React Part 1] Learning React by Building and Comparing
- [React Part 2] Advanced Topics and Hooks
- [React Part 2] Advanced Topics and Hooks
- The Beginning of the Web - An Easy Understanding of the Birth and Basics of HTTP
- Master the Core of Web Development, HTTP Perfectly!
Posts
Q&A
React ํ ๊ตฌํ ์๋ฆฌ์ ์ค๋ฌด ํจํด ๊ด๋ จ ์ง๋ฌธ (useState, useEffect ์์ ๋ฐ ํธ๋ค๋ฌ ๊ตฌ์กฐ)
๊ธฐ๋ฅ์ ๊ตฌํํ๋ค๋ณด๋ฉด ์ํ๊ฐ ๋์ด๊ฐ๋ ๊ฒฝ์ฐ๋ ๋น๋ฒํ๋ฐ์. ์ด๋ ์ํ ๊ด๋ฆฌ๋ก ์ธํด ํ์๋๋ ํธ๋ค๋ฌ๋ ์ดํํธ๋ ๋์ด๋ ์ฝ๋ ๊ด๋ฆฌ๊ฐ ์ด๋ ค์ด ์๊ฐ์ด ์์ต๋๋ค. ์ด์ ๋ํ ์ง๋ฌธ์ ์ฃผ์ ๊ฒ ๊ฐ์์. ์ ๋ ์ํ ๊ด๋ฆฌ๊ฐ ๋ง์์ ธ ํ ์ปดํฌ๋ํธ์์ ๊ด๋ฆฌํ๊ธฐ ์ด๋ ต๋ค๋ฉด, ๋ณ๋์ ์ญํ ์ ํ๋ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํ๊ฑฐ๋, ์ปค์คํ ํ ์ผ๋ก ๋ถ๋ฆฌํด ์ฌ์ฉํฉ๋๋ค. ๊ด๋ จ๋ ๋ฆฌ์กํธ ์จ๋ฆฌ๋ฉํธ ๋ฐํ๋ก์ง๊น์ง ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํ๋ค๋ฉด, ์ด๋ฅผ JSX ๋ฌธ๋ฒ์ผ๋ก ๊ฐํธํ ๊ฐ์ ธ๋ค ์ฌ์ฉํ ์ ์์๊ฒ๋๋ค. ์ปค์คํ ํ ์ผ๋ก ๋ถ๋ฆฌํ๋ค๋ฉด, ์ถ์ํ ๊ณ์ธต์ผ๋ก ๋ณต์กํ ๋ก์ง์ ์จ๊ธฐ๊ณ ์ปดํฌ๋ํธ์์๋ ์ด๋ฅผ ํตํด ๊ด๋ จ๋ ์ํ์ ํธ๋๋ฌ๋ฅผ ์ ๊ณต ๋ฐ์ ์ ์์ด์. ๋ค๋ฅธ ์ฌ๋์ด ์์ฑํ ์ฝ๋๋ฅผ ๋ง์ด ๋ณด๊ณ , ์ฌ๋ฌ ๋ฒ์ ์ํ์ฐฉ์ค ๊ฒฝํ์ ๊ฒช์ผ๋ฉด ๊ท ํ์กํ ์ปดํฌ๋ํธ ์ค๊ณ ๊ธฐ๋ฒ์ ๊ฐ์ถ์ค ์ ์์๊ฑฐ์์.
- 1
- 2
- 27
Q&A
์ง๊ธ ์์ ์์ ํด๋น ๊ฐ์๋ฅผ ๋ฃ๋ ๊ฒ์ ๋ํ์ฌ
์๋ ํ์ธ์, ๊ฐ์ ์๊ฐ ๊ด๋ จํด ๋ฌธ์ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.์ต์ ๊ฐ๋ฐํ๊ฒฝ์ ๋นํด ์์ ์์ ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฒ์ ์ด ๋ง์ง ์๊ธดํฉ๋๋ค. ํ์ง๋ง ๋ฒ์ ๊ณผ ๋ฌด๊ดํ ๊ธฐ๋ณธ ์๋ฆฌ์ ๋ํ ๋ด์ฉ์ ๋ฐฐ์ฐ์ค์ ์์ ๊ฑฐ์์. ๊ฐ๋ ์ ํํํ ์ดํดํ๊ณ ๋์๋ฉด ๋ค๋ฅธ ๋๊ตฌ๋ฅผ ๋ง๋๋๋ผ๋ ํจ์ฌ ์์ ๊ฐ ์๊ฒ ๋ค๋ฃจ์ค์ ์์ ๊ฒ๋๋ค. ์ด์ ๊ด๋ คํ ํ๊ธฐ๋ค๋ ์ฌ๋ ค์ฃผ์ จ๋๋ฐ์, ์ฐธ๊ณ ํด ๋ณด์๋ฉด ๊ฐ์ ์๊ฐ์ ๊ฒฐ์ ํ๋ ๋ฐ ๋์์ด ๋์ค ๊ฒ ๊ฐ์ต๋๋ค.https://inf.run/8XzcVhttps://inf.run/2N6rehttps://inf.run/VSRZc
- 1
- 3
- 28
Q&A
๋ฆฌ์กํธ 1,2๋ถ ์ดํ ํ์ ๊ฐ์๋ ์ค๋น ์ค์ธ ๋ค๋ฅธ ๊ฐ์๊ฐ ์์ผ์ ๊ฐ์?
๊ฐ์๋ฅผ ์ข๊ฒ ํ๊ฐํด ์ฃผ์ ์ ๋ฌด์ฒ ๊ณ ๋ง์ต๋๋ค. ๋ฆฌ์กํธ1๋ถ ๊ฐ์๋ฅผ ๋ง์น์ จ๋ค๋ฉด 2๋ถ๋ก ๋์ด๊ฐ์ ์ ํ ๊ณผ ๊ณ ๊ธ ์ฃผ์ ๋ฅผ ํ์ตํ์๊ธธ ์ถ์ฒ ๋๋ฆฝ๋๋ค. ์น ๊ฐ๋ฐ์ ๊ธฐ์ด ์ง์ ์ค์ HTTP๋ฅผ ์ดํดํ๊ณ ์ตํ๋ ์์ ์ด ์๋๋ฐ ์ด๊ฒ๋ ๊ฐ์ด ์๊ฐํ์๋ฉด ๋์์ด ๋ ๊ฑฐ์์. https://inf.run/GFc3Z
- 1
- 2
- 30
Q&A
๋ธ๋ผ์ฐ์ ๋ด๋ถ ๋ณด์ ์ ์ฑ ์ค์ฝํ์ ๋ํ ์ง๋ฌธ
์ข์ ์ง๋ฌธ์ ๋๋ค. ์ด ๋ด์ฉ์ HTTP ๋ณด์์ ์ฑ ์ ๋ธ๋ผ์ฐ์ ธ ๋ด๋ถ ๋์ ์๋ฆฌ์ ํด๋น๋์ด, ์์ ๋ฒ์๋ฅผ ์ฝ๊ฐ ๋์ด๊ฐ๊ธด ํฉ๋๋ค. ๋ฐฉํฅ์ ์ก์ ์ ์๋ค๋ก ํต์ฌ๋ง ๋ง์๋๋ฆด๊ฒ์.๋ธ๋ผ์ฐ์ ธ์ ๋ณด์ ์ ์ฑ ์ ์ผ๋ฐ์ ์ผ๋ก Origin ๋จ์๋ก ์ ์ฉ๋ฉ๋๋ค.๋จ, ๋ง์ํ์ ๋๋ก ์ฟ ํค๋ ์กฐ๊ธ ๋์ ๋จ์๋ก ์ ์ฉ๋ฉ๋๋ค.๋ธ๋ผ์ฐ์ ธ๋ณ๋ก ์ธ๋ถ ๋์์ด ์กฐ๊ธ์ฉ ๋ค๋ฅผ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
- 1
- 1
- 25
Q&A
์ค๋ฌด์์ ์น๊ฐ๋ฐ์๊ฐ ๋ช ์์ ์ผ๋ก ์ ์ธํ๋ ๋ณด์ ์ ์ฑ ์ ๋ฒ์ ๋ฐ ๋ณด์ ์ ์ฑ ์ค์ ์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Express.js๋ฅผ ์๋ก ๋ค๋ฉดCORS: cors ๊ณต์ ๋ฏธ๋ค์จ์ด๋ฅผ ํตํด ์์ฝ๊ฒ ์ค์ ํ ์ ์์ต๋๋ค.์๋ฅผ ๋ค์ด app.use(cors({ /* ์ค์ ์ต์ */ }))์ฟ ํค ๋ณด์ ์์ฑ: ํ๋ ์์ํฌ ์์ฒด์ res.cookie() ๊ฐ์ API๋ก ์ค์ ํ ์ ์์ต๋๋ค.CSP ํค๋๋ ์ฃผ๋ก ์๋ฒ ๋ ๋ฒจ(Nginx, CDN)์ด๋ ๋น๋๋ HTML์ ๋ฐํํ๋ ๊ตฌ๊ฐ๋ฐ์ ์ค์ ํฉ๋๋ค.Express ํ๊ฒฝ์ด๋ผ๋ฉด helmet ๊ฐ์ ๋ฏธ๋ค์จ์ด๋ฅผ ํตํด ๋๋ถ๋ถ์ ๋ณด์ ํค๋๋ฅผ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค.
- 1
- 2
- 39
Q&A
pushState๋ก ์ฃผ์๋ฅผ ๋ฐ๊พธ๋ฉด ๋ ๋๋ง์ด ์ ๋๋ ์ด์ ๊ฐ ๊ถ๊ธํฉ๋๋ค.
pushState๋ ๋ธ๋ผ์ฐ์ ธ์ ํ์คํ ๋ฆฌ ์ํ๋ง ๋ณ๊ฒฝํฉ๋๋ค. ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ ์ด ์ํ์ ์ ํ ์๊ด์๋ ๊ฐ์ฒด์ด๊ณ ์. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋ณ๋์ ๋ฆฌ์กํธ ์ํ(path)๋ฅผ ๋์๋๋ฐ์. ์ด๋ฅผ ๋ณ๊ฒฝํด ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๊ฐ ๋ค์ ๊ทธ๋ ค์ง๋๋ก(๋ฆฌ๋ ๋) ์๋ํ ๊ฒ์ ๋๋ค.์ ๋ฆฌํ๋ฉด,pushState: ํ์คํ ๋ฆฌ ์ํ ๋ณ๊ฒฝ setState: ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ์ํ ๋ณ๊ฒฝ โ ๋ฆฌ๋ ๋ ์ ๋ฐ
- 1
- 2
- 39
Q&A
2025๋ ๊ธฐ์ค ๋ฒ๋ค๋ฌ ํธ๋ ๋์ ์ ํ ๊ธฐ์ค์ด ๊ถ๊ธํฉ๋๋ค (Webpack, Vite, tsup ๋ฑ)
์ ๋ง ๊น์ด ์๋ ์ง๋ฌธ์ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๋ง์ํ์ ๋๋ก ์์ฆ์ ์นํฉ ๋ฟ๋ง ์๋๋ผ ๋ค์ํ ๋ฒ๋ค๋ฌ๊ฐ ๋์๊ณ ํ๋ก์ ํธ๋ง๋ค ์ฌ์ฉํ๋ ๋๊ตฌ๊ฐ ๋ค๋ฅด๊ธด ํฉ๋๋ค. ์ต๊ทผ์๋ Vite๊ฐ ๊ฑฐ์ ํ์ค์ฒ๋ผ ์๋ฆฌ์ก์๋ค๊ณ ๋ด ๋๋ค. ๋๋ถ๋ถ์ ์ ๊ท ํ๋ก์ ํธ์์ ์ด ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๊ณ ์๋๋ฐ์. ๊ฐ๋ฐ ์๋ฒ ์๋๊ฐ ๋งค์ฐ ๋น ๋ฅด๊ณ , ๊ฐ๋ฐ/ํ๋ก๋์ ๋น๋์ ๊ฐ ๊ฐ ๋ค๋ฅธ ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํด ์์ ์ฑ๋ ์ ์งํ๋ ๊ตฌ์กฐ ๋๋ถ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. UI ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ์๋ฅผ ๋ค์ด ๋์์ธ ์์คํ ์ด๋ ๋ด๋ถ ๊ณต์ฉ ์ปดํฌ๋ํธ๋ฅผ ์ ์ํ ๋๋ Rollup์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๊ณ ์. ์ค๋๋ ํ๋ก์ ํธ๋ผ๋ฉด ์ฌ์ ํ ์นํฉ์ ๋ง์ด ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ๋ค์ํ ์ํ๊ณ์ ์ด์ ๋ ์๊ณ ์๋ ๊ฐ ์ ์งํด์จ ์ค์ ์ผ๋ก ์ฝ๊ฒ ๋ฐ๊ฟ ์๋ ์๋๋ผ๊ณ ์. ๊ฐ์ ๋ด์ฉ์ด ์ต์ ํธ๋ ๋์ ๋ค์ ์ฐจ์ด๊ฐ ์๊ธดํด์. ํ์ง๋ง "๋ฒ๋ค๋ฌ์ ๋์ ์๋ฆฌ"๋ฅผ ์ดํดํ๊ณ ์ง์ ์ต์ ๋๊ตฌ์ ์ ์ฉํ๋ ๊ณผ์ ์์ ํฌ๊ฒ ์ฑ์ฅํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์ค๋ฌด ๊ฐ๊ฐ์ ํค์ฐ๋ ๋ฐฉ๋ฒ์ด๊ธฐ๋ ํ๊ณ ์. ์์คํ ์๊ฒฌ ๋จ๊ฒจ์ฃผ์ ์ ๋งค์ฐ ๊ฐ์ฌํฉ๋๋ค.
- 1
- 1
- 85
Q&A
ETag ์ฌ์ฉ์ ์๋ฒ์ ์ฑ๋ฅ ํฅ์
ETag๋ฅผ ํ์ฉํ ์บ์ฑ ๊ธฐ๋ฒ์ ๋ธ๋ผ์ฐ์ ธ์ ์๋ฒ ๋ชจ๋ ์ฑ๋ฅ ํฅ์์ ์ํฅ์ ์ค ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ธ์์๋ ETag๋ฅผ ์ด์ฉํด ์ด๋ฏธ ๋ค์ด๋ก๋ํ ํ์ผ์ ์ฌ์ฌ์ฉํจ์ผ๋ก์จ ๋คํธ์ํฌ ์์ฒญ์ ๋ ๋ณด๋ผ ์ ์์ต๋๋ค. ๋ง์ํ์ ๋๋ก ๋คํธ์ํฌ ๋์ญํญ์ ์๋์ ์์ด์.์๋ฒ๋ If-None-Match ์์ฒญํค๋ ๊ฐ์ ํ์ธ ํ ๋ค, ์์ฒญํ ๋ฆฌ์์ค์ ๊ฐ์ ๊ฐ์ด๋ผ๋ฉด "์ฆ์" ์๋ต์ ๋ณด๋ ๋๋ค. ๋ง์ฝ ์ด ๊ฐ์ด ๋ค๋ฅด๋ค๋ฉด, ์๋ฒ๋ "๋ฆฌ์์ค๋ฅผ ์ฝ๊ณ ์ด๋ฅผ ์๋ต ๋ณธ๋ฌธ์ ์ค์ด์ผ"ํ๋๋ฐ์. ETag๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฌํ ์๋ฒ ๋ฆฌ์์ค๋ฅผ ์๋์ ์๋ ์ด์ ์ด ์์ต๋๋ค.
- 1
- 2
- 30
Q&A
super.show() ํธ์ถํ๋ ์ด์ ๊ฐ ๊ถ๊ธํฉ๋๋ค.
๋ถ๋ชจ ํด๋์ค์ show() ๋ฉ์๋๋ฅผ ํธ์ถํ์ง ์์๋ ๋์ํ๋๋ฐ์. ์ด๋ SearchFormView๊ฐ ํ๋ฉด์์ ์ฌ๋ผ์ง(hide() ๋ฉ์๋ ํธ์ถ)์ ์ด ์์ด ๋๋ฌธ์ ๋๋ค.๊ทธ๋๋ ๋ถ๋ชจ ๋ฉ์๋๋ฅผ ์ค๋ฒ๋ผ์ด๋ฉํ๋ ๊ฒฝ์ฐ์๋ ๋ถ๋ชจ์ ๋ฉ์๋๋ฅผ ํธ์ถํด ์ฃผ๋ ๊ฒ์ด ์ข์ต๋๋ค. ๋ถ๋ชจ View ํด๋์ค๋ css ์์ฑ display๋ฅผ ๋ณ๊ฒฝํ๋ฉด์ ํ๋ฉด์ ๋ ธ์ถ์ฌ๋ถ๋ฅผ ์ ์ดํ๋ hide()์ show() ๋ฉ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ ์์ํ ์์ ํด๋์ค SearchFormView๋ ์ด ๋ฉ์๋๋ฅผ ์ด์ฉํด ํ๋ฉด์ ์จ๊ธฐ๊ณ ๋ ธ์ถํ ์ ์๋๋ฐ์. ์ด๋ฐ ํจ๊ณผ๋ฅผ ์ป์ผ๋ ค๋ฉด ๋ถ๋ชจ์ ๋ฉ์๋๋ฅผ ํธ์ถํด ์ฃผ์ด์ผํฉ๋๋ค. ๋น์ทํ ์ง๋ฌธsuper.show()์ ๋ํด ์ง๋ฌธ๋๋ฆฝ๋๋ค
- 1
- 2
- 30
Q&A
next.js ์ SOP
๋ค, ์ดํดํ์ ๊ฒ ์ ํํ ๋ง์ต๋๋ค. Next.js๋ ์๋ฒ์์ ์ ์ ํ์ผ(html/css/js)๊ณผ api๋ฅผ ํจ๊ป ์ ๊ณตํ๋ ๊ตฌ์กฐ์ธ๋ฐ์. ๋ธ๋ผ์ฐ์ ธ๊ฐ api๋ฅผ ํธ์ถํ ๋, ์ ์ ํ์ผ์ ์ถ์ฒ์ ๊ฐ๊ธฐ ๋๋ฌธ์ SOP์ ๊ด๋ จํ ๋ฌธ์ ๋ฅผ ๊ฒช์ง ์์ผ์ จ์ ๊ฑฐ์์.
- 1
- 2
- 34





![Thumbnail image of the [React Part 1] Learning React by Building and Comparing](https://cdn.inflearn.com/public/courses/326905/cover/739f7b4b-1a9f-478f-a6a8-1a13bf58cae3/326905-eng.png?w=148)
![Thumbnail image of the [React Part 2] Advanced Topics and Hooks](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?w=148)
