Code Gear - 유튜브 개발 강의

이 포스트의 동영상 강의 URL

https://youtu.be/BRDw_rJ74vY

리액트 프로젝트를 만들기

• npx create-react-app s3-react-file-upload

패키지 추가

• npm i aws-sdk
• npm i reactstrap

컴포넌트 생성

• S3Upload.js

코드 작성

• import

import './App.css';
import {useState} from "react";
import AWS from 'aws-sdk';
import { Row, Col, Button, Input, Alert } from 'reactstrap';

• 변수 선언

const [progress , setProgress] = useState(0);
const [selectedFile, setSelectedFile] = useState(null);
const [showAlert, setShowAlert] = useState(false);

• s3 정보를 설정합니다.

const ACCESS_KEY = 'IAM의 ACCESS KEY';
const SECRET_ACCESS_KEY = 'IAM의 SECRET ACCESS KEY';
const REGION = "ap-northeast-2";
const S3_BUCKET = 'codegear-react-file-upload-test-bucket';

AWS.config.update({
  accessKeyId: ACCESS_KEY,
  secretAccessKey: SECRET_ACCESS_KEY
});

const myBucket = new AWS.S3({
  params: { Bucket: S3_BUCKET},
  region: REGION,
});

• 파일 선택시 function

const handleFileInput = (e) => {
  const file = e.target.files[0];
  const fileExt = file.name.split('.').pop();
  if(file.type !== 'image/jpeg' || fileExt !=='jpg'){
    alert('jpg 파일만 Upload 가능합니다.');
    return;
  }
  setProgress(0);
  setSelectedFile(e.target.files[0]);
}

• upload 버튼 click시 function

const uploadFile = (file) => {
  const params = {
    ACL: 'public-read',
    Body: file,
    Bucket: S3_BUCKET,
    Key: "upload/" + file.name
  };
  
  myBucket.putObject(params)
    .on('httpUploadProgress', (evt) => {
      setProgress(Math.round((evt.loaded / evt.total) * 100))
      setShowAlert(true);
      setTimeout(() => {
        setShowAlert(false);
        setSelectedFile(null);
      }, 3000)
    })
    .send((err) => {
      if (err) console.log(err)
    })
}

html

 return (
    <div className="App">
      <div className="App-header">
        <Row>
          <Col><h1>File Upload</h1></Col>
        </Row>
      </div>
      <div className="App-body">
        <Row>
          <Col>
            { showAlert?
              <Alert color="primary">업로드 진행률 : {progress}%</Alert>
              : 
              <Alert color="primary">파일을 선택해 주세요.</Alert> 
            }
          </Col>
        </Row>
        <Row>
          <Col>
            <Input color="primary" type="file" onChange={handleFileInput}/>
            {selectedFile?(
              <Button color="primary" onClick={() => uploadFile(selectedFile)}> Upload to S3</Button>
            ) : null }
          </Col>
        </Row>
      </div>
    </div>
  );

App.css

.App-body {
  background-color: #6d7b97;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-body .alert-message {
  height: 50px;
  background-color: #61dafb;
}

App.js에 S3Upload 컴포넌트 추가

App.js에 S3Upload 컴포넌트를 추가합니다.

  return (
    <S3Upload/>
  );

빌드

터미널에서 다음 스크립트를 실행합니다.

npm run build
빌드 후 프로젝트폴더/build에 생성 된 파일들

s3에 애플리케이션 업로드

build 폴더 아래에 있는 모든 파일을 s3에 업로드합니다.

index.html URL 확인

index.html을 클릭해서 속성의 url을 확인한 후 브라우저에서 실행합니다.

권한 설정 변경

아래와 같이 접근오류가 발생할 경우

s3에 업로드한 모든 파일을 선택후 -> 퍼블릭으로 설정해줍니다.

최종화면

다시 index.html에 접속해보시면 다음과 같이 화면이 나옵니다.

이 포스트의 동영상 강의 URL

https://youtu.be/-BmF30R_erk

AWS의 S3는 단순 Storage 제공 서비스입니다.

EC2와 같이 프로그램을 실행시킬 수는 없고, 파일을 업로드하거나 html과 같은 정적 페이지는 서비스 할 수 있습니다.

React로 file upload 기능을 하는 애플리케이션을 S3에서 서비스 하는 기능을 만들어보겠습니다.

S3 버킷 만들기

• aws에 로그인 한 후 검색창에 s3를 입력합니다.
  S3를 선택합니다
  

  

• 버킷 만들기를 클릭합니다.
  

  

• 버킷 이름을 입력합니다. (버킷 이름은 리전을 통틀어 유일한 이름만 사용 가능합니다)
  버킷 이름 : codegear-react-file-upload-test-bucket
  

  

• 테스트용도이므로 퍼블릭 액세스 차단 설정을 해제합니다.
  

  

• 버킷 만들기를 클릭합니다.
  아래와 같이 버킷이 만들어 집니다.
  

  

• 버킷 이름을 클릭하면 파일 업로드를 할 수 있는 화면이 나옵니다.
  

  

• 권한-CORS에 다음을 입력합니다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

• 이제 S3의 사용 준비가 완료되었습니다.

이 포스트의 동영상 강의 URL

https://youtu.be/rX_c3DXvG2g

React 개발을 위한 IDE(Integrated Development Environment, 통합개발환경)로 Visual Studio Code를 많이 사용합니다. 

Visual Studio Code는 Microsoft에서 개발한 오픈소스이고, 무료로 사용 가능합니다.

VSCode 설치

https://code.visualstudio.com/

Visual Studio Code 사이트에서 Download 하여 설치하면 됩니다.

프로젝트 폴더 열기

• 메뉴-파일-폴더열기를 선택합니다.
  지난시간에 만든 C:\workspace\my-first-react-app 폴더를 선택 후

프로그램 실행

• 메뉴-터미널-새터미널

• npm start

• 아래와 같이 브라우저가 실행됩니다.

이 포스트의 동영상 강의 URL

https://youtu.be/iUWwG8RhcMY

다음 작업을 위해서는 nodejs가 설치 되어 있어야 합니다(nodejs 설치)

1. 작업을 위한 폴더를 생성합니다.
   저는 c:\workspace로 만들었습니다.
2. cmd 또는 powershell을 실행하고 위의 폴더로 이동합니다.
3. npx create-react-app my-first-react을 입력한후 실행합니다.
   

   

4. 스크립트가 실행되고 프로젝트가 생성됩니다.
   

   

5. 다음 명령어를 이용해 프로젝트 실행합니다.
   cd my-first-react
   npm start
   
   
6. 브라우저가 실행되고 아래와 같은 화면이 나오면 성공입니다!!!
   

   

이 포스트의 동영상 강의 URL

https://youtu.be/dz4wdxZGycs

NodeJS란?

• Nodejs는 브라우저에서만 실행되던 Javascript를 브라우저 없이 단독으로 실행할 수 있게 해 주었습니다.
• 이로인해 Javascript로 클라이언트 프로그래밍 뿐만 아니라 서버 프로그래밍이 가능해졌습니다.
• Nodejs와 함께 설치되는 NPM - Node Package Manager를 이용하면 각종 Javascript 라이브러리를 손쉽게 설치할 수 있습니다.

NodeJS 설치

• https://nodejs.org/

• nodejs 사이트를 방문후 LTS 버전을 설치합니다.
  LTS 버전은 안정화 버전입니다.
• nodejs 설치 확인
  cmd 창에서 node -v를 실행합니다.