{"id":44,"date":"2022-11-28T23:56:25","date_gmt":"2022-11-28T14:56:25","guid":{"rendered":"http:\/\/blog.defree.co.kr\/?p=44"},"modified":"2022-12-01T01:00:20","modified_gmt":"2022-11-30T16:00:20","slug":"fmap-create-project","status":"publish","type":"post","link":"https:\/\/blog.defree.co.kr\/?p=44","title":{"rendered":"fmap create project"},"content":{"rendered":"\n

electron + react \ud504\ub85c\uc81d\ud2b8 \uc14b\ud305<\/h2>\n\n\n\n

create<\/h3>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npx create-react-app fmap<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
electron \ucd94\uac00<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
cd<\/span> fmap<\/span><\/span>\nyarn add --dev electron<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\uc2e4\ud589 \uc2a4\ud06c\ub9bd\ud2b8 \ucd94\uac00 (package.json), \uc77c\ub809\ud2b8\ub860 \uc9c4\uc785\uc810 \uc124\uc815(src\/StartUp.js)<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{<\/span><\/span>\n  <\/span>"<\/span>name<\/span>"<\/span>:<\/span> <\/span>"<\/span>fmap<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>version<\/span>"<\/span>:<\/span> <\/span>"<\/span>0.1.0<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>private<\/span>"<\/span>:<\/span> <\/span>true,<\/span><\/span>\n  <\/span>"<\/span>dependencies<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>@testing-library\/jest-dom<\/span>"<\/span>:<\/span> <\/span>"<\/span>^5.16.5<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>@testing-library\/react<\/span>"<\/span>:<\/span> <\/span>"<\/span>^13.4.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>@testing-library\/user-event<\/span>"<\/span>:<\/span> <\/span>"<\/span>^13.5.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>react<\/span>"<\/span>:<\/span> <\/span>"<\/span>^18.2.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>react-dom<\/span>"<\/span>:<\/span> <\/span>"<\/span>^18.2.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>react-scripts<\/span>"<\/span>:<\/span> <\/span>"<\/span>5.0.1<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>web-vitals<\/span>"<\/span>:<\/span> <\/span>"<\/span>^2.1.4<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>scripts<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>electron<\/span>"<\/span>:<\/span> <\/span>"<\/span>electron .<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>start<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts start<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>build<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts build<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>test<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts test<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>eject<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts eject<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>eslintConfig<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>extends<\/span>"<\/span>:<\/span> <\/span>[<\/span><\/span>\n      <\/span>"<\/span>react-app<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>react-app\/jest<\/span>"<\/span><\/span>\n    <\/span>]<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>browserslist<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>production<\/span>"<\/span>:<\/span> <\/span>[<\/span><\/span>\n      <\/span>"<\/span>>0.2%<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>not dead<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>not op_mini all<\/span>"<\/span><\/span>\n    <\/span>],<\/span><\/span>\n    <\/span>"<\/span>development<\/span>"<\/span>:<\/span> <\/span>[<\/span><\/span>\n      <\/span>"<\/span>last 1 chrome version<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>last 1 firefox version<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>last 1 safari version<\/span>"<\/span><\/span>\n    <\/span>]<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>devDependencies<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>electron<\/span>"<\/span>:<\/span> <\/span>"<\/span>^21.3.1<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>main<\/span>"<\/span>:<\/span> <\/span>"<\/span>src\/StartUp.js<\/span>"<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
\uc77c\ub809\ud2b8\ub860 \uc9c4\uc785\uc810 (src\/StartUp.js)<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> <\/span>{<\/span> app<\/span>,<\/span> BrowserWindow <\/span>}<\/span> <\/span>=<\/span> <\/span>require<\/span>(<\/span>'<\/span>electron<\/span>'<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> path <\/span>=<\/span> <\/span>require<\/span>(<\/span>'<\/span>path<\/span>'<\/span>)<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>createWindow<\/span> <\/span>()<\/span> <\/span>{<\/span> <\/span><\/span>\n  <\/span>const<\/span> <\/span>win<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>BrowserWindow<\/span>(<\/span>{<\/span> <\/span><\/span>\n    width<\/span>:<\/span> <\/span>1600<\/span>,<\/span> <\/span><\/span>\n    height<\/span>:<\/span> <\/span>900<\/span>,<\/span> <\/span><\/span>\n    webPreferences<\/span>:<\/span> <\/span>{<\/span> <\/span><\/span>\n      nodeIntegration<\/span>:<\/span> <\/span>true<\/span>,<\/span><\/span>\n      contextIsolation <\/span>:<\/span> <\/span>false<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>win<\/span>.<\/span>loadURL<\/span>(<\/span>"<\/span>http:\/\/localhost:3000<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>win<\/span>.<\/span>webContents<\/span>.<\/span>openDevTools<\/span>()<\/span>;<\/span> <\/span><\/span>\n}<\/span> <\/span><\/span>\napp<\/span>.<\/span>whenReady<\/span>()<\/span>.<\/span>then<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span> <\/span><\/span>\n  <\/span>createWindow<\/span>()<\/span>;<\/span><\/span>\n}<\/span>) <\/span><\/span>\napp<\/span>.<\/span>on<\/span>(<\/span>'<\/span>window-all-closed<\/span>'<\/span>,<\/span> <\/span>function<\/span> <\/span>()<\/span> <\/span>{<\/span> <\/span><\/span>\n  <\/span>if<\/span>(<\/span>process<\/span>.<\/span>platform<\/span> <\/span>!==<\/span> <\/span>'<\/span>darwin<\/span>'<\/span>) <\/span>{<\/span><\/span>\n    <\/span>app<\/span>.<\/span>quit<\/span>()<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
\uc77c\ub809\ud2b8\ub860 \uc571\uc744 \uc2e4\ud589\ud560 \ub54c \ub85c\uceec \ub178\ub4dc \uc11c\ubc84\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud574 \ud328\ud0a4\uc9c0 \ucd94\uac00<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
yarn add --dev concurrently wait-on<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\uc124\uce58\ud55c concurrently, wait-on\uc744 package.json\uc5d0 \ucd94\uac00<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{<\/span><\/span>\n  <\/span>"<\/span>name<\/span>"<\/span>:<\/span> <\/span>"<\/span>fmap<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>version<\/span>"<\/span>:<\/span> <\/span>"<\/span>0.1.0<\/span>"<\/span>,<\/span><\/span>\n  <\/span>"<\/span>private<\/span>"<\/span>:<\/span> <\/span>true,<\/span><\/span>\n  <\/span>"<\/span>dependencies<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>@testing-library\/jest-dom<\/span>"<\/span>:<\/span> <\/span>"<\/span>^5.16.5<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>@testing-library\/react<\/span>"<\/span>:<\/span> <\/span>"<\/span>^13.4.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>@testing-library\/user-event<\/span>"<\/span>:<\/span> <\/span>"<\/span>^13.5.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>react<\/span>"<\/span>:<\/span> <\/span>"<\/span>^18.2.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>react-dom<\/span>"<\/span>:<\/span> <\/span>"<\/span>^18.2.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>react-scripts<\/span>"<\/span>:<\/span> <\/span>"<\/span>5.0.1<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>web-vitals<\/span>"<\/span>:<\/span> <\/span>"<\/span>^2.1.4<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>scripts<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>electron<\/span>"<\/span>:<\/span> <\/span>"<\/span>electron .<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>startup<\/span>"<\/span>:<\/span> <\/span>"<\/span>concurrently <\/span>\\"<\/span>yarn react-scripts start<\/span>\\"<\/span> <\/span>\\"<\/span>yarn electron<\/span>\\"<\/span> <\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>start<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts start<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>build<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts build<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>test<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts test<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>eject<\/span>"<\/span>:<\/span> <\/span>"<\/span>react-scripts eject<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>eslintConfig<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>extends<\/span>"<\/span>:<\/span> <\/span>[<\/span><\/span>\n      <\/span>"<\/span>react-app<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>react-app\/jest<\/span>"<\/span><\/span>\n    <\/span>]<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>browserslist<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>production<\/span>"<\/span>:<\/span> <\/span>[<\/span><\/span>\n      <\/span>"<\/span>>0.2%<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>not dead<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>not op_mini all<\/span>"<\/span><\/span>\n    <\/span>],<\/span><\/span>\n    <\/span>"<\/span>development<\/span>"<\/span>:<\/span> <\/span>[<\/span><\/span>\n      <\/span>"<\/span>last 1 chrome version<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>last 1 firefox version<\/span>"<\/span>,<\/span><\/span>\n      <\/span>"<\/span>last 1 safari version<\/span>"<\/span><\/span>\n    <\/span>]<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>devDependencies<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>"<\/span>concurrently<\/span>"<\/span>:<\/span> <\/span>"<\/span>^7.6.0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>electron<\/span>"<\/span>:<\/span> <\/span>"<\/span>^21.3.1<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>wait-on<\/span>"<\/span>:<\/span> <\/span>"<\/span>^6.0.1<\/span>"<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>"<\/span>main<\/span>"<\/span>:<\/span> <\/span>"<\/span>src\/StartUp.js<\/span>"<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
yarn startup \uc2e4\ud589\uc2dc \uc790\ub3d9 \uc2e4\ud589\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub294 \uc81c\uc678\ud558\ub3c4\ub85d \uc124\uc815(.env)<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
BROWSER<\/span>=<\/span>none<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
yarn startup \uc2e4\ud589<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
yarn startup<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
electron + react \ud504\ub85c\uc81d\ud2b8 \uc14b\ud305 create electron \ucd94\uac00 \uc2e4\ud589 \uc2a4\ud06c\ub9bd\ud2b8 \ucd94\uac00 (package.json), \uc77c\ub809\ud2b8\ub860 \uc9c4\uc785\uc810 \uc124\uc815(src\/StartUp.js) \uc77c\ub809\ud2b8\ub860 \uc9c4\uc785\uc810 (src\/StartUp.js) \uc77c\ub809\ud2b8\ub860 \uc571\uc744 \uc2e4\ud589\ud560 \ub54c \ub85c\uceec \ub178\ub4dc \uc11c\ubc84\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud574 \ud328\ud0a4\uc9c0 \ucd94\uac00 \uc124\uce58\ud55c concurrently, wait-on\uc744 package.json\uc5d0 \ucd94\uac00 yarn startup \uc2e4\ud589\uc2dc \uc790\ub3d9 \uc2e4\ud589\ud558\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub294 \uc81c\uc678\ud558\ub3c4\ub85d \uc124\uc815(.env) yarn startup \uc2e4\ud589<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-1","post-preview"],"_links":{"self":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=44"}],"version-history":[{"count":6,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/44\/revisions\/66"}],"wp:attachment":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}