๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“บ Front End72

[HTTP] OPTIONS ํ—ค๋”์™€ Preflight ๊ทธ๋ฆฌ๊ณ  CORS OPTIONS ๋Š” RFC 7231 ์— ๋ช…์‹œ๋œ HTTP์˜ ์—ฌ๋Ÿฌ ๋ฉ”์„œ๋“œ ์ค‘ ํ•˜๋‚˜์ด๋‹ค. OPTIONS ๋Š” ์‹ค์ œ๋กœ ์šฐ๋ฆฌ๊ฐ€ ํ”„๋ ˆ์ž„์›Œํฌ๋‚˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์ง์ ‘ ์‚ฌ์šฉํ•  ์ผ์€ ๋“œ๋ฌผ์ง€๋งŒ ํ˜„๋Œ€์˜ Front Back ์„ ๋‚˜๋ˆ„๋Š” ๊ฐœ๋ฐœ ํ๋ฆ„์—์„œ๋Š” ๊ผญ ์•Œ์•„์•ผ ํ•  ๊ฐœ๋…์ค‘ ํ•˜๋‚˜์ด๋‹ค. ์ด Options ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž. HTTP์˜ OPTIONS Mthod Http OPTIONS ๋ฉ”์„œ๋“œ๋Š” target ๋ฆฌ์†Œ์Šค์™€ ํ˜น์€ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๊ธฐ ์œ„ํ•œ ํ†ต์‹  ์˜ต์…˜์„ ํ™•์ธํ•  ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค. ์ฆ‰, ํ•ด๋‹น ํƒ€๊ฒŸ ์„œ๋ฒ„๋‚˜ ๋ฆฌ์†Œ์Šค๊ฐ€ ์–ด๋–ค method, header, content type ๋ฅผ ์ง€์›ํ•˜๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์ฃผ๋กœ Browser ์˜ Js ๊ฐ€ ๋ณด๋‚ด๋Š” Fetch, Axios ์š”์ฒญ์˜ Preflight ์—์„œ ์‚ฌ์šฉ๋˜๊ณค ํ•œ๋‹ค. ๊ทธ๋Ÿผ ์™œ OPTIONS ๋ฅผ.. 2021. 8. 14.
[React-redux] ๋Š˜ ๊ทธ๋ ‡๋“ฏ Todo List ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ๋ฐฐ์šฐ๋Š” ๋ฆฌ์•กํŠธ ๋ฆฌ๋•์Šค ์˜ค๋Š˜์€ React ์—์„œ Redux ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค. ๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์šฐ์„  2๊ฐ€์ง€ ๊ธฐ์ˆ ์ด ์„ ํ–‰๋˜์–ด์•ผ ํ•œ๋‹ค. React์™€ React-Hooks Redux ์˜ ๊ธฐ๋ณธ Concept ์œ„ ๋‚ด์šฉ๋“ค์„ ๋ชจ๋ฅธ๋‹ค๋ฉด ์กฐ๊ธˆ ํž˜๋“ค์–ด์งˆ ์ˆ˜ ์žˆ์œผ๋‹ˆ ์œ„ ๋งํฌ์—์„œ ํ™•์ธํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ธ ๊ฒƒ ๊ฐ™๋‹ค. ๋ชฉ์ฐจ redux์™€ react-redux์˜ ์ฐจ์ด redux ์˜ ๊ธฐ๋ณธ ๊ฐœ๋… ๊ตฌ์„ฑ ์š”์†Œ Provider useDispatch() useSelector() react-redux ๋กœ todo list ๋งŒ๋“ค๊ธฐ ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ ์˜์กด์„ฑ ์ถ”๊ฐ€ styled-components react-redux UI ์ž‘์—…ํ•˜๊ธฐ ํ™ˆ ํ™”๋ฉด ๋งŒ๋“ค๊ธฐ ๋ฆฌ๋•์Šค ์ž‘์—…ํ•˜๊ธฐ action type ๋งŒ๋“ค๊ธฐ action creator ๋งŒ๋“ค๊ธฐ reducer ๋งŒ๋“ค๊ธฐ s.. 2021. 6. 10.
HATEOAS๋ฅผ ๋ชจ๋ฅด๋ฉด ๋‹น์‹ ์ด ์•Œ๊ณ  ์žˆ๋Š” REST API๋Š” REST API๊ฐ€ ์•„๋‹ˆ๋ผ๊ณ  ์žฅ๋‹ดํ• ๊ฒŒ์š”. ์ด ๊ธ€์€ ๊ทธ๋Ÿฐ REST API ๋กœ ๊ดœ์ฐฎ์€๊ฐ€? ์˜ ์ด์‘์ค€ ๊ฐœ๋ฐœ์ž๋‹˜์˜ ๋ฐœํ‘œ ์ž๋ฃŒ์— ์—ฌ๋Ÿฌ ๋ถ€๋ถ„์„ ์ฐจ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค. REST API๋ž€ ๋ฌด์—‡์ผ๊นŒ ๋‚œ ์ง€๊ธˆ๊นŒ์ง€ REST API์— ๋Œ€ํ•ด์„œ ์ƒ๋‹น ๋ถ€๋ถ„์„ ์˜คํ•ดํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. REST API๋ผ๊ณ  ํ•จ์€ GET, POST, PUT, PATCH, DELETE๋“ฑ๊ณผ ๊ฐ™์€ HTTP ๋ฉ”์„œ๋“œ๋ฅผ URI๋ฅผ ํ†ตํ•ด์„œ ์ž˜ ์ด์šฉํ•˜๋Š” ๊ฒƒ, ์ด๋ฅผํ…Œ๋ฉด ์ •๋ณด ์กฐํšŒ๋‚˜ ์ˆ˜์ •์€ /user ์ด๋ผ๋Š” ํ•˜๋‚˜์˜ URI์— ๋‹ค๋ฅธ ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉ, ์ด๋ผ๊ณ  ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ๊ฑด REST API์˜ ์•„์ฃผ ์ž‘์€ ์ผ๋ถ€๋ถ„ ์ค‘ ํ•˜๋‚˜์˜€๋‹ค. ๋”์šฑ ์‹ ๊ธฐํ•œ๊ฑด ์‹ค๋ ฅ ์ข‹์€ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ฐธ์—ฌํ•œ ๊ธˆ์œต ๊ฒฐ์ œ์›์˜ ์˜คํ”ˆ ๋ฑ…ํ‚น API์—์„œ๋„ REST API๋ฅผ ์ œ๋Œ€๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์žˆ๋‹ค. ์‚ฌ์‹ค REST API๋ผ๊ณ  ํ•˜๋ฉด ์•ˆ๋˜์ง€๋งŒ REST API๋ผ๊ณ  ํ•˜๋ฉฐ ์‚ฌ์šฉํ•˜.. 2021. 3. 24.
[Javascript] Fetch API๋กœ ๊ตฌํ˜„ํ•˜๋Š” Ajax ๋น„๋™๊ธฐ ํ†ต์‹  ajax XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ ์›น ์„œ๋ฒ„์™€ ๋น„๋™๊ธฐ๋กœ ํ†ต์‹ ํ•˜๊ณ , DOM ์„ ์ด์šฉํ•ด์„œ ์›น ํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๋ฒ• Asynchronouse JavaScript XML ํ˜„์žฌ XML์„ ์‚ฌ์šฉํ•˜๋Š”๊ฑด ๋“œ๋ฌผ๊ณ  JSON์„ ์‚ฌ์šฉ ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ํŠน์ • ๋ฐ์ดํ„ฐ๋งŒ ๋ฆฌ๋กœ๋“œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ณ  ์ž‘์—…์„ ์ˆ˜ํ–‰ ajax ๊ตฌํ˜„ํ•˜๊ธฐ ajax๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ธฐ์ˆ ์—๋Š” ์—ฌ๋Ÿฌ ๊ธฐ์ˆ ์ด ์กด์žฌํ•œ๋‹ค. ๊ทธ ์ค‘์— ๋Œ€ํ‘œ์ ์ธ 3๊ฐ€์ง€์—์„œ Fetch API์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. XMLHttpRequest Fetch API JQuery Fetch API Fetch API๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ XMLHttpRequest ๋ณด๋‹ค ๋” ๊ฐ•๋ ฅํ•˜๊ณ  ์œ ์—ฐํ•˜๋‹ค. ์ด๋ฒคํŠธ ๊ธฐ๋ฐ˜์ธ XMLHttpRequest๊ณผ๋Š” ๋‹ฌ๋ฆฌ Fetch API๋Š” Promise ๊ธฐ.. 2021. 2. 26.