6日目

Optional-Chaining

表現

data?.fetchProfile       // data가 true이면 fetchProfile을 실행한다

data||data.fetchProfile // data의 false

ぎじひょうげん

nullish-coalescing

表現

data ?? data.fetchProfile       //data가 null,undefind일때

ContainerとPresenterの違い

Quiz

道具とは何ですか。

7日目

map

const classmates = [
    { name: '철수', age: "13" },
    { name: '영희', age: "10" },
    { name: '훈이', age: "11" },
  ]
  const aaa = classmates.map((el) => ({ name: el.name, age: el.age, school: '토끼초등학교' }))

  console.log(aaa)

filter

与えられた関数の結果値trueの要素をアレイ内の各要素に集約することによって、新しいアレイを返す方法

  const classmates = [
    { name: '철수', age: "13", school: "토끼초등학교" },
    { name: '영희', age: "10", school: "다람쥐초등학교" },
    { name: '훈이', age: "11", school: "토끼초등학교" },
  ]
  
    const school = classmates.filter((el) => el.school === "토끼초등학교")
  const age = classmates.filter((el) => el.age == 11)
  const named = classmates.filter((el) => el.name === "영희")

map&filter

  const abc = classmates
    .filter((el) => (el.age >= 11))
    .map((el) => ({ name: el.name, age: el.age, school: "다람쥐초등학교" }))

  console.log(abc)

8日目

構成部品の再使用

{!props.ggg && <MyButton onClick={props.zzz} qqq={props.qqq}>게시물 등록하기</MyButton>}
{props.ggg && <MyButton onClick={props.xxx} qqq={props.qqq}>게시물 수정하기</MyButton>}

//1つの構成部品に修正と登録機能が追加されています。

9日目

typescript

使用方法

export default function TypescriptPage() {
  // 문자타입 - 타입추로
  let aaa = "안녕하세요";
  // aaa = 3; X numer이아닌String

  // 문자타입
  let bbb: string;
  bbb = "반갑습니다";
  // bbb = 123 X string값

  let ccc: number = 5;
  // ccc = 'asdf' //X =? ccc는 숫자

  // let ddd = [1, 2, 3, 4, 5, 6]; //숫자배열
  // ddd = ["asdasd","asdasd","ASD"]; //X 문자배열

  // 배열타입
  let ddd: number[] = [1, 2, 3, 4, 5, 6]; //숫자배열
  let eee: string[] = ["a", "b", "c", "d", "e"];
  let fff: number[] | string[] = [1, 2, 3, 4, 5]; // |(union_type) => 왼쪽과 오른쪽도 된다는 의미
  fff = ["a", "b", "c"];
  let ggg: (number | string)[] = [1, "b", 2, "c"];

  // 객체타입
  //관례..?
  interface IProfile {
    name: string;
    age: number | string;
    shcool: string;
  }

  let profile: IProfile = {
    name: "철수",
    age: 8,
    shcool: "다람쥐초등학교",
  };
  profile.age = "8살";
  // profile.shcool = 3; // interface에서 타입을 정해줬기때문에 숫자보단 문자열로 정해줘야한다.

  return <div>{profile}</div>;
}

10日目

APIタイプスクリプト

API応答データ

コード構文規則

コードフォーマット規則

安全なGIT

ショートカットキー。zip

rm -rf 폴더명 // 폴더 지우기
npm install -g npm // nodepackage-manager 업데이트

npm install husky --save-dev // 협업때 fomat과 lint를 맞춰준다(이버전은 7버전 하지마...)_
yarn add husky@4 (4버전 이걸로!!)

アプリケーションeslint

yarn add eslint --dev // eslint 설치
yarn run eslint --init //설치후 옵션적용

応用がもっときれい

yarn add --dev --exact prettier // prettier 설치
echo {}> .prettierrc.json // .prettierrc.json

.eslintrc파일에서 
{
  "extends": [
    "prettier"
  ]
}
적용하기

.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    extends: [
        'plugin:react/recommended',
        'standard',
        'prettier' // prettier을 상속(prettier로 포멧터해주겠다)
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 13,
        sourceType: 'module'
    },
    plugins: [
        'react',
        '@typescript-eslint'
    ],
    rules: {
        'react/react-in-jsx-scope': 'off',
    }

}

授業理解集錦。zip

- src/commons = 라이브러리,스타일(Api...)
- src/components = 요소들을 컴포넌트로 나누고 조립하는 방식(Header,Nav...)
- src/components/commons = 공통컴포넌트
- src/components/units = 단일컴포넌트


하나의 함수는 하나만 기능하도록 만드는게 좋다.
함수의 이름은 동사
boolean형태는 앞에 함수명이 is___로시작한다

yarn dev -p portnum // portnum바꾸기

XML => Extensibel Markup Language
devDependencies <-실행전에 필요

early-exit pattern - 없으면 빨리 종료시킨다


return과 break는 같은가?
return은 함수 값이있으면 중단
break는 반복에서 값이있으면 중단 
::: 결이다르다

タイプスクリプトセット

typescript
yarn add lib // 필요라이브러리를 다운받고
yarn add @types/lib // 타입스트크립트에 적용이안될떄 @types/라이브러리명 설치한다.

codegen.yml === codegen.yaml


schema: http://graphql주소
generates:
  ./src/commons/types/generated/types.d.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I