🧑🏻‍💻시니어개발자🧑🏻‍💻

그동안 17편을 거쳐서 웹 개발 React&Python으로 웹개발(링크서비스)를 개발 했으며, 

혼자 프론트/백엔드를 하다 보면 복잡함을 느끼며, 수정작업이 이루어지면 백엔드와 프론트엔드 여러 소스들을 거쳐서 관련 내용을 반영해야 하는 어려움이 있을 수 있다. 하지만, 반복적인 개발 과정을 통해서 여러분의 실력을 높일 수 있을 것이다.

최대한 STEP BY STEP로 소스를 추가하면서 설명하려고 노력했으나,

더 복잡해 졌는지 알 수 없지만, 일단 차근차근 따라해보면 좋을 듯 하다.

또한 본 소스를 공개하면서 여러분과 함께 WIN-WIN이 될 수 있을 거라고 믿으며, 수정과 발전을 해 가면서 여러분들 만의 레퍼런스 소스가 되길 바란다.

누구나 개발할 수 있는 소스이며, 단지 한번도 전체적인 개발 경험을 못한분들을 위한 것이므로, 완벽한 소스 내용이 아님을 다시 한번 말씀드리며, 제 1편을 마치고자 한다.

 링크서비스 git : https://github.com/firstvalue1/LINKSERVICE.git

보시다 수정이나, 의견 있으시면 git에 남겨주시기 바랍니다.

다음은 링크서비스를 기본으로 추가적인 기능들을 계속 게시 할 예정입니다.

#15. 링크서비스 관리자화면 및 링크리스트 편집

우선 링크정보를 편집하면서 링크정보를 삭제처리시 이미 등록된 이미지를 삭제하는 백엔드를 제작하자

⌘ links.py ( 위치: linkservice/server/src/links.py)

---------------------------------------------------------------------------------------------------

Python백엔드 links.py의 LinkRemove(Resource) 을 수정한다.

관련 라이브러리를 import 한다. ( current_app, os )

from flask import jsonify, request, current_app
import os

"""
DELETE /api/link/delete/<int:id> - 링크정보삭제
"""
class LinkRemove(Resource):
    def delete(self, id):
        # id에 해당되는 링크 정보 조회
        link_data = LinkModel.find_by_id(id)
        folder = current_app.config.get('IMAGE_FORDER')
        # 이미지 링크 항목 가져오기
        if link_data.imageurl is not None:
            imageurl = link_data.imageurl.split('/')
            file_name = imageurl[len(imageurl) - 1]
            #파일 존재여부 확인후 이미지 파일을 삭제한다.
            if os.path.isfile(folder + file_name):
                os.remove(folder + file_name)

        # 정보 삭제 ( links_model의 delete_by_id 메소드 호출 )
        LinkModel.delete_by_id(id)

        return {'message':'정상적으로 삭제 되었습니다.'},201

⎟⎜링크정보를 편집하는 화면 제작

⌘ links.edit.jsx ( 위치: linkservice/client/src/component/links.edit.jsx )

-------------------------------------------------------------------------------------------------

links.edit.jsx는 링크 정보를 편집 하는 화면이다.

화면 구성과 이벤트 핸들러 함수들은 모두 신규 등록(links.create.jsx) 과 동일하며,

단 useEffect에서 편집하고자 하는 링크정보의 id 값을 받아 출력하는 부분과 handleSubmit에 업데이트하는

서비스를 추가 하면 된다.

import React, { useState, useEffect } from "react"
import { useParams, useNavigate } from "react-router-dom"
import linkService from "./service/service";
import {useDropzone} from 'react-dropzone'

export default function LinkEdit () {

    //id값을 받아오기 위해서 react에서 제공한 useParams을 활용한다.
    let params = useParams()
    const [data, setData] = useState({})
    const [values, setValues] = useState({})
    const [image, setImage] = useState(null)
    const [preview, setPreview] = useState('/assets/default.jpg')
    const navigate = useNavigate();

      useEffect(() => {
        linkService.getSelectLink(params.id).then(
            (res)=> {
            setData(res.data)
             // 수정 서비스인 linkService.updateLink 에 넘겨주기 위한 values            
            setValues(res.data.links)
            // preview을 위한 setProview값 
            setPreview(res.data.links.imageurl)
          }, (error) => {
            alert(error.res.data.message )
          }
          )
        // eslint-disable-next-line 
      }, [params.id])

      // Drag & Drap 관련 실행 function 
      function onDrop(acceptedFiles) {
        const reader = new FileReader();
        const file = acceptedFiles
        if (file) {
          reader.readAsDataURL(file[0]);
          setImage(file[0]);
        }
        reader.onload = (e) => {
            setPreview(reader.result);
            setValues((prevValues) => ({
                ...prevValues,
                [`imageurl`]: file[0].name,
            }))
            document.getElementsByName("imageurl")[0].value = ''
        };
    }

    const handleChange = async (e) => {
        const nextValues = {
            ...values,
            [e.target.name]: e.target.value
        }
        setValues(nextValues)
        // 사진링크정보 입력시 preview를 위한 set
        if (e.target.name === 'imagelink') {
            setPreview(e.target.value)
        }
    }

    const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData();
        linkService.updateLink(params.id, values).then(
            (res)=> {
            // image file을 선택시 이미지 업로드를 위해서 진행
            if (image) {
                formData.append('image', image)
                linkService.changeImage(formData, params.id).then(
                    (res)=> {
                    // console.log(res)
                    }
                )
            }
            alert(res.data.message)
            navigate("/links/list", { replace: true})

         }, (error) => {
            alert(error.res.data.message )
         }
        )
    }
    // Drag & Drop을 위한 기존 const 선언
    const {getRootProps, getInputProps} = useDropzone({onDrop})

    return (
        <div>
      {(typeof data.links ==='undefined') ? (
        <p>Loading....</p>
      ) : (
        <>            
            <div className="title-container">
                <h1 className="text-title">링크 수정</h1>
            </div>

            <form  onSubmit={handleSubmit}>                            
                <div className="input-wrap">
                    <label>링크명</label>
                    <div className="input-box">
                        <input type="text" name="name" 
                            defaultValue={data.links.name} 
                            className="input-css"
                            onChange={handleChange}
                            autoFocus="autofocus"
                        />  
                    </div> 
                </div>
                <div className="input-wrap">
                    <label>태그 정보 ( 태그여러개 등록시 / 로 구분 )</label>
                    <div className="input-box">
                        <input type="text" name="tag"
                            defaultValue={data.links.tag} 
                            className="input-css"
                            onChange={handleChange}
                        />
                    </div>
                </div>
                <div className="input-wrap">
                    <label>링크 URL (연결하고자 하는 URL)</label>
                    <div className="input-box">                                 
                    <input type="text" name="linkurl" 
                        defaultValue={data.links.linkurl} 
                        className="input-css"
                        onChange={handleChange}
                        />    
                    </div>                                 
                </div>
                <div className="input-wrap">
                    <label>사진 링크 정보</label>
                    <div className="input-box">                                 
                    <input type="text" name="imageurl" 
                        defaultValue={data.links.imageurl} 
                        className="input-css"
                        onChange={handleChange}
                        />     
                    </div>                                  
                </div>   
                <div className="img_contain" >
                    <div className="img_wrap" {...getRootProps()} > 
                        <img src =  { preview }
                            alt='이미지' className="img_box" />
                        <input {...getInputProps()} multiple={false} name='imageurl'/>
                    </div> 
                        <div className="text_type">
                        <span>사진 링크 정보를 등록하거나 <br></br>
                        이미지를 직접 끌어오거나<br></br>
                        파일을 선택해주세요</span>
                        </div>

                </div> 
                <div>
                    <button type="submit" className="btn btn-primary">수 정</button>
                </div>
            </form>
            </>
         )}                          
        </div>
    )
}

링크정보에 대한 등록/수정/삭제가 모두 끝났다.

다음편에는 만들어진 소스로 좀더 필요한 여러가지 기능과 디테일한 작업을 진행해 보자.

⎟⎜관리자 화면 제작

 ⌘ manager.jsx ( 위치: linkservice/client/src/component/manager.jsx )

--------------------------------------------------------------------------------------------------

CSS 을 먼저 추가한다. ( links.css 파일에 추가 )

/* 링크 스타일을 없애주는것  */
.a-tag {
    color: inherit;
    text-decoration: inherit;  
width: 100%; 
}
.manager-button {
    border-radius: 8px;
    border: none;
    margin: 0;
    width: 100%;    
    margin-bottom: 10px;
    height: 50px;
    padding: 0 20px;
    font-size: 18px;
    background-color: #8090F5;
    color: #fff;
}

manager.jsx 에 ManagerHome() 을 생성한다.

import React from "react"
import { Link } from "react-router-dom"

export default function ManagerHome() {

    return (
<>
        <Link to="/links/list">
        <button type="button" className="manager-button">
            <div> 링크 정보 관리 </div>
        </button>
        </Link>    

        <Link to="#" >
        <button type="button" className="manager-button">
            <div> 스케줄 정보 관리 </div>
        </button>
        </Link>  
  </>
    )
}

App.js에 Route을 추가한다.

⎟⎜링크정보 관리하는 리스트 화면 제작

⌘ links.list.jsx ( 위치: linkservice/client/src/component/links.list.jsx )

-------------------------------------------------------------------------------------------------

links.list.jsx는 링크 리스트를 보여주고, 삭제기능과 신규등록/편집 화면으로 이동하기 위한 화면이다.

화면은 links.jsx와 비슷하고, 삭제 버튼과 내용을 클릭하면 /link/edit/{id} 로 넘기면 된다.

삭제 이벤트 핸들러 handleDelete(id)는 linkService의 deleteLink(id) 을 호출하면 된다.

         ☞ navigate(0)는 현재 페이지를 reload한다.

import React, { useState, useEffect } from "react";
// mui Icon에서 Delete 버튼을 import한다.
import { DeleteOutline } from "@mui/icons-material";
import { Link , useNavigate } from 'react-router-dom'
import linkService from "./service/service";

export default function LinksList () {
    const [data, setData] = useState([{}])  
    const navigate = useNavigate();
// 링크 리스트를 전체 목록을 불려오는 getLinks을 통해 받아 온다.
    useEffect(() => {
        linkService.getLinks().then(
            (res)=> {
            setData(res.data.links)
            console.log(res.data.links)
          }, (error) => {
            alert(error.res.data.message )
          }
          )
    }, [])
// 삭제 버튼을 클릭시 삭제하는 함수를 생성한다.
// param : id
    const handleDelete = (id) => {
        // e.preventDefault();
        linkService.deleteLink(id).then(
            (res)=> {
              alert(res.data.message)
              navigate(0)
          }, (error) => {
            alert(error.res.data.message )
          }
          )
      }
    return (
<>
        <div>
            <Link to = "/create">
                <button type="submit" className="manager-button">+ 신규 링크 정보 등록</button>
            </Link>
        </div>

        {(typeof data ==='undefined') ? (
            <p>Loading....</p>
            ) : (
            data.map((link, index) => (   
            <div className="link-container" key={index} >
                <div className="link-wrapper">
                    <div className="link-show">
                        <img
                        src={link.imageurl}
                        alt=""
                        className="link-img"
                        />
                      <Link to={'/link/edit/' + link.id} className="a-tag">
                        <div className="list-title"> {link.name }</div> 
                      </Link>

                      <div className="delete-icon" name='deleteid'>                                                                              
                        <DeleteOutline fontSize='large' color="disabled"
                            onClick={() => handleDelete(link.id)}/>                               
                      </div>

                    </div>     
                </div>
                
            </div>
             ))
            )}    
</>
    )
}

삭제 이벤트인 handleDelete는 API 함수가 링크정보만 삭제한다.

하지만, 이미지를 파일 형태로 등록이 되므로, 링크정보 삭제가 되면 이미지 파일도 삭제처리를 해야 한다.

이미 다운로드된 이미지를 삭제처리하는 백엔드는 다음편에.....

등록화면은 완료되었으니, 이젠 편집화면을 개발해 보자.

#13. 등록화면에서 내용 저장 및 이미지 저장 기능 구현

편집화면을 개발하기전에 개개 별 화면을 제작하다 보니, 화면 흐름이 되도록 개발을 추가 한다.

화면 흐름은 대략적으로 아래 식으로 구현을 한다.

관리자모드 화면을 만들어 등록/편집/삭제/순서변경이 가능하게 Prototype UI을 구성해 보자.

⎟⎜초 화면 하단에 메뉴 제작

⌘ menu.jsx ( 위치: linkservice/client/src/component/menu.jsx )

---------------------------------------------------------------------------------------------------

React에서 많이 사용하는 Material UI Icon 을 사용하여 메뉴들을 생성해 보자.

터미널을 열어 라이브러리를 설치한다.

〉〉 yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react

아이콘은 https://mui.com/material-ui/material-icons/ 여기서 찾아 적용한다.

우선 HOME 과 관리자(SETTING) 아이콘을 찾아 맘에 드는 아이콘을 클릭하면 import 내용이 나온다. 복사하여 붙인다.

import HomeIcon from '@mui/icons-material/Home';
import SettingsIcon from '@mui/icons-material/Settings';

export default function MenuIcon(props) {

    return (
<>
      <div className='menu-wrap'>
        <div className='menu-box'>
            <HomeIcon fontSize='large'  color="secondary"/>
            <SettingsIcon fontSize='large'  color="secondary" /> 
        </div>
      </div>      
</>
    )

CSS 을 추가한다. ( links.css 파일에 추가 )

.menu-wrap {
    display: flex;    
    margin: 0 auto;
    justify-content: center;
}
.menu-box {
    padding: 20px;
    text-align: center;
}

Material Icon에 색상과 크기를 적용 했다.

Icon 클릭 시 해당 페이지로 이동하는 onClick()의 HandleIcon() 함수를 제작한다.

import HomeIcon from '@mui/icons-material/Home';
import SettingsIcon from '@mui/icons-material/Settings';
import { useNavigate } from 'react-router-dom';

export default function MenuIcon(props) {
    const navigator = useNavigate()
    const handleIcon = (e) => {
        switch (e) {
            case 'A' : return navigator('/manager')
            case 'M' : return navigator('/')
            default : return navigator('/')
        }
    }
    return (
<>
      <div className='menu-wrap'>
        <div className='menu-box'>
            <HomeIcon fontSize='large' color="secondary"
                onClick={() => handleIcon('M')} 
            />
            <SettingsIcon fontSize='large' color="secondary"
                onClick={() => handleIcon('A')} 
            /> 
        </div>
      </div>      
</>
    )
}

모든 페이지에 메뉴가 보이도록 App.js을 수정한다.

#12. React에서 Drag & Drop을 이용한 이미지 업로드

React에서 등록화면에서 이미지를 Drag&Drop 할수 있도록 구현을 했다.

그럼 이젠 등록화면의 마무리로 저장기능을 구현해보자.

1.1.  이미지 저장기능 제작

이미지 저장기능(linkSevice.uploadImage) 은 아직 API 제작 및 Service선언을 하지 않았다.

     ☞ 설명차원에서 서버단에 API제작 시 제외 했다. 앞단에서 뭔 지 모른 상태에서 소스를 미리 제작하지 않고,

          이해를 돕기 위해 지금 내용을 반영했다.

링크정보를 DB에 저장 시 우리는 미리 /api/link/create API 을 사전에 제작했다.

하지만, 실제 화면에서 DB 저장 시 2가지가 더 추가되어야 한다.

첫째, 이미지 파일 자체를 저장하는 기능

둘째, 이미지 파일명(URL)을 링크정보 DB에 저장하는 기능

⎟⎜이미지 저장 기능

이미지 업로드는 보통 DB에 직접 넣는 방법과 서버에 이미지를 보관하는 방법이 있다. 장단점은 있으나, 이미지를 DB에 저장하는 방식은 향후 이미지 호출 시 속도와 DB용량과 유지보수에 불편함이 있어, 별도 서버에 보관하는 방식으로 진행한다.

기업의 개발은 CDN을 사용할 수 있으므로, 별도 보관 방식을 추천한다.

이미지 업로드 제작하면서, 다시한번 서버단과 클라이언트단의 API제작 관련해서 정리해보자.

1)   서버 RESTful API제작

- 이미지 보관 폴더 지정 ( config.py )

- 이미지 업로드후 이미지 파일 이름과 URL을 DB에 보관

- 이미지 업로드 / 삭제 CLASS 제작

- API 선언

2) 클라이언트 API 호출

   - API config에 서버단 API 호출 url관리 ( api.config.js )

- 서비스에 API 호출 const 지정 ( service.js )

⎟⎜서버단 API 제작

⌘ config.py ( 위치: linkservice/server/config/config.py )

--------------------------------------------------------------------------------------------------

앞에서 config.py에 개발계(Development)와 운영계(Production) 이미지 저장 위치를 지정 했었다.

#이미지 위치 설정
    image_folder = os.path.normpath(os.path.join(dir, os.pardir)) + '/client/public/images/'
    COVER_IMAGE_FORDER = image_folder
    IMAGE_FORDER = image_folder
    IMAGE_URL = 'http://127.0.0.1:3000/images/'

image_folder는 현재 디렉토리의 부모 디렉토리 ( /linkservice) 을 확인해서 /client/public/images 디렉토리를 가리킨다.

( 해당 폴더에 images 디렉토리를 만들자 )

☞ NAS나 CDN 저장 시 image_folder에 위치를 지정하면 된다.
☞ COVER_IMAGE_FORDER 는 향후 커버 이미지를 추가/변경 할 예정이라 미리 설정했다.

⌘ links_model.py ( 위치: linkservice/server/models/links_model.py )

--------------------------------------------------------------------------------------------------

기존에 links_model.py에 2가지가 추가적으로 필요하다.

이미지 업로드후 링크정보에 이미지 이름을 매핑 시키기 위해서 이미지 이름을 저장하는 method와 현재 DB의  id 시퀀스 값을 알아내는 method가 필요하다.

id의 현재 시퀀스를 알아야 하는 이유는 저장순서를 잘 생각하면 필요성이 보인다.

이미지가 먼저 저장 되면 id을 알 수 없으므로, 1)링크정보(이름,태그 등)가 먼저 저장되어 시퀀스인 id값이 생성한 다음 2)이미지를 저장해야 한다.

from sqlalchemy.sql import text

query에 raw string 형태의 SQL문을 전달하기 위해서 sqlalchemy.sql.text 을 사용해야 한다.

우선 sqlalchemy.sql.text 을 import 하고, 아래 소스를 추가한다.

# 링크 이미지 정보를 DB에 저장하기 위한 코드
# id와 파일이름 혹은 이미지 링크를 파라메타를 받아 처리
    @classmethod
    def update_filename(self, id, filename):
        try:
            query = "update links set imageurl = :v2 where id = :v1"
            db.session.execute(text(query), {'v1':id, 'v2':filename})
        except:
            db.session.rollback()
            print('update_filename : 오류발생')
            print(query)
        finally:
            db.session.commit()
            db.session.close()

# 링크정보가 저장된 현재 시퀀스 id 값을 알아낸다. 
	@classmethod
	def currval_id(self):
		result = db.session.query(func.max(self.id)).scalar()
		return result

⌘ image.py ( 위치: linkservice/server/src/image.py )

-------------------------------------------------------------------------------------------------

이미지 관련 Resource을 제작하기 위해서 image.py을 하나 생성한다.

image.py에서는 썸네일 정도의 이미지만 있으면 되므로, 1) 이미지를 resizing을 하고, 2)이미지 파일을 폴더에 저장한 다음, 3) 링크정보 DB에 이미지 파일명(URL)을 매핑 시킨다.

☞ DB에 저장되는 이미지 파일명은 실제 CDN혹은 NAS 의 URL형태로 저장된다.

   config.py의 IMAGE_URL 값을 참고하기 바랍니다.

from flask_restful import Resource
from flask import jsonify, request, current_app
from PIL import Image, ImageOps
from models.links_model import LinkModel

"""
UPLOAD  IMAGE /api/link/image 
"""
class ImageUpload(Resource):
    def post(self):
        f = request.files['image']
        folder = current_app.config.get('IMAGE_FORDER')
        img_url = current_app.config.get('IMAGE_URL')

        img = Image.open(f)
        
        # 이미지를 강제적으로 Resizing한다.
        # Resizing을 안해도 좋으나, 파일 용량을 줄이고자 반영
        img_resize = img.resize((50,50), Image.LANCZOS)
        img_resize = ImageOps.exif_transpose(img_resize)
        img_resize = img_resize.convert('RGB')

        id = LinkModel.currval_id()
        file_name = str(id) + '_' + str(date_function.today()) + '.' + f.filename.rsplit('.', 1)[1].lower()
        img_resize.save(folder + file_name)
		LinkModel.update_filename(id, img_url + file_name)

        return '이미지가 저장되었습니다..'

프론트엔드에서 formData로 보낸 image을 request.files로 받아 Python의 이미지 처리 pillow(PIL) 라이브러리를 사용하여 이미지를 Resizing한다.

또한 파일 이름을 변경한다. 이유는 한글 혹은 같은 파일 이름이 있을 수 있기에 대부분 사이트를 보면 명명규칙(Naming rule)에 맞게 변경하여 자체 보관한다.

여기서는 파일명 Naming rule을 다음과 같이 하기로 하자. ( 각자 정해도 무방 한다.)

   ► ID_날짜.확장자

        📌 DB에 이미지 파일 저장 시 image_url + file_name임을 상기하기 바란다.

또한, 이미지를 업로드 뿐만 아니라, 링크정보가 수정/삭제 시 기존 이미지를 변경해주는 작업도 필요함으로 미리 작성한다.

"""
CHANGE  IMAGE /api/link/image/<int:id>
"""
class ImageChange(Resource):
    def put(self, id):
        f = request.files['image']
        folder = current_app.config.get('IMAGE_FORDER')
        img_url = current_app.config.get('IMAGE_URL')

        img = Image.open(f)
        # 이미지를 강제적으로 Resizing한다.
        # Resizing을 안해도 좋으나, 파일 용량을 줄이고자 반영
        img_resize = img.resize((50,50), Image.LANCZOS)
        img_resize = ImageOps.exif_transpose(img_resize)
        img_resize = img_resize.convert('RGB')

        file_name = str(id) + '_' + str(date_function.today()) + '.' + f.filename.rsplit('.', 1)[1].lower()
        img_resize.save(folder + file_name)

        LinkModel.update_filename(id, img_url + file_name)

        return '이미지가 수정되었습니다..'

ImageUpload() 와 ImageChange() 의 차이점은 id 값을 가지고 있느냐 아니면 currval_id가지고 생성하느냐 차이다.

소스를 하나로 병합해도 될지 여러분들이 직접 해보시면 좋을 듯 하다.

⌘ server.py ( 위치: linkservice/server/server.py )

--------------------------------------------------------------------------------------------------

API에 ImageUpload Resource을 추가한다.

server.py에 ImageUpload을 import하고,

from src.image import ImageUpload

api resource에 추가한다.

api.add_resource(ImageUpload, '/api/link/image')
api.add_resource(ImageChange, '/api/link/image/<int:id>')

⎟⎜클라이언트단(프론트 엔드) API 호출

⌘ api.config.js ( 위치: linkservice/client/src/component/api/api.config.js )

-------------------------------------------------------------------------------------------------

서비스명 API을 추가한다.

⌘ service.js ( 위치: linkservice/client/src/component/service/service.js )

-------------------------------------------------------------------------------------------------

linkService에서 API을 호출하여 이미지를 저장하는 함수를 추가한다.

모두 작성되면, 이젠 테스트를 해보자

http://localhost:3000/create 로 접속 후 테스트 데이터를 넣어보고 등록 한다.

정상적으로 등록되었다면 초기화면에서 확인해보자.

http://locahost:3000

관리자모드 화면을 만들어 등록/편집/삭제/순서변경이 가능하게 Prototype UI을 구성해 보자.

링크서비스 등록화면에서 Input Value을 가져오는 방법을 알았다.

그럼 이미지 등록을 위한 Drag&Drop 이미지 업로드를 제작해보자.

#11. React화면에서 각 항목의 Input Value을 가져오기

⎟⎜이미지Drag Drop기능 및 Preview 기능

⌘ links.create.jsx ( 위치: linkservice/client/src/component/links.create.jsx)

---------------------------------------------------------------------------------------------------

1)   이미지를 미리 볼 수 있는 기능

     preview const 선언

const [preview, setPreview] = useState('assets/default.jpg')

📌 이미지가 없을 때 default이미지를 보여 주기 위해서 public/assets/default.jpg을 넣어둔다.

( 샘플 이미지는 인터넷 검색으로 적당한 곳에서 가져오면 된다.)

   img src 에 preview const을 지정

<div className="img_wrap" > 
            <img src =  {preview}
                alt='이미지' className="img_box" />
            <input multiple={false} name='imageurl'/>
 </div>

   handleChange() 함수에 target name이 imageurl일 경우 setPreview값을 셋팅 한다.

const handleChange = (e) => {
        const { name, value } = e.target
        setValues((prevValues) => ({
            ...prevValues,
            [name]: value,
        }))
        
       // 이 부분을 추가
        if (e.target.name === 'imageurl') {
            setPreview(e.target.value)
        }
    }

2)   이미지 Drag&Drop기능 구현

Drag Drop기능은 React에서 제공되는 react-dropzone 라이브러리를 사용한다.

📌 공식문서 : https://github.com/react-dropzone/react-dropzone

터미널에서 yarn add react-dropzone 라이브러리를 설치한 다음,

useDropzone을 선언한다.

import {useDropzone} from 'react-dropzone'

image state을 선언한다.

const [image, setImage] = useState(null)

onDrop 관련 함수를 작성한다.

onDrop함수는 이미지 drop후 처리해야 하는 작업내용을 반영하면 된다.

여기서는 파일을 읽어 처리는 로직을 반영 한다.

function onDrop(acceptedFiles) {
        const reader = new FileReader();
        const file = acceptedFiles
        
		// 이미지 파일을 읽어 setImage 로 저장
        if (file) {
          reader.readAsDataURL(file[0]);
          setImage(file[0]);
        }
       // onDrop되면 preview 되게 처리하고, 기존 이미지 url정보를 공백처리한다.
        reader.onload = (e) => {
            setPreview(reader.result);
            document.getElementsByName("imageurl")[0].value = ''
        };
    }

readAsDataURL 메소드로 image파일을 base64로 인코딩 된 값으로  반환한다. 그리고 그 결과를 setPreview(미리보기) 에 값을 넣고, setImage은 이미지 파일정보를 보관한다. 마지막으로 이미지를 직접 등록했으므로,

링크정보 URL(imageurl) 항목을 비운다.

Dropzone의 Props인 getRootProps와 getInputProps지정한다.

const {getRootProps, getInputProps} = useDropzone({onDrop})

이미지 영역(zone)의 div에 props들을 선언한다.

<div className="img_wrap" {...getRootProps()} > 
            <img src =  {preview}
                alt='이미지' className="img_box" />
            <input {...getInputProps()} multiple={false} name='imageurl'/>
</div>

📌(중요) getRootProps는 이미지 영역의 div에 ,    getInputProps는 input에 선언하면 된다.

이미지 저장하기 위해서 handleSubmit에 관련 내용을 추가한다.

이미지가 있을 경우 formData형태로 업로드를 진행한다.

linkService.createLink(values).then(
            (res) => {
                if (image) {
                    //이미지 항목이 있을경우 formData에 넣어 API을 호출한다.
                    formData.append('image', image)
                    linkService.uploadImage(formData).then(
                        (res)=> {// console.log(res) 
                        }
                )} 
                alert(res.data.message)
                window.location.reload();            
            }
        )

다음편에는 실제 DB 와 이미지 파일 저장 (등록) 기능을 만들어 보자.

#10. React 링크서비스 등록 및 편집 화면 개발(등록화면 디자인)

등록 및 편집화면 디자인이 되었으니, 이젠 입력 기능을 만들어 보자.

React화면에서 각 항목의 Input Value을 가져오기

⌘ links.create.jsx ( 위치: linkservice/client/src/component/links.create.jsx)

---------------------------------------------------------------------------------------------------

Input value값을 가져오는 방식은 아래 순서대로 처리 하시면 된다.

1)   input에서 value을 담기 위해서 state을 생성( json형태로 받기위해서 선언)

const [values, setValues] = useState({})

2)   input에서 값을 입력할 때 value state값을 변경해주는 onChange handle함수를 생성한다.

const handleChange = (e) => {
        const { name, value } = e.target
        setValues((prevValues) => ({
            ...prevValues,
            [name]: value,
        }))
}

위 코드는 input type=”text”에 입력하는 이벤트가 발생시 해당 input의 name과 value을 가져와 기존 state에 새로운 state을 추가하는 핸들 함수이다.

3) submit 핸들 함수를 통해 values의 validation체크와  API 호출하여 서비스에 전달하고,

      useRef을 통해 Input에 focus 주기

useRef선언

import React, { useState, useRef } from "react"

const 선언

const inputFocus = useRef(null)

 handleSubmit에 validation 체크 시 current focus()을 추가한다.

if (!values.name) {

     alert('링크명은 필수값입니다.')
     inputFocus.current.focus()

     return false

}

4)   handleSubmit 함수

const handleSubmit = async (e) => {

        e.preventDefault();

        const formData = new FormData();
        if (!values.name) {
            alert('링크명은 필수값입니다.')
            inputFocus.current.focus()
            return false
        }
        if (!image && !values.imageurl) {
            if (!window.confirm('이미지가 없는 링크정보를 등록하겠습니까?')) {
                return false
            }
         }
         
         // input 항목의 values을 db에 저장하는 API를 호출한다.
         
          linkService.createLink(values).then(
            (res) => {
                alert(res.data.message)
                window.location.reload();           
               }
           )
    }

5)   렌더링 되는 input에 onChange() 함수로 handleChange()함수를 호출한다.

<input type="text" name="name"
                defaultValue=""
                className="input-css"
                onChange={handleChange}
            />

6)   form 태그에 onSubmit 함수로 handleSubmit함수를 호출한다.

<form  onSubmit={handleSubmit}>

Input Value 작업은 이것으로 완료할 수 있으나,  추가적으로 이미지를 미리 볼 수 있는 기능,

이미지를 직접 Drag&Drop 하는 기능을 제작해보자.

#9. 초화면 디자인 ( CSS 적용 및 화면 Component제작 )

지금까지 Pytho Flask Restful API 와 React 로 링크서비스의 초화면을 제작했다.

앞으로 할일을 정리해서 하나씩 진행해 보기로 한다.

⎟⎜TO-DO

-       등록화면/편집화면 제작 ( 이미지 등록 포함 )

-       상단에 커버 이미지 추가 ( 커버 이미지 변경 포함 )

-       커버 이미지 구간에 일정을 표시 ( 일정관리 CRUD포함 )

-       Drag&Drop으로 링크 리스트 순서 변경 ( 모바일에서는 Touch )

-       태그 클라우드 표시 ( CRUD는 제외)

-       로그인 처리 ( 회원가입부분은 제외 )

-       구글애널리틱스(Google Analytics)와 연결

1.1. 등록화면 제작

⌘ links.create.jsx ( 위치: linkservice/client/src/component/links.create.jsx)

---------------------------------------------------------------------------------------------------

기본적인 등록 항목을 만든다. ( LinkCreateMain )

import React from "react";

export default function LinkCreateMain() {
  return (
<>
    <div>
        <h1>링크 등록</h1>
    </div>
    <div><label>링크명</label></div>
    <div><input type="text" name="name" /></div>
    <div><label>태그정보 ( 태그 여러개 등록시 / 로 구분 )</label></div>
    <div><input type="text" name="tag" /></div>
    <div><label>링크 URL (연결하고자 하는 URL)</label></div>
    <div><input type="text" name="linkurl" /></div>
    <div><label>사진 링크 정보</label></div>
    <div><input type="text" name="imageurl" /></div>

    <div><button type="submit">등록</button></div>
</>
  )
}

⌘ App.js에서 추가적으로 Route을 지정한다.

App.js에 Route추가 후 http://localhost:3000/create 로 접속해보자.

그래도 input box에 대한 디자인과 사진을 직접(PC) 등록할 수 있도록 등록화면을 좀 개선해 보겠다.

CSS에 아래 내용을 추가한다. ( links.css ) 

.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.text-title {
    text-align: center;
    font-size: 18px;
}
.input-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 20px;
}
.input-wrap > label {
    margin-bottom: 5px;
    font-size: 14px;
}
.input-box {
    height: 40px;
    width: 100%;
    position: relative;
}
.input-css {
    height: 44px;
    font-size: 14px;
    padding: 14px 12px;
    width: 100%;
    margin: 3px;
    box-sizing: border-box;
    color: #343434;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background-color: bisque;
}

아래와 같은 링크명과 같이 input-wrap 안으로 다른 항목들도 모두 작성한다.

input-wrap > input-box > input-css 을 각 항목에 순차적으로 적용

일반 INPUT BOX는 위와 같이 적용하면 되나, 이미지 부분은 PC에 있는 이미지를 직접 등록할 수 있게 기능을 부여하기 위해서 아래 부분을 추가적으로 반영한다.

.img_contain {
    display: flex;
margin-top: 10px;
    margin-bottom: 20px;
}
.img_wrap {
    display: flex;
    width: 50%;
 }
.img_box {
    align-items: center;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: gray;
    cursor: pointer;
}
.text_type {
    display: flex;
    align-items: flex-end;
    margin-left: 10px;
  }

http://localhost:3000/create 로 확인해보자.

디자인이 어렵다면 bootstrap에 제공되는 form styles을 활용해도 된다

참고 : https://getbootstrap.com/docs/4.0/components/forms/

⎟⎜디자인 부분은 이정도로 끝내고 다음에는 기능 구현을 해보자.

#8. 프론트엔드 화면개발 (component 제작)

데이터까지 출력되는 것을 확인했으니, 이젠 디자인을 해보자.

⌘ links.css ( 위치: linkservice/client/src/css/links.css)

⌘ links.jsx ( 위치: linkservice/client/src/component/links.jsx)

---------------------------------------------------------------------------------------------------------

CSS을 위한 폴더를 만들고 links.css파일을 생성한다.

모든 CSS는 links.css에 넣어두었다.

link.css에 우선 link-container와 link-wrapper영역을 만들어주고,

.link-container {
    margin-bottom: 6px;
    cursor: move;
}
.link-wrapper {
    padding: 12px;
box-shadow: 0em 0em 0.1em #000000;
    border-radius: 10px;
}

link-show 영역에는 link image와 link name이 보여주도록 한다.

.link-show {
    display: flex;
    align-items: center;
}
.link-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.link-title {
    flex-direction: column;
    margin-left: 10px;
min-width: 200px;
    width: 70%;
    font-weight: 600;
}

⌘ links.jsx에서 CSS을 import하고 CSS들을 적용해본다.

⎮결과화면

링크정보를 여러 개 등록해서 확인해 본다.

JSON 데이터 중 활용하지 않는 항목을 추가적으로 화면에 적용해보자.

⎮링크정보 걸기

link-show 부분에 onClick이벤트를 추가한다.

이젠 클릭하면 linkurl항목의 정보에 따라 페이지 이동이 된다.

⎮태그정보 표시

link-wrapper 부분에 tag 표시를 해보자.

태그는 여러 개가 있을 수 있으나, 여기서는 최대 3개까지만 입력이 가능(화면 제약사항) 하고,

태그의 구분자는 / 로 해서 구분한다. (예,  태그1/태그2/태그3 )

태그의 내용을 표시해준다.

태그 관련 css을 추가한다

.tag-container {
    display: flex;
    flex-wrap: nowrap;
}
.tag-row {
    flex-basis: 90px;
}
.tag-button {   
    flex-basis: 21%;
    height: 20px;
    border-radius: 6px;
    margin-right: 15px;
    text-align: center;
    font-size: 4px;
    color: rgb(218, 213, 213);
}
.tag-blue {
    background-color: rgb(82, 65, 234); 
}

마지막 태그는 제주도/귤/할인 여러 개로 되어 있기 때문에 분할을 해야 한다.

그리고 여러 개 태그도 각각 색상을 다르게 버튼을 만들어 보자.

tag button 색상을 다르게 하기 위해서 classList에 다른 색상을 담아 적용해보자.

참고로, 조금 다른 방식으로child component인 TagList(Props)을 만들어 렌더링을 하는 방식도 있다.

위 소스에서 누락된 게 하나 있다.

바로 tag 값이 없을 경우도 빈 항목에 tag-orange css가 적용되어 버린다.

그래서 tag값이 있을 경우만 렌더링 되도록 조건을 하나 더 줘서 해결한다.

!tag 을 or 조건으로 추가한다.

!tag || tag.split('/').map( (tag, index)=>

물론 child function인 TagList(Props)을 안하고,

LinkMain()에서 바로 렌더링을 해도 무방한다. 아래 같은 식으로 해도 결과는 같으니 소스 참고만 하길 바란다.

개발 소스 방식은 여러가지 방식이다. 뭐가 옳다, 그르다 을 판단하는 것은 맞지 않다. 단, 좀더 가독성과 Performance, 유지보수 등을 고려하여 회사기준 혹은 개발자들과 협업해서 코딩 기준에 맞춰서 개발하면 된다.

이젠, 색상관련 css를 추가하자.

.tag-orange {
    background-color: rgb(200, 173, 108);
}
.tag-grin {
    background-color: rgb(18, 161, 139); 
}

실제 복잡하다고 볼 수 있지만, 전체적으로 포맷만 이해한다면 다른 사이트를 구축하는데 많은 도움이 될 것으로 생각된다.

하지만, 여러가지 기능을 추가하면서 어려웠던 기억이 있어서 이제부터

TO-DO 리스트를 만들어 하나씩 완성해보자.

( 화면설계를 다시 한번 참고하길 바란다.)

다음편에는 링크서비스의 등록화면을 제작해보자.

#7. 프론트엔드 화면 개발

1.1. Component 제작 ( React로 API 호출 )

이제부터 컴포넌트를 하나씩 작성해 보자.

React에서 Axios를 이용해 API 호출하기

컴포넌트는 크게 3가지로 구분하여 작성했다.

1.    API URL을 관리하는 api.config.js

2.    AXIOS로 API을 호출하여 리턴 받는 service.js

3.    service을 받아 화면에 출력해주는 컴포넌트들

디렉토리는 src 밑에 /component 에 /api 와 /service 로 나눈다.

⌘ api.config.js ( 위치: linkservice/client/src/component/api/api.config.js)

----------------------------------------------------------------------------------------------

Python Server에서 개발한 API 호출 URL을 관리한다. 

API가 많아지면 별도 관리 하는게 유지보수상 좋다.

export const API = {
    //LINKS 서비스 API  
    LINKSALL: `/api/links`,
    LINKREGISTER: `/api/link/create`,
    LINKSELECT: `/api/link/select/`,
    LINKDELETE: `/api/link/delete/`,
    LINKUPATE: `/api/link/update`,
}

⌘ service.js ( 위치: linkservice/client/src/component/service/service.js)

------------------------------------------------------------------------------------------------

service.js는 각 API 호출을 담당하는 함수들을 모아둔 서비스로,

axios 로 API을 호출하여 값을 return받도록 함수를 정의하고, 외부에서 호출할 수 있도록 linkService로 지정한다.

import axios from "axios"
import { API } from "../api/api.config"

// ####### 링크정보 API 호출
const getLinks = () => {
    return axios.get(API.LINKSALL)
}
const getSelectLink = (id) => {
    return axios.get(API.LINKSELECT + id)
}
const createLink= (values) => {
    return axios.post(API.LINKREGISTER, values)
}
const updateLink = (id, values) => {
    return axios.put(API.LINKUPATE + id, values)
}
const deleteLink = (id) => {
    return axios.put(API.LINKDELETE + id)
}
const linkService = {
    getLinks,
    getSelectLink,
    createLink,
    updateLink,
    deleteLink,
}
export default linkService;

1.2.  화면 출력

화면 소스는 .jsx 확장자로 생성했다.

⌘ links.jsx ( 위치: linkservice/client/src/component/links.jsx)

--------------------------------------------------------------------------------------------------

component안에 API을 호출하여 리턴 받은 값을 화면에 출력해보자.

useEffect을 통해 linkService의 getLinks(전체링크목록조회)을 호출하는 로직이다.

rendering되는 return값에 <></> Fragment축약으로 감싸 있는 것을 확인하기 바란다.

import React, { useState, useEffect } from "react"
import linkService from "./service/service"

export default function LinkMain() {
    const [data, setData] = useState([])

    useEffect(() => {
        linkService.getLinks().then(
        (res)=> {
            setData(res.data)
           console.log(res.data)
        }, (error) => {
           alert(error.res.data.message )
        }
        )
    }, [])
    
    return (
<> 
     <div>
       { data.links && data.links.map((links) => (

        <div key={links.id}> 
            <div >id : {links.id}</div>
            <div>name : {links.name}</div>
            <div>tag : {links.tag}</div>
            <div>imageurl : {links.imageurl}</div>    
            <div>linkurl : {links.linkurl}</div>   
        </div>
                                                              
        ))}
     </div>
 </> 
    ) // return
} // function

links.jsx의 LinkMain()을 App.js에서 Router을 지정하여 호출해보자.

⌘ App.js ( 위치: linkservice/client/src/App.js)

-------------------------------------------------------------------------------------------------------

import React from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import LinkMain from "./component/links"

function App() {
  return (
    <BrowserRouter>    
      <Routes>
        <Route exact path="/" element={<LinkMain />} />  
      </Routes> 
    </BrowserRouter>
  );
}
export default App;

터미널을 열어서 yarn start을 실행해보자. 하지만, 모듈 오류가 날것이다.

관련 모듈을 설치 안 해서 나는 것으로 우선 모듈 설치를 하자.

$ yarn add react-router-dom

$ yarn add axios

$yanr start

모듈 설치 후 실행하면 빈 화면에 브라우저 개발자 모드에 보면 404오류가 발생한다.

오류 Url을 보면 API 호출 시 발생한다.

React에서 백엔드 서버로 API 요청 시 Proxy 설정을 해줘야 정상 호출이 된다.

우리는 Python Flask로 API을 구현 했으므로, Python Server단을 호출할 수 있도록 설정하면 된다.

⎮Proxy 설정

client의 package.json 열어 proxy설정을 추가한다.

"proxy": "http://0.0.0.0:5000",

   📌 아이피를 127.0.0.1로 설정안하고, 0.0.0.0 로 설정한 이유는 클라우드 환경(AWS, CAFE24등) 경우 내부 IP가 192.168로 시작될 수 있어서 모든 IPv4 인터페이스를 설정하고자 0.0.0.0로 했다.

이제 실행해보자

⎮실행방법

    -       서버 ( $ linkservice/server ) 터미널

          1.    python 가상화 실행 ( source ./bin/activate )

          2.    python3 server.py 실행

          3.    POSTMAN을 통해서 샘플 데이타를 입력한다. 

          ► POST /api/link/create - 링크정보 등록 참고

#6. Python으로 API 개발(API Resource선언 및 테스트)

-       클라이언트 ( $ linkservice/client ) 터미널

       1.    yarn start 실행

브라우저에서 http://localhost:3000 으로 확인해보자.

정상적으로 출력됨을 확인할 수 있다.

📌 links.jsx 소스에 API을 통해 JSON을 제대로 받아오는지 확인하고자 useEffect 부분에 console.log을 찍어 브라우저

     개발자모드에 console에 {links: Array(1)} 가 보인다.

화면이 이쁘지 않아, 다음 포스팅에는 디자인을 해보자.