ASAC 웹풀스택 프롭스 , 콜백 , next.js 캐싱의 동작 , <Link> , 동기화하는 파일과 비동기
[ASAC 웹풀스택] 함수 기본
함수 기본
const getRectArea = function (width, height) {
return width * height;
};
console.log(getRectArea(3, 4));
// Expected output: 12
[ASAC 웹풀스택] 프롭스, 함수를 넘겨주는것 => 콜백
콜백
함수를 넘겨주는 것,
콜백은 부모 컴포넌트로부터 자식 컴포넌트로 함수를 전달하여 자식 컴포넌트에서 해당 함수를 실행하는 방법입니다.
1번재 인자값은 돔을 호출한다.
2번째 인자값은 리랜더를 뜻한다.
error.log를 활용하는 방법,
useEffect() => console.log 로 클릭이후의 값을 콘솔로 로그를 확인하여
리덕스 처럼 써보는 꿀팁!
[ASAC 웹풀스택] jsx 부모-자식
jsx 부모-자식
export default function Bio() {
return (
<div class="intro">
<h1>Welcome to my website!</h1>
</div>
<p class="summary">
You can find my thoughts here.
<br><br>
<b>And <i>pictures</b></i> of scientists!
</p>
);
}
[ASAC 웹풀스택] next.js 캐싱의 동작 그림
[ASAC 웹풀스택] next.js <Link>
https://nextjs.org/docs/pages/api-reference/components/link
Components: <Link> | Next.js
is a React component that extends the HTML element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js. Good to know: tag attributes such as className or target="_blank" can be added
nextjs.org
[ASAC 웹풀스택] 동기화하는 파일과 비동기 하는 파일 은 무엇이있는가?
동기로 빠르게 보여줄 수 있는 JS 파일:
비동기로 빠르게 보여줄 수 있는 JS 파일
작고 최적화된 자체 스크립트
CDN에서 제공하는 외부 스크립트
적절한 캐싱 정책이 적용된 스크립트
필요한 부분만 로드하는 동적 임포트가 적용된 스크립트
필요한 부분만 포함하는 트리 쉐이킹이 적용된 라이브러리
파일명
smallScript.js: 작고 최적화된 자체 스크립트
jquery.min.js: CDN에서 제공하는 외부 스크립트 (여기서 .min은 최소화(minified)된 것을 의미합니다)
cachedScript.js: 적절한 캐싱 정책이 적용된 스크립트
dynamicImportedModule.js: 필요한 부분만 로드하는 동적 임포트가 적용된 스크립트
lodash.esm.js: 필요한 부분만 포함하는 트리 쉐이킹이 적용된 라이브러리 (ESM은 ES Modules를 의미합니다)
비동기로 느리게 보여줄 수밖에 없는 JS 파일
큰 크기의 자체 스크립트
최적화되지 않은 외부 스크립트
CDN을 사용하지 않고 직접 호스팅하는 대형 라이브러리
캐싱 정책이 제대로 설정되지 않은 스크립트
전체를 로드해야만 사용할 수 있는 라이브러리
파일명
largeScript.js: 큰 크기의 자체 스크립트
nonOptimizedExternalScript.js: 최적화되지 않은 외부 스크립트
locallyHostedLibrary.js: CDN을 사용하지 않고 직접 호스팅하는 대형 라이브러리
noCachePolicyScript.js: 캐싱 정책이 제대로 설정되지 않은 스크립트
wholeLibrary.min.js: 전체를 로드해야만 사용할 수 있는 라이브러리
Next.js에서는 getServerSideProps와 getStaticProps 함수가 페이지 컴포넌트의 외부에 위치하기 때문에, 이 함수들 내부에서 사용되는 변수나 상태는 리렌더링 간에 유지되지 않습니다. 즉, 이 함수들은 각 요청 혹은 빌드 시에 새로운 환경에서 실행됩니다.
댓글