{"id":4169,"date":"2026-01-30T12:41:00","date_gmt":"2026-01-30T03:41:00","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=4169"},"modified":"2026-02-12T22:41:27","modified_gmt":"2026-02-12T13:41:27","slug":"vite-reactapp-tsx","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/01\/30\/vite-reactapp-tsx\/","title":{"rendered":"[Vite+React]Vite + React \uc124\uce58 + Postgresql(MacOS)"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb Vite + \ub9ac\uc561\ud2b8 \uc124\uce58 \ubc0f \uc2e4\ud589(MacOS)<br>Installing and Running Vite + React (MacOS)<\/p>\n\n\n\n<p>\u2714\ufe0f Vite+React\uc5d0\uc11c Vite\ub780  \ud504\ub791\uc2a4\uc5b4\ub85c <strong>\ube60\ub974\ub2e4<\/strong>\ub77c\ub294 \ub73b\uc785\ub2c8\ub2e4.<br>In Vite+React, Vite means fast in French.<\/p>\n\n\n\n<p>\u2714\ufe0f \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud558\uace0 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\ub294 \uc18d\ub3c4\ub97c \ud68d\uae30\uc801\uc73c\ub85c \uac1c\uc120\ud558\ub294 \uac83\uc744 \ubaa9\ud45c\ub85c \ub9cc\ub4e4\uc5b4\uc84c\uc2b5\ub2c8\ub2e4.<br>It was created with the goal of dramatically improving the speed at which you can set up your development environment and run your code.<\/p>\n\n\n\n<p>\u2714\ufe0f Vite+\ub9ac\uc561\ud2b8\ub780? UI \ub77c\uc774\ube0c\ub7ec\ub9ac (\ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30)\ube4c\ub4dc \ub3c4\uad6c[react] + \uac1c\ubc1c \uc11c\ubc84[vite]<br>What is Vite+React? A UI library (for building components) and a build tool (React) + a development server (Vite).<\/p>\n\n\n\n<p>\u2714\ufe0f \ubcf4\ud1b5 nginx\uac00 React\ub97c \uc11c\ube59\ud558\uace0 nodejs express\ub791 \uc5f0\ub3d9\uc744 \ud569\ub2c8\ub2e4.<br>Usually nginx serves React and connects with nodejs express.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># 1. \ucd5c\uc2e0 Vite + React + TypeScript \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \n# Create a modern Vite + React + TypeScript project\nnpm create vite@latest myvideo-admin --template react-ts\n\n# \ub9cc\uc57d yarn \uc4f0\ub294 \uacbd\uc6b0\n# If you use yarn\n# yarn create vite myvideo-admin --template react-ts\n\n# 2. \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub85c \uc774\ub3d9\n#Go to project folder\ncd myvideo-admin\n\n# 3. \uc758\uc874\uc131 \uc124\uce58\n# Installing dependencies\nnpm install\n\n# 4. \uac1c\ubc1c \uc11c\ubc84 \uc2e4\ud589 (\uc790\ub3d9\uc73c\ub85c \ube0c\ub77c\uc6b0\uc800 \uc5f4\ub9bc)\n# Run the development server (browser opens automatically)\nnpm run dev<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"808\" data-id=\"4199\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/browser1-1024x808.png\" alt=\"\" class=\"wp-image-4199\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/browser1-1024x808.png 1024w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/browser1-300x237.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/browser1-768x606.png 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/browser1-400x316.png 400w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/browser1-800x631.png 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/browser1.png 1348w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">browser<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"665\" data-id=\"4198\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/terminal-1024x665.png\" alt=\"\" class=\"wp-image-4198\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/terminal-1024x665.png 1024w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/terminal-300x195.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/terminal-768x499.png 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/terminal-400x260.png 400w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/terminal-800x520.png 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/terminal.png 1148w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">terminal<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>\ud83d\udc49\ud83c\udffbpostgresql \uc124\uce58(MacOS) \/ Start,Stop the PostgreSQL Service (MacOS)<\/p>\n\n\n\n<p>\u2714\ufe0f \uc124\uce58 \/ install<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>brew install postgresql@17  <\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f \ud658\uacbd\ubcc0\uc218\uc124\uc815 \ubc0f \uc2e4\ud589 \/ Setting environment variables and running<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Homebrew postgresql@17\uc758 bin \uacbd\ub85c \ucd94\uac00 (Apple Silicon Mac \uae30\uc900)\n# Added bin path for Homebrew postgresql@17 (based on Apple Silicon Macs)\necho 'export PATH=\"\/opt\/homebrew\/opt\/postgresql@17\/bin:$PATH\"' &gt;&gt; ~\/.zshrc\n\n# Intel Mac\uc774\uba74 \/usr\/local\/opt\/... \uc77c \uc218 \uc788\uc74c \u2192 \uc544\ub798\ub85c \ub300\uccb4\n# If you have an Intel Mac, it may be \/usr\/local\/opt\/... \u2192 Replace with below\n# echo 'export PATH=\"\/usr\/local\/opt\/postgresql@17\/bin:$PATH\"' &gt;&gt; ~\/.zshrc\n\n# \ubcc0\uacbd \uc801\uc6a9 (\ud130\ubbf8\ub110 \uc7ac\uc2dc\uc791 \uc5c6\uc774 \ubc14\ub85c)\n# Apply changes (immediately without restarting the terminal)\nsource ~\/.zshrc\n\n# \ub2e4\uc2dc \ud655\uc778\n# check again\npsql --version\n\n# \uc2e4\ud589 ,Mac\uc5d0\uc11c\ub294\uc774\ub807\uac8c \uc2e4\ud589\ud558\uba74 \ub428 \uc218\ud37c\uc720\uc800\uac00 postgres\uac00 \uc544\ub2d8.\n# Run , on Mac, run like this. The superuser is not postgres.\npsql postgres<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f postgresql \uc11c\ube44\uc2a4 \uc2dc\uc791 \uc885\ub8cc(MacOS)<br>Start,Stop the PostgreSQL Service (MacOS)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>brew services start postgresql@17 # start\nbrew services stop postgresql@17 # stop<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc811\uc18d \/ Database connection<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>psql postgres<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb Vite + \ub9ac\uc561\ud2b8 \uc124\uce58 \ubc0f \uc2e4\ud589(MacOS)Installing and Running Vite + React (MacOS) \u2714\ufe0f Vite+React\uc5d0\uc11c Vite\ub780 \ud504\ub791\uc2a4\uc5b4\ub85c \ube60\ub974\ub2e4\ub77c\ub294 \ub73b\uc785\ub2c8\ub2e4.In Vite+React, Vite means fast in French. \u2714\ufe0f \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud558\uace0 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\ub294 \uc18d\ub3c4\ub97c \ud68d\uae30\uc801\uc73c\ub85c \uac1c\uc120\ud558\ub294 \uac83\uc744 \ubaa9\ud45c\ub85c \ub9cc\ub4e4\uc5b4\uc84c\uc2b5\ub2c8\ub2e4.It was created with the goal of dramatically improving the speed at which you can set up your development [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1,7],"tags":[],"class_list":["post-4169","post","type-post","status-publish","format-standard","hentry","category-react","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=4169"}],"version-history":[{"count":31,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4169\/revisions"}],"predecessor-version":[{"id":4250,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4169\/revisions\/4250"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=4169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=4169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=4169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}