어떻게 적어야 가독성이 좋아질까 고민하며 새로운 방식으로 써보기위해 말투와 양식을 바꾸어보고있습니다.읽기 불편하시거나 피드백사항이 있으시다면 댓글이나 메일로 주시면 정말 감사합니다!갑자기 react-query와 Hooks를 쓰라고요..?일단 훅부터 해볼게요.. Hooks가 뭔데?함수형 컴포넌트에서 React 기능(state, lifecycle 등)을 쓰게 해주는 함수들이야.원래는 클래스 컴포넌트(class App extends React.Component)에서만 상태 관리하고 생명주기 쓸 수 있었는데,함수형 컴포넌트에서도 편하게 하라고 나온 게 Hooks야. 가장 중요한 기본 Hooks 3개이름설명비고useState값을 저장하고 바꾼다this.state 알지?useEffect값이 바뀌거나 처음 렌더링될 ..

객체 구조 분해 할당으로 파라미터 다루기 (JavaScript Destructuring Assignment) ({a, b, ...others})구조 분해 할당이란?JavaScript에서 함수를 호출할 때 객체를 파라미터로 넘기면, 특정 값만 따로 변수로 받고 나머지는 그대로 유지하는 방법이 있는데이런 기법을 객체 구조 분해 할당(Object Destructuring Assignment) 이라고 합니다. 함수를 호출할 때 { key: value } 형태의 객체를 넘겨줄 경우, 함수 내부에서 필요한 값만 골라서 사용할 수 있도록 해주는 문법인데이렇게 하면 불필요한 코드 작성을 줄이고 가독성을 높일 수 있어 사용합니다. 기본 사용법(1) - 각 객체 모두 등록다음처럼 함수를 정의할 때, 객체에서 특정 키만 추..

[React] Invaild host Header 오류 발생React 로컬 실행 Errornpm run start Invaild host Header로컬 실행 시 기본 세팅이 로컬에서의 접속은 허용하지만 외부에서의 접속을 허용하지 않아서 발생하였습니다.해결방법아래 경로에 진입하여 disableFirewall 에 따른 분기값을 수정해줍니다. node_modules/react-scripts/config/webpackDevServer.config.js//before (주석부분은 삭제하였습니다)const disableFirewall = !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true'; return { allowedHosts: disableFir..

React Sitemap 생성 및 Google Search Console 제출sitemap 생성Google Search Console 제출Sitemap 생성 및 프로젝트 적용https://www.xml-sitemaps.com/대표적인 sitemap 생성 사이트로 위 사이트에 진입하여 본인의 URL을 입력하면 자동으로 sitemap 생성을 지원해줍니다. START아래의 More Options를 누르면 몇몇 옵션들을 추가로 선택하여 적용이 가능합니다.Include "Page Last modification" attribute : 변경되지 않은 페이지를 크롤러가 재크롤링하지않음.Automatically calculate "Page Priority" attribute : Page Depth에 따라 우선순위 설..

보호되어 있는 글입니다.

HEROKU | at=error code=H10 desc="App crashed" method=GET path="/" hostHeroku 빌드팩 에러 대응환경 : React TypeScript1. 헤로쿠 빌드팩 추가 -heroku buildpacks:set mars/create-react-app명령어를 통해 heroku 빌드팩 변경 하면 아래와 같이 변경된다.  BeforeAfter이후 git push heroku master 를 이용하여 배포하면git push heroku master Stack heroku-22 is not supported!아 ㅋㅋ.. 빌드팩이 헤로쿠22를 지원안한다네요 2. 빌드팩 22 버전 에러 해소22를 지원하는 빌드팩으로 변경을 하려다헤로쿠를 우선 20으로 변경하고 사용해보려..