저거 onclick 을 onClick 으로 바꿔야 하지 않나요?? 에러 한 번 봐보십쇼

버튼은 뜨는데 눌렀을 때 동작하지 않아요.

오류 메시지 보면 해당 오류 코드와 함께 참고하라는 링크가 있는데 거기서 해결 방법을 찾아보면 좋지 않을까요?

netlify를 배포를 했는데 문제 생겼습니다

우연히 지나가는 사람입니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://react.dev/reference/react/useEffect#connecting-to-an-external-system">https://react.dev/reference/react/useEffect#connecting-to-an-external-system</a>위는 리액트 공식 문서인데, useEffect 부분에서 이 소제목(=> <a target="_blank" rel="noopener noreferrer nofollow" class="text-link dark:text-link-dark font-bold block hover:text-link dark:hover:text-link-dark leading-normal py-2" href="https://react.dev/reference/react/useEffect#connecting-to-an-external-system">Connecting to an external system</a>)을 찾아보세요. 개발 환경에서는 코드를 두 번 실행해서 버그를 찾는 데 도움이 되도록 한다고 나와 있네요. 백엔드 코드와 프론트엔드 코드 자체는 문제가 없는데도 불구하고 두 번씩 뜨는건 이 이유가 가장 큰 것 같아요. 아마 index.jsx 혹은 tsx 인가? 거기에 App 컴포넌트를 감싼 stric 컴포넌트인가 그거를 제거하면 안 뜰겁니다(참고로 제거 안 하는 걸 권장하고 있고, 제거 안 하더라도 개발자 입장에서는 체감상 개발함에 있어서 차이가 없는게 맞다라고 합니다. 이 또한 공식문서에 나와있는데, 영어를 못해서 의역이 좀 들어갔습니다).&nbsp;

왜 useEffect의 코드가 두번찍히는지 의문입니다.

진짜 제 컴터가 문제였는줄 알았는데, 다른 스펙 좋은 컴터로도 해도 같은 오류 빈번하게 뜨는거 보고, 아. 이거 next.js 자체적인 문제구나 라는 걸 느낌. 12버전 당시에는 이렇게 못 느꼈는데, 13버전 이후로 엄청 자주 뜨네요. 제가 보기엔 next 내부에서도 이런 에러 왜 뜨는지 원인 파악 못한거 같음.

errno -4094 의 unknown error 가 종종 뜹니다

강사님이 더 자세하게 답변 주시겠지만, 그냥 넌지시 언급하고 가면,&nbsp;<code>let bar</code>를 반복문 안에서 선언하는 대신에, 바깥에 선언한 이유는 변수의 스코프와 생존 기간 때문입니다. 반복문 안에서 변수를 선언하면 매 반복마다 변수가 재선언되고 초기화되기 때문에, 반복문이 끝날 때까지 변수에 마지막 반복에서의 값만 남게 됩니다. 하지만 반복문 외부에서 변수를 선언하면, 반복문 내에서 생성한 모든 <code>bar</code> 엘리먼트들을 배열에 저장하고 나중에 사용할 수 있습니다.만약 반복문 안에서 <code>let bar</code>를 선언한다면,<pre class="hljs"><code>const bars = [];
for (let i = 0; i < 30; i++) {
 let bar = document.createElement('div');
 bar.classList.add('bar');
 barContainer.appendChild(bar);
 bars.push(bar);
}
</code></pre>각 반복에서 <code>bar</code> 변수가 새로 선언되므로, 반복이 끝날 때마다 이전 반복에서 만들어진 <code>bar</code> 변수는 사라지게 됩니다. 그래서 <code>bars</code> 배열에는 모든 반복에서의 <code>bar</code> 엘리먼트가 저장되지 않고, 마지막 반복에서 만들어진 <code>bar</code> 엘리먼트 하나만 저장될 것입니다.하지만 반복문 외부에서 <code>let bar</code>를 선언하면,<pre class="hljs"><code>const bars = [];
let bar;
for (let i = 0; i < 30; i++) {
 bar = document.createElement('div');
 bar.classList.add('bar');
 barContainer.appendChild(bar);
 bars.push(bar);
}
</code></pre>한 번만 선언되기 때문에, 반복문 내에서 생성한 모든 <code>bar</code> 엘리먼트들이 <code>bars</code> 배열에 추가될 수 있습니다. 따라서 모든 반복에서 만들어진 <code>bar</code> 엘리먼트가 배열에 저장되어 나중에 사용할 수 있습니다.

section04 - 각각의 객체에 개별 애니메이션 적용하기

엇 이거 저도 답변 남겨도 되나요? 님 크롬 브라우저의 라이트 하우스 에서 검사 돌려보세요. 대량의 이미지가 로드가 되는데, 그 중 불필요하게 사이즈가 커서 용량을 차지하는 것하고, 이미지 로드가 실패해서 괜히 홈페이지 렌더링에 불필요한 시간 소요가 발생해서 버벅임이 심한 것 같아여. 첫 로드 시에는 파일 다운로드로 시간이 잡아 먹는 것 땜에 렉이 심하고 두 번째 부터도 일부 렌더링에 버벅임이 지속 발생하는데 이미지 로드가 안 되는 부분이 좀 큰 것 같아여. 그 외 버벅임은 용량이 너무 커요. 최적화가 필요할 것 같아여, 글고 몇 몇 이미지 파일(?.)이 불필요하게 사이즈가(사진크기) 너무 커요. 즉 화면에 굳이 그렇게 크게할 필요가 없는 이미지 파일이 너무 크게 설정되어 있어서 괜히 렌더링에 방해가 되고 있어요. 이 부분도 고려해보셔야 할 것 같아여.

마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?

순수(바닐라) 자바스크립트에서 외부 api key를 은닉할 수 없을까요?

지나가는 사람인데, 정확한 답변 받으시려면, 어떻게 파일을 셋팅했는지 이미지하고 상세한 설명이 필요할 듯. 만일 1분 코딩님이 보시더라도 이 상태로는 정확한 답변 못 받으실 것 같아요.

stu

Posts