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

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

페이지를 디자인할때 기억하자.

join 메서드는 배열(array or array-like-object)의 모든 요소를 하나의 문자열(string)으로 만든다.

const cssClassesArray = ['btn', 'btn-primary', 'btn-active', 'btn-sidebar']
const cssClassesString = cssClassesArray.join()
console.log(cssClassesString)
를 한다면 결과는
btn,btn-primary,btn-active,btn-sidebar 이다. 즉,
cssClassesString은 string화 된것이다.
유용한 부분은 저기서 

const cssClassesString = cssClassesArray.join(' ')
으로 했다면, 
btn btn-primary btn-active btn-sidebar 이런 식으로 나온다

condition ? expression : expression으로 이루어진다.

const exerciseTimeMins = 20
1. let message = ''

if (exerciseTimeMins < 30) {
    message = 'You need to try harder!'
}
else {
    message = 'Doing good!'
}

2. const message = exerciseTimeMins < 30 ? 'You need to try harder!' : 'Doing good!'

위에 1번과 2번은 같은 코드이다. 뜻은 exerciseTimeMins가 30보다 작다면 'You need to try harder!', 아니라면 'Doing good!'

const exerciseTimeMins = 40
--------------------------------------------------------------------------
let message = ''

if (exerciseTimeMins < 30) {
    message = 'You need to try harder!'
}
else if(exerciseTimeMins < 60) {
    message = 'Doing good!'
}
else {
    message = 'Excellent!'
}
--------------------------------------------------------------------------
const message = exerciseTimeMins < 30 ? 'You need to try harder!' 
    : exerciseTimeMins < 60 ? 'Doing good!' 
    : 'Excellent!'

default로 쓰이는 세팅들

*, *::before, *::after
{ box-sizing: border-box;}

body { margin: 0;
font-size: 1rem;
}

img {
display:block;
max-width: 100%;}


Tips(팁)
line-height, text-transform, letter-spacing, vw, vh, transitions, gradients 등을 
사용하여 디테일을 살리자

min-height: 50vh나 100vh로 세팅

margin: 0 auto; <- 중간정렬
margin-left: auto; margin-right: auto;  <- 중간정렬

font-size는 rem으로 세팅(1rem = 16px)
padding과 margin은 em으로 세팅

background-image를 사용할때는 background-color도 같이 한다.(in case the image doesn't load)
background-blend-mode: screen/multiply/overlay를 주로 사용

flex-item이 img인 경우에 flex-basis를 적용할때에는 크롬에서의 버그로
min-width:0; min-height:0도 같이 적어줘야한다.

flex-flow = flex-wrap + flex-direction

공부를 해봐서 아는 거겠지만 역시나 무엇인가 목표가 있으면서 공부를 하면 공부하는 방법이 중요하다.

결과적으로 zerobase 부트캠프에서의 강의는 나랑은 좀 많이 안 맞는거 같다. 왜냐하면 코딩은 내가 하나하나 단계마다 처보면서 하는게 확실히 기억에도 많이 남는데(다 memorization 하자는건 절대 아니다) 그게 안되는 구조를 가졌기 때문이다. 물론, on paper로는 맞다. 다만, 난 syntax를 배울때 freeCodeCamp와 같이 컨셉,예제등으 동시다발적으로 나올때 기억에 더 남는거 같다. 돈이 좀 아깝다고 들긴하는데(왜냐면, 그만큼 온라인에서 그냥 내가 잘 배우면 될 것 같아서)... 뭐 300만원 정도였으니 그냥 잊으련다...(잊어지지는 않을뜻 ㅠ). 잡담이 길어졌는데 향후 계획은 이렇다.

1. 자바스크립트 syntax 쭉 훑기. (freeCodeCamp 완주)
2. 사이드 프로젝트 (JS 30, 드림코딩 등으로, zerobase에서 준 과제도 있긴하네)
3. 알고리즘, 데이터 스트럭쳐 공부(Leetcode, programmers)

사실 요새도 먼지모를 체계가 머리에서 조금씩 잡히는 감이 들어서 기분은 좋다.좀 더 힘내고, let's grind.