목표

1. 실무에서 자주 사용된다 생각하는것들을 구현한다.
2. 외부의 도움없이, 특히 구조를 짜는 부분에 있어서는 무조건 스스로의 힘으로 생각한다.

코드

레포지토리

https://github.com/neptune588/source_code_REACT/blob/main/src/pages/TimeCountdown/index.jsx

목표

1. 실무에서 자주 사용된다 생각하는것들을 구현한다.
2. 외부의 도움없이, 특히 구조를 짜는 부분에 있어서는 무조건 스스로의 힘으로 생각한다.

코드

레포지토리

https://github.com/neptune588/source_code_REACT/blob/main/src/pages/Calander/index.jsx

타입스크립트 문법 정리

1) any와 unknown타입의 차이점은?

일단 any를 사용할빠에는 unknown을 사용하는게 맞다고 기억해두자.

• any

타입에 any를 선언할경우 그 이후로 타입스크립트가 타입 검사를 포기해버린다. 타입스크립트를 쓰는 의미가 없어짐.

• unknown

unknown을 쓰게되면 타입검사는 한다. as를 이용해 unknown타입을 다른 타입으로 바꿔줘야 한다.

그러면 언제 쓰는거지? -> 내가 지금 당장 타입을 정확하게 모르겠을때 사용한다.

try {

} catch(error) {

}

catch(error << ts에서 이 부분이 unknwon타입으로 내장된다.)
에러같은 경우 어떤 타입이 올지 모르기 때문에
(Axios사용하면 AxiosError가 발생할수도 있고..) 확인 후 as로 타입 지정을 한다.

(error as Error)...
(error as AxiosError)...

1. any는 안쓰는게 best
2. unknwon도 안쓰는게 best
3. 하지만 쓰게 된다면 as로 타입지정을 직접 해줘야 한다.
4. 처음부터 타입 지정을 정확하게 해줘야 나중에 as로 변환시키고, 줄줄이 꼬여버리는 일을 방지할수 있다.
5. 타입이 unknown일때 or 남이 만든 코드의 타입이 틀렸을때 빼고는 as도 지양해야한다.

• 타입스크립트 에러 체크 꿀팁

여러줄일 경우 가장 마지막 문장을 확인하면 대략적으로 알수있다.

2) 타입가드 (타입 좁히기)

타입가드란? 예를들면 함수의 매개변수에 여러가지 타입이 오는 경우에 사용한다.

function numOrStr (a: number | string) {
    if(typeof a === "number") {
        숫자일때 가능한 작업...
    } else {
        문자열일때 가능한 작업...
    }
}

원시값인 경우엔 if문과 typeof를 이용해 매개변수의 타입을 걸러주고 각자 타입에 맞는 작업을 해준다.

function numOrArrOrStr (a: number | number[] | string) {
    if(typeof a === "number") {
        숫자일때 가능한 작업...
    } else if(Array.isArray(a)){
        배열일때 가능한 작업...
    } else {
        문자열일때 가능한 작업...
    }
}

배열인 경우엔 isArray를 이용해 타입 걸러서 작업해준다.

type A = {type: "a", a:string}
type B = {type: "b", b:string}
type C = {type: "c", c:string}

1) value로 구별하는 방법

function objInspect (a: A | B | C) {
    if(a.type === "a") {
        type이 "a"일때 가능한 작업...
    } else if((a.type === "b")){
        type이 "b"일때 가능한 작업...
    } else {
        type이 "c"일때 가능한 작업...
    }
}


2) 예외사항 알아두기

type A = {type: "a", a:string}
type B = {type: "c", b:string}
type C = {type: "c", c:string}

function objInspect (a: A | B | C) {
    if(a.type === "a") {
        type이 "a"일때 가능한 작업...
    } else if(a.type === "c"){
        type이 "c"일때 가능한 작업...
    } else {
        --> 이 경우 타입이 never뜸 else에 더 이상의 타입이 존재할수 없으니까..
    }
}

3) key를 이용하여 구별하는 방법
type A = {type: "a", a:string}
type B = {type: "c", b:string}
type C = {type: "c", c:string}

function objInspect (a: A | B | C) {
    if("a" in a) {
        type이 "a"일때 가능한 작업...
    } else if("b" in a){
        type이 "c"일때 가능한 작업...
    } else {
        --> 이 경우 타입이 never뜸 else에 더 이상의 타입이 존재할수 없으니까..
    }
}

in을 통해 key를 검사해서 타입 가드를 한다.

객체인 경우엔 위와 같이 key or value를 이용해 타입을 걸러서 작업해준다. key의 경우에는 in문법을 이용해 검사한다.

• 따라서 타입스크립트를 이용하면서 객체로 무언가를 만들때는 항상 type이라는 속성을 만들어두는게 좋다.

• 만약 type 속성이 없어서 구별이 힘든경우, 빠르게 객체안에 구별되는 key를 찾아서 in문법으로 타입을 구별해준다.

타입스크립트 문법 정리

1) 넓은타입 & 좁은타입

좁 -> 넓 타입 대입은 되지만 넓 -> 좁 타입 대입은 안된다.

type A = {a:string}
type B = {b:number}
type AB = A | B
type C = A & B

const c:C = {a:"a", b:2}
const ab:AB = {a:"a"}

const ab:AB = c 가능(O) 좁은타입 -> 넓은타입
const c:C = ab 불가능(X) 넓은타입 -> 좁은타입

const c2:C = {a:"a", b:2, //c:"c"} 좁은 타입(C) -> 넓은 타입 대입(C & {c:"c"}) 
c:"c" 부분에서 에러가 뜸 잉여 속성검사라는것이 발동.

이런 경우는 객체 리터럴을 다른 변수에 할당하고 그 변수를 c2에 할당하면 
해결된다.

const c3 = {a:"a", b:2,c:"c"}
const c2 = c3

1) A와 AB를 비교했을때 AB가 or이므로 범위가 더 넓어지므로 A -> AB 타입 대입이 가능하다. 2) A와 C를 비교했을때 C는 A와B타입이 모두 존재해야하는 타입이므로 A -> C 타입 대입이 불가능하다. 3) AB와 C를 비교했을때 AB가 C보다 넓은 타입이므로 C -> AB 타입 대입이 가능하다. 4) 다만 좁은 타입 -> 넓은 타입에 대입했을시 객체 리터럴일 경우, 객체 리터럴을 변수에 직접 할당하면 잉여 속성검사라는것이 발동된다.

• 알아두면 좋은 팁 객체 리터럴에서 객체가 상세할수록 좁은 타입이다.

2) void의 여러가지 사용법

fucntion a ():void {}

interface Magician {fire: () => void}
const magician:Magician = {fire(){return "불꽃마법"}}

function c (arr:number[],callback: (num:number)=>void){}

• 1) 함수의 리턴타입이 void인 경우는?

return값이 undefined인 경우에 해당.

• 2) 객체의 메서드의 리턴타입이 void인 경우는?

여기서는 일반 함수와는 다르게 리턴값을 사용 안한다는 의미로 리턴 타입을 void로 표기해둔다고 한다.

• 3) 매개변수안에 들어오는 콜백함수의 리턴타입이 void인 경우는?

여기서도 마찬가지로 일반 함수와는 다르게 리턴값을 사용 안한다는 의미로 리턴 타입을 void로 표기해둔다고 한다.

정리하면 1번의 경우를 제외하곤 리턴타입이 void인 경우 해당 타입과 타입이 달라도 (number,string...등) 오류로 취급하지 않는다. 해당 리턴값을 사용하지 않겠다 or 리턴값을 상관하지 않겠다는 의미로 취급되기 때문, 결국 정리하면 void로 타입표기는 해둔 경우 리턴값이 필요없는 경우에 사용하면 되겠다.

그리고 undifined와 void는 다르다.

*3) declare *

declare란 TypeScript로 작성하지 않은 코드의 타입 정보를 컴파일러에게 알려주는 선언이다. 컴파일 단계에서 사라짐. === declare가 붙은 코드들은 JS로 컴파일 되지 않는다. 외부에서 만들어진 코드에 타입을 선언할때 유용하다.

declare function a (타입...):타입
declare 변수:타입

뭔가 문법은 방대(주관적 기준)한데, 이걸 도대체 어디서 활용하지? 라는 의문점만 강하게 생긴다.

그래서 배우는게 더 어려운것같기도하고..

타입스크립트 문법 정리

1) enum 타입

뭔가를 열거할때 쓰는 타입,

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

제일 위를 기준으로 0부터 오름차순으로 값이 할당된다. 근데 이걸 도대체 어디서 쓰는건지.. 감이 안잡힌다. 내가 아직 실무일을 하지 못해서 그런건가?

2) as const 문법

as const로 상수형으로 취급할수 있다.

const people = {
    name: "Tom",
    age: 24,
    gender: "male",
} as const

해당 객체는 상수형으로 취급되어 밸류를 수정할수 없다. + 엄격하게 타입을 추론하게 한다.

3) keyof, typeof

객체에서 key를 리터럴 타입으로 가지고 올때 사용한다.

const people = {
    name: "Tom"
    age: 24,
}

여기서 객체 key를 타입으로 사용하려면,

type PeopleKeyType = keyof people -> const people을 타입으로 먼저 변환시켜서 그 타입에서 키를 따와야 하기 때문에 그 때 사용하는게 typeof이다. -> 
type PeopleKeyType = keyof typeof people
결과 -> name | age

만약에 typeof만 입력한다면 객체의 형태의 타입이 됨.

{
    name: string
    age: number,
}
이런식으로

typeof는 타입을 가져온다고 기억하자.

value를 타입으로 가져오고 싶다면?

const obj = {a: "a", b: "b", c: "c"}
type ValueType = keyof typeof obj 로 key타입을 추출하고 -> typeof obj[keyof typeof obj]

객체에서 일반 밸류값 가져올때 하는 방식으로 하면 된다. 다만 타입추론을 느슨하게 하기 떄문에

as const로 엄격하게 타입을 추론하게 한뒤 사용한다.

const obj = {a: "a", b: "b", c: "c"} as const 
type ValueType = typeof obj[keyof typeof obj]

이렇게하면 밸류타입이 유니온으로 추출됨.

*4) &(intersection)과 |(union) *

&과 |이 있는데 의미가 다르다.

1) type Test01 = {a: "a"} | {b: "b"}
2) type Test02 = {a: "a"} & {b: "b"}

두개의 차이점은 뭘까?

1번의 경우에는 아래처럼

const obj:Test01 = {a: "a"} or {b: "b"}

둘중 한개만 있어도 되지만

2번의 &(intersection)의 경우에는 아래처럼

const obj:Test02 = {a: "a", b: "b"}

두개의 타입이 다 있어야한다.

*5) type ailas와 interface의 차이점? *

1) type ailas 먼저 type은 &을 이용해 확장을 할 수 있다.

type A = {a: "a"}
type B = A & {b: "b"}
type C = B & {c: "c"}
---
const D: C = {a: "a", b:"b", c:"c"}

이런식으로 반드시 있어야 된다는 의미의 &를 활용해 확장이 가능하다.

2) interface

interface의 확장방식은 2가지가 있다.

첫번째는 class와 같이 extends를 이용한 방식

interface A {
    a: "a",
}

interface B extends A {
    b: "b",
}

두번째는 같은 인터페이스를 재 선언 하는것이다.

interface A {
    a: "a"
}
interface A {
    b: "b"
}
interface A {
    c: "c"
}

간단하게 표현하고 싶을때는 type, 대체로 자주쓰는 방식은 interface방식이라고 한다. 타입 확장의 자유도가 더 높기 때문인것 같다. type같은경우 같은 이름으로 재 선언 하지 못하니,

실무 이름 표기법

타입스크립트에서 최근에는 안쓰는 추세라고는 하지만 타입 네이밍 기법이 있다고 한다.

interface면 I를 붙이고 type이면 T를 붙이고 enum이면 E를 붙이는 기법이라고 한다.

안쓰인다고는 하나, 해당 기법을 이용해 네이밍을 한 경우도 있을테니 숙지해두자~

타입스크립트 대원칙

1) 타입은 변수, 매개변수, 리턴값에만 표기 한다. 2) 최대한 명확하고 정확하게 작성 한다. 3) 타입이 추론가능할땐 타입 추론을 적극 활용해라. 다만 타입 추론이 내가 생각한 타입이 아니거나 any 타입인 경우 직접 타입을 표기해야한다.

const a= 5;
const b= "아"; 
위의 코드들은 상수(변하지 않고 고정된)값이니까 굳이 number나 string으로 표기하여 범위를 넓히는것보단 타입 추론을 하게 두는게 낫다.

타입스크립트 문법

1) 타입은 고정된 원시값(string,number,null,undifined,boolean...등)으로도 표기가 가능하다.

const a:5 = 5; const b:false = false; const c:"문자열" = "문자열";

2) 배열 타입 유니온 사용할때는 소괄호가 있어야함.

const arr:(string | number) = [] 이런식으루

3) 매개변수에 타입표기만 해줘도 타입스크립트에서 리턴값을 알아서 추론해줄수도 있다.

function foo(x:number, y:number) {return x x y} 위의 경우 타입스크립트는 매개변수 x와 y의 타입을 보고 리턴값을 추론한다.

하지만 항상 명심하자. 내가 예측하지 못한 타입일 경우에는 명확하게 타입을 표기해야하는걸로.

4) 함수의 오버로딩

1) 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것을 함수의 오버로딩이라고 한다. 2) 파라미터의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것. 3) function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다. 4) 유니온을 쓰는걸 권장하는듯.

5) as문법

1) 타입스크립트가 추론하지 못하는 타입을 as키워드를 통해 명시해주는 것 사용법 : 변수 as 타입 2) chaining 하는 경우 변수를 괄호로 감싼 뒤 그 안에서 as 키워드를 사용 3) as뒤에 명시하고자 하는 데이터 타입을 작성해주면 된다. 4) 실제 데이터 타입을 변경하지 않고 타입 에러가 나지 않게끔만 해준다. 즉 컴파일 과정에서 사라짐.

6) never타입

타입 스크립트에서 빈 배열을 선언할경우 never타입으로 지정이 되고 해당 배열에 어떤 값도 들어올수 없게 된다.

기초상식

원시타입: 객체를 제외한 string,number,undfiend,null...

튜플,유니온이란?

튜플(Tuple) 사전적인 의미론 튜플(tuple)은 셀 수 있는 수량의 순서 있는 열거이다. 길이와 각 요소마다의 타입이 고정된 배열이라고 이해해두면 될듯.

type UserTuple = [string, number, string, boolean]

const user01:UserTuple = ["dbstjghks",586665,"닉네임",false]
const user02:UserTuple = ["dbstjghks",586665,"닉네임",false,5798798798] //ERROR

다만, push를 이용하여 해당 배열에 요소를 추가하면 에러가 발생하는게 아닌 정상적으로 요소가 추가되어 배열 요소 타입 밑 타입 순서를 고정시키는 튜플의 의미가 없기 때문에

배열 인덱스마다의 타입과 순서를 “완벽히” 고정시키기 위해 readonly 키워드를 사용한다.

type UserTuple = readonly [string, number, string, boolean]

const user01:UserTuple = ["dbstjghks",586665,"닉네임",false]
const user02:UserTuple = ["dbstjghks",586665,"닉네임",false,5798798798] //ERROR

push불가

유니온

string | number 등 또는 |기호를 이용하여 타입 표기한것.

type과 interface의 차이란?

type

1) type같은 경우는 자료형이 원시타입일경우 type으로 표기한다

2) 확장시 &기호를 사용한다.

type Person = {
  name: string,
  age: number
}

type Student = Person & { // 확장(상속)
  school: string
}

interface

1) interace같은 경우는 객체일때 interface를 활용한다. 원시자료형에는 사용할수 없다.

2) 선언적 확장이 가능하다.

interface Person = {
    name: string;
} 

interface Person = {
    name: string;
    age: number;
} 

이런식으로도 확장 가능. extends를 사용해도 확장 가능.

문제

머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요.

제한사항
1 ≤ babbling의 길이 ≤ 100
1 ≤ babbling[i]의 길이 ≤ 15
babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다.
즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다.
문자열은 알파벳 소문자로만 이루어져 있습니다.

풀이

이 말인 즉슨, aya", "ye", "woo", "ma"의 조합으로 만 이루어져 있는 단어가 몇개있는지 찾아라는 뜻인데.

처음에는 다음과 같은 단계를 거쳤다.

1. 합성어에 주어진 기본 단어가 포함되는가?

2. 포함 된다면 비교 배열에 push 

3. 그리고 거기 있는 단어들을 더해서 합성와 비교, 같을시에 카운트 증가

하지만 이런식으로 진행하니 큰 문제가 생겼는데 바로,

단어 구성은 같아도 합성을 했을때 순서가 다를경우 전혀 다른 단어가 된다는 것이다.

해서 머리를 굴리다 다음과 같은 방안으로 수정했다.

1. 합성어에 주어진 기본 단어가 포함되는가?

2. 포함 된다면 비교 배열에 push

3. 비교 배열 반복문을 돌리면서 포함 단어들을 삭제한다.

4. 그렇게 해서 합성어의 갯수가 0이 된다면 오롯이 기본단어의 합성으로 구성된 합성어라는 뜻이 되므로 

5. 카운트를 1개 증가 시킨다. 

나같은 경우는 위와 같은 방법으로 했는데, 다 해결하고 문제 풀이를 보니

정규식으로 1줄로 끝내는 사람도 있더라.. 갑자기 현타가 밀려온다.

그래도 나같은 발상으로 푼 사람은 한명도 없어 보여서 나름 뿌듯하다.

소스코드

function solution(babbling) {
    const baseWord = ["aya","ye","woo","ma"];
    const includeWord = [];

    let trueCnt = 0;
    let clearWord = "";
    //ex: ["ayaye", "uuuma", "ye", "yemawoo", "ayaa"]

    //1. 합성어에 포함되는 단어들만 배열로 집합
    //2. 합성어의 조합 순서를 바꿀순 없으니 속하는 단어들을 제거하는 형식으로 해보자.
    //3. length가 0이되면 count1 증가로

    babbling.forEach(str => {
        baseWord.forEach(innerStr => {
            str.includes(innerStr) ? includeWord.push(innerStr) : "";
        })

        clearWord = str;

        for(let i = 0; i < includeWord.length; i++) {
            //let idx = clearWord.indexOf(includeWord[i]);
            //let removeWord = clearWord.substring(idx, idx + includeWord[i].length);
            clearWord = clearWord.replace(includeWord[i], "");
        }

        if(clearWord.length === 0) {
            trueCnt++;
        }

        if(includeWord.length > 0) {
            includeWord.splice(0);   
        }

    })

    return trueCnt;
}

클릭 한대로 따라하면 새로고침 404오류 해결해줌.

https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html 참고.

사용법

이것은 GitHub Pages를 사용하여 단일 페이지 앱을 배포하는 간단한 솔루션입니다. React Router의 와 같은 방식으로 React 단일 페이지 앱을 쉽게 배포하거나 다른 프론트엔드 라이브러리 또는 프레임워크로 개발된 단일 페이지 앱을 배포할 수 있습니다.

필요한 이유: GitHub Pages는 단일 페이지 앱을 기본적으로 지원하지 않습니다. 예를 들어, example.tld/foo와 같은 주소로 새로고침이 발생하면, GitHub Pages 서버는 /foo에 대한 정보를 알지 못하기 때문에 404 오류를 반환합니다.

작동 방식: GitHub Pages 서버가 frontend routes로 정의된 경로(example.tld/foo와 같은)로 요청을 받으면, 커스텀 404.html 페이지를 반환합니다. 이 커스텀 404.html 페이지에는 현재 URL을 가져와 경로와 쿼리 문자열을 쿼리 문자열로 변환하고, 그런 다음 브라우저를 쿼리 문자열과 해시 프래그먼트만 포함하는 새 URL로 리다이렉트하는 스크립트가 포함되어 있습니다. 예를 들어, example.tld/one/two?a=b&c=d#qwe은 example.tld/?/one/two&a=bandc=d#qwe으로 변환됩니다.

GitHub Pages 서버는 새로운 요청인 example.tld/?/...을 받아들이고, 쿼리 문자열을 무시하고 index.html 파일을 반환합니다. index.html 파일에는 단일 페이지 앱이 로드되기 전에 리다이렉트가 있는지 확인하는 스크립트가 포함되어 있습니다. 리다이렉트가 있으면 적절한 URL로 변환하여 window.history.replaceState(...)를 사용하여 브라우저의 기록에 추가하지만, 브라우저는 새로운 URL을 로드하지 않습니다. 단일 페이지 앱이 로드되면 index.html 파일에서 정상적인 URL이 브라우저의 기록에 남아 있으며, 단일 페이지 앱이 이에 따라 라우팅됩니다. (이러한 리다이렉트는 새로고침으로 페이지를 로드할 때에만 필요하며, 로드된 후에는 단일 페이지 앱 내에서 이동할 때는 필요하지 않습니다).

사용 방법:

본 레포지토리에서 404.html 파일을 그대로 사용하기 위해 복사합니다. 만약 프로젝트 페이지 사이트를 설정하고 커스텀 도메인을 사용하지 않는다면 (예: 사이트 주소가 username.github.io/repo-name인 경우), 404.html 파일에서 pathSegmentsToKeep를 1로 설정해야 합니다. 이렇게 하면 리다이렉트 후에도 /repo-name이 경로에 유지됩니다. 또한 React Router를 사용하는 경우 BrowserRouter에 basename="/repo-name"과 같이 리포지토리 이름을 basename으로 설정해야 합니다. index.html 파일에 있는 리다이렉트 스크립트를 복사하여 index.html 파일에 추가합니다. 리다이렉트 스크립트는 반드시 index.html 파일 내의 단일 페이지 앱 스크립트보다 앞에 위치해야 합니다. 자세한 사용 방법은 다음과 같습니다.

React 단일 페이지 앱을 GitHub Pages로 호스팅하기 위해 이 레포지토리를 보일러플레이트(초기 구조)로 사용합니다. 이 보일러플레이트는 TypeScript로 작성되었지만 JavaScript 파일도 지원합니다. 이전에 JS로 작성되었으며, JS 전용 보일러플레이트를 원한다면 버전 6을 사용할 수 있습니다.

이 레포지토리를 클론합니다. ($ git clone https://github.com/rafgraph/spa-github-pages.git) .git 디렉토리를 삭제합니다. (spa-github-pages 디렉토리로 이동한 다음 $ rm -rf .git 명령을 실행합니다.) 레포지토리를 초기화합니다. 새 레포지토리로서 이 보일러플레이트를 사용하는 경우: spa-github-pages 디렉토리에서 $ git init 명령을 실행한 다음 $ git add .와 $ git commit -m "Add SPA for GitHub Pages boilerplate" 명령을 실행하여 새 레포지토리를 초기화합니다. 기존 레포지토리의 gh-pages 브랜치로서 이 보일러플레이트를 사용하는 경우: 기존 레포지토리에서 새로운 gh-pages 브랜치를 만들고 이동합니다. ($ git checkout --orphan gh-pages) 이 단계에서는 gh-pages 브랜치가 브랜치 목록에 표시되지 않습니다. 첫 번째 커밋을 수행해야 브랜치가 목록에 나타납니다. 기존 레포지토리의 디렉토리에서 .git 디렉토리를 제외한 모든 파일과 디렉토리를 삭제합니다. ($ git rm -rf .) 클론한 spa-github-pages 디렉토리의 모든 파일과 디렉토리(숨겨진 점 파일 포함)를 기존 프로젝트의 빈 디렉토리로 이동합니다. ($ mv path/to/spa-github-pages/{.[!.],}* path/to/your-projects-directory) $ git add .와 $ git commit -m "Add SPA for GitHub Pages boilerplate"를 실행하여 gh-pages 브랜치를 초기화합니다. (선택사항) 커스텀 도메인 설정하기 - GitHub Pages에서 커스텀 도메인 설정 방법을 따릅니다. 커스텀 도메인을 사용할 경우 CNAME 파일을 커스텀 도메인으로 업데이트합니다. https://를 포함하지만 서브도메인은 필요에 따라 추가합니다. 예를 들어 www 또는 your-subdomain을 사용합니다. DNS 제공자에서 CNAME 및/또는 A 레코드를 업데이트합니다. $ dig your-subdomain.your-domain.tld 명령을 실행하여 DNS 설정이 제대로 되었는지 확인합니다. (https://는 포함하지 않습니다.) (선택사항) 커스텀 도메인을 사용하지 않을 경우: CNAME 파일을 삭제합니다. User 또는 Organization Pages 사이트를 만드는 경우, 더 이상 할 필요가 없습니다. Project Pages 사이트를 만드는 경우 (예: 사이트 주소가 username.github.io/repo-name인 경우): 404.html 파일에서 pathSegmentsToKeep를 1로 설정합니다. index.html의 자산에 repo-name을 절대 경로에 추가합니다. 예를 들어, bundle.js의 src를 "/repo-name/build/bundle.js"로 변경합니다. React Router에서 basename을 /repo-name으로 설정합니다. 예: package.json의 start 스크립트에서 --open을 --open-page repo-name으로 변경합니다. webpack.config.js에서 publicPath에 '/repo-name/build/'를 추가합니다. historyApiFallback 리다이렉트를 rewrites: [{ from: //repo-name/[^?]/, to: '/404.html' }]로 변경합니다. npm install 명령을 실행하여 React 및 기타 종속성을 설치하고, npm run build 명령을 실행하여 빌드를 업데이트합니다. $ git add .과 $ git commit -m "Update boilerplate for use with my domain" 명령을 실행한 다음 GitHub에 푸시합니다. (Project Pages의 경우 $ git push origin gh-pages, User 또는 Organization Pages의 경우 $ git push origin main) 이제 원하는 대로 당신의 사이트를 만들어 보세요.

자신만의 React 컴포넌트를 작성하고, 자신만의 라우트를 생성하며, 스타일을 추가하세요. index.html의 title과 404.html의 title을 사이트의 제목으로 변경하세요. index.html의 favicon 링크와 favicon 디렉토리를 삭제하세요. 필요에 따라 robots.txt와 sitemap.txt를 업데이트하거나 삭제하세요. (SEO 섹션 참조) readme, license, package.json을 원하는 대로 수정하거나 삭제하세요. 변경 사항을 로컬에서 테스트하려면 개발 환경 정보를 참조하세요. 변경 사항을 GitHub Pages에 게시하려면 $ npm run build (이는 프로덕션용으로 webpack -p를 실행합니다) 명령을 실행하여 빌드를 업데이트한 다음 $ git commit 및 $ git push를 실행합니다. 메인 브랜치의 /docs 폴더에서 호스팅하기 - 루트 폴더 대신 /docs 폴더에서 사이트를 제공하면서 소스 코드는 루트 폴더에 유지할 수도 있습니다.

위의 지침을 따른 후 /docs 폴더를 루트에 만들고, index.html, 404.html 및 /build 폴더를 /docs로 이동합니다. package.json의 start 스크립트에 --content-base docs/를 추가합니다. webpack.config.js에서 output 경로를 path: ${__dirname}/docs/build로 변경합니다. GitHub에서 레포지토리 설정으로 이동하여 GitHub Pages의 소스로 /docs 폴더를 선택합니다. 개발 환경: 로컬에서 변경 사항을 테스트하기 위해 webpack-dev-server를 포함하였습니다. 이를 실행하려면 $ npm start를 실행하세요. webpack-dev-server는 소스 파일이 변경될 때마다 자동으로 새 번들을 만들고 메모리에서 번들을 제공하여 파일로 디스크에 저장된 번들을 볼 수 없습니다.

$ npm start는 package.json의 start 스크립트를 실행합니다. 이 스크립트는 $ webpack-dev-server --host 0.0.0.0 --disable-host-check --open을 실행합니다. --host 0.0.0.0 --disable-host-check를 사용하면 다른 장치에서 http://[YOUR COMPUTER'S IP ADDRESS]:8080으로 로컬 네트워크에서 사이트에 접근할 수 있습니다. --open은 자동으로 브라우저에서 사이트를 엽니다. webpack-dev-server는 index.html을 http://localhost:8080에서 제공합니다. (포트 8080은 기본값입니다). 번들은 메모리에서 제공되며 브라우저에서 직접 열리지 않습니다. 서버에서 index.html을 로드해야 스크립트가 로드됩니다.

redux toolkit 사용법

사진을 보면 provider라는 컴포넌트로 전체를 감쌌는데, 이 말은 전체 전역적으로 상태관리를 하겟다는 말이 된다.

저기 안에 라우터 컴퍼넌트도 넣어두고 하면 된다.

요는, 자기가 사용할 범위에 provider컴포넌트로 감싸주면 된다는것이다.

그리고 상태관리를 하는 파일은 별도로 js로 만들어 관리를 한다.

일반적으로 store라는 이름을 많이 쓴다고 한다.

정리하자면,

리액트는 단방향으로 데이터를 전달하고, props의 형태로 데이터를 전달하기 때문에

만약 자식컴포넌트의 숫자는 많고, 상태를 변경해야하는일이 많으면 해야할일이 복잡해지고 많아지기때문에

리덕스를 사용해서, 별도의 js파일을두고 자식이건 부모건 js파일안의 상태관리 함수를 호출해

상태를 관리하는것.

이제 vscode로 가서 직접 사용해보자.

항상 컴포넌트나, js파일을 사용할때는 import를 사용하는것을 잊지말자.

상태관리 js (store.js)파일을 만들고 프로바이더 컴포넌트의 props로 전달을 했다.

상태관리하는 js, 그리고 prop의 이름은 자율이지만 관례적으로 store라는 이름을 쓰고

두개의 이름을 일치화 시키는것을 선호한다고 한다.

이제 셋팅이 완료되었으니 redux를 이용하여 장바구니 기능을 만들어보자!

먼저 장바구니 레이아웃을 만들어보자. 간단하게 만들기 위해 부트스트랩을 사용할것이다.

일단 잠시 provider를 주석처리하고, 레이아웃을 먼저 잡고 상태관리 로직을 짜보도록 하자.

components - table 클릭 - 원하는 레이아웃을 골라서 import 시켜주면 된다.

일단 간단하게 장바구니 레이아웃을 잡아봤다.

()안에 이름을 전달하고 수량을 변경하는 기능을 넣어보자.

그러기 위해선 상태변화 로직을 짜야한다. shop.js에 설정을 하자.

문서에 적힌 사용방법에 따라 먼저 configureStore를 import해준다.

여기서 또 createSlice라는 함수가 있는데,

해당 함수도 같이쓰면 액션과 리듀서를 생성하는 작업을 자동화할 수 있으므로 코드양이 줄어든다고 한다.

따라서 해당 함수도 import 시켜주자.

해당 함수를 작성하는 방법은 다음과 같다.

createSlice를 호출하면, createSlice라는 객체를 반환해준다.

그 안에 name, initialstate(상태 관리할 목록 이 안에서 속성을 설정해둬도 되고 사진처럼 외부에서 정의하고 내부에서 갖다 써도 된다.)

여기서 creatSlice객체 내부에 name을 설정하지않으면 자동적으로 내가 설정한 변수명이 name이 된다.

name을 설정하면 해당 객체의 이름이 내가 설정한 name으로 된다.

하지만 관례적으로 변수명과 name 값을 일치화시킨다고 하니 일치화시켜주자.

또한 reducers에서 set함수를 선언해 initialstate의 값을 변경시켜줄수있다.

configureStore 함수는 

스토어를 생성한다.

스토어의 역할은?

상태관리

액션

리듀서

원래 리듀서 함수 안에, 액션 함수 즉 상태를 변경하는 함수를 넣어두고 

reducer에 해당 리듀서함수를 값으로 지정햇는데

createSlice로 reducers를 키값으로 설정뒤 밸류값으로 상태변경 함수를 설정할수 있다.

여기서 user의 reducer를사용한다는말은 reducers안에 있는 reducer객체를 사용한다는 말이다

reducer객체는 한 개의 액션에 대한 상태 변경 로직을 담당한다.

즉

reducers안에 reducer (상태변경함수로직1개만 담당) 이러한 리듀서가 여러개 있는것이다.

리액트에서 리덕스를 왜 사용하는가?

리액트는 기본적으로 단 방향으로 데이터의 흐름이 진행된다.

가장 최상위 부모 컴포넌트에서 상태 관리를 해주고, 자식 컴포넌트에게 props로 전달하게 되는데

만약 자식 컴포넌트가 수없이 많다면? 그러면 상태 관리가 너무 힘들어지니까

전역적으로 상태관리를 해주기 위해 생겼다.

리덕스를 사용하면 자식 컴포넌트에서 상태관리js(저장소) 내부의 함수를 꺼내서, 상태변경이 용이해진다.

즉 자식컴포넌트에서도 상태관리가 가능해진다는 말이다.

설치법

내가 설치할것은 redux toolkit이다. Redux Toolkit이 출시됨으로써

훨씬 더 간편하고 효율적인 방식으로 Redux를 사용할 수 있게 되었다.

다만 주의해야 할점은 해당 프로그램을 사용하려면 react의 버전이 React v16.8 이상이어야 한다는 것이다.

무튼 구글에 redux toolkit을 검색한다.

사이트 접속

get started를 누르고 아래로 내려가면

설치 명령어가 나온다. 난 노드 환경이니 npm으로 설치를 할것이다.

둘다 설치해야 react에서 바인딩이 된다고 한다.

npm install @reduxjs/toolkit react-redux

이런식으로 명령어를 이어붙여서 둘다 설치할수 있다. 아니면 따로입력해도 되고

pacakage.json 파일을 확인해보면 잘 설치된것을 알수있다.

설치 끝. 다음 글에서 사용법을 알아보도록 하자.

복습을 했다.

map 함수로 아이템들은 렌더하는것까지는 손쉽게됐으나, key문제로 트러블이 있었다.

원래 계획은 map함수가 실행될때마다 컴포너트가 호출/ 태그가 반환되는 형식으로 계획을 잡았는데

문제가 생겼다.

바로 key부분이다, key 값을 설정하고 컴포넌트에 prop으로 전달, 그 안에서 key값을 설정하려고했으나

문제가 생겨버린것이다.

key라는 이름으로 속성을 전달하니 undefiend가 떠서 알아보니

key는 컴포넌트의 prop 이름으로 사용해서는 안된다고 한다.

그 이유는 key 속성은 React에 의해 예약된 속성으로, 컴포넌트의 다른 prop과 구분되어야 하는데

만약 key 속성으로 prop 이름을 사용하면 React는 해당 prop을 key로 인식하지 않고

그냥 일반적인 컴포넌트 prop으로 취급하게 되어버린다는것이다.

따라서 key 속성을 통해 컴포넌트를 고유하게 식별할 수 없게 되고,

컴포넌트 리스트를 업데이트할 때 문제가 발생하게 된다고 한다.

그래서 다른 방안으로 속성 이름을 다르게 전달하고 그 값을

컴포넌트 내부에서 key값으로 설정하려고 했으나

그것마저도 Each child in a list should have a unique "key" prop.

오류가 뜨면서 안되는것이다. 그렇게 여러개 시도해보다가

해당 형태처럼 key값을 전달하는게아니라 key값은 설정하고, 생성되는 list만 컴포넌트로 생성시키니 고쳐졌다.

알아보니까

key 속성은 부모 컴포넌트가 자식 컴포넌트를 렌더링할 때 필요한 정보로,

React에서는 key 값을 사용하여 컴포넌트를 식별하고, 각 컴포넌트의 변화를 추적한다고 한다.

일반적으로 key 속성은 컴포넌트를 렌더링하는 부모 컴포넌트에서 설정해야 하고

부모 컴포넌트는 각 자식 컴포넌트에 대한 고유한 key 값을 제공하게 되는데 이렇게 하여

React는 각 컴포넌트를 고유하게 식별하고, 리스트의 변화를 정확하게 추적할 수 있게된다고 한다.

셋팅

간단한 nav메뉴를 가져와서 routing을해보자.

Navbars 클릭

자신이 원하는 스타일의 레이아웃을 선택하자.

해당 태그와 import태그를 복사해서 붙여넣어주면 된다.

이런식으로 한번에 중괄호로 묵어서 import해주면 된다.

또한 부트스트랩 레이아웃을 사용하려면 css스타일도 import시켜주어야한다.

전역 컴포넌트인 app.js부분에 넣어주자.

사이트 우측의 css 클릭

해당 명령어를 전역 컴포넌트에 import시키면 완료.

라우팅

이번엔 라우트에 연결할때 Link컴포넌트가 아닌 useNavigate를 사용해보도록 하겠다.

Link와 useNavgate의 차이점

Link: 링크 연결 컴포넌트로 정적으로 링킁연결
UseNavigate: 경로 지정 함수를 호출하는것으로, 필요에따라 동적으로 링크 연결이 가능하고
유연하게 링크를 바꿀수있다.

매번 
usenavigate는 유연하게 링크를 바꿀수있는게 핵심이다. 

아무튼 app.js를 전역컴포넌트로 정했고, app.js에 세팅을 다하고 부트스트랩 레이아웃을 넣어주면

이런식으로 편하게 레이아웃 작성이 완료되는것이다.

useNavigate()는 navigate라는 함수를 반환하는데, 해당 반환함수에 경로를 지정하면 링크연결이 되는원리이다.

즉 navigate는 경로이동지정함수를 반환받은변수이고, ()를호출하여 인자를 넣어주면 해당 링크로 연결되는것이다.

무튼 클릭 함수를 걸어주고, 클릭됐을때 navigate함수를 반환받아 링크연결을 해주었다.

사진을 보면 부모 라우트 안에 자식 라우트가 들어갔는데 라우터 v6부터 생긴 기능중 하나라고 한다.

저렇게 해줌으로써, 부모 자식 컴포넌트를 같은 위치에 위치시키면서, 클릭하면 부모 컴포넌트의 반환값을 보여줄수있다.

만약 저렇게 부모라우트로 감쌌으면 부모라우트에 Outlet이라는 컴포넌트를 넣어줘야 자식 컴포넌트들이 렌더링이 된다.

설치

현재 리액트를 공부중이기 때문에 리액트 부트스트랩을 검색했다.

근데 저기서 바닐라 부트스트랩도 같이 설치가 가능하다.

항상 이런 프로그램을 다운받고시픙면 get started나 docmuments 즉 문서파일을 확인하면 된다.

멘트를 보니 scss 사용하고싶으면 바닐라 부트스트랩도 같이 깔아라고한다.

해당 명령어는 리액트 부트스트랩과 부트스트랩을 같이 설치하는 명령어이다.

항상 packaga.json파일에서 무사히 잘 깔린것을 확인하는 습관을 들이자.

1. a태그는 사용하면 안된다. 페이지를 호출하는 기능이 있기 때문에,

2. *link 에 to로연결한걸 route path로받아준다. *

사용법

브라우저라우터는 router들을 감싸는 가장 상위 컴포넌트로, 해당 컴포넌트로 감싸주고 라우팅을 작성해야한다.

해당 컴포넌트를 작성하면, 알아서 임포트 명령어가 작성된다.

"React.StrictMode"는 React의 개발 모드에서 추가적인 검사와 경고를 활성화하는 데 사용되는 컴포넌트로 부작용이 있는 코드, 예상치 못한 동작 등과 관련된 경고를 표시하여 개발자가 이를 수정하도록 유도한다.

app컴포넌트 안에 있는 구성이다.

사용할 라우터 컴포넌트들을 import해주고 써야한다.

Link => Link를 통해 경로를 설정하고 route컴포넌트가 해당 경로에 해당하는 컴포넌트를 뿌려준다.(렌더링)

to = "" 안에 연결한 경로를 설정하면 된다. 또한 main이 속해있는 link컴포넌트에 /라는게 있는데 /는 경로를 나타내는 문자열의 시작을 나타낸다. 즉, 보통 메인페이지를 나타낼때 쓴다.

여기서 NavLink라는 컴포넌트가있는데, Link랑 똑같은 역할을 하지만 클릭한 컴포넌트에 active라는 클래스를 넣어준다.

route => 앞에서도 말했지만, link to 문자열에 해당하는 부분을 렌더링해준다고 생각하면 된다.

path로 받는 문자열을 일치시켜주고, element = 안에 컴포넌트를 넣어 렌더링해주면 된다.

path에 보면 sub/* 이런식으로 표기되어있는데 그 안에 페이지가 또 들어온다는 의미라고 생각하면된다.

우측에 보면 path에 /*이라는 문자열이있는데, 모든 경로에 대해 해당 element를 띄운다는 의미이다. 그리고 :peopleName이라고 경로를 받았는데, : 뒤에 문자열이있는데 경로 매개변수를 사용하겠다는 말이다.

순서: peopleName에 to에 해당하는 문자열이 들어온다. profile js에서 해당 경로 문자열에 해당하는 속성값을 만들어준다.

ex: to="김개똥" -> {김개똥 : {표시할 정보}} 이런식으로,

그리고 컴포넌트 내부에서 useParams 훅을 이용해 peopleName이라는 변수로 받고 (보면 객체다, 따라서 구조분해할당을할떄도 같은이름으로 받아야하며, 만약 변수명을 다른이름으로 바꾸고 싶다면 peepleName : changePeopleName) 이런식으로 바꿔줘야한다.

여기서 useParmas란?

useParams
useParams는 URL 인자들의 key/value(키/값) 짝들의 객체를 반환한다. 현재 <Route> 의 match.params에 접근하기 위해 사용한다.

따라서 구조분해할당을할때 객체의형태로 받아야하는것이다.

이렇게 link경로가 잘못됐을경우 예외처리도 가능하다.

설치

1. react router dom 검색

2. 좌측의 튜토리얼 클릭

컨트롤+f로 npm검색하면 사진과 같이 나오는데

npm install react-router-dom localforage match-sorter sort-by

4개의 패키지를 깐다는건데

npm install react-router-dom / React Router는 React 컴포넌트를 사용하여 사용자가 애플리케이션의 다른 경로로 이동할 수 있도록 도와줌. react-router-dom은 React Router의 DOM 바인딩을 제공하며, React 애플리케이션에서 브라우저의 주소를 기반으로 라우팅을 처리할 수 있도록 해줌.

localforage / 웹 브라우저의 로컬 스토리지를 사용하여 데이터를 비동기적으로 저장하고 검색하기 위한 패키지

match-sorter / 배열의 요소를 검색 기준에 따라 정렬하는 데 도움이 되는 패키지

sort-by / 정렬 함수를 생성하는 데 사용되는 패키지로, 정렬 기준에 따라 객체 배열을 정렬할 수 있음.

필요에 따라 설치를 하면 된다. 일단 라우터만 설치해보도록 하자.

4. 경로를 잡아주고 라우터 설치명령어를 입력한다. 설치가 다됐는지 보려면 항상 pacakage.json을 확인 성공적으로 잘 깔린것을 볼수있다.

셋팅

라우팅을 하는곳에 해당 명령어 입력

BrowserRouter / router들을 감싸는 가장 상위요소, 해당 컴포넌트로 감싸주고 라우팅을 작성해야한다.

Routes / react-router-dom 패키지의 컴포넌트 중 하나로, 라우팅 구성을 담당

routes는 여러개의 라우터 컴포넌트를 포함하는 최상위 라우터 컴포넌트로 각 경로에 대한 컴포넌트를 렌더링 할수 있도록 도와준다.

Route / react-router-dom 패키지의 컴포넌트 중 하나로, 특정 경로에 대한 라우팅 규칙을 설정한다.

사용자가 특정 경로로 이동하면 해당 경로에 연결된 컴포넌트가 렌더링되게 해줌.

Link / react-router-dom 패키지의 컴포넌트 중 하나로, 클릭 가능한 링크를 생성한다. Link 컴포넌트를 사용하여 사용자가 특정 경로로 이동할 수 있는 링크를 생성할 수 있다. 주로 네비게이션 메뉴나 페이지 간의 이동에 사용 됨.

개념적인건데 아직 잘 이해가 가진 않는다.

일단은 간단하게 Link 컴포넌트를 사용하여 경로를 연결하고, 사용자가 해당 경로로 이동하면 rotue가 해당 경로에 해당하는 컴포넌트를 렌더링. 이를 통해 사용자는 링크를 클릭하여 다른 경로로 이동할 수 있고, 해당 경로에 대응하는 컴포넌트를 route가 뿌려주는것. 그리고 routers 안에는 그런 route를 여러개를 놔둘수 있어 여러개의 링크에 대응하는 컴포넌트를 렌더링할수있다. 라고 이해했다.

스타일을 입힌 컴포넌트를 작성해보자.

문법

기존 컴포넌트를 작성할때와 거의 형태가 유사하긴 하다.

변수키워드(const, var, let) 컴포넌트명(Wrap) = styled.태그명(div)백틱(``) 

백틱 안에다 스타일 입혀주면, 해당 스타일이 입혀진 컴포넌트가 되는것.

ex) const Title = styled.h2`
    font-size: 50px;
    background-color: red;
    text-align: center;
`

컴포넌트가 하나 더 들어갈 예정이라 프래그먼트를 미리 넣어줬다.

root - app 안에 정확히 뿌려졌음.

styled componenet는 또 좋은점이 js문법을 사용할수 잇다는점이다. 예를들면

버튼을 임시로 만들어보았다.

plus 버튼 minus버튼은 검은색이다. 근데 여기서 styled의 문법을 또 사용해보면

이런식으로 컴포넌트에 속성을 넣어주고

백틱으로 속성을 넣었으니 템플릿 스트링을 이용해 저렇게 함수 처리로 스타일을 넣을수있다.

삼항 연산자로 prop에 해당 키가 있으면 red, 없으면 white가 나오게 된다.

잘 적용된것을 알 수 가있다.

styled-componenet는 클래스처럼 상속기능도 있다.

stlyed(컴포넌트이름)을 하면 해당 컴포넌트의 스타일을 상속받을수있다.

상속받고 필요한값만 바꿔주면 되는것이다.

styled-component말고도 라이브러리는 다양하다. sass/scss를 사용할수도 있고 중요한건 개발자의 취향따라 사용하면 된다는것..!

컴포넌트 입력 / 라이브러리 설치

우선 컴포넌트를 만들어서 렌더하기전에 경로의 개념부터 잡아보자.

src폴더의 index.js폴더에 들어가보면 이렇게 명령어가 나온다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

index.js에서 import해서 사용한다. (내 안에서 만들어진게 아니면 전부 import해서 사용한다.)

앵간하면 건드릴 필요가 없는 파일이고, 저기 App이라는 컴포넌트에 우리가 만든 컴포넌트를 넣자.

그렇게 하면 app에 모든 컴포넌트 요소가 들어가고 root에 렌더가 되는것이다.

import로 react파일을 불러왔기때문에 cdn에서 사용하던것처럼 ReactDOM.render() 이렇게 사용을 안해도 된다.

app 안에 각 컴포넌트를 용도별로 나눠서 넣어줄것이다.

쓸데없는 요소들을 다 지운결과이다. 리액트는 굉장히 섬세한 프레임워크라, 저렇게 없는 쪽에 import 걸어놓은것들을 다 지워줘야한다 (안지워주면 github에서 배포할때 오류뜨는듯)

그리고 내가 사용할 컴포넌트들을 넣으려면 import로 연결시켜주고 넣어야한다.

예시

이런 식으로 사용되는 컴포넌트를 import로 연결시켜주어야한다. import가 됐다는 말은

export가 이루어졌단는 말이니, export하는법도 같이 살펴보자.

rfc라는 명령어로도 바로 입력가능하다, 이렇게 컴포넌트js안에 컴포넌트명도 js명과 일치시켜준다.

저 위에 import 경로가 몇개있는데 하나는 리액트로 경로연결을하여 명령어를 쉽게 사용하기 위함이고, 또 하나는 라이브러리이다. 컴포넌트를 작성할때 스타일을 미리 입혀서 작성할수 있게 하는 라이브러리이다.

styled-component 설치하기

npm i styled-components를 입력해보자.

오류가 떠버렸다.. 이럴때는 당황하지말고 구글링을 해보자.

나는 에러메시지가 떴을때 다음과 같은 과정으로 구글링을 진행을 한다.

1. 오류메시지 복붙검색

2. 그래도 안나오면 한글 or 영어로 구체적인 단어를 조합하여 검색

3. ai 활용

1번 방법으로 검색을 하니

이렇게 어떤 친절하신분이 해결법을 블로그에 게시를 해놨다.

버전 무문제 때문이라고 하니, 1번 혹은 3번안을 선택하여 설치하면 될듯하다.

성공적으로 설치가 된것을 확인할수있다!

사용하기 위해서는 잊지말고

@import styled from 'styled-components' 입력!

구글링을 해보니 이런 것도 발견했다. json파일에 입력하도록 하자.

설치

1. React 검색해서 사이트의 문서 탭 클릭

2. 우측 메뉴의 새로운 React 앱 만들기 클릭

3.

1) 명령어가 3개있는데, 우선 제일 위의 npx-create-react-app 폴더명으로 설치

2) cd 만든폴더명 으로 디렉토리 경로 접속

3) npm start로 라이브서버 띄워주면 설치 완료!

단 무조건 노드패키지매니저 Node.JS가 깔려있어야한다!

4. 앱이 깔린다면 해당 사진처럼 나오게 된다. 여기서 public은 정적파일이 들어있는 폴더, 우리가 사용할 폴더는 src이다. 리액트는 번들기능도 가지고있어서, src를 번들하여 정적파일로 변환시켜준다. src폴더에는 우리가 개발하면서 만든 동적파일, 컴포넌트등이 들어가있게 된다.

npm start로 라이브 서버를 띄울수 있다.

5. 이런 화면이 뜨면 전부 성공한것이다. 이 화면이 초기의 index.html이고, 이후 root파일 안에서 모든 렌더링이 이루어지게 된다. 우측 상단에 번역표시가있는데 저 문구가 안뜨게 정적폴더 publick의 index.html에서 설정을 해주자

6. public - index.html에 들어가서 언어를 ko, 그다음 title명을 바꿔주면 된다.

관리해야될 상태가 2개인 경우 방법 1

풀이

input에 입력한값을 동적으로 표시되게 짜보았다.

각 input은 입력 될때마다 change함수가 발동, defalutment의 값을 현재 인풋의 밸류로 바꿔주고

h2에 출력해준것이다.

방법2

풀이

위의 방법이 명확하긴 하지만 이 방법으로 하면 편해서 좋은것 같다.

useState로 객체를 하나 설정

객체의 속성값을 변경하고 그 속성을 할당하는 형식이다.

여기서 알아둬야 할것은 한번에 두개의 속성을 변경할수 없기 떄문에, 한개씩 나눠야 한다는것과

불변성을 유지해야되기 때문에 스프레드 연산자로 객체를 복사 한 후

그 객체를 기반으로 수정한 밸류값을 뿌려줘야 한다는것이다.

또한 change이벤트가 일어날때마다 객체가 복사되는것이 아니라 ,

업데이트가 필요한 경우에만 이전 상태를 복사하여 새로운 상태를 생성한다는것을 알아두자.