{"id":2312,"date":"2024-09-08T10:25:55","date_gmt":"2024-09-08T01:25:55","guid":{"rendered":"https:\/\/dohokin.com\/?p=2312"},"modified":"2024-09-08T10:25:56","modified_gmt":"2024-09-08T01:25:56","slug":"%ed%94%84%eb%a1%a0%ed%8a%b8%ec%99%80-%eb%b0%b1%ec%97%94%eb%93%9c-%eb%a1%9c%ea%b7%b8%ec%9d%b8-%ec%9c%a0%ec%a7%80%ec%8b%9c%ed%82%a4%ea%b8%b0-feat-react-django","status":"publish","type":"post","link":"https:\/\/dohokin.com\/?p=2312","title":{"rendered":"\ud504\ub860\ud2b8\uc640 \ubc31\uc5d4\ub4dc \ub85c\uadf8\uc778 \uc720\uc9c0\uc2dc\ud0a4\uae30 (feat. react, django)"},"content":{"rendered":"\n<p>\ud604\uc7ac \ubd80\ud2b8\ucea0\ud504 \uacfc\uc815 \uc911\uc774\uba70, Django\ub85c \ubc31\uc5d4\ub4dc\ub97c \ub2f4\ub2f9\ud558\uace0 \uc788\ub2e4. \uc774\ubc88 \ud504\ub85c\uc81d\ud2b8\ub294 \ub450 \ubc88\uc9f8\ub85c \uc9c4\ud589\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\uc778\ub370, \uccab \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 Django\uc758 <code>Set-Cookie<\/code>\ub97c \uc0ac\uc6a9\ud574 \ucfe0\ud0a4\ub97c \uc124\uc815\ud588\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\ub2e4. \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud560 \ub54c\ub9c8\ub2e4 \ucfe0\ud0a4\uac00 \uc0ac\ub77c\uc838 \ubc84\ub824\uc11c, \uacb0\uad6d \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 <code>access token<\/code>\uacfc <code>refresh token<\/code>\uc744 \uc800\uc7a5\ud558\uc5ec \ub85c\uadf8\uc778 \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ud574\uacb0\ud588\ub2e4.<\/p>\n\n\n\n<p><strong>\uccab \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8\uc758 \ub85c\uadf8\uc778 \uc720\uc9c0 \ubc29\uc2dd:<\/strong><\/p>\n\n\n\n<ol>\n<li>\ubc31\uc5d4\ub4dc\uc5d0\uc11c \uc720\uc800\uac00 \ub85c\uadf8\uc778\ud558\uba74 <code>access token<\/code>\uacfc <code>refresh token<\/code>\uc744 \ubc1c\uae09.<\/li>\n\n\n\n<li>\uc774 \ud1a0\ud070\uc744 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5.<\/li>\n\n\n\n<li>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c\ub294 \uac01 \uc694\uccad\ub9c8\ub2e4 <code>access token<\/code>\uc744 Authorization \ud5e4\ub354\uc5d0 \ub2f4\uc544 \uc804\uc1a1.<\/li>\n\n\n\n<li><code>access token<\/code>\uc774 \ub9cc\ub8cc\ub418\uba74, \uc800\uc7a5\ub41c <code>refresh token<\/code>\uc744 \uc0ac\uc6a9\ud574 \uc0c8\ub85c\uc6b4 <code>access token<\/code>\uc744 \ubc1b\uc544\uc624\ub294 \ubc29\uc2dd\uc73c\ub85c \uc138\uc158\uc744 \uc720\uc9c0.<\/li>\n<\/ol>\n\n\n\n<p><strong>\ubb38\uc81c\uc810:<\/strong><br>\uc6f9 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \ud1a0\ud070\uc744 \uc800\uc7a5\ud558\uba74 \ubcf4\uc548 \ucde8\uc57d\uc810\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4, XSS(Cross-Site Scripting) \uacf5\uaca9\uc5d0 \ub178\ucd9c\ub420 \uc704\ud5d8\uc774 \uc788\ub2e4. \uadf8\ub798\uc11c \uc774\ubc88 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574, \uc6f9 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \ud1a0\ud070\uc744 \uc800\uc7a5\ud558\uc9c0 \uc54a\uace0 \ucfe0\ud0a4\ub97c \ud1b5\ud574 \ub85c\uadf8\uc778 \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\ub294 \ubc29\ubc95\uc744 \uc2dc\ub3c4\ud558\uace0\uc790 \ud55c\ub2e4.<\/p>\n\n\n\n<p><strong>\ub450 \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8 \ubaa9\ud45c:<\/strong><br>\uc774\ubc88 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 <strong>JWT \ud1a0\ud070\uc744 \ucfe0\ud0a4\uc5d0 \uc800\uc7a5<\/strong>\ud574\uc11c \ub85c\uadf8\uc778 \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\ub824\uace0 \ud55c\ub2e4. \ud558\uc9c0\ub9cc \uc544\uc9c1 \ubc31\uc5d4\ub4dc\uc5d0\uc11c \ucfe0\ud0a4\ub97c \uc5b4\ub5bb\uac8c \ub2e4\ub8e8\uc5b4\uc57c \ud560\uc9c0 \ud655\uc2e4\ud788 \uc54c\uc9c0 \ubabb\ud574 \uace0\ubbfc\uc774 \ub41c\ub2e4. \ud2b9\ud788 <strong>\ucfe0\ud0a4\uc758 \uc9c0\uc18d\uc131<\/strong>\uc744 \ubcf4\uc7a5\ud558\uace0, \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud574\ub3c4 \ub85c\uadf8\uc778 \uc0c1\ud0dc\uac00 \uc720\uc9c0\ub418\uac8c \ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p><strong>\ud604\uc7ac \uad6c\uc870:<\/strong><\/p>\n\n\n\n<ol>\n<li>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc\ub97c <strong>\ud558\ub098\uc758 \ub3c4\uba54\uc778<\/strong>\uc73c\ub85c \ud1b5\ud569\ud558\uc5ec \uc124\uc815\ud588\ub2e4.<\/li>\n<\/ol>\n\n\n\n<ul>\n<li><code>www.domain.com<\/code>: \ud504\ub860\ud2b8\uc5d4\ub4dc<\/li>\n\n\n\n<li><code>api.domain.com<\/code>: \ubc31\uc5d4\ub4dc<\/li>\n<\/ul>\n\n\n\n<ol>\n<li>AWS Route 53\uc5d0\uc11c \ub3c4\uba54\uc778\uc744 \uc124\uc815\ud588\uace0, CORS \ubb38\uc81c\ub97c \ud53c\ud558\uae30 \uc704\ud574\uc11c \ub3c4\uba54\uc778\uc744 \uc774\ub807\uac8c \ub098\ub204\uc5c8\ub2e4. \uc774\uc81c \ucfe0\ud0a4\uac00 \uc11c\ub85c \ub2e4\ub978 \uc11c\ube0c \ub3c4\uba54\uc778 \uac04\uc5d0\ub3c4 \uc791\ub3d9\ud558\ub3c4\ub85d <strong>SameSite \uc18d\uc131<\/strong>\uc744 \uc801\uc808\ud788 \uc124\uc815\ud558\ub294 \uac83\uc774 \ud544\uc694\ud558\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><strong>\ud574\uc57c \ud560 \uc77c:<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>\ubc31\uc5d4\ub4dc\uc5d0\uc11c \ucfe0\ud0a4 \uc124\uc815\ud558\uae30<\/strong>: Django\uc5d0\uc11c <code>Set-Cookie<\/code>\ub97c \uc0ac\uc6a9\ud560 \ub54c, <code>HttpOnly<\/code>, <code>Secure<\/code>, <code>SameSite<\/code> \uc18d\uc131\uc744 \uc801\uc808\ud788 \uc124\uc815\ud574\uc11c \ucfe0\ud0a4\uac00 \ubcf4\uc548\uc801\uc73c\ub85c \uc548\uc804\ud558\uba74\uc11c\ub3c4 \ub2e4\ub978 \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud574\ub3c4 \uc720\uc9c0\ub418\ub3c4\ub85d \ud574\uc57c \ud55c\ub2e4.<\/li>\n\n\n\n<li><strong>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc640\uc758 \ud1b5\uc2e0<\/strong>: \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c\ub294 \ucfe0\ud0a4\uc5d0 \uc788\ub294 JWT \ud1a0\ud070\uc744 \uc774\uc6a9\ud574 \uc694\uccad\uc744 \ubcf4\ub0bc \ub54c \uc790\ub3d9\uc73c\ub85c \ud3ec\ud568\ub418\ub3c4\ub85d \ud574\uc57c \ud55c\ub2e4. \uc774\ub97c \uc704\ud574 Axios \ub4f1\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0\uc11c <code>withCredentials<\/code> \uc635\uc158\uc744 \uc0ac\uc6a9\ud574\uc57c \ud560 \uc218 \uc788\ub2e4.<\/li>\n\n\n\n<li><strong>\ub9ac\ud504\ub808\uc2dc \ud1a0\ud070 \uc804\ub7b5<\/strong>: <code>access token<\/code>\uc758 \uc720\ud6a8\uae30\uac04\uc774 \uc9e7\uae30 \ub54c\ubb38\uc5d0, \ubc31\uc5d4\ub4dc\uc5d0\uc11c <code>refresh token<\/code>\uc744 \ud65c\uc6a9\ud574 \uc0c8\ub85c\uc6b4 <code>access token<\/code>\uc744 \uc790\ub3d9\uc73c\ub85c \ubc1c\uae09\ud558\ub294 \ub85c\uc9c1\uc774 \ud544\uc694\ud558\ub2e4.<\/li>\n\n\n\n<li><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"442\" src=\"https:\/\/dohokin.com\/wp-content\/uploads\/2024\/06\/image-1024x442.png\" alt=\"\" class=\"wp-image-2314\" srcset=\"https:\/\/dohokin.com\/wp-content\/uploads\/2024\/06\/image-1024x442.png 1024w, https:\/\/dohokin.com\/wp-content\/uploads\/2024\/06\/image-300x130.png 300w, https:\/\/dohokin.com\/wp-content\/uploads\/2024\/06\/image-768x332.png 768w, https:\/\/dohokin.com\/wp-content\/uploads\/2024\/06\/image-1536x664.png 1536w, https:\/\/dohokin.com\/wp-content\/uploads\/2024\/06\/image.png 1752w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud604\uc7ac \ubd80\ud2b8\ucea0\ud504 \uacfc\uc815 \uc911\uc774\uba70, Django\ub85c \ubc31\uc5d4\ub4dc\ub97c \ub2f4\ub2f9\ud558\uace0 \uc788\ub2e4. \uc774\ubc88 \ud504\ub85c\uc81d\ud2b8\ub294 \ub450 \ubc88\uc9f8\ub85c \uc9c4\ud589\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\uc778\ub370, \uccab \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 Django\uc758 Set-Cookie\ub97c \uc0ac\uc6a9\ud574 \ucfe0\ud0a4\ub97c \uc124\uc815\ud588\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\ub2e4. \ud398\uc774\uc9c0\ub97c \uc774\ub3d9\ud560 \ub54c\ub9c8\ub2e4 \ucfe0\ud0a4\uac00 \uc0ac\ub77c\uc838 \ubc84\ub824\uc11c, \uacb0\uad6d \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 access token\uacfc refresh token\uc744 \uc800\uc7a5\ud558\uc5ec \ub85c\uadf8\uc778 \uc0c1\ud0dc\ub97c \uc720\uc9c0\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \ud574\uacb0\ud588\ub2e4. \uccab \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8\uc758 \ub85c\uadf8\uc778 \uc720\uc9c0 \ubc29\uc2dd: \ubb38\uc81c\uc810:\uc6f9 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \ud1a0\ud070\uc744 \uc800\uc7a5\ud558\uba74 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/dohokin.com\/index.php?rest_route=\/wp\/v2\/posts\/2312"}],"collection":[{"href":"https:\/\/dohokin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dohokin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dohokin.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dohokin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2312"}],"version-history":[{"count":2,"href":"https:\/\/dohokin.com\/index.php?rest_route=\/wp\/v2\/posts\/2312\/revisions"}],"predecessor-version":[{"id":2389,"href":"https:\/\/dohokin.com\/index.php?rest_route=\/wp\/v2\/posts\/2312\/revisions\/2389"}],"wp:attachment":[{"href":"https:\/\/dohokin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dohokin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dohokin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}