[개발 일기] 따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 - 업로드 페이지 만들기 1

안녕하세요 건브로입니다.

 

오랜만에 블로그 글 쓰네요.😁

 

이번에 학교에서 스터디 목적으로 '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기'를

인프런을 통해서 들었습니다. 사실 이 강의를 골랐을 때 그렇게 어려운지도 몰랐네요.

 

근데 지금보니까 boiler-plate를 토대로 바로 만들더군요.

 

boiler-plate는 로그인과 회원가입 기능이 내장되어 프로젝트로 보면 됩니다.

 

강의가 총 45개인데, 일주일에 4개씩 시험기간을 제외하고 꾸준히 보려고합니다.

 

긴 시간동안 짧게 보면서 투자하는 건데 저에게 도움이 됐으면 좋겠어요.

 

오늘 만들어낸 결과물을 먼저 보여줄게요.(홈, 로그인, 회원가입은 제외)

홈 화면

로그인

회원가입

업로드 화면

 

 

1. 이번에 무엇을 배웠는가?

 

1) mongoDB에서 제공해주는 데이터베이스 무료로 사용하는 방법

 

2) antd 사용법

 

3) react-dropzone 사용법

 

이렇게 크게 3가지를 배웠다.

 

사실 이러한 부분 보다는 boiler-plate를 어떻게 만들었는지가 더 중요한 것 같다.

 

왜냐하면, boiler-plate 정도만 만들줄 알면 어느정도는 다룰 수 있을거라는 생각이 들었기 때문이다.

 

boiler-plate는 차근 차근 분석하며 혼자 알아서 server, client를 다뤄보면서 간단하게 시작해봐야겠다.

 

 

 

 

 

2. mongoDB를 aws의 rds처럼 무료로 사용하는 방법

 

https://www.mongodb.com/

The most popular database for modern apps

이 사이트에 들어가서 회원가입해서 이용하면 된다.

 

회원가입도 했다면, 로그인 한 후에 프로젝트를 먼저 생성한다.

 

프로젝트 생성 후에는 클러스터를 추가하면 된다.

 

먼저 클러스터를 추가할 때 aws, azure, google cloud 중 하나를 이용할 수 있는데, 나는 aws를 이용했다.

 

이렇게 고르고 나서 주의 사항이 있다.

 

아래에는 어떤 버전을 사용할지 나오는데 무조건 shared 버전으로 이용하고, 별모양이 있는 나라를 선택해야지 공짜로 사용할 수 있다. 

 

그리고 shared버전인 상태에서 3가지 중 하나의 요금을 고르는 게 있는데 공짜 요금을 고르면 된다.(이름 까먹음)

 

이렇게 하면 클러스터가 2~5분안에 만들어진다.

 

다 만들어지면, 아래와 같은 화면이 나올텐데, connect를 눌러주면 된다.

 

계속해서 진행하면 위 화면처럼 나오는데, Connect your application을 누르면 된다.

 

그리고 유저 아이디와 비밀번호 넣는 부분도 있을것이다. 

 

잘 기억할 수 있도록 아이디 비밀번호를 잘 기억도 해야하며 입력해야한다.

 

그 후에는 아래의 사진과 같이 어떤 언어로 할지 고르면 되고, 버전도 알아서 선택하면된다.

 

2번이 제일 중요하다. 

 

2번에서 자기만 알아야하는 코드가 발급되는데 그 코드를 이용해서 내 vscode 에디터에 잘 녹여야한다.

 

여기서 발급되는 코드에는 비밀번호 넣는 칸이 있다. 거기에 아까 만들었던 비밀번호를 넣으면 된다.

 

 

3. antd 사용법

 

import React, { useState } from 'react'
import {Button, Form, Input} from 'antd';
import FileUpload from '../../utils/FileUpload';

const {TextArea} = Input;

const Continents = [
  {key: 1, value: "Africa"},
  {key: 2, value: "Europe"},
  {key: 3, value: "Asia"},
  {key: 4, value: "North America"},
  {key: 5, value: "South America"},
  {key: 6, value: "Australia"},
  {key: 7, value: "Antarctica"},
]

function UploadProductPage() {
  const [Title, setTitle] = useState("");
  const [Description, setDescription] = useState("");
  const [Price, setPrice] = useState(0);
  const [Continent, setContinent] = useState(1);
  const [Images, setImages] = useState([]);
  const titleChangeHandler = (event) =>{
    setTitle(event.currentTarget.value);
  }
  const descriptChangeHandler=(event) =>{
    setDescription(event.currentTarget.value);
  }
  const priceChangeHandler = (event) =>{
    setPrice(event.currentTarget.value);
  }
  const continentChangeHandler = (event) =>{
    setContinent(event.currentTarget.value);
  }
  return (
    <div style={{ maxWidth: "700px", margin: '2rem auto'}}>
      <div style={{textAlign:'center', marginBottom: '2rem'}}>
        <h2>여행 상품 업로드</h2>
      </div>
      
      <Form>

        {/* DropZone */}


        <FileUpload />


        <br/>
        <br/>
        <label>이름</label>
        <Input onChange={titleChangeHandler} value={Title}/>
        <br/>
        <br/>
        <label>설명</label>
        <TextArea onChange={descriptChangeHandler} value={Description}/>
        <br/>
        <br/>
        <label>가격($)</label>
        <Input type="number" onChange={priceChangeHandler} value={Price}/>
        <br/>
        <br/>
        <select onChange={continentChangeHandler} value={Continent}>
          {
            Continents.map(item =>
            (
              <option key={item.key} value={item.key}>{item.value}</option>
            ))
          }
        </select>
        <br/>
        <br/>
        <Button>
          확인
        </Button>

      </Form>
    </div>
  )
}

export default UploadProductPage

이 파일은 파일 업로드 페이지이다. 

 

여기서 antd가 사용되어졌다.

 

antd란 material-ui처럼 미리 css가 적용된 컴포넌트를 사용할 수 있어서 개발 시간을 단축시켜주는 고마운 라이브러리이다. 

 

import {Button, Form, Input} from 'antd';를 사용해서 컴포넌트를 불러내며, 우리고 알고 있는 html 요소처럼 사용된다.

 

4. react-dropzone

react-dropzone은 일반적인 파일찾기 형식이 아닌 '더하기 모양' 형식이다.

 

이 형식은 사용자에게 간단하고 가시적인 ui를 보여줄 수 있다.

 

https://www.npmjs.com/package/react-dropzone

react-dropzone

 

사용 방법은 아래와 같이 사용하면 된다.

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

function MyDropzone() {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  )
}