비전공자가 개발자 될때까지

CRA를 한번 써보았다가.. 안그래도 어려운데 도통 너무 무겁고, 느려서 좀 더 빠르게 배포/로딩 할 수 있는게 없는지 찾던 도중 Vite라는 녀석을 찾게되었다.

원래는 Vue.js 전용으로 나온거 같은데 CRA보다는 체감은 100배 빠르다. 

다만, 오래되지 않아서 그런지 어떻게 배포하는 방법이 잘 나와있지 않아서 정리해본다..

1. Github에 접속하여 Repo를 원하는 이름으로 새로 만든다.

2. Terminal에서 아래와 같이 타이핑하여 코드를 push한다

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/GITHUB사용자ID/REPO명.git
git push -u origin main

3.  분명 이렇게까지하면.. 코드가 올라간다고 했었는데 난 초짜라 그런지 되지가 않는것이다! 구글링결과..

 (a) 원격 저장소가 이미 설정되어 있거나, (b) 이미 해당 branch 데이터가 있어서 push를 막는 경우가 있더라.

각각 이렇게 해주면 된다. 

(a)인 경우,
$ git remote -v
치면 현재 어디로 연결되어있는지 봐진다. 해당 repo가 아니라면 끊어줘야한다. 
$ git remote remove origin

(b)인 경우,
$ git push origin +main

4. vite.config.js 파일에가서 이 부분을 추가한다.

base는 repo명으로 해주면 된다.

5. 이제 거의 끝이다.

$ npm run build
$ git add dist -f
$ git commit -m "Adding dist"
$ git subtree push --prefix dist origin gh-pages

요로콤하면 gh-pages에 잘 deploy되어있더라... CRA보단 훨씬 좋네 ㅎ

input prop 중에서 중요한 onChange, name, value이다.

onChange를 통해서 React가 render할수 있게 해주고,

name을 통해서 Form을 object로 관리,

value를 통해서는 input을 controlled component으로 만들어 준다. (이해하기론 페이지 rendering시 React가 driver seat을 갖게해주는 역할. 보면 결국 value는 React의 state에서 derive되도록 해놨기 때문에)

Form안에서 Button이 있으면, input type = "submit"과 같은 역할을 하게됨.

import React from "react"

export default function Form() {
    const [formData, setFormData] = React.useState(
        {
            firstName: "", 
            lastName: "", 
            email: "", 
            comments: "", 
            isFriendly: true,
            employment: "",
            favColor: ""
        }
    )
    console.log(formData.favColor)
    
    function handleChange(event) {
        console.log(event)
        const {name, value, type, checked} = event.target
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [name]: type === "checkbox" ? checked : value
            }
        })
    }
    
    function handleSubmit(event) {
        event.preventDefault()
        // submitToApi(formData)
        console.log(formData)
    }
    
    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleChange}
                name="firstName"
                value={formData.firstName}
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleChange}
                name="lastName"
                value={formData.lastName}
            />
            <input
                type="email"
                placeholder="Email"
                onChange={handleChange}
                name="email"
                value={formData.email}
            />
            <textarea 
                placeholder="Comments"
                onChange={handleChange}
                name="comments"
                value={formData.comments}
            />
            <input 
                type="checkbox" 
                id="isFriendly" //아래 label의 htmlFor와 함께 쓰임.
                onChange={handleChange}
                name="isFriendly"
                checked={formData.isFriendly}
            />
            <label htmlFor="isFriendly">Are you friendly?</label>
            <br />
            <br />
            
            <fieldset>
                <legend>Current employment status</legend>
                <input 
                    type="radio"
                    id="unemployed" //아래 label의 htmlFor와 함께 쓰임.
                    name="employment"
                    value="unemployed"
                    checked={formData.employment === "unemployed"}
                    onChange={handleChange}
                />
                <label htmlFor="unemployed">Unemployed</label>
                <br />
                
                <input 
                    type="radio"
                    id="part-time"
                    name="employment"
                    value="part-time"
                    checked={formData.employment === "part-time"}
                    onChange={handleChange}
                />
                <label htmlFor="part-time">Part-time</label>
                <br />
                
                <input 
                    type="radio"
                    id="full-time"
                    name="employment"
                    value="full-time"
                    checked={formData.employment === "full-time"}
                    onChange={handleChange}
                />
                <label htmlFor="full-time">Full-time</label>
                <br />
            </fieldset>
            <br />
            
            <label htmlFor="favColor">What is your favorite color?</label>
            <br />
            <select 
                id="favColor" 
                value={formData.favColor}
                onChange={handleChange}
                name="favColor"
            >
                <option value="red">Red</option>
                <option value="orange">Orange</option>
                <option value="yellow">Yellow</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
                <option value="indigo">Indigo</option>
                <option value="violet">Violet</option>
            </select>
            <br />
            <br />
            <button>Submit</button>
        </form>
    )
}