\ud83d\udc49\ud83c\udffb Vite React\ub294 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4dc\ub294 \uac1c\ubc1c\ub3c4\uad6c\uc785\ub2c8\ub2e4. Vite React is a development tool for creating websites.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb Vite\ub294 React \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ub9e4\uc6b0 \uc778\uae30 \uc788\ub294 \ube4c\ub4dc \ub3c4\uad6c\uc774\uc790 \uac1c\ubc1c \uc11c\ubc84\ub77c\uace0 \ud569\ub2c8\ub2e4. Vite is said to be a very popular build tool and development server for React projects.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb Vite\ub294 \ud504\ub791\uc2a4\uc5b4\ub85c “\ube60\ub974\ub2e4”\ub77c\ub294 \ub73b\uc774\ub78d\ub2c8\ub2e4. (\ubc1c\uc74c\uc740 \uc601\uc5b4\ub85c “veet”\uc774\ub77c\uace0 \uc77d\uc74c) Vite means “fast” in French. (It’s pronounced “veet” in English.)<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uac1c\ubc1c\uc790\ub4e4\uc774 “\ube68\ub9ac\ube68\ub9ac \uac1c\ubc1c\ud558\uace0 \uc2f6\ub2e4”\ub294 \ub9c8\uc74c\uc744 \ub2f4\uc544\uc11c \uc9c0\uc740 \uc774\ub984\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4. It is said that the name was created by developers with the intention of “wanting to develop quickly.”<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc694\uc998 \uac70\uc758 \ubaa8\ub4e0 \uc0c8\ub85c\uc6b4 React\/Vue\/Svelte \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c Create React App \ub300\uc2e0 Vite + React \uc870\ud569\uc744 \uae30\ubcf8\uc73c\ub85c \uc120\ud0dd\ud558\ub294 \ucd94\uc138\uc785\ub2c8\ub2e4. Nowadays, almost every new React\/Vue\/Svelte project is choosing the Vite + React combination as the default instead of Create React App.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb React\ub294 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc5d0\uc11c \ud654\uba74(\ubc84\ud2bc, \ubaa9\ub85d, \uc785\ub825\ucc3d, \ub3d9\uc601\uc0c1 \ud50c\ub808\uc774\uc5b4 \ub4f1)\uc744 \uc608\uc058\uace0 \ube60\ub974\uac8c, \uadf8\ub9ac\uace0 \uad00\ub9ac\ud558\uae30 \uc27d\uac8c \ub9cc\ub4dc\ub294 \ub3c4\uad6c \uc785\ub2c8\ub2e4. React is a tool for creating beautiful, fast, and easy-to-maintain screens (buttons, lists, input fields, video players, etc.) on websites and apps.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc6f9\uc0ac\uc774\ud2b8 \uac1c\ubc1c\uc774 \uc8fc\ub825 \uc5c5\ubb34\uac00 \uc544\ub2c8\ub354\ub77c\ub3c4 \uc11c\ubc84\ub97c \uac1c\ubc1c\ud558\ub2e4\uac00 \ubcf4\uba74 \uad00\ub9ac\uc790 \ud328\ub110 \uc815\ub3c4\ub294 \uc6f9\uc744 \uc0ac\uc6a9\ud574\uc57c \ud560 \uc77c\uc774 \uc788\uc2b5\ub2c8\ub2e4. Even if website development isn’t your main job, you’ll probably need to use the web for things like the admin panel when developing servers.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub294 postgresql\uc0ac\uc6a9 \ud569\ub2c8\ub2e4. The database uses PostgreSQL.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 MacOS\uc5d0\uc11c VIte React \uc124\uce58\ud558\ub294 \ubc29\ubc95 \uc785\ub2c8\ub2e4. Below is how to install VIte React on macOS.<\/p>\n\n\n\n
# 1. \ucd5c\uc2e0 Vite + React + TypeScript \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 \n# Create a modern Vite + React + TypeScript project\n\nnpm create vite@latest ReactExample -- --template react-ts\n\n# \ub9cc\uc57d yarn \uc4f0\uc2e0\ub2e4\uba74:\n# If you use yarn:\n\n# yarn create vite ReactExample --template react-ts\n\n# 2. \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub85c \uc774\ub3d9\n# Go to the project folder\n\ncd ReactExample\n\n# 3. \uc758\uc874\uc131 \uc124\uce58\n# Installing dependencies\n\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)\n\nnpm run dev<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ud130\ubbf8\ub110\uc5d0\uc11c npm create vite@latest ReactExample — –template react-ts \uc2e4\ud589\ud560 \uacbd\uc6b0 \uc544\ub798\uc758 \ub0b4\uc6a9\uc744 \ucc38\uc870 \ud558\uc138\uc694 If you run npm create vite@latest ReactExample — –template react-ts in the terminal, see below.<\/p>\n\n\n\n
\u2714\ufe0f “Use rolldown-vite (Experimental)? ” \uc774 \ubd80\ubd84\uc744 yes\ud558\uba74 \uc548\uc815\ud654 \ubc84\uc804\uc774 \uc544\ub2cc \uc2e4\ud5d8\uc801\uc778 \ucd5c\uc2e0\ubc84\uc804\uc774 \uc124\uce58\ub429\ub2c8\ub2e4. “Use rolldown-vite (Experimental)?” If you answer yes to this part, the experimental latest version will be installed, not the stable version.<\/p>\n\n\n\n
\u2714\ufe0f \uc5d4\ud130\ub85c \uacc4\uc18d \uc9c4\ud589\ud558\uba74 \uc544\ub798 \ucc98\ub7fc \uba54\uc138\uc9c0\uac00 \ud130\ubbf8\ub110\uc5d0 \ucd9c\ub825\ub429\ub2c8\ub2e4. If you continue by pressing Enter, a message like the one below will be printed in the terminal.<\/p>\n\n\n\n
\u2714\ufe0f\uadf8\ub7ec\uba74 \uc5ec\ub7ec\ubd84\uc758 pc\uc5d0\uc11c \ube0c\ub77c\uc6b0\uc800\ub97c \uc5f4\uace0 http:\/\/localhost:5173 \uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4. Then open a browser on your PC and go to http:\/\/localhost:5173.<\/p>\n\n\n\n
VITE v7.3.1 ready in 257 ms\n\n \u279c Local: http:\/\/localhost:5173\/\n \u279c Network: use --host to expose\n \u279c press h + enter to show help\n<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ubaa8\ub4e0 \uacfc\uc815\uc774 \uc815\uc0c1\uc801\uc774\uba74 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc744 \ubcf4\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. If everything went well, you will see the following screen in your browser:<\/p>\n\n\n\n<\/figure>\n\n\n\n
\u2714\ufe0f \ud130\ubbf8\ub110\uc5d0\uc11c \uac1c\ubc1c \uc11c\ubc84 \uc911\uc9c0 \ud560\ub54c\ub294 ctrl + c\ud558\uba74 \ub429\ub2c8\ub2e4. To stop the development server in the terminal, just press ctrl + c.<\/p>\n\n\n\n
\u2714\ufe0f \ud658\uacbd\ubcc0\uc218\uc124\uc815 \ubc0f \uc2e4\ud589 Setting environment variables and running<\/p>\n\n\n\n
— \ud658\uacbd\ubcc0\uc218 \uc124\uc815\uc774 \ub418\uc5b4\uc788\uc9c0 \uc54a\uc73c\uba74 psql postgres \uc774 \uba85\ub839\uc5b4\ub97c \ubabb\ucc3e\uc2b5\ub2c8\ub2e4. If the environment variable is not set, the psql postgres command will not be found.<\/p>\n\n\n\n
— \ud574\ub2f9 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud574\uc11c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud574\uc918\uc57c\ud569\ub2c8\ub2e4. You need to go to that directory and run the command.<\/p>\n\n\n\n
— \ud658\uacbd\ubcc0\uc218\uac00 \uc798 \ub4f1\ub85d\ub418\uba74 psql postgres\ucc98\ub7fc \uac04\ub2e8\ud788 postgresql\uc744 \uc2e4\ud589 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Once the environment variables are properly registered, you can run postgresql simply like psql postgres.<\/p>\n\n\n\n
# Homebrew postgresql@17\uc758 bin \uacbd\ub85c \ucd94\uac00 (Apple Silicon Mac \uae30\uc900)\n# Add the bin path for Homebrew postgresql@17 (based on Apple Silicon Mac)\n\necho 'export PATH=\"\/opt\/homebrew\/opt\/postgresql@17\/bin:$PATH\"' >> ~\/.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\n# echo 'export PATH=\"\/usr\/local\/opt\/postgresql@17\/bin:$PATH\"' >> ~\/.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
\u2714\ufe0f psql postgres \uc2e4\ud589\uc2dc \ub2e4\uc74c \ucc98\ub984 \ud504\ub86c\ud504\ud2b8\uac00 \ubc14\ub00c\uba74 \uc815\uc0c1\uc801\uc73c\ub85c \uc124\uce58\ub41c\uac81\ub2c8\ub2e4. If the prompt changes to the following when running psql postgres, it has been installed successfully.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb Vite React\ub294 \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4dc\ub294 \uac1c\ubc1c\ub3c4\uad6c\uc785\ub2c8\ub2e4.Vite React is a development tool for creating websites. \ud83d\udc49\ud83c\udffb Vite\ub294 React \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ub9e4\uc6b0 \uc778\uae30 \uc788\ub294 \ube4c\ub4dc \ub3c4\uad6c\uc774\uc790 \uac1c\ubc1c \uc11c\ubc84\ub77c\uace0 \ud569\ub2c8\ub2e4.Vite is said to be a very popular build tool and development server for React projects. \ud83d\udc49\ud83c\udffb Vite\ub294 \ud504\ub791\uc2a4\uc5b4\ub85c “\ube60\ub974\ub2e4”\ub77c\ub294 \ub73b\uc774\ub78d\ub2c8\ub2e4. (\ubc1c\uc74c\uc740 \uc601\uc5b4\ub85c “veet”\uc774\ub77c\uace0 \uc77d\uc74c)Vite means “fast” in French. (It’s […]<\/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-4011","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\/4011","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=4011"}],"version-history":[{"count":46,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4011\/revisions"}],"predecessor-version":[{"id":4058,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4011\/revisions\/4058"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=4011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=4011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=4011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/01\/vitereact-1024x1009.png\")
<\/figure>\n\n\n\n