[ React ] #1

부리또의 댄스·2024년 1월 30일

React

목록 보기

1/6

✣ 생활코딩(인프런) - React ✣

Section 1. 개발 환경

1-2) 개발 환경의 종류

react를 사용하여 개발을 하는 방법에는 크게 총 3가지가 있다.

첫 번째는 온라인 상에서 코드를 작성하여 개발하는 것이다.

두 번째는 이미 존재하는 웹사이트에 react를 추가하는 것이다.

마지막으로 세 번째는 create react app을 통해서 직접 새 react 앱을 만드는 것인데, 우리는 바로 이 방법을 사용할 것이다.

1-3) npm을 이용해서 create react app 설치

create react app을 설치하기 위해서는 npm을 이용해야 하고, npm을 이용하기 위해서는 node.js를 설치해야 한다.

node.js 홈페이지에서 설치를 진행한다.(버전은 아무거나 상관 없다.)

~/npm install -g create-react-app

터미널에 위의 명령어를 입력해 create react app을 설치한다. (-g는 'global'의 약자로, 컴퓨터에 어느 곳에서나 사용할 수 있게 하는 것을 뜻한다.)

1-4) create react app을 이용해서 개발환경구축

원하는 디렉토리에 새 폴더을 하나 생성하고, 터미널에서 해당 폴더로 이동하여 명령어를 입력해 파일들을 설치한다.
이때 파일명을 'react'로 하면 오류가 나므로, 다르게 설정해야 하는 것에 주의하자.

~/cd (폴더 디렉토리) create-react-app

완료하면 이렇게 폴더 안에 파일들이 정상적으로 설치된 것을 볼 수 있다.

1-5) 샘플 웹앱 실행

본인이 편한 편집기를 사용하여 개발하면 되지만, 우리는 가장 대중적인 Visual Studio Code를 사용할 것이다.

VSC에서 위에서 만든 react_app 폴더를 열고, terminal 입력창을 연다.

npm run start

terminal에 해당 명령어를 입력하면 오른쪽과 같은 웹사이트가 실행되는데, 이것이 바로 'create react app', 즉 react에서 제공하는 웹 앱인 것이다.

1-6) JS 코딩하는 법

위에서 터미널을 통해 다운받은 여러 파일들 중, 우리가 만들 웹 앱에 직접적으로 변경사항이 반영되는 파일은 바로 'App.js'파일이다.

App.js -> index.js -> index.html 순으로 코드가 넘겨져 최종적으로 웹 앱에 반영되는 것이다.

그냥 html파일에 코드를 작성하면 되는데, 굳이 이렇게 하는 이유가 궁금해서 gpt 햄께 여쭤보았다.

그렇다고 한다. 간단히 말하자면, 코드의 유지보수를 위함이다.

1-7) CSS 코딩하는 법

이번에는 디자인을 담당하는 CSS 코드를 작성해본다.
강의에서는 index.css파일에 코드를 작성하였는데, 왜 위에서는 app.js에 했는데 이번에는 index에 하는지 궁금해져 또다시 gpt 햄께 여쭤보았다.

< chatGPT >
app.css와 index.css는 각각의 파일에 대해 관련된 코드를 다루는데 있어서 목적이 약간 다를 수 있습니다.
1. app.css:
app.css 파일은 주로 해당 컴포넌트 또는 컴포넌트 그룹과 관련된 스타일을 포함합니다.

예를 들어, app.js에서 정의된 컴포넌트에 대한 스타일링을 위한 것입니다.
해당 컴포넌트의 스타일만을 담당하므로, 컴포넌트 간에 스타일 충돌을 방지하고 유지보수성을 높입니다.
/* app.css */
.app-container {
  background-color: #f0f0f0;
  padding: 20px;
}
.app-title {
  color: #333;
  font-size: 24px;
}
// app.js
import React from 'react';
import './app.css';
const App = () => {
  return (
    <div className="app-container">
      <h1 className="app-title">Hello, React!</h1>
    </div>
  );
}
export default App;
index.css:
index.css 파일은 주로 전역적인 스타일 또는 애플리케이션 전체에 영향을 미치는 스타일을 정의합니다.

예를 들어, 전체 애플리케이션의 기본 폰트, 페이지 배경색 등과 같은 스타일을 설정하는 데 사용됩니다.
애플리케이션의 전반적인 레이아웃과 디자인을 담당합니다.
/* index.css */
body {
  font-family: 'Arial', sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
}
#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import './index.css';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
요약하면, app.css는 특정 컴포넌트에 대한 스타일을 담당하고, index.css는 애플리케이션 전체에 영향을 미치는 전역 스타일을 담당합니다. 이렇게 구분함으로써 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있습니다.