[개발일지 37일차] React 설치 과정 및 실습

MSJ·2022년 6월 24일

React 개발일지

WEB

목록 보기

37/41

2022-06-24

React

React, Angular, Vue.js ...
리액트는 여러 프론트엔드의 프레임워크 중의 하나이다.

오픈 소프트웨어이며, 무려 페이스북 개발에 사용되었던 기술이다.

컴포넌트를 조립하여 화면을 구성한다.

화면 출력에 특화된 프레임워크로, 게임 엔진 원리를 도입하여 화면 출력 속도가 빠르다. (Virtual DOM)
-> Virtual DOM : 캐시메모리의 개념. 화면을 그래픽적으로 그릴 때 모든 화면을 매번 다시 그려주는 것이 아니고, 반복적으로 그려주는 부분들은 저장 해놓았다가 바뀐 부분만 계속 그려주는 형태.

SPA 형식?

Single Page Application의 준말. 페이지가 하나.

하나의 페이지 안에서 Js가 필요한 페이지, 정보만 동적으로 그려준다.

새 페이지로 넘어갈 때 서버에서 HTML, CSS, JS 소스를 가져올 필요가 없어 새로고침이 필요 없다.

이는 사용자에게 물흐르듯 끊김없는 웹 앱 경험을 선사한다.

단점! 처음에 필요한 리소스를 모두 가져와야하므로, 초기 구동 속도가 느리다.

필수 도구

이 리액트를 쓰기 위해서 필수로 요하는 도구가 있는데, 바로 Node Package Manager, 줄여서 npm 이다.

이 npm은 node.js로 만들어진 유용한 모듈들을 가져다 쓰고 관리할 수 있다.

여기서 쓰일 WebPack이란 모듈이 있는데, 프로젝트에 사용된 파일을 알아서 분석해서 기존 웹 문서 파일로 변환해주는 도구이다.

React 개발 환경

1) 필수 : Node.js

확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼. 작성 언어 JavaScript 활용.

2) 에디터 : VS Code 등

3) 웹 브라우저 : Chrome, FireFox 등

Node.js 설치하기

Node.js 다운 법은 두 가지가 있다.

홈페이지 https://nodejs.org/en/ 에서 다운 및 설치

최신 버전은 계속 업그레이드 되고 있고 확인되지 못한 에러도 조금씩 있기 때문에 Recommended For Most Users가 되어있는 사람들이 가장 많이 쓰는 버전을 다운 받는다.

터미널 설치

깃허브 링크에 접속한다
https://github.com/coreybutler/nvm-windows/releases
1.1.9 버전의 포스트에 nvm-setup.zip 파일을 다운 받는다.
nvm-setup.zip 의 압축파일을 풀고 설치 파일 실행
Select Destination Location 단계에서 작업폴더를 따로 만들어 놓았다면 거기에 설치를 진행한다.

나는 C드라이브를 최대한 덜쓰기 위해 D 드라이브에 했다.

Set Node.js Symlink 부분은 C에 그대로 둔다. 그리고 설치.

명령 프롬프트(cmd)를 관리자 권한으로 실행한다.
프롬프트 창에 nvm -v 를 써서 nvm 버전을 확인한다. 제대로 설치되었다면 이런 내용이 뜬다. running version 1.1.9. ....

여기서 중요하니 잘 집중하고 따라올 것.
각자 작업할 폴더의 경로가 제각각일텐데,

1) C 드라이브 내에 작업 폴더에 생성한 경우라면 프롬프트 창에 cd C:\폴더명\폴더명 입력 후 이동해주면 된다.

입력한 경로에 들어간 것이 아랫줄에 확인되면 괜찮다.

2-1) 다른 드라이브에 작업하는 경우라면 여기를 진행한다.

관리자 권한으로 잘 실행했다면 프롬프트 창 기본경로가 C:\Windows\system32에 있을 것이다. 거기서 나와주자.

D: 타이핑 후 엔터. 명령창에 D:\ 라고 뜬다면 진행하자.

2-2) cd D:\폴더명 , 폴더 안에 폴더가 더 있다면 경로를 맞춰서 입력해주고 엔터.

제대로 진입했는가? 자, 그럼 경로 지정이 완료 되었다!

프롬프트 창에 nvm install 16.15.1 입력 후 엔터.
홈페이지에서 다운 받지 않았다면, 이렇게 프롬프트 창에서 명령을 통해 직접 내려 받을 수도 있다.
이 버전을 쓰겠다면 nvm use 16.15.1 를 타이핑 하란 글이 나온다. 그대로 입력해준다.
프롬프트 창에 node -v 를 쓰고 잘 다운 받아졌는지 버전을 확인해보자. v16.15.1 를 화답 받았다면 완료다.

프로젝트 시작하기

프롬프트창에서 프로젝트를 설치하고 싶은 경로로 이동한다. 방금 전 node.js 설치한 리액트 폴더에 그대로 프로젝트 파일까지 설치하고 싶다면 그냥 진행하면 된다. 사실 그게 보기 편하다.
npx create-react-app 프로젝트폴더명(영어로)
입력 후 엔터. 늘 그렇지만 명령어를 쓸 땐 띄어쓰기도 중요하다. ex) npx create-react-app project1
열심히 설치된다. Happy hacking 메시지가 뜬다면 설치 완료
code . 라고 명령창에 치면 VS code가 짜잔 하고 실행된다.
방금 만들었던 project1 폴더를 기억하는가? 프롬프트창에서 cd project1 를 입력하여 해당 폴더에 한 번 더 내려가준다.
npm start 명령어로 프로그램을 실행시켜 이 화면이 뜬다면 거의 준비 완료다.

플러그인 설치

VS code에서 확장팩 칸에 들어가자
reactjs code snippets 를 설치한다

리액트의 파일 구조

node_modules : 해당 프로젝트에 대한 라이브러리가 저장된다
public : 정적 파일을 넣는 디렉토리 (html, img 등)
Src : 대부분 코드들이 들어가는 경로 (index.js, 리액트의 Component과 같은 js파일, css파일 등)
Components : pages에서 사용할 컴포넌트들이 들어간다
Pages : app.js 파일에서 react-router-dom을 사용해서 나눈 라우팅의 컴포넌트가 여기에 정리된다

아무튼, src/app.js 파일에서 작업을 시작한다.

Component 컴포넌트

컴포넌트의 개념 : 출처 https://hanamon.kr/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-component%EB%9E%80/
JSX = JavaScript + XML
하나의 파일에 자바스크립트와 HTMl을 동시에 작성하는 것

실습

실습 1 : JSX 사용

1) App.js 에서 아래 코드를 작성해보자

function App() {
  return (
      <div>
        <div>Hello World!</div>
      </div>
  );
}

주의할 점, 이 파일 공간은 코드를 모두 지우고 작성하면 에러가 난다. return()에 해당하는 공간 안에 쓰도록 신경쓰자.

그리고 또 하나의 특징은 <div> 이다. 꼭 모든 내용은 큰 <div> 박스에 감싸주어야 한다.

! 컴포넌트를 만들 시 주의 사항

컴포넌트 이름은 반드시 대문자로 시작한다.
ex) TodaysPlan, Box1, SerchApp...
일반 html 태그와 컴포넌트 태그 구분 법 : 태그가 대문자로 시작하느냐?
대문자로 시작한다면 컴포넌트 태그, 소문자로시작하면 일반 html 태그.

실습 2 : TodaysPlan 컴포넌트 만들기

1) 먼저 프로젝트 파일의 src 폴더에 component 라는 폴더를 만든다.

2) 새 파일을 생성(+) 을 눌러 TodaysPlan.jsx를 입력하면, jsx파일로 자동 생성된다.

3) 화면에 rcc라고 치면, 최상단에 뜨는 rcc를 엔터쳐보면 미리 구성된 코드가 나올 것이다!

아래처럼 입력해보자

import React, { Component } from 'react';

class TodaysPlan extends Component {
    render() {
        return (
            <div className="message-container"> 놀러가자!!!</div>
        );
    }
}

export default TodaysPlan;

4) 그리고 App.js 로 돌아간다.
App.js 파일 상단에 해당 컴포넌트 파일을 불러오자.

import TodaysPlan from './component/TodaysPlan';

5) 입력 되어있던 내용을 지우고 컴포넌트를 불러와보자. <TodaysPlan/>

import logo from './logo.svg';
import './App.css';
import TodaysPlan from './component/TodaysPlan';

function App() {
  return (
      <div className="body">
       <TodaysPlan/>
      </div>
  );
}

6) 결과 확인!

제대로 연결이 됐다면 놀러가자!!! 라는 글이 html 창에 뜰 것이다.

즉 컴포넌트 단위로 파일을 다루기 때문에, 한 페이지에 여러가지 언어의 태그가 얽혀있는 코드를 분석하는 시간이 단축되고, 유지 보수에도 아주 유용하다는 점!

실습 3+4 : box를 만들고, 컴포넌트 재활용하기

1) 새 프로젝트를 npx create-react-app 프로젝트폴더영문명 으로 생성해주거나, 기존에 쓰던 파일을 써보자. 우선 App.js 에서 return() 내부의 div를 입력한다

function App() {
  return (
      <div>
        <Box1 name="한국"/>
        <Box1 name="미국"/>
        <Box1 name="중국"/>
      </div>
  );
}

2) component 폴더에 Box1.jsx 라는 파일을 생성하자.

3) rcc 입력 후 아래 코드를 입력

class Box1 extends Component {
    render(props) {
        return (
            <div className="box">
                Box1
                <p>{this.props.name}</p>
            </div>
        );
    }
}

4) 왼쪽 src창에 App.css 파일에 들어가 아래 코드 입력

.box{
  width : 100px;
  height : 100px;
  border : 1px solid darkcyan;
}

5) App.js 로 돌아가 최상단에 해당 파일들을 연결한다.

import './App.css';
import Box1 from './component/Box1';

6) 결과 확인!

즉, 같은 박스를 쓰면서 내용을 변경시킬 경우, {this.props.name}를 통해 변수를 지정하여 name 값에 맞게 변경시켜준다.

어려웠던 점

npm 경로 설정 및 설치가 고역이었다

해결 방법

C:에서는 타 드라이브 바로 이동이 불가하다.
D:, F: 와 같이 드라이브 이동 후 cd D:\폴더명 으로 이동하면 완료.

소감

잘 설치하고 구동까지 되니 쾌감... 굿이다.

MSJ

제로부터 시작하는 프로그래밍&코딩

이전 포스트

[개발일지 36일차] CSS 선택자, Animate, Effect, Ajax

다음 포스트