{"id":1917,"date":"2015-12-16T01:03:04","date_gmt":"2015-12-16T01:03:03","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=1917"},"modified":"2023-10-06T00:03:18","modified_gmt":"2023-10-06T07:03:18","slug":"first-steps-with-pouchdb-sync-gateway-todomvc-todolite","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/first-steps-with-pouchdb-sync-gateway-todomvc-todolite\/","title":{"rendered":"PouchDB \ubc0f \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc758 \uccab \ub2e8\uacc4"},"content":{"rendered":"

\uc774\ubc88 \uc8fc PouchDB v3.4.0<\/a>\u00a0\uac00 Couchbase \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc640 \ud638\ud658\ub418\uc5b4 \ucd9c\uc2dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc774 \uae00\uc5d0\uc11c\ub294 \uae30\uc874\uc758 \ufffcTodoMVC \uc608\uc81c\ufffc\ub97c \uac00\uc9c0\uace0 Facebook \uc778\uc99d\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud544\ud130\ub9c1\ub41c \ub3d9\uae30\ud654\ub97c \ucd94\uac00\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc6f9 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac04 \ub3d9\uae30\ud654 \uc678\uc5d0\ub3c4 \ub370\uc774\ud130 \ubaa8\ub378\uc744 \uc57d\uac04 \ubcc0\uacbd\ud558\uc5ec \ub2e4\uc74c\uc5d0\uc11c \uc2e4\ud589 \uc911\uc778 \uae30\uc874 ToDoLite \uc571\uacfc \ub3d9\uae30\ud654\ud558\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. iOS\ufffc<\/a> \uadf8\ub9ac\uace0 \ufffc\uc548\ub4dc\ub85c\uc774\ub4dc<\/a>:<\/p>\n

\ub530\ub77c \ud558\ub824\uba74 \ucee4\ubc0b \ufffc\uc5d0\uc11c TodoMVC \uc608\uc81c\ub97c \uc5f4\uace0 \uc2e4\ud589\ud558\uba74 \ub429\ub2c8\ub2e4.d9bb961<\/a>. \ud3b8\uc758\ub97c \uc704\ud574 Facebook \ub85c\uadf8\uc778 \ucf54\ub4dc\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4. app.js<\/strong>. \uc0ac\uc6a9\uc790\uac00 \ub85c\uadf8\uc778\ud558\uba74 \uae30\ub2a5 \uc2dc\uc791 \uc138\uc158 \ubc0f \ub3d9\uae30\ud654(\uc561\uc138\uc2a4 \ud1a0\ud070, \uc0ac\uc6a9\uc790 ID)<\/strong>\u00a0\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \uc774\uc81c \uc774\ub97c \uc2e4\ud604\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4!<\/p>\n

\ube60\ub978 \uc2dc\uc791<\/h1>\n

\ud3ec\ud2b8\uc5d0\uc11c \uc571\uc744 \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4. 9000<\/strong>\u00a0\uc5d0 \ub300\ud574 CORS\ub97c \uad6c\uc131\ud560 \uac83\uc774\ubbc0\ub85c localhost:9000<\/strong>\u00a0\ub098\uc911\uc5d0. \uac04\ub2e8\ud55c \ud30c\uc774\uc36c \uba85\ub839\uc73c\ub85c \ucda9\ubd84\ud569\ub2c8\ub2e4:<\/p>\n

$ python -m SimpleHTTPServer 9000\r\n<\/pre>\n
\ub370\uc774\ud130 \ubaa8\ub378\ub9c1<\/h1>\n
\ud1a0\ub3c4MVC\uc640 \ud1a0\ub3c4\ub77c\uc774\ud2b8\ub294 \ub370\uc774\ud130 \ubaa8\ub378\uc774 \uc57d\uac04 \ub2e4\ub985\ub2c8\ub2e4. ToDoLite \uc571\uc5d0\uc11c\ub294 \ud55c \uc0ac\uc6a9\uc790\uac00 \uc5ec\ub7ec \uac1c\uc758 \ubaa9\ub85d\uc744 \ub9cc\ub4e4\uc5b4 \uc5ec\ub7ec \uc0ac\uc6a9\uc790\uc640 \uacf5\uc720\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800 \uc608\uc0c1\ub418\ub294 \uc791\uc5c5 \ubb38\uc11c\uac00 \uc788\ub294 \uc791\uc5c5 \ubb38\uc11c\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. title<\/strong>\u00a0\uc18d\uc131\uacfc list_id<\/strong>\u00a0\uac00 \uc18d\ud55c \ubaa9\ub85d(\uc774 \uacbd\uc6b0 123)\uc744 \ucc38\uc870\ud569\ub2c8\ub2e4:<\/p>\n
{\r\n  \"_id\": \"E9W3-9I2Y-O8W2-6Y4D\",\r\n  \"type\": \"task\",\r\n  \"list_id\": \"123\",\r\n  \"title\": \"A task title\"\r\n}\r\n<\/pre>\n
\ub9c8\ucc2c\uac00\uc9c0\ub85c \ubaa9\ub85d \ubb38\uc11c\uc5d0\ub3c4 title<\/strong>\u00a0\uc18c\uc720\uc790\uc640 \ud574\ub2f9 \uc18c\uc720\uc790\uac00 \uc18d\ud55c \uc0ac\uc6a9\uc790\ub97c \ucc38\uc870\ud558\ub294 \uc18c\uc720\uc790:<\/p>\n
{\r\n  \"_id\": \"123\",\r\n  \"type\": \"list\",\r\n  \"title\": \"TodoMVC list\",\r\n  \"owner\": \"p:1234567890\"\r\n}\r\n<\/pre>\n
\uadf8\ub7ec\ub098 TodoMVC\ub294 \ub2e8\uc77c \ubaa9\ub85d \uc571\uc785\ub2c8\ub2e4. \uac04\ub2e8\ud558\uac8c \uc720\uc9c0\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\uc790\uac00 \ub85c\uadf8\uc778\ud558\uc790\ub9c8\uc790 \ubaa9\ub85d \ubb38\uc11c\ub97c \ucf54\ub4dc\uc5d0 \uc0bd\uc785\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub77c\ub294 \uc0c8 \ud568\uc218\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub9c8\uc774\uadf8\ub808\uc774\ud2b8\uac8c\uc2a4\ud2b8\ud22c\uc720\uc800<\/strong> \ub97c \ud074\ub9ad\ud558\uc5ec \uc0ac\uc6a9\uc790 ID\ub85c \ubaa9\ub85d \ubb38\uc11c\ub97c \uc0dd\uc131\ud558\uace0 PouchDB\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4:<\/p>\n
function migrateGuestToUser(userId) {\r\n  var list = {\r\n    _id: '123',\r\n    type: 'list',\r\n    title: 'TodoMVC list',\r\n    owner: 'p:' + userId\r\n  };\r\n  db.put(list, function(err, result) {\r\n    if (!err) {\r\n      console.log('Successfully saved user list');\r\n    }\r\n  })\r\n}\r\n<\/pre>\n
\ucc38\uace0:<\/strong> \uc18c\uc720\uc790 \ud544\ub4dc\ub97c \uc124\uc815\ud558\ub294 \uac83\uc774 \ub9e4\uc6b0 \uc911\uc694\ud558\uba70, \ub3d9\uae30\ud654 \uae30\ub2a5\uc774 \ubb38\uc11c\ub97c \uac70\ubd80\ud569\ub2c8\ub2e4. \uadf8\ub807\uc9c0 \uc54a\uc73c\uba74<\/a>.<\/p>\n
\uadf8\ub9ac\uace0 \uc2dc\uc791 \uc138\uc158 \ubc0f \ub3d9\uae30\ud654<\/strong>:<\/p>\n
function startSessionAndSync(accessToken, userId) {\r\n  migrateGuestToUser(userId);\r\n}\r\n<\/pre>\n
\uc791\uc5c5 \ubb38\uc11c\ub294 \ubaa9\ub85d\uc5d0 \uc18d\ud574 \uc788\uc73c\ubbc0\ub85c list_id<\/strong> \uc18d\uc131\uc744 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \ud504\ub85c\ud37c\ud2f0\ub97c \ubcc0\uacbd\ud558\ub824\uba74 \ud1a0\ub3c4 \ucd94\uac00<\/strong> \ud568\uc218\uc758 app.js<\/strong> \ub97c \uc544\ub798\uc640 \uac19\uc774 \ubcc0\uacbd\ud569\ub2c8\ub2e4. \uc544\ub798\uc5d0\uc11c list_id<\/strong> \ud544\ub4dc\ub97c \ud558\ub4dc\ucf54\ub529\ub41c _id<\/strong> \ub97c \uc0bd\uc785\ud588\uc2b5\ub2c8\ub2e4:<\/p>\n
function addTodo(text) {\r\n  var todo = {\r\n    _id: new Date().toISOString(),\r\n    title: text,\r\n    checked: false,\r\n    type: 'task',\r\n    list_id: '123',\r\n    created_at: new Date()\r\n  };\r\n  db.put(todo, function callback(err, result) {\r\n    if (!err) {\r\n      console.log('Successfully posted a todo!');\r\n    }\r\n  });\r\n}\r\n<\/pre>\n
\uc774\uc81c ToDoLite\uc758 \ub370\uc774\ud130 \ubaa8\ub378\uc744 \uc900\uc218\ud558\ub294 \uc801\uc808\ud55c \ubb38\uc11c\uac00 \uc788\uc73c\ubbc0\ub85c \uc778\uc99d \ubc0f \ubcf5\uc81c\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc5d0\uc11c CORS \ud65c\uc131\ud654\ud558\uae30<\/h1>\n
\uc774 \uc790\uc2b5\uc11c\uc5d0\uc11c\ub294 \ub2e4\uc74c\uc5d0\uc11c \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc758 \ub85c\uceec \uc778\uc2a4\ud134\uc2a4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4. localhost:4984<\/strong> \ud558\uc9c0\ub9cc \uc6f9 \uc571\uc740 localhost:9000<\/strong>. \uc774 \uc2dc\uc810\uc5d0\uc11c \ub3d9\uc77c\ud55c \uc6d0\ubcf8 \uc815\ucc45 \uc624\ub958\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc Chris<\/a> \ucd5c\uadfc \uc774\ub97c \uc704\ud574 \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc5d0 CORS \uc9c0\uc6d0\uc744 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc11c\ubc84 \uce21 \ucf54\ub4dc\ub97c \ud55c \uc904\ub3c4 \uc791\uc131\ud560 \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.)<\/p>\n
CORS\ub97c \uc0ac\uc6a9\ud558\uba74 \uc6f9 \uc571\uc774 \uc6d0\ubcf8 \ub3c4\uba54\uc778\uc774 \uc544\ub2cc \ub2e4\ub978 \ub3c4\uba54\uc778\uc758 \ub9ac\uc18c\uc2a4\uc5d0 \uc561\uc138\uc2a4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc5d0\uc11c CORS\ub97c \uc0ac\uc6a9 \uc124\uc815\ud558\uba74 \ube0c\ub77c\uc6b0\uc800\uc5d0 \"\uc608, \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774 \ub3c4\uba54\uc778 \uc774\ub984\uc774 \uc774 \uc6f9 \uc571\uacfc \ud1b5\uc2e0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4\"\ub77c\ub294 \uba54\uc2dc\uc9c0\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \uc5f4\uae30 \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774-config.json<\/strong> \ucd94\uac00 CORS \uad6c\uc131\uc744 \ud1b5\ud574 \ud65c\uc131\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. localhost:9000<\/strong>:<\/p>\n
{ \r\n ...\r\n \"CORS\": {\r\n   \"Origin\": [\"https:\/\/localhost:9000\"],\r\n   \"LoginOrigin\": [\"https:\/\/localhost:9000\"],\r\n   \"Headers\": [\"Content-Type\"],\r\n   \"MaxAge\": 17280000\r\n },\r\n ...\r\n}\r\n<\/pre>\n
\ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774 1.1 \uc774\uc0c1\uc744 \uc0ac\uc6a9\ud558\uc138\uc694. \uad6c\uc131 \ud30c\uc77c\ub85c \uc2dc\uc791\ud558\uc138\uc694:<\/p>\n
$ ~\/Downloads\/sync_gateway sync-gateway-config.json\r\n<\/pre>\n
\ub2e4\uc2dc \ub4e4\uc5b4\uac00\uae30 app.js<\/strong>\ub97c \ud074\ub9ad\ud558\uace0 \uadf8\uc5d0 \ub530\ub77c \uc6d0\uaca9 \uc18c\ud30c URL\uc744 \uc5c5\ub370\uc774\ud2b8\ud569\ub2c8\ub2e4:<\/p>\n
var SYNC_GATEWAY_URL = 'https:\/\/127.0.0.1:4984\/todos\/';\r\nvar remoteCouch = SYNC_GATEWAY_URL;\r\n<\/pre>\n
\uc774\uc81c \ubaa9\ub85d\uc744 \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc5d0 \ub3d9\uae30\ud654\ud558\ub824\uace0 \ud558\uba74 401 \uad8c\ud55c \uc5c6\uc74c \uc624\ub958\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. Facebook \ub85c\uadf8\uc778\uc73c\ub85c \uc0ac\uc6a9\uc790 \uc138\uc158\uc744 \uc0dd\uc131\ud558\uc5ec \uc774 \ubb38\uc81c\ub97c \ud574\uacb0\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\ub85c \uc778\uc99d\ud558\uae30<\/h1>\n
\ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\ub85c \uc778\uc99d\ud558\ub824\uba74 \ub2e4\uc74c \uc8fc\uc18c\ub85c POST \uc694\uccad\uc744 \ubcf4\ub0b4\uba74 \ub429\ub2c8\ub2e4. \/todos\/_facebook<\/strong> \uc561\uc138\uc2a4 \ud1a0\ud070\uc744 \uc0ac\uc6a9\ud558\uc5ec 200 OK\ub97c \ubc18\ud658\ud558\uba74 \ube0c\ub77c\uc6b0\uc800\ub294 \ud5a5\ud6c4 \ud478\uc2dc\/\ud480 \ubcf5\uc81c\ub97c \uc704\ud574 \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc5d0\uc11c \ubc18\ud658\ub41c \uc138\uc158 \ucfe0\ud0a4\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n
function startSyncGatewaySession(accessToken) {\r\n  var request = new XMLHttpRequest();\r\n  request.open('POST', SYNC_GATEWAY_URL + '\/_facebook', true);\r\n  request.setRequestHeader('Content-Type', 'application\/json');\r\n  request.onreadystatechange = function() {\r\n    if (request.readyState == 4 && request.status == 200) {\r\n      console.log('New SG session, starting sync!');\r\n      sync();\r\n  };\r\n  request.withCredentials = true;\r\n  request.send(JSON.stringify({\"access_token\": accessToken}));\r\n}\r\n<\/pre>\n
\ucc38\uace0<\/strong>: \uc124\uc815\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. request.withCredentials = true<\/strong> \ub97c CORS \uc694\uccad\uc5d0 \ucd94\uac00\ud558\uc5ec \ud5a5\ud6c4 \uc778\uc99d\ub41c \uc694\uccad(\ud478\uc2dc\/\ud480 \ubcf5\uc81c)\uc744 \uc704\ud574 \ub3d9\uae30\ud654 \uac8c\uc774\ud2b8\uc6e8\uc774\uc5d0\uc11c \ubc18\ud658\ub41c \ucfe0\ud0a4\ub97c \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n
\uc2e0\uace0\ud558\uae30 \uc2dc\uc791 \uc138\uc158 \ubc0f \ub3d9\uae30\ud654<\/strong> \ub97c \uc804\ub2ec\ud558\uace0 \uc561\uc138\uc2a4 \ud1a0\ud070<\/strong> Facebook\uc5d0\uc11c \ub3cc\uc544\uc654\uc2b5\ub2c8\ub2e4:<\/p>\n
function startSessionAndSync(accessToken, userId) {\r\n  migrateGuestToUser(userId);\r\n  startSyncGatewaySession(accessToken);\r\n}\r\n<\/pre>\n
\ub9c8\ubb34\ub9ac<\/h1>\n
\uc774\uc81c \ube0c\ub77c\uc6b0\uc800\ub97c \uc5f4\uba74 \ud560 \uc77c \ud56d\ubaa9\uc774 \uc5f4\ub824 \uc788\ub294 \ub2e4\ub978 \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc774\ub098 TodoLite\ub97c \uc2e4\ud589\ud558\ub294 \uae30\ubcf8 \uc571\uacfc \ub3d9\uae30\ud654\ub418\ub294\uc9c0 \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc0ac\uc6a9\uc790\ub294 \ub85c\uadf8\uc778\ud558\uc9c0 \uc54a\uace0\ub3c4 \uc791\uc5c5\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc0ac\uc6a9\uc790\uac00 \ub85c\uadf8\uc778\ud558\ub294 \uc21c\uac04 \ud574\ub2f9 \uc791\uc5c5\uc740 \uc0ac\uc6a9\uc790\uc758 \ubaa9\ub85d\uc5d0 \uc18d\ud558\uac8c \ub429\ub2c8\ub2e4. \uac8c\uc2a4\ud2b8 \uacc4\uc815 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \uac83\uc740 \uc624\ud504\ub77c\uc778 \uc6b0\uc120 \uae30\ub2a5\uc744 \uad6c\ucd95\ud560 \ub54c \uc5bb\uc744 \uc218 \uc788\ub294 \ub9ce\uc740 \uc774\uc810 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4.<\/p>\n
\uc8fc\ubaa9\ud558\uc138\uc694. TodoMVC \ubaa9\ub85d<\/strong> \ubb38\uc11c\uac00 Chrome\uc5d0\uc11c \uc791\uc5c5\uc73c\ub85c \ud45c\uc2dc\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774\ub294 \uc774 \uc608\uc81c\uc5d0\uc11c \ubaa8\ub4e0 \ubb38\uc11c<\/strong> \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc791\uc5c5\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c \uae00\uc5d0\uc11c\ub294 \ub9f5\/\ucd95\uc18c \ucffc\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc911 \ubaa9\ub85d \uae30\ub2a5\uacfc \ud504\ub85c\ud544 \ubb38\uc11c\ub97c \ucd94\uac00\ud558\uace0 \ub2e4\ub978 \uc0ac\uc6a9\uc790\uc640 \uacf5\uc720\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc790\uc138\ud788 \uc77d\uc5b4\ubcf4\uc138\uc694:<\/p>\n