TIL day3 🚩

오늘의 한줄평 : react는 정말 효율적이지만 동시에 어려운 친구로구나.

일단 오늘은 가볍게 react의 PropTypes에 대해서 배웠는데 어휴.. 정말 어렵다 어려워!
PropTypes은 css나 함수를 모듈화를 시켜서 간편하게 사용하게 해준다는 개념인 것 같은데
솔직히 내가 개념이 잘 안잡히면 시간쓰면서 다시 강의 듣지말고 다름 사람들이 남긴 글을 보면서 개념정리하는게 짱이다.

일단 오늘 한 작업들을 살펴보자!

이런식으로 여러가지 모듈을 만들어서

import Button from "./Button";
import styles from "./App.module.css";

function App() { // 함수컴포넌트
  return (
      <div>
        <h1 className={styles.title}>Welcome back!</h1>
        <Button text={"continue"}/>
        <Button text={"hola"}/>
      </div>
  );
}

export default App;

이런식으로 import해주는 것이다!
이렇게 import를 하면 단순 css였던 아이들이 객체가 되어서 어디서든 불러서 사용할 수 있는 장점이 있다!

이렇게 사용하면 사용하는 클래스의 이름을 가지고와서 css를 작성하는게 아니기때문에 css를 사용하는게 훨씬 편안하다!

그래서 PropTypes는 어떤 친구일까..?
찾아보니 React에서 컴포넌트의 속성(prop) 유효성 검사를 위한 도구 라고 하네요...
아무튼 그래도 장단점도 궁금하니까 찾아봅니다!

장점 :

1. 타입 체크를 통한 버그 최소화: 컴포넌트에 전달되는 props의 유형과 값을 확인하여 예상치 못한 오류를 줄입니다.
2. 코드 문서화 지원: PropTypes를 사용하면 컴포넌트가 어떤 prop을 받아야 하는지 명확히 확인할 수 있으므로 컴포넌트의 이해와 유지보수에 도움이 됩니다.
3. 작성된 규칙에 맞지 않는 값을 포함한 객체를 전달할 경우 경고 메시지가 생성되므로 오류 식별과 수정이 수월합니다.
4. 실행 시 prop 검사로 인해 타입스크립트 등의 정적 타입사가 없어도 소스 코드에 문제가 있다면 발견하는데 도움이 됩니다.

단점 :

1. 추가 라이브러리 필요: PropTypes는 React v15.5 이후 별도의 패키지로 제공되므로 프로젝트에 추가로 설치해야 합니다.
2. 런타임 시 추가 오버헤드: 애플리케이션 실행 시 유효성 검사를 수행하므로 추가적인 메모리와 CPU 오버헤드가 발생합니다(개발 모드에서만).
3. 성능 최적화 필요: 빌드 시 PropTypes를 제거하여 불필요 코드를 줄이고 실행 성능을 최적화해야 합니다.
4. 정적 타입 검사와 겹침: 정적 타입 검사 도구(예: TypeScript, Flow)를 사용면 PropTypes는 덜 필요하게 됩니다.

이러한 장단점을 가지고 있다고하는데요! 빌드 시 제거해야한다는 이유가 정말 궁금해서 저는 꼭 제 손으로 테스트 해보겠음다..
아무튼간에 이렇게 수업내용 정리는 마치겠고...

별도로.. 정말 개발에서 제일 어려운 개발환경 셋팅..

분명 어제까지 잘되던 react가

> react-for-beginners@0.1.0 start
> react-scripts start

'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

이러면서 정상적으로 작동되지 않는게 아니겠어요..

검색해보니 react-script가 정상 설치되지 않았다는...
분명 어젠 했는데... 뭐지..
하면서 일단..
npm install react-scripts 실행합니다.

잘 설치되다가..

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated prop-type@0.0.1: this package is no longer maintained and propably broken
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1486 packages, and audited 1487 packages in 35s

234 packages are looking for funding
run npm fund for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

이런 오류가...

하 나 우냐,,,

아무튼 또 열심히 찾아봅니다..

받은 경고 메시지는 특정 패키지들이 더 이상 지원되지 않거나 보안 취약점이 발견되었다는 것을 알리는 것입니다. 이러한 경고 메시지를 해결하기 위해 다음 두 가지 단계를 진행할 수 있습니다.

1.보안 취약점이 있는 패키지들을 업데이트하십시오. 터미널에서 아래 명령를 실행해 보세요. 이 명령은 패키지 버전 업데이트와 함께 일부 패키지의 환경 설정 방식 변경이 있을 수 있으며, 이 경우 수동으로 변경해야 할 수도 있습니다.
npm audit fix
2.강제로 모든 패키지 업데이트하기 위해서 --force 옵션을 사용할 수 있지만, 이렇게 하면 비호환 문제가 발생할 수 있으니 주의하세요. 그래도 이 방법을 시도하고 싶다면 아래와 같이 입력하세요:
npm audit fix --force
필요한 경우 프로젝트에 따라 일부 패지 설정을 수동으로 변경해야 할 수도 있습니다.

위의 해결책들이 경고 메시지를 해결하는데 도움이 되길 바니다. 하지만, 이 경고 메시지들은 대부분 디버깅 시에 문제가 되지 않으므로 이대로 시작해도 실행에는 큰 지장이 없습니다.

전 제가 읽고싶은 부분만 읽기로 했어요,, 일단 무시하고 확인해보니 잘 작동했다..

굿.