npm install 하면 리엑트 프로젝트의 루트 디렉토리에서 package.json 파일에 명시된 의존성과 dev의존성을 기준으로 npm install 명령어가 해당 의존성들을 설치합니다.
dependencies vs devDependencies
dependencies는 에플리케이션이 실제로 실행될때 반드시 필요한 패키지들을 포함하는 의존성이며
devDependencies는 개발과정에 필요한 패키지를 포함하고 있습니다.
npm run build 는 프로덕션 환경에 맞게 최적화 하여 코드 압축 , 번들링 , tree shaking 등 여러 최적화 작업을 수행합니다.
프로덕션 환경
최종 사용자에게 실제로 서비스 되는 환경을 말합니다.
번들링
번들링이란 여러개의 javaScript 파일이나 모듈, css 파일 등을 하나의 파일 또는 몇몇 파일로 합치는 과정을 말합니다.
tree shaking
트리 쉐이킹은 번들링 과정에서 필요없는 코드들을 제거하여 최적화하는 과정입니다.
자 배포가 안되요 일단 저희프로젝트 배포가 되도록 해야겠죠 ??
그러려면 빌드를해야하는데 빌드가안되요 후... 원인을 분석하고 빌드하는쪽으로
일단 punycode모듈이 더이상 안쓰인다네요 그렇지만 그래도 컴파일이 성공되는거보니 이 문제는 나중에 해결하면 될것 같아요
여러 파일에서 useEffect 훅이 사용하는 변수(예: api, fetchPosts, router)가 의존생 배열에 포함되지 않았다고 하네요
-
훅 : 컴포넌트의 상태나 라이프사이클을 관리하기 위한 react에서 지원하는 함수입니다.
-
useEffect : 렌더링 이후에 부가적인 효과를 실행하도록 해주는 훅 입니다. 예를들어 데이터 불러오기, 구독(웹소켓등) 설정, 타이머 설정 등이이있습니다.
-
의존성 배열 : 훅에서 두번째 인자로 전달되는 배열로 , 해당 배열에 포함된 값들이 변경될 때마다 useEffect의 콜백 함수가 다시 실행됩니다.
그런데 이거또한 경고이기때문에 나중에 해결해도 될 것 같아요
useState, usetEffect훅에 관한 에러 메시지입니다.
모든 React Hook은 반드시 React 함수 컴포넌트 또는 커스텀 훅 내부안에서 호출되어야 한다고 하네요 , 최상위나 일반 함수 내부에서 호출되면 문제가 되나봅니다.
요약하자면 이문제를 해결하려면 어떤 컴포넌트에서 훅이 사용될때 탑레벨에서 사용하지않고 해당 컴포넌트자체에서 훅이 사용되도록
코드내에서 useEffect가 사용된 타입스크립트 파일들인데 벌써부터 눈에서 땀이납니다.
이런형태가 자주 보입니다.
import React, { useState, useEffect } from 'react';
import React부분은 JSX 코드가 컴파일될 때 React.createElement() 호출로 변환 하기위해 사용된다고 합니다.
{ useState, useEffect } 이거는 사용될 훅입니다. 유심히 봐야하는 부분 이게
이런식으로 컴포넌트 내부에서 호출되는것만 인정입니다.
이부분은 useState를 useEffect에서 사용하니까 문제가되지 않을까 했는데
useEffect에서 바로가져다가 사용하는 것이 아니라 setUsers에서 받아서 업데이트한다음에 users를 수정하는 것이므로 react 사용법에 어긋나지 않는다고 하네요
공부하는겸 전부 살펴보려고했는데 미련한 짓 같아요
이렇게 찾다보면 답이없을거같아서 디버깅계속하면서 문제되는 파일만 수정할께요
얘네 원래 ItemDetail컴포넌트 밖에서 선언되었으나 안 으로 옮겼음 이런느낌으로 수정하면 될 것 같아요
아까전에 살펴봤던 useEffect훅이 사용하는 변수 누락때문에 발생하는 의존성 문제를 해결하고 가야겠네요
여기서 useEffect가 api 를참조하지만 의존성 배열에 포함되어있지않아서 api를 또 한번 참조할때 해당 api가 변경될수도있는걸 고려하기때문에 에러가 발생한다는말인 것 같습니다.
isSearching다음에 -> fetchPosts 를부르니까 같은 의존성 배열에 넣어야함
오늘은 늦었으니 여까이..
뭐가될지 모름