younga-Lee/framework

리액트

0. typescript

예제

• 1. 블록스코프 (let, const)
• 2. 타입명시, 템플릿 리터럴
• 3. null병합연산자, 옵셔널 체이닝
  • null병합연산자 (??)
    • null 또는 undefined인 값을 다른 값으로 대체
    • a??b -> a가 null 혹은 undefined인경우 b값 반환
  • Optional chaining (.?)
    • 해당 속성 또는 메서드가 존재하는지 여부를 확인하고, 존재하지 않으면 에러를 발생시키지 않고 undefined를 반환
    • 코드 가독성 향상, 예외처리에 유용
• 4. 전개구문, 전개 연산자, 배열 또는 객체 합성
• 5. 구조분해할당
  • function 함수 (data: any) data를 any는 웬만하면 쓰지 말것, 타입스크립트쓰는 이유가 없어짐(이럴거면 자바스크립트를 쓰자)
• 6. arrow fuction
  • 표현식

    const greet = (name) => {
    console.log(`Hello, ${name}!`);
    };
    
    greet("John"); // 출력: Hello, John!
    

• 7. default parameters
  • 표현식

    const randomNumber = (min: number = 0, max: number = 10): number => {
    return Math.round(Math.random() * (max - min)) + min;
    };
    

• 8. rest parameters
  • 기본 매개변수, 나머지 기본 변수
• 9. iterable-iterator
• 10. generator함수

0. ECMAScript

예제

• 11. promise
  • 등장 배경 : callback지옥 해소하기 위해
  • 표현식

    delayPromise()
    .then(async()=> {
    console.log('1s')
    await delayPromise()
    })
    

  • async await : 비동기적 함수
• 12. 모듈
• 13. class, ES모듈
  • ES모듈(Node.js)
    • package.json파일에서 type:module 설정

기타 (typescript)

• git ignore추가 npx add-gitignore node osx windows visualstudiocode
• console창에서 ctrl+shift+p 누르면 창 켜짐
• pnpm watch 하면 변하는 것 볼 수 있음
• pnpm ts-node src/파일명하면 파일 실행됨
• 백틱사용하면 formatting가능

기타 (ECMAscript)

• node scripts/13-class.js 파일 실행

---

1. 함수형 프로그래밍

예제

• 실행

  • npx nodemon 파일명.js
  • nodemon : 소스코드 변경을 감지하고 서버를 자동으로 다시 시작
  • npx : npm패키지를 실행할 수 있는 도구로, 패키지가 로컬에 설치되어 있지 않더라도 임시로 실행할 수 있게 해줌
• 1. 명령형 프로그래밍
  • const a = [...데이터] : 데이터 복제
• 2. 선언형 프로그래밍
  • 비교
    • 명령형 프로그래밍

      for (let i = 0, l = receivedValue.length; i < l; ++i) {
          const receivedItem = receivedValue[i];
          receivedItem.key = `programming-${i+1}`;
      }
      

    • 선언형 프로그래밍

      let receivedValue = originalValue.map((item, index) =>{
          item.key = `Programming-${index + 1}`
          return item;
      })
      

• 5. 순수형 프로그래밍
  • 순수형
    • 1. 예측가능해야함
    • 2. input과 output이 동일
    • side effect (부수효과)가 없어야 함
  • 리액트 component가 정상적으로 동작하기 위해선 반드시 순수해야함

---

2. 점진적인 React 라이브러리

3. vite 프론트엔드 개발도구

• pnpm add -D vite : 설치

• vite.config.js

• pnpm dev : 구동

• pnpm add react react-dom : react-dom설치

• pnpm add -D @vitejs/plugin-react : 플러그 설치

• pnpm create @eslint/config

• pnpm add -D eslint-plugin-jsx-a11y

• pnpm add -D eslint-plugin-react-hook

• 정적 에셋 vs 동적 에셋

  • 정적 에셋은 public폴더내에 파일 존재, 변화가 없다면 정적에셋을 사용
  • 동적 에셋은 서버에서 실시간으로 데이터를 가져옴, 수시로 파일이 바뀐다면 동적 에셋을 사용하는 것이 나음
  • 상황에 따라 다르게 적용할 수 있어야 함

• img태그 사용시 반드시 자기가 닫아야함