본문 바로가기
REACT

[React] 272샘의 React5 (개발 폴더 파일 구조)

by 미눅스[멘토] 2024. 10. 8.
728x90

 

 

https://deahan.tistory.com/417

 

[React] 272샘의 React4 (Node 웹서버)

https://deahan.tistory.com/416 [React] 272샘의 React3 (NODE NPM 이해)https://deahan.tistory.com/414 [React] React 개발환경 구축node.js설치 아래 url참고https://deahan.tistory.com/413 [React] Node.Js설치https://nodejs.org/en Node.js —

deahan.tistory.com

여기까지 했다면....

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지?? 기달리라고 나중에 보자고 7e샘이 그럼)

열어보자.~~ ( e7e샘이 필요없는 거 빼서 버렸다. 요대로 저장!)

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만세 minux 만만세</h1>
    </div>
  )
}

export default App

 

이제 Terminal 에서 개발 서버를 구동

D:\reactstudy\reactcomponet>npm run dev

 

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

 

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

 

잠깐! 유용한 플러그인 몇개 설치하고 하자.~~ 필요하나??( 아니다 없으면 많이 피곤하다!)

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

 

그외는  구글에서 vscode 유용한 플러그인 으로 검색 하여

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

 

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

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

 

이제 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

참고로 e7e샘은 기억력이 부족해서 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>1:1 보류!!!</h2>
    </div>
  )
}

export default MyComponent
 

 

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

App.jsx

 
import MyComponent from "./MyComponent";

function App() {
  return (
    <div>
      <h1>e7e만세 minux 만만세</h1>
      <MyComponent />
    </div>
  )
}

export default App
 

 

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

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

App.jsx

 
import MyComponent from "./MyComponent";

function App() {
  return (
    <div>
      <h1>e7e만세 minux 만만세</h1>
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </div>
  )
}

export default App
 

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

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

 

Elements탭을 선택한다면 아래와 같은 모습

여기서의 컴포넌트란 무엇인가?

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

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

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

 

괜히 본인 만의 컴포넌트를 한번 만들어서 반드시 넣어보도록 하자.

명심하라 실무자의 지식은 경험적 바탕이 깔리지 않으면 살아가지 못한다고 7e샘이 그랬음

 


function MyComponent() {
  return (
    <div style={{ border : "4px solid pink"}}>
        <h1>흑백개발자 코드전쟁</h1>
        <h2>E7E백개발자!! 미눅스 흑개발자!!</h2>
        <h2>1:1 보류!!!</h2>
    </div>
  )
}

function MinuxComponent(){
    return (
        <div style={{border : "4px solid black"}}>
            <input type ="button" value="minux"/>
            <h1>음하하 별거 없군!음하하</h1>
            <a href="#">e7e만만세!!!!</a>
        </div>
    )
}

export default MinuxComponent

 

 

출처 : https://e-7-e.tistory.com/253

'REACT' 카테고리의 다른 글

[React] 272샘의 React7 (블락 기호 {} 사용)  (11) 2024.10.08
[React] 272샘의 React6 (JSX)  (6) 2024.10.08
[React] 272샘의 React4 (Node 웹서버)  (1) 2024.10.07
[React] 272샘의 React3 (NODE NPM 이해)  (1) 2024.10.07
[React] 272샘의 React2 (개발환경 구축)  (4) 2024.09.26

관련글

티스토리툴바