๋งํฌ์„œ๋น„์Šค ๋“ฑ๋กํ™”๋ฉด์—์„œ Input Value์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•˜๋‹ค.

๊ทธ๋Ÿผ ์ด๋ฏธ์ง€ ๋“ฑ๋ก์„ ์œ„ํ•œ Drag&Drop ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ๋ฅผ ์ œ์ž‘ํ•ด๋ณด์ž.

 

#11. Reactํ™”๋ฉด์—์„œ ๊ฐ ํ•ญ๋ชฉ์˜ Input Value์„ ๊ฐ€์ ธ์˜ค๊ธฐ

 

#11. Reactํ™”๋ฉด์—์„œ ๊ฐ ํ•ญ๋ชฉ์˜ Input Value์„ ๊ฐ€์ ธ์˜ค๊ธฐ

#10. React ๋งํฌ์„œ๋น„์Šค ๋“ฑ๋ก ๋ฐ ํŽธ์ง‘ ํ™”๋ฉด ๊ฐœ๋ฐœ(๋“ฑ๋กํ™”๋ฉด ๋””์ž์ธ) #10. React ๋งํฌ์„œ๋น„์Šค ๋“ฑ๋ก ๋ฐ ํŽธ์ง‘ ํ™”๋ฉด ๊ฐœ๋ฐœ(๋“ฑ๋กํ™”๋ฉด ๋””์ž์ธ) #9. ์ดˆํ™”๋ฉด ๋””์ž์ธ ( CSS ์ ์šฉ ๋ฐ ํ™”๋ฉด Component์ œ์ž‘ ) #9. ์ดˆํ™”๋ฉด ๋””์ž์ธ

firstvalue.tistory.com

 

โŽŸโŽœ์ด๋ฏธ์ง€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();            
            }
        )
์ด๋ฏธ์ง€ Drag&Drop

 

๋‹ค์ŒํŽธ์—๋Š” ์‹ค์ œ DB ์™€ ์ด๋ฏธ์ง€ ํŒŒ์ผ ์ €์žฅ (๋“ฑ๋ก) ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ๋ณด์ž.

#10. React ๋งํฌ์„œ๋น„์Šค ๋“ฑ๋ก ๋ฐ ํŽธ์ง‘ ํ™”๋ฉด ๊ฐœ๋ฐœ(๋“ฑ๋กํ™”๋ฉด ๋””์ž์ธ)

 

#10. React ๋งํฌ์„œ๋น„์Šค ๋“ฑ๋ก ๋ฐ ํŽธ์ง‘ ํ™”๋ฉด ๊ฐœ๋ฐœ(๋“ฑ๋กํ™”๋ฉด ๋””์ž์ธ)

#9. ์ดˆํ™”๋ฉด ๋””์ž์ธ ( CSS ์ ์šฉ ๋ฐ ํ™”๋ฉด Component์ œ์ž‘ ) #9. ์ดˆํ™”๋ฉด ๋””์ž์ธ ( CSS ์ ์šฉ ๋ฐ ํ™”๋ฉด Component์ œ์ž‘ ) #8. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด๊ฐœ๋ฐœ (component ์ œ์ž‘) #8. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด๊ฐœ๋ฐœ (component ์ œ์ž‘) #7. ํ”„๋ก ํŠธ์—”๋“œ

firstvalue.tistory.com

 

๋“ฑ๋ก ๋ฐ ํŽธ์ง‘ํ™”๋ฉด ๋””์ž์ธ์ด ๋˜์—ˆ์œผ๋‹ˆ, ์ด์   ์ž…๋ ฅ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ๋ณด์ž.

 

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์„ ์ถ”๊ฐ€ํ•˜๋Š” ํ•ธ๋“ค ํ•จ์ˆ˜์ด๋‹ค.

preValues๊ฐ’์— setValues๊ฐ’์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

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์ œ์ž‘ )

 

#9. ์ดˆํ™”๋ฉด ๋””์ž์ธ ( CSS ์ ์šฉ ๋ฐ ํ™”๋ฉด Component์ œ์ž‘ )

#8. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด๊ฐœ๋ฐœ (component ์ œ์ž‘) #8. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด๊ฐœ๋ฐœ (component ์ œ์ž‘) #7. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด ๊ฐœ๋ฐœ #7. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด ๊ฐœ๋ฐœ 1. React๋กœ ํ™”๋ฉด ๊ฐœ๋ฐœ ์ž, ์ด์ œ๋ถ€ํ„ฐ REACT๋กœ ํ™”๋ฉด์„ ๊ฐœ๋ฐœ ํ•ด๋ณด์ž. ์•ž

firstvalue.tistory.com

์ง€๊ธˆ๊นŒ์ง€ 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 ์— LinkCreateMain ์˜ Route์„ ์ง€์ •ํ•œ๋‹ค.

App.js์— Route์ถ”๊ฐ€ ํ›„ http://localhost:3000/create ๋กœ ์ ‘์†ํ•ด๋ณด์ž.

 

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-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;
  }

links.create.jsx์— ์ด๋ฏธ์ง€๋ฅผ ์ง์ ‘๋“ฑ๋กํ•˜๋Š” ๋ถ€๋ถ„์„ ์ถ”๊ฐ€

http://localhost:3000/create ๋กœ ํ™•์ธํ•ด๋ณด์ž.

 

๋งํฌ์„œ๋น„์Šค ๋“ฑ๋กํ™”๋ฉด

๋””์ž์ธ์ด ์–ด๋ ต๋‹ค๋ฉด bootstrap์— ์ œ๊ณต๋˜๋Š” form styles์„ ํ™œ์šฉํ•ด๋„ ๋œ๋‹ค

์ฐธ๊ณ  : https://getbootstrap.com/docs/4.0/components/forms/

 

โŽŸโŽœ๋””์ž์ธ ๋ถ€๋ถ„์€ ์ด์ •๋„๋กœ ๋๋‚ด๊ณ  ๋‹ค์Œ์—๋Š” ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ•ด๋ณด์ž.

 


 

#8. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด๊ฐœ๋ฐœ (component ์ œ์ž‘)

 

#8. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด๊ฐœ๋ฐœ (component ์ œ์ž‘)

#7. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด ๊ฐœ๋ฐœ #7. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด ๊ฐœ๋ฐœ 1. React๋กœ ํ™”๋ฉด ๊ฐœ๋ฐœ ์ž, ์ด์ œ๋ถ€ํ„ฐ REACT๋กœ ํ™”๋ฉด์„ ๊ฐœ๋ฐœ ํ•ด๋ณด์ž. ์•ž์—์„œ ์‚ฌ์ „ ์ค€๋น„์‹œ ํ”„๋กœ์ ํŠธ ํด๋”์ธ linkservice์•„๋ž˜์— npx create-react-app ์œผ๋กœ ์ด๋ฏธ c

firstvalue.tistory.com

 

๋ฐ์ดํ„ฐ๊นŒ์ง€ ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ์œผ๋‹ˆ, ์ด์   ๋””์ž์ธ์„ ํ•ด๋ณด์ž.

 

โŒ˜ 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๋“ค์„ ์ ์šฉํ•ด๋ณธ๋‹ค.

links.jsx์— links.css importํ•œ๋‹ค.
div className์„ ์ ์šฉํ•œ๋‹ค.

โŽฎ๊ฒฐ๊ณผํ™”๋ฉด

 

๋งํฌ์ •๋ณด๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ๋“ฑ๋กํ•ด์„œ ํ™•์ธํ•ด ๋ณธ๋‹ค.

JSON ๋ฐ์ดํ„ฐ ์ค‘ ํ™œ์šฉํ•˜์ง€ ์•Š๋Š” ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€์ ์œผ๋กœ ํ™”๋ฉด์— ์ ์šฉํ•ด๋ณด์ž.

 

โŽฎ๋งํฌ์ •๋ณด ๊ฑธ๊ธฐ

 

link-show ๋ถ€๋ถ„์— onClick์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.

์ด์   ํด๋ฆญํ•˜๋ฉด linkurlํ•ญ๋ชฉ์˜ ์ •๋ณด์— ๋”ฐ๋ผ ํŽ˜์ด์ง€ ์ด๋™์ด ๋œ๋‹ค.

 

 

โŽฎํƒœ๊ทธ์ •๋ณด ํ‘œ์‹œ

 

link-wrapper ๋ถ€๋ถ„์— tag ํ‘œ์‹œ๋ฅผ ํ•ด๋ณด์ž.

ํƒœ๊ทธ๋Š” ์—ฌ๋Ÿฌ ๊ฐœ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์œผ๋‚˜, ์—ฌ๊ธฐ์„œ๋Š” ์ตœ๋Œ€ 3๊ฐœ๊นŒ์ง€๋งŒ ์ž…๋ ฅ์ด ๊ฐ€๋Šฅ(ํ™”๋ฉด ์ œ์•ฝ์‚ฌํ•ญ) ํ•˜๊ณ ,

ํƒœ๊ทธ์˜ ๊ตฌ๋ถ„์ž๋Š” / ๋กœ ํ•ด์„œ ๊ตฌ๋ถ„ํ•œ๋‹ค. (์˜ˆ,  ํƒœ๊ทธ1/ํƒœ๊ทธ2/ํƒœ๊ทธ3 )

 

ํƒœ๊ทธ์˜ ๋‚ด์šฉ์„ ํ‘œ์‹œํ•ด์ค€๋‹ค.

ํƒœ๊ทธ ํ‘œ์‹œ๋ฅผ ์œ„ํ•œ html ์ถ”๊ฐ€

ํƒœ๊ทธ ๊ด€๋ จ 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)์„ ๋งŒ๋“ค์–ด ๋ Œ๋”๋ง์„ ํ•˜๋Š” ๋ฐฉ์‹๋„ ์žˆ๋‹ค.

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. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด ๊ฐœ๋ฐœ

 

#7. ํ”„๋ก ํŠธ์—”๋“œ ํ™”๋ฉด ๊ฐœ๋ฐœ

1. React๋กœ ํ™”๋ฉด ๊ฐœ๋ฐœ ์ž, ์ด์ œ๋ถ€ํ„ฐ REACT๋กœ ํ™”๋ฉด์„ ๊ฐœ๋ฐœ ํ•ด๋ณด์ž. ์•ž์—์„œ ์‚ฌ์ „ ์ค€๋น„์‹œ ํ”„๋กœ์ ํŠธ ํด๋”์ธ linkservice์•„๋ž˜์— npx create-react-app ์œผ๋กœ ์ด๋ฏธ client์„ ์ƒ์„ฑํ–ˆ๋‹ค. #4. ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ ๋ฐ ํ™˜๊ฒฝ์„ค

firstvalue.tistory.com

 

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",

package.json์— proxy์„ค์ •

   ๐Ÿ“Œ ์•„์ดํ”ผ๋ฅผ 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์„ ์–ธ ๋ฐ ํ…Œ์ŠคํŠธ)

 

#6. Python์œผ๋กœ API ๊ฐœ๋ฐœ(API Resource์„ ์–ธ ๋ฐ ํ…Œ์ŠคํŠธ)

#6. Python์œผ๋กœ API ๊ฐœ๋ฐœ(๋ฐ์ดํƒ€๋ฒ ์ด์Šค ๋ชจ๋ธ ์ž‘์—…) #6. Python์œผ๋กœ API ๊ฐœ๋ฐœ(๋ฐ์ดํƒ€๋ฒ ์ด์Šค ๋ชจ๋ธ ์ž‘์—…) #5. Python์œผ๋กœ API ๊ฐœ๋ฐœ(๊ธฐ๋ณธํ™˜๊ฒฝ๊ตฌ์„ฑ) #5. Python์œผ๋กœ API ๊ฐœ๋ฐœ(๊ธฐ๋ณธํ™˜๊ฒฝ๊ตฌ์„ฑ) โŒ˜ server.py ( ์œ„์น˜: linkservice/

firstvalue.tistory.com

 

-       ํด๋ผ์ด์–ธํŠธ ( $ linkservice/client ) ํ„ฐ๋ฏธ๋„

       1.    yarn start ์‹คํ–‰

 

๋ธŒ๋ผ์šฐ์ €์—์„œ http://localhost:3000 ์œผ๋กœ ํ™•์ธํ•ด๋ณด์ž.

์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋จ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž๋ชจ๋“œ Console

๐Ÿ“Œ links.jsx ์†Œ์Šค์— API์„ ํ†ตํ•ด JSON์„ ์ œ๋Œ€๋กœ ๋ฐ›์•„์˜ค๋Š”์ง€ ํ™•์ธํ•˜๊ณ ์ž useEffect ๋ถ€๋ถ„์— console.log์„ ์ฐ์–ด ๋ธŒ๋ผ์šฐ์ €

     ๊ฐœ๋ฐœ์ž๋ชจ๋“œ์— console์— {links: Array(1)} ๊ฐ€ ๋ณด์ธ๋‹ค.

 


ํ™”๋ฉด์ด ์ด์˜์ง€ ์•Š์•„, ๋‹ค์Œ ํฌ์ŠคํŒ…์—๋Š” ๋””์ž์ธ์„ ํ•ด๋ณด์ž.

1.    React๋กœ ํ™”๋ฉด ๊ฐœ๋ฐœ

์ž, ์ด์ œ๋ถ€ํ„ฐ REACT๋กœ ํ™”๋ฉด์„ ๊ฐœ๋ฐœ ํ•ด๋ณด์ž.

 

์•ž์—์„œ ์‚ฌ์ „ ์ค€๋น„์‹œ ํ”„๋กœ์ ํŠธ ํด๋”์ธ linkservice์•„๋ž˜์— npx create-react-app ์œผ๋กœ ์ด๋ฏธ client์„ ์ƒ์„ฑํ–ˆ๋‹ค.

#4. ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ ๋ฐ ํ™˜๊ฒฝ์„ค์ •

 

#4. ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ ๋ฐ ํ™˜๊ฒฝ์„ค์ •

1.1. ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ ๋ฐ ํ™˜๊ฒฝ์„ค์ • ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ๋‚˜๋ˆ„๊ณ ์ž client / server๋กœ ๊ตฌ๋ถ„ ํ•œ๋‹ค. โŽฎํ”„๋กœ์ ํŠธ ํด๋” : linkserver/ |-------- client ( React ๊ตฌ์กฐ) |-------- server ( Python๊ตฌ

firstvalue.tistory.com

 

1.1.  React ๊ธฐ๋ณธ์„ค์ •

๊ธฐ๋ณธ ํด๋”๊ตฌ์กฐ์—์„œ ํ•„์š” ์—†๋Š” ํŒŒ์ผ์„ ๋ชจ๋‘ ์ง€์šด๋‹ค.

      · public ํด๋” ๋ฐ‘์— index.html์„ ์ œ์™ธํ•˜๊ณ  ๋ชจ๋‘ ์‚ญ์ œ

      · src ํด๋” ๋ฐ‘์— App.js, index.js ์„ ์ œ์™ธํ•˜๊ณ  ๋ชจ๋‘ ์‚ญ์ œ

React ํŒŒ์ผ ๊ตฌ์กฐ๋ฅผ ๊ฐ„๋‹จํžˆ ์„ค๋ช…ํ•œ๋‹ค๋ฉด,

1. index.js

src ํด๋”์— ๋ฉ”์ธ Script๋กœ ์—ฌ๊ธฐ์—์„œ HTML ํ…œํ”Œ๋ฆฟ ๋ฐ JavaScript์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์กฐํ•ฉํ•˜์—ฌ ๋ Œ๋”๋ง์„ ํ•œ๋‹ค.

 

2. App.js

src ํด๋”์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•˜๋Š” Script์ด๋‹ค. ์‹ค์ œ๋กœ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๋‚ด์šฉ ๋“ฑ์€ ์—ฌ๊ธฐ์—์„œ ์ •์˜๋œ๋‹ค.

 

3. index.html

public ํด๋”์— ์žˆ์œผ๋ฉฐ, HTML ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์ด๋‹ค. ์ด ํŒŒ์ผ์ด ์ง์ ‘ ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ , index.js์— ์˜ํ•ด ๋ Œ๋”๋ง ๋œ ๊ฒฐ๊ณผ๊ฐ€ ํ‘œ์‹œ๋œ๋‹ค.

 

   ๐Ÿ“Œ App.js์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•˜๊ณ  -> index.js ์—์„œ ReactDOM.rendor ํ•˜๊ณ   -> index.html์—์„œ ํ‘œ์‹œ๋œ๋‹ค.

 

๋จผ์ €, App.js ์„ ์ˆ˜์ •ํ•œ๋‹ค.

์•„๋ž˜ ์ฝ”๋“œ์—์„œ ํ•„์š” ์—†๋Š” ๋‚ด์šฉ ์ง€์šฐ๊ณ , ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ถ”๊ฐ€ ํ•œ๋‹ค.

 


index.js ์—์„œ reportWebVitals ๋ถ€๋ถ„๊ณผ import index.css์„ ์ฃผ์„์ฒ˜๋ฆฌ ํ•œ๋‹ค.

   ๐Ÿ“Œ ์ฐธ๊ณ ๋กœ, reportWebVitals๋Š” Create React App์—์„œ ์„œ๋“œํŒŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ Index ํŒŒ์ผ์— ์จ ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ

       reportWebVitals() ์— console.log์„ ๋„ฃ์–ด์ฃผ๋ฉด ๊ฐœ๋ฐœ์ฐฝ์„ ํ†ตํ•ด ์•ฑ์˜ ํผํฌ๋จผ์Šค ์‹œ๊ฐ„๋“ค์„ ๋ถ„์„ํ•˜์—ฌ objectํ˜•ํƒœ๋กœ

      ๋ณด์—ฌ์ค€๋‹ค.

 

 

์ด์   ํ„ฐ๋ฏธ๋„์—์„œ yarn start์„ ์‹คํ–‰ํ•˜๊ณ , ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ ‘์†ํ•ด๋ณด์ž.

1.2. ๋””์ž์ธ ๊ฐ€์ ธ์˜ค๊ธฐ

๋””์ž์ธ๊นŒ์ง€ ํ•˜๋ฉด 1์ธ ๊ฐœ๋ฐœ์ž๋กœ ๊ฐ€์žฅ ์ด์ƒ์ ์ด๋งŒ, ๊ทธ๋งŒํผ ๋งŽ์€ ๋…ธ๋ ฅ์ด ํ•„์š”ํ•˜๋‹ค. ๋‚˜๋„ ๋””์ž์ธ ๋งŒํผ์€ ๋งŽ์ด ๋ฐฐ์šฐ์ง€ ๋ชปํ•ด์„œ ์–•์€ ์ง€์‹์œผ๋กœ ํ™”๋ฉด์„ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

 

๋””์ž์ธ์ด ํ•„์š” ์—†๋Š” ๋ถ„๋“ค์€ ๋””์ž์ธ ์„ค๋ช…๋ถ€๋ถ„์„ ์ œ์™ธํ•˜๊ณ , ๊ฐœ๋ฐœ๋ถ€๋ถ„๋งŒ ๋ด๋„ ๋œ๋‹ค.

 

์šฐ์„  Bootstrap ๋ฌด๋ฃŒ ๋””์ž์ธ์„ ๊ฐ€์ง€๊ณ  ์™€์„œ ๋ณ€๊ฒฝํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.

๋””์ž์ธ ์ฐธ์กฐ : https://getbootstrap.com/docs/5.3/examples/

์šฐ๋ฆฌ๋Š” Albumํ™”๋ฉด์„ ๊ฐ€์ง€๊ณ  ์‹œ์ž‘ํ•˜๊ณ ์ž ํ•œ๋‹ค. https://getbootstrap.com/docs/5.3/examples/album/ ์ ‘์†ํ›„ ์˜ค๋ฅธ์ชฝ ๋งˆ์šฐ์Šค ํด๋ฆญํ•ด์„œ ํŽ˜์ด์ง€ ์†Œ์Šค๋ณด๊ธฐ์—์„œ HTML์„ ๋ณต์‚ฌํ•˜์—ฌ index.html์— ๋ถ™์—ฌ ๋„ฃ๋Š”๋‹ค.

 

BootStrap ๋ฌด๋ฃŒ๋””์ž์ธ HTML์ฝ”๋“œ๋ฅผ index.html์— ๋ถ™ํžŒ๋‹ค.

 

Title๋“ฑ ํ…์ŠคํŠธ ๋ถ€๋ถ„์„ ๋นผ๊ฑฐ๋‚˜, ์ˆ˜์ •ํ•˜์‹œ๊ณ , HTML์—์„œ ๋ณธ๋ฌธ์— ํ•ด๋‹น๋˜๋Š” <main></main> ๊ณผ <footer></footer> ๋Š” ์‚ญ์ œํ•˜๊ณ  ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์—์„œ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ์ถ”๊ฐ€/์ˆ˜์ •/์‚ญ์ œํ•ด์„œ ์ดˆ๊ธฐ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•ด๋ณด์ž

 

<main></main> ๋ถ€๋ถ„์ด ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋ฏ€๋กœ, ์†Œ์Šค๋‚ด ํ™•์ธํ•˜๊ธฐ ๋ฐ”๋ž€๋‹ค.

 

<!doctype html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1">
  <meta name="description" content="">
  <meta name="generator" content="Hugo 0.88.1">
  <title>๋งํฌ์„œ๋น„์Šค</title>

  <!-- Bootstrap core CSS -->
  <link href="https://getbootstrap.kr/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="collapse bg-dark" id="navbarHeader">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h4 class="text-white">๋งํฌ์„œ๋น„์Šค</h4>
            <p class="text-muted">๊ฐœ๋ฐœ์€ ์—„์—ฐํžˆ ์กด์ค‘ ๋ฐ›์•„์•ผ ํ•  ๊ฐœ์ธ์˜ ์ฐฝ์ž‘๋ฌผ์ž…๋‹ˆ๋‹ค. 
            </p>
          </div>
        <div class="col-12">
          <h6 class="text-white">Developers</h4>
          <ul class="list-unstyled">
            <li class="text-muted">(์ฃผ)XXXXXXXX</li>
            <li class="text-muted">์‚ฌ์—…์ž๋ฒˆํ˜ธ:XXX-XX-xxxxx</li>
            <li class="text-muted">๋Œ€ํ‘œ์ „ํ™”:000-1111-2222</li>            
          </ul>
        </div>
      </div>

      </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
      <div class="container">
        <a href="/" class="navbar-brand d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2"
            viewBox="0 0 24 24">
            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
            <circle cx="12" cy="13" r="4" />
          </svg>
          <strong>๋งํฌ์„œ๋น„์Šค</strong>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
          aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>
  </header>


  <main>
    <!-- ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€ ์ฒ˜๋ฆฌ -->
    <section class="container" id="section">
    </section>    

    <div class="album py-4 bg-light" >
      <div class="container" id="root">
            <!--   ์—ฌ๊ธฐ์— ๋ณธ๋ฌธ๋‚ด์šฉ์„  ์ฒ˜๋ฆฌ -->
      </div>
    </div>
  </main>
  <!-- <footer class="text-muted py-2" id="footer">
  </footer> -->
</body>
</html>

๐Ÿ“Œ ๋””์ž์ธ ๋ฐ ํผ๋ธ”๋ฆฌ์‹ฑ์ด ๊ฐ€๋Šฅํ•˜์‹  ๋ถ„๋“ค์€ ๊ฐ์ž ๋‹ค๋ฅธ ๋””์ž์ธ์œผ๋กœ ํ•ด๋„ ๋ฌด๋ฐฉํ•˜๋‹ค.

 

์ด์   ํ™”๋ฉด์ด ์ž˜ ์ถœ๋ ฅ๋˜๋Š”์ง€ ํ™•์ธ ํ•œ๋‹ค.


๋‹ค์ŒํŽธ์—๋Š” Component์ œ์ž‘์„ ํ•ด๋ณด์ž.

 

1.1. ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ ๋ฐ ํ™˜๊ฒฝ์„ค์ •

ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ๋‚˜๋ˆ„๊ณ ์ž client / server๋กœ ๊ตฌ๋ถ„ ํ•œ๋‹ค.

โŽฎํ”„๋กœ์ ํŠธ ํด๋” : linkserver/

       |-------- client ( React ๊ตฌ์กฐ)

       |-------- server ( Python๊ตฌ์กฐ )

 

โŽฎํ”„๋กœ์ ํŠธ ํด๋”๋ฅผ ๋งŒ๋“ค๊ณ   Client ํ™˜๊ฒฝ๊ณผ Server ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•ด ๋ณด๊ฒ ๋‹ค.

ํ„ฐ๋ฏธ๋„์„ ์—ด์–ด์„œ,

     > mkdir linkservice

     > cd linkservice

 

โŽฎํ”„๋กœ์ ํŠธ ํด๋”์—์„œ react ํ™˜๊ฒฝ์œผ๋กœ client ํด๋” ์ƒ์„ฑ

     > npx create-react-app client

โŽฎํ”„๋กœ์ ํŠธ ํด๋”์—์„œ python๊ฐ€์ƒํ™˜๊ฒฝ์œผ๋กœ serverํด๋” ์ƒ์„ฑ

     > python3 -m venv server

 โŽฎํ”„๋กœ์ ํŠธ ํด๋”์ธ linkservice ์•„๋ž˜์— client์™€ serverํ™˜๊ฒฝ์ด ๊ตฌ์ถ•๋˜์—ˆ๋‹ค. 

 

 ๋‹ค์ŒํŽธ์—๋Š”  Python Flask๋กœ API ์ œ์ž‘์„ ํ•ด๋ณด์ž.

+ Recent posts