๐ŸŒˆReact_RE-MyPortfolio-(1)

chlwndus1216ยท2023๋…„ 4์›” 17์ผ
0

TECHIT_BlockChain_School_3

๋ชฉ๋ก ๋ณด๊ธฐ
9/9
post-thumbnail

๐Ÿช‚ 2023. 04. 17. Monday_ ์žผ๋ฏผ์“ฐํ•œํ…Œ ํ˜‘๋ฐ•๋ฐ›์€ ๋‚ ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ ๐Ÿช‚


โœ… MyPortfolio-(1)

โ €โ €โ €

Intro

์•ˆ๋…•ํ•˜์„ธ์š”!๐Ÿ˜

๋ชจ๋‘ ํ•จ๊ป˜ 4๊ฐœ์›” ๋™์•ˆ ํ•˜๋‚˜์˜ ๋ฉ‹์ง„ ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•˜๋Š” ๊ทธ๋‚ ๊นŒ์ง€ ํ™”์ดํŒ…ํ•ฉ์‹œ๋‹ค !

* ์ด ๊ณณ์—์„œ๋Š” ๋‹น์ผ์— ๋ฐฐ์šด ๋‚ด์šฉ์„ ๋ณต์Šตํ•˜๋Š” ์šฉ๋„๋กœ ๊ธ€์„ ์ž‘์„ฑํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

* ์˜ˆ~ใ……~๋‚ ์˜›์ ~~~์— ์ž‘์—…ํ–ˆ๋˜ "MyPortfolio" ํ”„๋กœ์ ํŠธ๋ฅผ ๋ณต์Šตํ•ด ๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค ! ์˜ค๋Š˜ ์ด ์‹œ๊ฐ„์—๋Š” ํ”„๋กœ์ ํŠธ ์‹œ์ž‘์— ์•ž์„œ ๊ผญ! ํ•„์š”ํ•œ React ๊ธฐ๋ณธ ์„ธํŒ…์— ๊ด€ํ•œ ๋‚ด์šฉ์„ ๋ณต์Šตํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

โ €โ €โ €โ €
โ €โ €


โœ… React ๊ธฐ๋ณธ์„ธํŒ…

โ €โ €โ €

๐Ÿ‘‰ STEP 01. node.js ์„ค์น˜ํ•˜๊ธฐ

โœ”๏ธ 01. node.js (https://nodejs.org/ko) ์— ๋“ค์–ด๊ฐ€ node.js ์„ค์น˜

โ €โ €โ €โ €โ €
โœ”๏ธ 02. ํ„ฐ๋ฏธ๋„์—์„œ ๋ช…๋ น์–ด ์ž…๋ ฅํ•ด ์ž˜ ์„ค์น˜๋˜์—ˆ๋Š”์ง€ ์ฒดํฌ !

โ–ช๏ธ node --version

โ €โ €โ €

๐Ÿ‘‰ STEP 02. Create React App

โœ”๏ธ ์ƒˆ๋กœ์šด React ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์ƒ์„ฑํ•˜๊ธฐ

// ํด๋” ๋ช… ์ž‘์„ฑ์‹œ ๋Œ€๋ฌธ์ž ์ž…๋ ฅ์€ ๋ถˆ๊ฐ€ํ•˜๋‹ค.

โ–ช๏ธ npx create-react-app "์ƒ์„ฑํ•  ํด๋” ๋ช…"
โ–ช๏ธ cd "์ƒ์„ฑ๋œ ํด๋” ๋ช…" 

โ €โ €

โœ”๏ธ React ์‹คํ–‰์‹œํ‚ค๊ธฐ

//๋‹ค์Œ ๋ช…๋ น์–ด๋Š” ์ƒ์„ฑํ•œ react ํด๋”๊ฐ€ ์žˆ๋Š” ์œ„์น˜์—์„œํ„ฐ๋ฏธ๋„์„ ์—ด์–ด ์ž…๋ ฅํ•ด์•ผ ํ•˜๋Š” ๋ช…๋ น์–ด์ด๋‹ค !

โ–ช๏ธ npm run start


โœ”๏ธ ํŒŒ์ผ ์ •๋ฆฌ

โ–ช๏ธ 01. My-Portfolio ํ”„๋กœ์ ํŠธ ์ž‘์—…์„ ์œ„ํ•ด์„œ,
์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” (.css)ํŒŒ์ผ๋“ค์„ ๋ชฝ๋•… ์ œ๊ฑฐํ•ด์ค€๋‹ค.

  ๐Ÿ”ธ ์ œ๊ฑฐํ•  ํŒŒ์ผ
      -> App.css
      -> logo.svg     
 
    
    
โ–ช๏ธ 02. App.js ์ •๋ฆฌํ•ด์ฃผ๊ธฐ !

  ๐Ÿ”ธ ์ œ๊ฑฐํ•  ๋ถ€๋ถ„
      -> import logo from './logo.svg';
      -> import './App.css';

      => App.js ์ตœ์ข… ์ƒํƒœ 

        function App() {
            return;
        }
        export default App;
    
    

โ €โ €โ €

๐Ÿ‘‰ STEP 03. ํ…Œ์ผ์œˆ๋“œ ์„ค์น˜ํ•˜๊ธฐ

โœ”๏ธ ํ…Œ์ผ์œˆ๋“œ ์‚ฌ์ดํŠธ ์ ‘์† ( https://tailwindcss.com/ )

โ €โ €โ €
โœ”๏ธ Tailwind CSS ์„ค์น˜ํ•˜๊ธฐ

//๋‹ค์Œ ๋ช…๋ น์–ด ์ž…๋ ฅ์‹œ
//์ƒ์„ฑํ•œ react-app ํด๋” ์œ„์น˜์—์„œ ์‹คํ–‰ํ•ด์•ผ ํ•œ๋‹ค !!!

โ–ช๏ธ npm install -D tailwindcss
โ–ช๏ธ npx tailwindcss init

๐Ÿ”ธtailwind.config.js๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.


โœ”๏ธ tailwind.config.js์—์„œ content ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ

  			content: [
   				 "./src/**/*.{js,jsx,ts,tsx}",
 			],

โœ”๏ธ ./src/index.css์— ๋‚ด์šฉ ์ถ”๊ฐ€ํ•˜๊ธฐ

  			@tailwind base;
            @tailwind components;
            @tailwind utilities;

โœ”๏ธ React ๋‹ค์‹œ ์‹คํ–‰์‹œํ‚ค๊ธฐ

//์ž‘๋™ ์ค‘์ธ react-app์ด ์žˆ๋‹ค๋ฉด 'ctrl+c'๋ฅผ ํ„ฐ๋ฏธ๋„์— ์ž…๋ ฅํ•ด ์ž‘๋™์ค‘์ง€ ์‹œํ‚ค๊ธฐ!

โ–ช๏ธ npm run start
    
    

โ €โ €โ €

๐Ÿ‘‰ STEP 04. Git์— ์˜ฌ๋ ค๋‘๊ธฐ

โœ”๏ธ ๋ถˆํŽธํ•œ์  ๋ฐœ์ƒ~~~ !!!

โ–ช๏ธ ๋งค๋ฒˆ react-app์„ ์ƒˆ๋กœ ๊น”์•„ ๋‚ด์šฉ์„ ์ˆ˜์ •ํ•˜๊ณ ,
  tailwind๊นŒ์ง€ ์ ์šฉํ•ด์ฃผ๊ธฐ์—๋Š” ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ์˜ค๋ž˜~~~~๊ฑธ๋ฆฐ๋‹ค ~~~~!~!~!
  

โœ”๏ธ ํ•ด๊ฒฐ๋ฒ• !!!

โ–ช๏ธ ๋‚ด Git์— ์˜ฌ๋ ค๋‘๊ณ  ํ•„์š”ํ•  ๊ฒฝ์šฐ ํด๋ก ์„ ํ•ด์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋งค์šฐ๋งค์šฐ! ๊ฐ„ํŽธํ•˜๋‹ค !

    ๐Ÿ”ธ git ์‚ฌ์šฉ์‹œ ์ฃผ์˜ํ• ์ !
    	
        -> git์— ์˜ฌ๋ฆด ๊ฒฝ์šฐ
        	: react-app์— node_modules ํด๋”์˜ ์šฉ๋Ÿ‰์ด ๋งค์šฐ ํฌ๊ธฐ ๋•Œ๋ฌธ์—,
              .gitignore์— ํด๋”๋ช…์„ ์ ์–ด git์— ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š๋„๋ก ํ•ด์•ผํ•œ๋‹ค!!!
        
        -> git clone์„ ํ•  ๊ฒฝ์šฐ 
        	: 'npm install' ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•ด ํ•„์š”ํ•œ ํŒŒ์ผ์„ ๋ฐ›์•„์ค˜์•ผ ํ•œ๋‹ค. 
    
    

โ €โ €โ €

๐Ÿ“Œ23. 04. 17

0๊ฐœ์˜ ๋Œ“๊ธ€