React(리액트) 티키타카 5 (개발 폴더 파일 구조)

React

by e7e 2024. 9. 30. 16:44

2024.09.26 - [자바스크립트] - React(리액트) 티키타카 4 ( Node 웹서버)

를 읽었다면 확은 아니공, 잠재의식 속에 잘 설명할 수도 없지만

Node란 단어와 함께 Node란게 이런 게 아니겠엉 라는 Feel이 남는당.

자아~~ 또 쪼메만 달려보장... ....... 어차피..... 먼저 하면 돈 된단당.

vscode로 reactstudy 폴더를 열장.

Terminal에 npm create vite@latest 를 입력하여 아래처럼 되도록 하장.

(지난번에 해 봤으닝, 그리 새롭진 않을 거이당. 그렇당!)

D:\reactstudy>npm create vite@latest
√ Project name: ... reactcomponet
√ Select a framework: » React
√ Select a variant: » JavaScript

Scaffolding project in D:\reactstudy\reactcomponet...

Done. Now run:

cd reactcomponet
npm install
npm run dev

D:\reactstudy> cd reactcomponent
D:\reactstudy\reactcomponet>npm install

아래 그림과 같은 폴더구조와 파일들이 자동으로 맹글어졌슬꺼어당.(오케데스무까?)

이해에 순서를 넣어 정렬해 보장.

프론트 프레임워크들은 기본적으로 SPA(Single Page Application) 당.

그렇다는 건 웹페이지가 하나라는 뜻이니까앙. 응~~ index.html 요거 1개!

요거이 전부이자 곧 시작페이지당. 궁금하니 열어보장.

index.html 내용(필요없는 부분 지우고 저장!)의 body 태그 안에 주목해 본다면....

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>이게 시작파일이라공!</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

script태그가 main.jsx를 부른당. (왱? 확장자가 .jsx예용? 지둘려라 낸중에 보장!)

열어보장.~~ ( 내가 쪼메 필요없는 거 빼서 버렸당. 요대로 저장하랑!)

import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <>
    <App />
  </>
);

<StrictMode> 와 </StrictMode>는 지우장. 디버깅을 위해 넣었다는데, 지금은 방해된당.

다른 부분은 제껴두공, 먼저 아래 부분에 눈길을 줘보장.(요대로 저장하면 안됨!)

import App from './App.jsx'

    <App />

App.jsx를 열지 않으면 아무것도 알 수 없을 것 같당.

그렇당. 열어보장. 소스가 어지럽당. 다 버리공! 아래처럼 간단히 고치장.

App.jsx

function App() {
  return (
    <div>
      <h1>은폐 엄폐는 E7E 은퇴를 부른당</h1>
    </div>
  )
}

export default App

이제 Terminal 에서 개발 서버를 구동시키장

D:\reactstudy\reactcomponet>npm run dev

브라우져에서 결과를 확인해 보면 아래처럼 보일거당. (색깔은 내가 캡쳐하면서 칠했당!)

여기서 React뿐만 아니라 프론트 프레임워크들의 기반 개념인 컴포넌트틀 느껴보장

잠깐! 유용한 플러그인 몇개 설치하고 달리장.~~ 필요하당??( 아니당 없으면 마니 피곤!)

vscode extensions에서 아래 2개는 검색해서 필수로 설치하도록 하장.

그외는 구글에서 vscode 유용한 플러그인 으로 껌색 하영!

개인 취향에 맞는 걸 고르고 골라 설치하도록 하장. 설치 했다 맘에 안들면 과감히 삭제!

구글 크롬 웹 스토어에서 React Developer Tools 이라고 검색하여

요것도 설치하도록 하장. (브라우져 플러그인이당. 아래 그림 참조!)

무언가 많은 걸 한 기분이라면 그걸 즐기장.

충분히 즐겼는강!. Go! Go! 하장

이제 vsocde에서 src폴더 아래에 MyComponent.jsx라고 파일을 맹글장.

(괘니 기억하장. 컴포넌트를 만드는 파일명은 시작글자를 대문자로 쓴당.)

열린 창 에디터에 rfce라고 아래 그림처럼 입력하고 엔터를 나비가 내려 앉듯 누른당.

코드가 자동 완성 됨이 누네 화악 들어온당.

수정하면 커서가 있는 3곳(파일명)이 동시에 수정 된당.

(요딴 걸 vscode에선 snippet이라고 부르고,직접 맹글어 넣을 수동 있단당.~~~)

아래 링크에 가보면 우리가 맨 처음 설치한 플러그인 ES7+ React어쩌궁저쩌궁 플러그인

덕분에 사용할 수 있는 snippet 코드 리스트들이 나온당. 괘니 스크롤 내려서 보도록 하장.

https://github.com/r5n-labs/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

참고로 난 기억력이 부족해서 2개( rfce 와 rafce )밖에 안쓴당. rafce동 한번 써 보장.

(눈치 빠른 당신은 af가 arrow function, 화살표함수임을 이미 간파했당!)

ESC를 눌러본당. 다행이당. 휴우~~

멀티 커서가 1개 커서로 바뀐당. 작업 계속 하장.

MyComponent.jsx 를 아래 내용으로 채우장.

function MyComponent() {
  return (
    <div style={{ border: "4px solid pink" }}>
      <h1>흑백개발자 계급전장</h1>
      <h2>E7E 좋앙! 미누 시롱!</h2>
      <h2>근데 2:0 미누 승</h2>
    </div>
  );
}

export default MyComponent;

이제 App.jsx를 아래 처럼 수정하장.(자동완성을 쓰면서 익히장)

App.jsx

import MyComponent from "./MyComponent";

function App() {
  return (
    <div>
      <h1>은폐 엄폐는 E7E 은퇴를 부른당</h1>
      <MyComponent />
    </div>
  );
}

export default App;

소스를 수정하고, 저장하면 자동으로 브라우져 결과 화면이 바뀐당.

컴포넌트(Component)는 재사용성이 중요하당. 아래처럼 더 추가해보장.

App.jsx

import MyComponent from "./MyComponent";

function App() {
  return (
    <div>
      <h1>은폐 엄폐는 E7E 은퇴를 부른당</h1>
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </div>
  );
}

export default App;

실행 결과는 아래와 같공,아까 아까 설치한 브라우져 플러그인인 react developer tools도

이번에 한번 눈으로 확인하는 센스를 발에 휘갈겨 발휘해보장.

Elements탭을 선택한다면 아래와 같은 모습일꺼이당.

아! 아우~~ 캡쳐를 넘 마니 하닝... 손목이 저리공, 힘들당.

여기서 일단 정리해 보장. 여기서의 컴포넌트란 무엇인강? 인강!

아마 느끼미 왔을꺼당.

html 한 덩어리 소스를 이름을 부여하고,우린 그 이름으로 html 한 덩어리 소스를 다룰 수 있당.

곧 그 덩어리는 컴포넌트가 되고, 파일명은 컴포넌트 이름이 된당.

사실 어찌보면 template이랑 거짐 비스무리 하당.

12척의 배가 있당. 일일이 배를 가리키지 않고 12척의 배를 불사조라 이름 짓고

불사조 출격이라 외치면 12척의 배가 같이 움직여 일본의 배들을 무찌른당.

컴퓨터 세상에선 불사조 생성이라 외치면 12척의 배가 또 생긴당.~~ ㅋㅋ

괘니 본인 만의 컴포넌트를 한번 맹글어서 꼬옥 넣어보도록 하장.

명심하랑!!!

실무자의 지식은 경험적 바탕이 깔리지 않으면 살아가지 못한당.

오늘은 캡쳐로 지치고 또 지치고 말았당.. 요기까지만 하장.

살다 보면 괘니 잠만 자고 시플때가 있당.

살다 보면 술 먹고 눈 떴는데, 길 거리에 누워 있는 내가 있다.

살다 보면 울컥 이유 모를 눈물이 날 때가 있당.

[이유도 모르는 데 울컥 슬프당 ~~]

살아 가다 보면 필요없는 걸 사고 싶을 때도 있당.

[혼난당. 슬프당.~~ ]

살아 가다 보면 내가 바보가 아닐까 생각이 들 때도 있당.

[바보 맞당. 슬프당.~~]

살아 가다 보면 계획없이 은퇴를 계획 할 때도 있당.

[집중 포화를 당한당. 슬프당.~~]

컴터로 치면 모두 OS 오동작이당.

재부팅하게 되면 BIOS의 본능이 꿈틀된당.

다시 태어나는 거당.

처음 태어날 땐 눈물이 났는데...

다시 태어나니 눈물이 안 난당.

[하얀 눈을 짓밟아 눈물이 덥당.~~]

https://www.youtube.com/watch?v=YKIxazbeK8M

'React' 카테고리의 다른 글

React(리액트) 티키타카 7 (블락 기호 {} 사용) (9)	2024.10.02
React(리액트) 티키타카 6 (JSX) (2)	2024.09.30
React(리액트) 티키타카 4 ( Node 웹서버) (2)	2024.09.26
React(리액트) 티키타카 3 (NODE NPM 이해 ) (0)	2024.09.26
React(리액트) 티키타카 2 (개발 환경 구축 ) (2)	2024.09.24