FE PARADISE

호이스팅인터프리터가 코드 실행 전에 함수, 변수, 클래스, import 선언문이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 메커니즘을 뜻합니다. 실제로 선언문의 위치를 이동시키는 것이 아니라 컴파일 단계에서 선언을 먼저 등록하기 때문에 발생하는 현상입니다. 변수 호이스팅let, const로 선언된 변수는 호이스팅은 되나 ※일시적 사각지대 TDZ에 있으므로 선언 이전에 접근할 수 없습니다.console.log(num); // undefinedvar num = 7;그와 달리 var로 선언된 변수는 초기화 없이 undefined를 값으로 호이스팅 됩니다. console.log(num); // ReferenceError: Cannot access 'num' before initializationlet nu..

성능 개선하기 성능을 개선하기 위해 내가 한 것들은 다음과 같다. 성능 개선 관련 내용들은 파트별로 포스트를 업로드할 예정이다 사용하지 않는 코드들 정리하기 next/dynamic 적용하기 next/image Image 태그들 중 페이지 렌더링 시 처음 보여져야할 이미지에 priority 설정하기 svg spirtes 적용하기 등등 아래 포스트들을 통해 더 자세하게 확인할 수 있다. Next.js 사이트 성능 관리 - next/dynamic 적용하기 Next.js 사이트 성능 관리 - next/dynamic 사용하기 사이트 내 js, css 등의 파일 로드 시간을 단축하기 위해 next/dynamic을 적용하고자 한다. 기존에 모듈, 컴포넌트들을 import하는 방식은 다음과 같았다. 기존 import ..

@next/bundle-analyzer를 이용하여 번들 사이즈를 확인해보자!설치npm i @next/bundle-analyzer --save-dev 우선 @next/bundle-anlyzer를 설치해 보자. 개발할 때만 필요한 패키지이므로 뒤에 --save-dev를 붙여서 설치해 주자. next.config.js 설정하기const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: process.env.ANALYZE === "true",});...const nextConfig = { reactStrictMode: true,......};module.exports = withBundleAnalyzer(nextConfig);위와 같이 nex..

기존에 내가 svg를 프로젝트 내에서 관리하던 방식은 다음과 같다.  우선 프로젝트 내에서 나는 styled-components를 이용하여 스타일링을 적용하고 있었다.각각 페이지나 큰 규모의 컴포넌트에 해당하는 스타일링 파일을 생성하고 모두 프로젝트 루트 밑에 styles/components 폴더 내에 페이지 이름.js 라는 파일을 생성하여 관리했다.  styles/componets |_ home.js |_ search.js |_ user.js 각각 스타일링 파일의 하단에 svg를 다음과 같이 정의해두었다.svg별로 이름을 지어주고 export하여 필요한 컴포넌트에서 import하는 방식을 사용 중이었다.  그중 path 길이가 엄청 긴 svg들도 있었다. 스타일링 파일을 불러올 때..